Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
// This file is part of Moodle - http://moodle.org/
2
//
3
// Moodle is free software: you can redistribute it and/or modify
4
// it under the terms of the GNU General Public License as published by
5
// the Free Software Foundation, either version 3 of the License, or
6
// (at your option) any later version.
7
//
8
// Moodle is distributed in the hope that it will be useful,
9
// but WITHOUT ANY WARRANTY; without even the implied warranty of
10
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11
// GNU General Public License for more details.
12
//
13
// You should have received a copy of the GNU General Public License
14
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
15
 
16
/**
17
 * Completion Progress block progress bar behaviour.
18
 *
19
 * @module     block_completion_progress/progressbar
20
 * @copyright  2020 Jonathon Fowler <fowlerj@usq.edu.au>
21
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22
 */
23
define(['jquery', 'core/pubsub', 'core/utils'],
24
    function($, PubSub, Utils) {
25
        /**
26
         * Show progress event information for a cell.
27
         * @param {Event} event
28
         */
29
        function showInfo(event) {
30
            var cell = $(this);
31
            var container = cell.closest('.block_completion_progress .barContainer');
32
            var visibleinfo = container.siblings('.progressEventInfo:visible');
33
            var infotoshow = container.siblings('#' + cell.data('infoRef'));
34
 
35
            if (!visibleinfo.is(infotoshow)) {
36
                visibleinfo.hide();
37
                infotoshow.show();
38
            }
39
 
40
            event.preventDefault();
41
        }
42
 
43
        /**
44
         * Show all progress event information (for accessibility).
45
         * @param {Event} event
46
         */
47
        function showAllInfo(event) {
48
            var initialinfo = $(this).closest('.progressEventInfo');
49
 
50
            initialinfo.siblings('.progressEventInfo').show();
51
            initialinfo.hide();
52
 
53
            event.preventDefault();
54
        }
55
 
56
        /**
57
         * Navigate to a cell's activity location.
58
         */
59
        function viewActivity() {
60
            var cell = $(this);
61
            var container = cell.closest('.block_completion_progress .barContainer');
62
            var infotoshow = container.siblings('#' + cell.data('infoRef'));
63
            var infolink = infotoshow.find('a.action_link');
64
            if (infolink.prop('onclick') !== null) {
65
                infolink.click();
66
            } else {
67
                document.location = infolink.prop('href');
68
            }
69
        }
70
 
71
        /**
72
         * Scroll the bar corresponding to the arrow clicked.
73
         * @param {Event} event
74
         */
75
        function scrollContainer(event) {
76
            var barrow = $(this).closest('.block_completion_progress .barContainer').find('.barRow');
77
            var amount = event.data * barrow.prop('scrollWidth') * 0.15;
78
 
79
            barrow.prop('scrollLeft', barrow.prop('scrollLeft') + amount);
80
 
81
            event.preventDefault();
82
        }
83
 
84
        /**
85
         * Show or hide the scroll arrows based on the visible position.
86
         */
87
        function checkArrows() {
88
            var barrow = $(this);
89
            var barcontainer = barrow.closest('.block_completion_progress .barContainer');
90
            var leftarrow = barcontainer.find('.left-arrow-svg');
91
            var rightarrow = barcontainer.find('.right-arrow-svg');
92
            var scrolled = barrow.prop('scrollLeft');
93
            var scrollWidth = barrow.prop('scrollWidth') - barrow.prop('offsetWidth');
94
            var threshold = Math.floor(barrow.find('.progressBarCell:first-child').width() * 0.25);
95
 
96
            if (document.dir === 'rtl') {
97
                scrolled = -scrolled;
98
 
99
                if (scrolled > threshold) {
100
                    rightarrow.css('display', 'block');
101
                } else {
102
                    rightarrow.css('display', 'none');
103
                }
104
                if (scrollWidth > threshold && scrolled < scrollWidth - threshold) {
105
                    leftarrow.css('display', 'block');
106
                } else {
107
                    leftarrow.css('display', 'none');
108
                }
109
            } else {
110
                if (scrolled > threshold) {
111
                    leftarrow.css('display', 'block');
112
                } else {
113
                    leftarrow.css('display', 'none');
114
                }
115
                if (scrollWidth > threshold && scrolled < scrollWidth - threshold) {
116
                    rightarrow.css('display', 'block');
117
                } else {
118
                    rightarrow.css('display', 'none');
119
                }
120
            }
121
        }
122
 
123
        /**
124
         * Prepare scroll mode behaviour.
125
         * @param {jQuery} barcontainers there could be many nodes here in overview mode
126
         */
127
        function setupScroll(barcontainers) {
128
            var barrows = barcontainers.find('.barRow');
129
 
130
            /**
131
             * Check arrow visibility for each of the bar rows.
132
             */
133
            function checkEachBar() {
134
                barrows.each(checkArrows);
135
            }
136
 
137
            barrows.scroll(checkArrows);
138
            $(window).resize(checkEachBar);
139
            PubSub.subscribe('nav-drawer-toggle-end', checkEachBar); // Boost ≤3.11.
140
            $(document).on('theme_boost/drawers:shown theme_boost/drawers:hidden',
141
                Utils.debounce(checkEachBar, 250)); // Boost ≥4.0.
142
 
143
            // On page load, place the 'now' marker in the centre of the scrolled bar
144
            // and adjust which arrows should be visible.
145
            $(function() {
146
                var nowicons = barcontainers.find('.nowicon');
147
                nowicons.each(function() {
148
                    var nowicon = $(this);
149
                    var barrow = nowicon.closest('.block_completion_progress .barRow');
150
 
151
                    barrow.prop('scrollLeft', 0);
152
                    barrow.prop('scrollLeft', nowicon.offset().left - barrow.offset().left -
153
                        barrow.width() / 2);
154
                });
155
 
156
                barrows.each(checkArrows);
157
            });
158
 
159
            barcontainers.on('click', '.left-arrow-svg', -1, scrollContainer);
160
            barcontainers.on('click', '.right-arrow-svg', 1, scrollContainer);
161
        }
162
 
163
        /**
164
         * Set up event handlers for a particular progress bar instance.
165
         * @param {integer} instanceid the bar instance id
166
         */
167
        function initialiseBar(instanceid) {
168
            var barcontainers = $('.block_completion_progress ' +
169
                '.barContainer[data-instanceid="' + instanceid + '"]');
170
 
171
            // Show information elements on hover or tap.
172
            barcontainers.on('touchstart mouseover', '.progressBarCell', showInfo);
173
 
174
            // Navigate to the activity when its cell is clicked.
175
            barcontainers.on('click', '.progressBarCell[data-haslink=true]', viewActivity);
176
 
177
            // Show all information elements when the 'show all' link is clicked.
178
            barcontainers.siblings('.progressEventInfo').find('.progressShowAllInfo').click(showAllInfo);
179
 
180
            setupScroll(barcontainers);
181
        }
182
 
183
        return /** @alias module:block_completion_progress/progressbar */ {
184
            /**
185
             * Initialise progress bar instances.
186
             * @param {array} instanceids an array of progress bar instance ids
187
             */
188
            init: function(instanceids) {
189
                for (var i = instanceids.length - 1; i >= 0; i--) {
190
                    initialiseBar(instanceids[i]);
191
                }
192
            },
193
        };
194
    });