ÿØÿà JFIF    ÿÛ „  ( %"1!%)+...383,7(-.+  -+++--++++---+-+-----+---------------+---+-++7-----ÿÀ  ß â" ÿÄ     ÿÄ H    !1AQaq"‘¡2B±ÁÑð#R“Ò Tbr‚²á3csƒ’ÂñDS¢³$CÿÄ   ÿÄ %  !1AQa"23‘ÿÚ   ? ôÿ ¨pŸªáÿ —åYõõ\?àÒü©ŠÄï¨pŸªáÿ —åYõõ\?àÓü©ŠÄá 0Ÿªáÿ Ÿå[úƒ ú®ði~TÁbqÐ8OÕpÿ ƒOò¤Oè`–RÂáœá™êi€ßÉ< FtŸI“öÌ8úDf´°å}“¾œ6  öFá°y¥jñÇh†ˆ¢ã/ÃÐ:ªcÈ "Y¡ðÑl>ÿ ”ÏËte:qž\oäŠe÷󲍷˜HT4&ÿ ÓÐü6ö®¿øþßèô Ÿ•7Ñi’•j|“ñì>b…þS?*Óôÿ ÓÐü*h¥£ír¶ü UãS炟[AÐaè[ûª•õ&õj?†Éö+EzP—WeÒírJFt ‘BŒ†Ï‡%#tE Øz ¥OÛ«!1›üä±Í™%ºÍãö]°î(–:@<‹ŒÊö×òÆt¦ãº+‡¦%ÌÁ²h´OƒJŒtMÜ>ÀÜÊw3Y´•牋4ǍýʏTì>œú=Íwhyë,¾Ôò×õ¿ßÊa»«þˆѪQ|%6ž™A õ%:øj<>É—ÿ Å_ˆCbõ¥š±ý¯Ýƒï…¶|RëócÍf溪“t.СøTÿ *Ä¿-{†çàczůŽ_–^XþŒ±miB[X±d 1,é”zEù»& î9gœf™9Ð'.;—™i}!ôšåîqêÛ٤ёý£½ÆA–àôe"A$˝Úsäÿ ÷Û #°xŸëí(l »ý3—¥5m! rt`†0~'j2(]S¦¦kv,ÚÇ l¦øJA£Šƒ J3E8ÙiŽ:cÉžúeZ°€¯\®kÖ(79«Ž:¯X”¾³Š&¡* ….‰Ž(ÜíŸ2¥ª‡×Hi²TF¤ò[¨íÈRëÉ䢍mgÑ.Ÿ<öäS0í„ǹÁU´f#Vß;Õ–…P@3ío<ä-±»Ž.L|kªÀê›fÂ6@»eu‚|ÓaÞÆŸ…¨ááå>åŠ?cKü6ùTÍÆ”†sĤÚ;H2RÚ†õ\Ö·Ÿn'¾ ñ#ºI¤Å´%çÁ­‚â7›‹qT3Iï¨ÖÚ5I7Ë!ÅOóŸ¶øÝñØôת¦$Tcö‘[«Ö³šÒ';Aþ ¸èíg A2Z"i¸vdÄ÷.iõ®§)¿]¤À†–‡É&ä{V¶iŽ”.Ó×Õÿ û?h¬Mt–íª[ÿ Ñÿ ÌV(í}=ibÔ¡›¥¢±b Lô¥‡piη_Z<‡z§èŒ)iÖwiÇ 2hÙ3·=’d÷8éŽ1¦¸c¤µ€7›7Ø ð\á)} ¹fËí›pAÃL%âc2 í§æQz¿;T8sæ°qø)QFMð‰XŒÂ±N¢aF¨…8¯!U  Z©RÊ ÖPVÄÀÍin™Ì-GˆªÅËŠ›•zË}º±ŽÍFò¹}Uw×#ä5B¤{î}Ð<ÙD é©¤&‡ïDbàÁôMÁ.// This file is part of Moodle - http://moodle.org/ // // Moodle is free software: you can redistribute it and/or modify // it under the terms of the GNU General Public License as published by // the Free Software Foundation, either version 3 of the License, or // (at your option) any later version. // // Moodle is distributed in the hope that it will be useful, // but WITHOUT ANY WARRANTY; without even the implied warranty of // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the // GNU General Public License for more details. // // You should have received a copy of the GNU General Public License // along with Moodle. If not, see . /** * Implement an accessible aria tree widget, from a nested unordered list. * Based on http://oaa-accessibility.org/example/41/. * * @module core/tree * @copyright 2015 Damyon Wiese * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ define(['jquery'], function($) { // Private variables and functions. var SELECTORS = { ITEM: '[role=treeitem]', GROUP: '[role=treeitem]:has([role=group]), [role=treeitem][aria-owns], [role=treeitem][data-requires-ajax=true]', CLOSED_GROUP: '[role=treeitem]:has([role=group])[aria-expanded=false], [role=treeitem][aria-owns][aria-expanded=false], ' + '[role=treeitem][data-requires-ajax=true][aria-expanded=false]', FIRST_ITEM: '[role=treeitem]:first', VISIBLE_ITEM: '[role=treeitem]:visible', UNLOADED_AJAX_ITEM: '[role=treeitem][data-requires-ajax=true][data-loaded=false][aria-expanded=true]' }; /** * Constructor. * * @param {String} selector * @param {function} selectCallback Called when the active node is changed. */ var Tree = function(selector, selectCallback) { this.treeRoot = $(selector); this.treeRoot.data('activeItem', null); this.selectCallback = selectCallback; this.keys = { tab: 9, enter: 13, space: 32, pageup: 33, pagedown: 34, end: 35, home: 36, left: 37, up: 38, right: 39, down: 40, asterisk: 106 }; // Apply the standard default initialisation for all nodes, starting with the tree root. this.initialiseNodes(this.treeRoot); // Make the first item the active item for the tree so that it is added to the tab order. this.setActiveItem(this.treeRoot.find(SELECTORS.FIRST_ITEM)); // Create the cache of the visible items. this.refreshVisibleItemsCache(); // Create the event handlers for the tree. this.bindEventHandlers(); }; Tree.prototype.registerEnterCallback = function(callback) { this.enterCallback = callback; }; /** * Find all visible tree items and save a cache of them on the tree object. * * @method refreshVisibleItemsCache */ Tree.prototype.refreshVisibleItemsCache = function() { this.treeRoot.data('visibleItems', this.treeRoot.find(SELECTORS.VISIBLE_ITEM)); }; /** * Get all visible tree items. * * @method getVisibleItems * @return {Object} visible items */ Tree.prototype.getVisibleItems = function() { return this.treeRoot.data('visibleItems'); }; /** * Mark the given item as active within the tree and fire the callback for when the active item is set. * * @method setActiveItem * @param {object} item jquery object representing an item on the tree. */ Tree.prototype.setActiveItem = function(item) { var currentActive = this.treeRoot.data('activeItem'); if (item === currentActive) { return; } // Remove previous active from tab order. if (currentActive) { currentActive.attr('tabindex', '-1'); currentActive.attr('aria-selected', 'false'); } item.attr('tabindex', '0'); item.attr('aria-selected', 'true'); // Set the new active item. this.treeRoot.data('activeItem', item); if (typeof this.selectCallback === 'function') { this.selectCallback(item); } }; /** * Determines if the given item is a group item (contains child tree items) in the tree. * * @method isGroupItem * @param {object} item jquery object representing an item on the tree. * @returns {bool} */ Tree.prototype.isGroupItem = function(item) { return item.is(SELECTORS.GROUP); }; /** * Determines if the given item is a group item (contains child tree items) in the tree. * * @method isGroupItem * @param {object} item jquery object representing an item on the tree. * @returns {bool} */ Tree.prototype.getGroupFromItem = function(item) { var ariaowns = this.treeRoot.find('#' + item.attr('aria-owns')); var plain = item.children('[role=group]'); if (ariaowns.length > plain.length) { return ariaowns; } else { return plain; } }; /** * Determines if the given group item (contains child tree items) is collapsed. * * @method isGroupCollapsed * @param {object} item jquery object representing a group item on the tree. * @returns {bool} */ Tree.prototype.isGroupCollapsed = function(item) { return item.attr('aria-expanded') === 'false'; }; /** * Determines if the given group item (contains child tree items) can be collapsed. * * @method isGroupCollapsible * @param {object} item jquery object representing a group item on the tree. * @returns {bool} */ Tree.prototype.isGroupCollapsible = function(item) { return item.attr('data-collapsible') !== 'false'; }; /** * Performs the tree initialisation for all child items from the given node, * such as removing everything from the tab order and setting aria selected * on items. * * @method initialiseNodes * @param {object} node jquery object representing a node. */ Tree.prototype.initialiseNodes = function(node) { this.removeAllFromTabOrder(node); this.setAriaSelectedFalseOnItems(node); // Get all ajax nodes that have been rendered as expanded but haven't loaded the child items yet. var thisTree = this; node.find(SELECTORS.UNLOADED_AJAX_ITEM).each(function() { var unloadedNode = $(this); // Collapse and then expand to trigger the ajax loading. thisTree.collapseGroup(unloadedNode); thisTree.expandGroup(unloadedNode); }); }; /** * Removes all child DOM elements of the given node from the tab order. * * @method removeAllFromTabOrder * @param {object} node jquery object representing a node. */ Tree.prototype.removeAllFromTabOrder = function(node) { node.find('*').attr('tabindex', '-1'); this.getGroupFromItem($(node)).find('*').attr('tabindex', '-1'); }; /** * Find all child tree items from the given node and set the aria selected attribute to false. * * @method setAriaSelectedFalseOnItems * @param {object} node jquery object representing a node. */ Tree.prototype.setAriaSelectedFalseOnItems = function(node) { node.find(SELECTORS.ITEM).attr('aria-selected', 'false'); }; /** * Expand all group nodes within the tree. * * @method expandAllGroups */ Tree.prototype.expandAllGroups = function() { var thisTree = this; this.treeRoot.find(SELECTORS.CLOSED_GROUP).each(function() { var groupNode = $(this); thisTree.expandGroup($(this)).done(function() { thisTree.expandAllChildGroups(groupNode); }); }); }; /** * Find all child group nodes from the given node and expand them. * * @method expandAllChildGroups * @param {Object} item is the jquery id of the group. */ Tree.prototype.expandAllChildGroups = function(item) { var thisTree = this; this.getGroupFromItem(item).find(SELECTORS.CLOSED_GROUP).each(function() { var groupNode = $(this); thisTree.expandGroup($(this)).done(function() { thisTree.expandAllChildGroups(groupNode); }); }); }; /** * Expand a collapsed group. * * Handles expanding nodes that are ajax loaded (marked with a data-requires-ajax attribute). * * @method expandGroup * @param {Object} item is the jquery id of the parent item of the group. * @return {Object} a promise that is resolved when the group has been expanded. */ Tree.prototype.expandGroup = function(item) { var promise = $.Deferred(); // Ignore nodes that are explicitly maked as not expandable or are already expanded. if (item.attr('data-expandable') !== 'false' && this.isGroupCollapsed(item)) { // If this node requires ajax load and we haven't already loaded it. if (item.attr('data-requires-ajax') === 'true' && item.attr('data-loaded') !== 'true') { item.attr('data-loaded', false); // Get the closes ajax loading module specificed in the tree. var moduleName = item.closest('[data-ajax-loader]').attr('data-ajax-loader'); var thisTree = this; // Flag this node as loading. const p = item.find('p'); p.addClass('loading'); // Require the ajax module (must be AMD) and try to load the items. require([moduleName], function(loader) { // All ajax module must implement a "load" method. loader.load(item).done(function() { item.attr('data-loaded', true); // Set defaults on the newly constructed part of the tree. thisTree.initialiseNodes(item); thisTree.finishExpandingGroup(item); // Make sure no child elements of the item we just loaded are tabbable. p.removeClass('loading'); promise.resolve(); }); }); } else { this.finishExpandingGroup(item); promise.resolve(); } } else { promise.resolve(); } return promise; }; /** * Perform the necessary DOM changes to display a group item. * * @method finishExpandingGroup * @param {Object} item is the jquery id of the parent item of the group. */ Tree.prototype.finishExpandingGroup = function(item) { // Expand the group. var group = this.getGroupFromItem(item); group.removeAttr('aria-hidden'); item.attr('aria-expanded', 'true'); // Update the list of visible items. this.refreshVisibleItemsCache(); }; /** * Collapse an expanded group. * * @method collapseGroup * @param {Object} item is the jquery id of the parent item of the group. */ Tree.prototype.collapseGroup = function(item) { // If the item is not collapsible or already collapsed then do nothing. if (!this.isGroupCollapsible(item) || this.isGroupCollapsed(item)) { return; } // Collapse the group. var group = this.getGroupFromItem(item); group.attr('aria-hidden', 'true'); item.attr('aria-expanded', 'false'); // Update the list of visible items. this.refreshVisibleItemsCache(); }; /** * Expand or collapse a group. * * @method toggleGroup * @param {Object} item is the jquery id of the parent item of the group. */ Tree.prototype.toggleGroup = function(item) { if (item.attr('aria-expanded') === 'true') { this.collapseGroup(item); } else { this.expandGroup(item); } }; /** * Handle a key down event - ie navigate the tree. * * @method handleKeyDown * @param {Event} e The event. */ // This function should be simplified. In the meantime.. // eslint-disable-next-line complexity Tree.prototype.handleKeyDown = function(e) { var item = $(e.target); var currentIndex = this.getVisibleItems()?.index(item); if ((e.altKey || e.ctrlKey || e.metaKey) || (e.shiftKey && e.keyCode != this.keys.tab)) { // Do nothing. return; } switch (e.keyCode) { case this.keys.home: { // Jump to first item in tree. this.getVisibleItems().first().focus(); e.preventDefault(); return; } case this.keys.end: { // Jump to last visible item. this.getVisibleItems().last().focus(); e.preventDefault(); return; } case this.keys.enter: { var links = item.children('a').length ? item.children('a') : item.children().not(SELECTORS.GROUP).find('a'); if (links.length) { if (links.first().data('overrides-tree-activation-key-handler')) { // If the link overrides handling of activation keys, let it do so. links.first().triggerHandler(e); } else if (typeof this.enterCallback === 'function') { // Use callback if there is one. this.enterCallback(item); } else { window.location.href = links.first().attr('href'); } } else if (this.isGroupItem(item)) { this.toggleGroup(item, true); } e.preventDefault(); return; } case this.keys.space: { if (this.isGroupItem(item)) { this.toggleGroup(item, true); } else if (item.children('a').length) { var firstLink = item.children('a').first(); if (firstLink.data('overrides-tree-activation-key-handler')) { firstLink.triggerHandler(e); } } e.preventDefault(); return; } case this.keys.left: { var focusParent = function(tree) { // Get the immediate visible parent group item that contains this element. tree.getVisibleItems().filter(function() { return tree.getGroupFromItem($(this)).has(item).length; }).focus(); }; // If this is a group item then collapse it and focus the parent group // in accordance with the aria spec. if (this.isGroupItem(item)) { if (this.isGroupCollapsed(item)) { focusParent(this); } else { this.collapseGroup(item); } } else { focusParent(this); } e.preventDefault(); return; } case this.keys.right: { // If this is a group item then expand it and focus the first child item // in accordance with the aria spec. if (this.isGroupItem(item)) { if (this.isGroupCollapsed(item)) { this.expandGroup(item); } else { // Move to the first item in the child group. this.getGroupFromItem(item).find(SELECTORS.ITEM).first().focus(); } } e.preventDefault(); return; } case this.keys.up: { if (currentIndex > 0) { var prev = this.getVisibleItems().eq(currentIndex - 1); prev.focus(); } e.preventDefault(); return; } case this.keys.down: { if (currentIndex < this.getVisibleItems().length - 1) { var next = this.getVisibleItems().eq(currentIndex + 1); next.focus(); } e.preventDefault(); return; } case this.keys.asterisk: { // Expand all groups. this.expandAllGroups(); e.preventDefault(); return; } } }; /** * Handle an item click. * * @param {Event} event the click event * @param {jQuery} item the item clicked */ Tree.prototype.handleItemClick = function(event, item) { // Update the active item. item.focus(); // If the item is a group node. if (this.isGroupItem(item)) { this.toggleGroup(item); } }; /** * Handle a click (select). * * @method handleClick * @param {Event} event The event. */ Tree.prototype.handleClick = function(event) { if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) { // Do nothing. return; } // Get the closest tree item from the event target. var item = $(event.target).closest('[role="treeitem"]'); if (!item.is(event.currentTarget)) { return; } this.handleItemClick(event, item); }; /** * Handle a focus event. * * @method handleFocus * @param {Event} e The event. */ Tree.prototype.handleFocus = function(e) { this.setActiveItem($(e.target)); }; /** * Bind the event listeners we require. * * @method bindEventHandlers */ Tree.prototype.bindEventHandlers = function() { // Bind event handlers to the tree items. Use event delegates to allow // for dynamically loaded parts of the tree. this.treeRoot.on({ click: this.handleClick.bind(this), keydown: this.handleKeyDown.bind(this), focus: this.handleFocus.bind(this), }, SELECTORS.ITEM); }; return /** @alias module:core/tree */ Tree; });