← Back to branch summary

~ubuntu-branches/ubuntu/trusty/moodle/trusty

« back to all changes in this revision

Viewing changes to course/yui/build/moodle-course-categoryexpander/moodle-course-categoryexpander.js

  • Committer: Package Import Robot
  • Author(s): Thijs Kinkhorst
  • Date: 2014-01-21 13:40:52 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20140121134052-ym2qvsp2cd9vq0p6
Tags: 2.5.4-1
http://bugs.debian.org/735312
* New upstream release, fixing security issues:
  - MSA-14-0001 Config passwords visibility issue [CVE-2014-0008]
  - MSA-14-0002 Group constraints lacking in "login as" [CVE-2014-0009]
  - MSA-14-0003 CSRF vulnerability in profile fields [CVE-2014-0010]
* Move /var/lib/moodle directory into package.
* Revert back to bundled yui3. Unfortunately, version in Debian and
  of upstream are not compatible (closes: #735312).

Show diffs side-by-side

added added

removed removed

Lines of Context:
course/yui/build/moodle-course-categoryexpander/moodle-course-categoryexpander.js
 
1
YUI.add('moodle-course-categoryexpander', function (Y, NAME) {
 
2
 
 
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
 */
 
10
 
 
11
/**
 
12
 * The course category expander.
 
13
 *
 
14
 * @constructor
 
15
 * @class Y.Moodle.course.categoryexpander
 
16
 */
 
17
 
 
18
var CSS = {
 
19
        CONTENTNODE: 'content',
 
20
        COLLAPSEALL: 'collapse-all',
 
21
        DISABLED: 'disabled',
 
22
        LOADED: 'loaded',
 
23
        NOTLOADED: 'notloaded',
 
24
        SECTIONCOLLAPSED: 'collapsed',
 
25
        SECTIONEXPANDED: 'expanded',
 
26
        HASCHILDREN: 'with_children'
 
27
    },
 
28
    SELECTORS = {
 
29
        LOADEDTREES: '.with_children.loaded',
 
30
        CONTENTNODE: '.content',
 
31
        CATEGORYLISTENLINK: '.category .info .name',
 
32
        CATEGORYSPINNERLOCATION: '.name',
 
33
        CATEGORYWITHCOLLAPSEDLOADEDCHILDREN: '.category.with_children.loaded.collapsed',
 
34
        CATEGORYWITHMAXIMISEDLOADEDCHILDREN: '.category.with_children.loaded.expanded',
 
35
        COLLAPSEEXPAND: '.collapseexpand',
 
36
        COURSEBOX: '.coursebox',
 
37
        COURSEBOXLISTENLINK: '.coursebox .moreinfo',
 
38
        COURSEBOXSPINNERLOCATION: '.name a',
 
39
        COURSECATEGORYTREE: '.course_category_tree',
 
40
        PARENTWITHCHILDREN: '.category'
 
41
    },
 
42
    NS = Y.namespace('Moodle.course.categoryexpander'),
 
43
    TYPE_CATEGORY = 0,
 
44
    TYPE_COURSE = 1,
 
45
    URL = M.cfg.wwwroot + '/course/category.ajax.php';
 
46
 
 
47
/**
 
48
 * Set up the category expander.
 
49
 *
 
50
 * No arguments are required.
 
51
 *
 
52
 * @method init
 
53
 */
 
54
NS.init = function() {
 
55
    var doc = Y.one(Y.config.doc);
 
56
    doc.delegate('click', this.toggle_category_expansion, SELECTORS.CATEGORYLISTENLINK, this);
 
57
    doc.delegate('click', this.toggle_coursebox_expansion, SELECTORS.COURSEBOXLISTENLINK, this);
 
58
    doc.delegate('click', this.collapse_expand_all, SELECTORS.COLLAPSEEXPAND, this);
 
59
 
 
60
    // Only set up they keybaord listeners when tab is first pressed - it
 
61
    // may never happen and modifying the DOM on a large number of nodes
 
62
    // can be very expensive.
 
63
    doc.once('key', this.setup_keyboard_listeners, 'tab', this);
 
64
};
 
65
 
 
66
/**
 
67
 * Set up keyboard expansion for course content.
 
68
 *
 
69
 * This includes setting up the delegation but also adding the nodes to the
 
70
 * tabflow.
 
71
 *
 
72
 * @method setup_keyboard_listeners
 
73
 */
 
74
NS.setup_keyboard_listeners = function() {
 
75
    var doc = Y.one(Y.config.doc);
 
76
 
 
77
    doc.all(SELECTORS.CATEGORYLISTENLINK, SELECTORS.COURSEBOXLISTENLINK, SELECTORS.COLLAPSEEXPAND).setAttribute('tabindex', '0');
 
78
 
 
79
 
 
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
};
 
84
 
 
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-node-plugin', 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
};
 
101
 
 
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-node-plugin', 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
    });
 
117
 
 
118
    e.preventDefault();
 
119
};
 
120
 
 
121
NS._toggle_coursebox_expansion = function(e) {
 
122
    var courseboxnode;
 
123
 
 
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();
 
127
 
 
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
    }
 
133
 
 
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
};
 
144
 
 
145
NS._toggle_category_expansion = function(e) {
 
146
    var categorynode,
 
147
        categoryid,
 
148
        depth;
 
149
 
 
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
    }
 
154
 
 
155
    // Grab the parent category container - this is where the new content will be added.
 
156
    categorynode = e.target.ancestor(SELECTORS.PARENTWITHCHILDREN, true);
 
157
 
 
158
    if (!categorynode.hasClass(CSS.HASCHILDREN)) {
 
159
        // Nothing to do here - this category has no children.
 
160
        return;
 
161
    }
 
162
 
 
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
    }
 
168
 
 
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
    }
 
175
 
 
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
};
 
188
 
 
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
    }
 
201
 
 
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
};
 
217
 
 
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);
 
229
 
 
230
    // Add our animation to the categorychildren.
 
231
    this.add_animation(categorychildren);
 
232
 
 
233
 
 
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.addClass(CSS.SECTIONEXPANDED);
 
241
        categorynode.setAttribute('aria-expanded', 'true');
 
242
        categorychildren.fx.set('reverse', false);
 
243
    } else {
 
244
        categorychildren.fx.set('reverse', true);
 
245
        categorychildren.fx.once('end', function(e, categorynode) {
 
246
            categorynode.addClass(CSS.SECTIONCOLLAPSED);
 
247
            categorynode.removeClass(CSS.SECTIONEXPANDED);
 
248
            categorynode.setAttribute('aria-expanded', 'false');
 
249
        }, this, categorynode);
 
250
    }
 
251
 
 
252
    categorychildren.fx.once('end', function(e, categorychildren) {
 
253
        // Remove the styles that the animation has set.
 
254
        categorychildren.setStyles({
 
255
            height: '',
 
256
            opacity: ''
 
257
        });
 
258
 
 
259
        // To avoid memory gobbling, remove the animation. It will be added back if called again.
 
260
        this.destroy();
 
261
        self.update_collapsible_actions(ancestor);
 
262
    }, categorychildren.fx, categorychildren);
 
263
 
 
264
    // Now that everything has been set up, run the animation.
 
265
    categorychildren.fx.run();
 
266
};
 
267
 
 
268
/**
 
269
 * Toggle collapsing of all nodes.
 
270
 *
 
271
 * @method collapse_expand_all
 
272
 * @private
 
273
 * @param {EventFacade} e
 
274
 */
 
275
NS.collapse_expand_all = function(e) {
 
276
    // Load the actual dependencies now that we've been called.
 
277
    Y.use('io-base', 'json-parse', 'moodle-core-notification', 'anim-node-plugin', function() {
 
278
        // Overload the collapse_expand_all with the _collapse_expand_all function to ensure that
 
279
        // this function isn't called in the future, and call it for the first time.
 
280
        NS.collapse_expand_all = NS._collapse_expand_all;
 
281
        NS.collapse_expand_all(e);
 
282
    });
 
283
 
 
284
    e.preventDefault();
 
285
};
 
286
 
 
287
NS._collapse_expand_all = function(e) {
 
288
    // The collapse/expand button has no actual target but we need to prevent it's default
 
289
    // action to ensure we don't make the page reload/jump.
 
290
    e.preventDefault();
 
291
 
 
292
    if (e.currentTarget.hasClass(CSS.DISABLED)) {
 
293
        // The collapse/expand is currently disabled.
 
294
        return;
 
295
    }
 
296
 
 
297
    var ancestor = e.currentTarget.ancestor(SELECTORS.COURSECATEGORYTREE);
 
298
    if (!ancestor) {
 
299
        return;
 
300
    }
 
301
 
 
302
    var collapseall = ancestor.one(SELECTORS.COLLAPSEEXPAND);
 
303
    if (collapseall.hasClass(CSS.COLLAPSEALL)) {
 
304
        this.collapse_all(ancestor);
 
305
    } else {
 
306
        this.expand_all(ancestor);
 
307
    }
 
308
    this.update_collapsible_actions(ancestor);
 
309
};
 
310
 
 
311
NS.expand_all = function(ancestor) {
 
312
    var finalexpansions = [];
 
313
 
 
314
    ancestor.all(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)
 
315
        .each(function(c) {
 
316
        if (c.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)) {
 
317
            // Expand the hidden children first without animation.
 
318
            c.removeClass(CSS.SECTIONCOLLAPSED);
 
319
            c.addClass(CSS.SECTIONEXPANDED);
 
320
            c.all(SELECTORS.LOADEDTREES).removeClass(CSS.SECTIONCOLLAPSED);
 
321
        } else {
 
322
            finalexpansions.push(c);
 
323
        }
 
324
    }, this);
 
325
 
 
326
    // Run the final expansion with animation on the visible items.
 
327
    Y.all(finalexpansions).each(function(c) {
 
328
        this.run_expansion(c);
 
329
    }, this);
 
330
 
 
331
};
 
332
 
 
333
NS.collapse_all = function(ancestor) {
 
334
    var finalcollapses = [];
 
335
 
 
336
    ancestor.all(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN)
 
337
        .each(function(c) {
 
338
        if (c.ancestor(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN)) {
 
339
            finalcollapses.push(c);
 
340
        } else {
 
341
            // Collapse the visible items first
 
342
            this.run_expansion(c);
 
343
        }
 
344
    }, this);
 
345
 
 
346
    // Run the final collapses now that the these are hidden hidden.
 
347
    Y.all(finalcollapses).each(function(c) {
 
348
        c.addClass(CSS.SECTIONCOLLAPSED);
 
349
        c.removeClass(CSS.SECTIONEXPANDED);
 
350
        c.all(SELECTORS.LOADEDTREES).addClass(CSS.SECTIONCOLLAPSED);
 
351
    }, this);
 
352
};
 
353
 
 
354
NS.update_collapsible_actions = function(ancestor) {
 
355
    var foundmaximisedchildren = false,
 
356
        // Grab the anchor for the collapseexpand all link.
 
357
        togglelink = ancestor.one(SELECTORS.COLLAPSEEXPAND);
 
358
 
 
359
    if (!togglelink) {
 
360
        // We should always have a togglelink but ensure.
 
361
        return;
 
362
    }
 
363
 
 
364
    // Search for any visibly expanded children.
 
365
    ancestor.all(SELECTORS.CATEGORYWITHMAXIMISEDLOADEDCHILDREN).each(function(n) {
 
366
        // If we can find any collapsed ancestors, skip.
 
367
        if (n.ancestor(SELECTORS.CATEGORYWITHCOLLAPSEDLOADEDCHILDREN)) {
 
368
            return false;
 
369
        }
 
370
        foundmaximisedchildren = true;
 
371
        return true;
 
372
    });
 
373
 
 
374
    if (foundmaximisedchildren) {
 
375
        // At least one maximised child found. Show the collapseall.
 
376
        togglelink.setHTML(M.util.get_string('collapseall', 'moodle'))
 
377
            .addClass(CSS.COLLAPSEALL)
 
378
            .removeClass(CSS.DISABLED);
 
379
    } else {
 
380
        // No maximised children found but there are collapsed children. Show the expandall.
 
381
        togglelink.setHTML(M.util.get_string('expandall', 'moodle'))
 
382
            .removeClass(CSS.COLLAPSEALL)
 
383
            .removeClass(CSS.DISABLED);
 
384
    }
 
385
};
 
386
 
 
387
/**
 
388
 * Process the data returned by Y.io.
 
389
 * This includes appending it to the relevant part of the DOM, and applying our animations.
 
390
 *
 
391
 * @method process_results
 
392
 * @private
 
393
 * @param {String} tid The Transaction ID
 
394
 * @param {Object} response The Reponse returned by Y.IO
 
395
 * @param {Object} ioargs The additional arguments provided by Y.IO
 
396
 */
 
397
NS.process_results = function(tid, response, args) {
 
398
    var newnode,
 
399
        data;
 
400
    try {
 
401
        data = Y.JSON.parse(response.responseText);
 
402
        if (data.error) {
 
403
            return new M.core.ajaxException(data);
 
404
        }
 
405
    } catch (e) {
 
406
        return new M.core.exception(e);
 
407
    }
 
408
 
 
409
    // Insert the returned data into a new Node.
 
410
    newnode = Y.Node.create(data);
 
411
 
 
412
    // Append to the existing child location.
 
413
    args.childnode.appendChild(newnode);
 
414
 
 
415
    // Now that we have content, we can swap the classes on the toggled container.
 
416
    args.parentnode
 
417
        .addClass(CSS.LOADED)
 
418
        .removeClass(CSS.NOTLOADED);
 
419
 
 
420
    // Toggle the open/close status of the node now that it's content has been loaded.
 
421
    this.run_expansion(args.parentnode);
 
422
 
 
423
    // Remove the spinner now that we've started to show the content.
 
424
    if (args.spinner) {
 
425
        args.spinner.hide().destroy();
 
426
    }
 
427
};
 
428
 
 
429
/**
 
430
 * Add our animation to the Node.
 
431
 *
 
432
 * @method add_animation
 
433
 * @private
 
434
 * @param {Node} childnode
 
435
 */
 
436
NS.add_animation = function(childnode) {
 
437
    if (typeof childnode.fx !== "undefined") {
 
438
        // The animation has already been plugged to this node.
 
439
        return childnode;
 
440
    }
 
441
 
 
442
    childnode.plug(Y.Plugin.NodeFX, {
 
443
        from: {
 
444
            height: 0,
 
445
            opacity: 0
 
446
        },
 
447
        to: {
 
448
            // This sets a dynamic height in case the node content changes.
 
449
            height: function(node) {
 
450
                // Get expanded height (offsetHeight may be zero).
 
451
                return node.get('scrollHeight');
 
452
            },
 
453
            opacity: 1
 
454
        },
 
455
        duration: 0.2
 
456
    });
 
457
 
 
458
    return childnode;
 
459
};
 
460
 
 
461
 
 
462
}, '@VERSION@', {"requires": ["node", "event-key"]});