6313e5cf6c9101509d7b4a13913432738446849f
[moodle.git] / course / yui / build / moodle-course-categoryexpander / moodle-course-categoryexpander-debug.js
1 YUI.add('moodle-course-categoryexpander', function (Y, NAME) {
3 /**
4  * Adds toggling of subcategory with automatic loading using AJAX.
5  *
6  * This also includes application of an animation to improve user experience.
7  *
8  * @module moodle-course-categoryexpander
9  */
11 /**
12  * The course category expander.
13  *
14  * @constructor
15  * @class Y.Moodle.course.categoryexpander
16  */
18 var CSS = {
19         CONTENTNODE: 'content',
20         COLLAPSEALL: 'collapse-all',
21         DISABLED: 'disabled',
22         LOADED: 'loaded',
23         NOTLOADED: 'notloaded',
24         SECTIONCOLLAPSED: 'collapsed',
25         HASCHILDREN: 'with_children'
26     },
27     SELECTORS = {
28         LOADEDTREES: '.with_children.loaded',
29         CONTENTNODE: '.content',
30         CATEGORYLISTENLINK: '.category .info .name',
31         CATEGORYSPINNERLOCATION: '.name',
32         CATEGORYWITHCOLLAPSEDLOADEDCHILDREN: '.category.with_children.loaded.collapsed',
33         CATEGORYWITHMAXIMISEDLOADEDCHILDREN: '.category.with_children.loaded:not(.collapsed)',
34         COLLAPSEEXPAND: '.collapseexpand',
35         COURSEBOX: '.coursebox',
36         COURSEBOXLISTENLINK: '.coursebox .moreinfo',
37         COURSEBOXSPINNERLOCATION: '.name a',
38         COURSECATEGORYTREE: '.course_category_tree',
39         PARENTWITHCHILDREN: '.category'
40     },
41     NS = Y.namespace('Moodle.course.categoryexpander'),
42     TYPE_CATEGORY = 0,
43     TYPE_COURSE = 1,
44     URL = M.cfg.wwwroot + '/course/category.ajax.php';
46 /**
47  * Set up the category expander.
48  *
49  * No arguments are required.
50  *
51  * @method init
52  */
53 NS.init = function() {
54     var doc = Y.one(Y.config.doc);
55     doc.delegate('click', this.toggle_category_expansion, SELECTORS.CATEGORYLISTENLINK, this);
56     doc.delegate('click', this.toggle_coursebox_expansion, SELECTORS.COURSEBOXLISTENLINK, this);
57     doc.delegate('click', this.collapse_expand_all, SELECTORS.COLLAPSEEXPAND, this);
59     // Only set up they keybaord listeners when tab is first pressed - it
60     // may never happen and modifying the DOM on a large number of nodes
61     // can be very expensive.
62     doc.once('key', this.setup_keyboard_listeners, 'tab', this);
63 };
65 /**
66  * Set up keyboard expansion for course content.
67  *
68  * This includes setting up the delegation but also adding the nodes to the
69  * tabflow.
70  *
71  * @method setup_keyboard_listeners
72  */
73 NS.setup_keyboard_listeners = function() {
74     var doc = Y.one(Y.config.doc);
76     Y.log('Setting the tabindex for all expandable course nodes', 'info', 'moodle-course-categoryexpander');
77     doc.all(SELECTORS.CATEGORYLISTENLINK, SELECTORS.COURSEBOXLISTENLINK, SELECTORS.COLLAPSEEXPAND).setAttribute('tabindex', '0');
80     Y.one(Y.config.doc).delegate('key', this.toggle_category_expansion, 'enter', SELECTORS.CATEGORYLISTENLINK, this);
81     Y.one(Y.config.doc).delegate('key', this.toggle_coursebox_expansion, 'enter', SELECTORS.COURSEBOXLISTENLINK, this);
82     Y.one(Y.config.doc).delegate('key', this.collapse_expand_all, 'enter', SELECTORS.COLLAPSEEXPAND, this);
83 };
85 /**
86  * Toggle the animation of the clicked category node.
87  *
88  * @method toggle_category_expansion
89  * @private
90  * @param {EventFacade} e
91  */
92 NS.toggle_category_expansion = function(e) {
93     // Load the actual dependencies now that we've been called.
94     Y.use('io-base', 'json-parse', 'moodle-core-notification', 'anim', function() {
95         // Overload the toggle_category_expansion with the _toggle_category_expansion function to ensure that
96         // this function isn't called in the future, and call it for the first time.
97         NS.toggle_category_expansion = NS._toggle_category_expansion;
98         NS.toggle_category_expansion(e);
99     });
100 };
102 /**
103  * Toggle the animation of the clicked coursebox node.
104  *
105  * @method toggle_coursebox_expansion
106  * @private
107  * @param {EventFacade} e
108  */
109 NS.toggle_coursebox_expansion = function(e) {
110     // Load the actual dependencies now that we've been called.
111     Y.use('io-base', 'json-parse', 'moodle-core-notification', 'anim', function() {
112         // Overload the toggle_coursebox_expansion with the _toggle_coursebox_expansion function to ensure that
113         // this function isn't called in the future, and call it for the first time.
114         NS.toggle_coursebox_expansion = NS._toggle_coursebox_expansion;
115         NS.toggle_coursebox_expansion(e);
116     });
118     e.preventDefault();
119 };
121 NS._toggle_coursebox_expansion = function(e) {
122     var courseboxnode;
124     // Grab the parent category container - this is where the new content will be added.
125     courseboxnode = e.target.ancestor(SELECTORS.COURSEBOX, true);
126     e.preventDefault();
128     if (courseboxnode.hasClass(CSS.LOADED)) {
129         // We've already loaded this content so we just need to toggle the view of it.
130         this.run_expansion(courseboxnode);
131         return;
132     }
134     this._toggle_generic_expansion({
135         parentnode: courseboxnode,
136         childnode: courseboxnode.one(SELECTORS.CONTENTNODE),
137         spinnerhandle: SELECTORS.COURSEBOXSPINNERLOCATION,
138         data: {
139             courseid: courseboxnode.getData('courseid'),
140             type: TYPE_COURSE
141         }
142     });
143 };
145 NS._toggle_category_expansion = function(e) {
146     var categorynode,
147         categoryid,
148         depth;
150     if (e.target.test('a') || e.target.test('img')) {
151         // Return early if either an anchor or an image were clicked.
152         return;
153     }
155     // Grab the parent category container - this is where the new content will be added.
156     categorynode = e.target.ancestor(SELECTORS.PARENTWITHCHILDREN, true);
158     if (!categorynode.hasClass(CSS.HASCHILDREN)) {
159         // Nothing to do here - this category has no children.
160         return;
161     }
163     if (categorynode.hasClass(CSS.LOADED)) {
164         // We've already loaded this content so we just need to toggle the view of it.
165         this.run_expansion(categorynode);
166         return;
167     }
169     // We use Data attributes to store the category.
170     categoryid = categorynode.getData('categoryid');
171     depth = categorynode.getData('depth');
172     if (typeof categoryid === "undefined" || typeof depth === "undefined") {
173         return;
174     }
176     this._toggle_generic_expansion({
177         parentnode: categorynode,
178         childnode: categorynode.one(SELECTORS.CONTENTNODE),
179         spinnerhandle: SELECTORS.CATEGORYSPINNERLOCATION,
180         data: {
181             categoryid: categoryid,
182             depth: depth,
183             showcourses: categorynode.getData('showcourses'),
184             type: TYPE_CATEGORY
185         }
186     });
187 };
189 /**
190  * Wrapper function to handle toggling of generic types.
191  *
192  * @method _toggle_generic_expansion
193  * @private
194  * @param {Object} config
195  */
196 NS._toggle_generic_expansion = function(config) {
197     if (config.spinnerhandle) {
198       // Add a spinner to give some feedback to the user.
199       spinner = M.util.add_spinner(Y, config.parentnode.one(config.spinnerhandle)).show();
200     }
202     // Fetch the data.
203     Y.io(URL, {
204         method: 'POST',
205         context: this,
206         on: {
207             complete: this.process_results
208         },
209         data: config.data,
210         "arguments": {
211             parentnode: config.parentnode,
212             childnode: config.childnode,
213             spinner: spinner
214         }
215     });
216 };
218 /**
219  * Apply the animation on the supplied node.
220  *
221  * @method run_expansion
222  * @private
223  * @param {Node} categorynode The node to apply the animation to
224  */
225 NS.run_expansion = function(categorynode) {
226     var categorychildren = categorynode.one(SELECTORS.CONTENTNODE),
227         self = this,
228         ancestor = categorynode.ancestor(SELECTORS.COURSECATEGORYTREE);
230     // Add our animation to the categorychildren.
231     this.add_animation(categorychildren);
234     // If we already have the class, remove it before showing otherwise we perform the
235     // animation whilst the node is hidden.
236     if (categorynode.hasClass(CSS.SECTIONCOLLAPSED)) {
237         // To avoid a jump effect, we need to set the height of the children to 0 here before removing the SECTIONCOLLAPSED class.
238         categorychildren.setStyle('height', '0');
239         categorynode.removeClass(CSS.SECTIONCOLLAPSED);
240         categorynode.setAttribute('aria-expanded', 'true');
241         categorychildren.fx.set('reverse', false);
242     } else {
243         categorychildren.fx.set('reverse', true);
244         categorychildren.fx.once('end', function(e, categorynode) {
245             categorynode.addClass(CSS.SECTIONCOLLAPSED);
246             categorynode.setAttribute('aria-expanded', 'false');
247         }, this, categorynode);
248     }
250     categorychildren.fx.once('end', function(e, categorychildren) {
251         // Remove the styles that the animation has set.
252         categorychildren.setStyles({
253             height: '',
254             opacity: ''
255         });
257         // To avoid memory gobbling, remove the animation. It will be added back if called again.
258         this.destroy();
259         self.update_collapsible_actions(ancestor);
260     }, categorychildren.fx, categorychildren);
262     // Now that everything has been set up, run the animation.
263     categorychildren.fx.run();
264 };
266 NS.collapse_expand_all = function(e) {
267     // The collapse/expand button has no actual target but we need to prevent it's default
268     // action to ensure we don't make the page reload/jump.
269     e.preventDefault();
271     if (e.currentTarget.hasClass(CSS.DISABLED)) {
272         // The collapse/expand is currently disabled.
273         return;
274     }
276     var ancestor = e.currentTarget.ancestor(SELECTORS.COURSECATEGORYTREE);
277     if (!ancestor) {
278         return;
279     }
281     var collapseall = ancestor.one(SELECTORS.COLLAPSEEXPAND);
282     if (collapseall.hasClass(CSS.COLLAPSEALL)) {
283         this.collapse_all(ancestor);
284     } else {
285         this.expand_all(ancestor);
286     }
287     this.update_collapsible_actions(ancestor);
288 };
290 NS.expand_all = function(ancestor) {
291     var finalexpansions = [];
293     ancestor.all(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)
294         .each(function(c) {
295         if (c.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)) {
296             // Expand the hidden children first without animation.
297             c.removeClass(CSS.SECTIONCOLLAPSED);
298             c.all(SELECTORS.LOADEDTREES).removeClass(CSS.SECTIONCOLLAPSED);
299         } else {
300             finalexpansions.push(c);
301         }
302     }, this);
304     // Run the final expansion with animation on the visible items.
305     Y.all(finalexpansions).each(function(c) {
306         this.run_expansion(c);
307     }, this);
309 };
311 NS.collapse_all = function(ancestor) {
312     var finalcollapses = [];
314     ancestor.all(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN)
315         .each(function(c) {
316         if (c.ancestor(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN)) {
317             finalcollapses.push(c);
318         } else {
319             // Collapse the visible items first
320             this.run_expansion(c);
321         }
322     }, this);
324     // Run the final collapses now that the these are hidden hidden.
325     Y.all(finalcollapses).each(function(c) {
326         c.addClass(CSS.SECTIONCOLLAPSED);
327         c.all(SELECTORS.LOADEDTREES).addClass(CSS.SECTIONCOLLAPSED);
328     }, this);
329 };
331 NS.update_collapsible_actions = function(ancestor) {
332     var foundmaximisedchildren = false,
333         // Grab the anchor for the collapseexpand all link.
334         togglelink = ancestor.one(SELECTORS.COLLAPSEEXPAND);
336     if (!togglelink) {
337         // We should always have a togglelink but ensure.
338         return;
339     }
341     // Search for any visibly expanded children.
342     ancestor.all(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN).each(function(n) {
343         // If we can find any collapsed ancestors, skip.
344         if (n.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)) {
345             return false;
346         }
347         foundmaximisedchildren = true;
348         return true;
349     });
351     if (foundmaximisedchildren) {
352         // At least one maximised child found. Show the collapseall.
353         togglelink.setHTML(M.util.get_string('collapseall', 'moodle'))
354             .addClass(CSS.COLLAPSEALL)
355             .removeClass(CSS.DISABLED);
356     } else {
357         // No maximised children found but there are collapsed children. Show the expandall.
358         togglelink.setHTML(M.util.get_string('expandall', 'moodle'))
359             .removeClass(CSS.COLLAPSEALL)
360             .removeClass(CSS.DISABLED);
361     }
362 };
364 /**
365  * Process the data returned by Y.io.
366  * This includes appending it to the relevant part of the DOM, and applying our animations.
367  *
368  * @method process_results
369  * @private
370  * @param {String} tid The Transaction ID
371  * @param {Object} response The Reponse returned by Y.IO
372  * @param {Object} ioargs The additional arguments provided by Y.IO
373  */
374 NS.process_results = function(tid, response, args) {
375     var newnode,
376         data;
377     try {
378         data = Y.JSON.parse(response.responseText);
379         if (data.error) {
380             return new M.core.ajaxException(data);
381         }
382     } catch (e) {
383         return new M.core.exception(e);
384     }
386     // Insert the returned data into a new Node.
387     newnode = Y.Node.create(data);
389     // Append to the existing child location.
390     args.childnode.appendChild(newnode);
392     // Now that we have content, we can swap the classes on the toggled container.
393     args.parentnode
394         .addClass(CSS.LOADED)
395         .removeClass(CSS.NOTLOADED);
397     // Toggle the open/close status of the node now that it's content has been loaded.
398     this.run_expansion(args.parentnode);
400     // Remove the spinner now that we've started to show the content.
401     if (args.spinner) {
402         args.spinner.hide().destroy();
403     }
404 };
406 /**
407  * Add our animation to the Node.
408  *
409  * @method add_animation
410  * @private
411  * @param {Node} childnode
412  */
413 NS.add_animation = function(childnode) {
414     if (typeof childnode.fx !== "undefined") {
415         // The animation has already been plugged to this node.
416         return childnode;
417     }
419     childnode.plug(Y.Plugin.NodeFX, {
420         from: {
421             height: 0,
422             opacity: 0
423         },
424         to: {
425             // This sets a dynamic height in case the node content changes.
426             height: function(node) {
427                 // Get expanded height (offsetHeight may be zero).
428                 return node.get('scrollHeight');
429             },
430             opacity: 1
431         },
432         duration: 0.2
433     });
435     return childnode;
436 };
439 }, '@VERSION@', {"requires": ["node", "event-key"]});