ÿØÿà 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 . /** * Keyboard initialization for a given html node. * * @module core/menu_navigation * @copyright 2021 Moodle * @author Mathew May * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ const SELECTORS = { 'menuitem': '[role="menuitem"]', 'tab': '[role="tab"]', 'dropdowntoggle': '[data-toggle="dropdown"]', 'primarymenuitemactive': '.primary-navigation .dropdown-item[aria-current="true"]', }; let openDropdownNode = null; /** * Small helper function to check if a given node is null or not. * * @param {HTMLElement|null} item The node that we want to compare. * @param {HTMLElement} fallback Either the first node or final node that can be focused on. * @return {HTMLElement} */ const clickErrorHandler = (item, fallback) => { if (item !== null) { return item; } else { return fallback; } }; /** * Control classes etc of the selected dropdown item and its' parent * * @param {HTMLElement} src The node within the dropdown the user selected. */ const menuItemHelper = src => { let parent; // Do not apply any actions if the selected dropdown item is explicitly instructing to not display an active state. if (src.dataset.disableactive) { return; } // Handling for dropdown escapes. // A bulk of the handling is already done by aria.js just add polish. if (src.classList.contains('dropdown-item')) { parent = src.closest('.dropdown-menu'); const dropDownToggle = document.getElementById(parent.getAttribute('aria-labelledby')); dropDownToggle.classList.add('active'); dropDownToggle.setAttribute('tabindex', 0); } else if (src.matches(`${SELECTORS.tab},${SELECTORS.menuitem}`) && !src.matches(SELECTORS.dropdowntoggle)) { parent = src.parentElement.parentElement.querySelector('.dropdown-menu'); } else { return; } // Remove active class from any other dropdown elements. Array.prototype.forEach.call(parent.children, node => { const menuItem = node.querySelector(SELECTORS.menuitem); if (menuItem !== null) { menuItem.classList.remove('active'); // Remove aria selection state. menuItem.removeAttribute('aria-current'); } }); // Set the applicable element's selection state. if (src.getAttribute('role') === 'menuitem') { src.setAttribute('aria-current', 'true'); } }; /** * Check if there are sub items in a dropdown menu. There can be one element active only. That is usually controlled * by the server. However, when you click, the newly clicked item gets the active state as well. This is no problem * because the user leaves the page and a new page load happens. When the user hits the back button, the old page dom * is restored from the cache, with both menu items active. If there is such a case, we need to uncheck the item that * was clicked when leaving this page. * Make sure that this function is applied in the main menu only. The gradebook may contain drop down menus as well * were more than one item can be flagged as active. */ const dropDownMenuActiveCheck = function() { const items = document.querySelectorAll(SELECTORS.primarymenuitemactive); // Do the check only, if there is more than one subitem active. if (items !== null && items.length > 1) { items.forEach(function(e) { // Get the link target from the href attribute and compare it with the current url in the browser. const href = e.getAttribute('href'); const windowHref = window.location.href || ''; const windowPath = window.location.pathname || ''; if (href !== windowHref && href !== windowPath && href !== windowHref + '/index.php' && href !== windowPath + 'index.php') { e.classList.remove('active'); e.removeAttribute('aria-current'); } }); } }; /** * Defined keyboard event handling so we can remove listeners on nodes on resize etc. * * @param {event} e The triggering element and key presses etc. */ const keyboardListenerEvents = e => { const src = e.srcElement; const firstNode = e.currentTarget.firstElementChild; const lastNode = findUsableLastNode(e.currentTarget); // Handling for dropdown escapes. // A bulk of the handling is already done by aria.js just add polish. if (src.classList.contains('dropdown-item')) { if (e.key == 'ArrowRight' || e.key == 'ArrowLeft') { e.preventDefault(); if (openDropdownNode !== null) { openDropdownNode.parentElement.click(); } } if (e.key == ' ' || e.key == 'Enter') { e.preventDefault(); menuItemHelper(src); if (!src.parentElement.classList.contains('dropdown')) { src.click(); } } } else { const rtl = window.right_to_left(); const arrowNext = rtl ? 'ArrowLeft' : 'ArrowRight'; const arrowPrevious = rtl ? 'ArrowRight' : 'ArrowLeft'; if (src.getAttribute('role') === 'menuitem') { // When not rendered within a dropdown menu, handle keyboard navigation if the element is rendered as a menu item. if (e.key == arrowNext) { e.preventDefault(); setFocusNext(src, firstNode); } if (e.key == arrowPrevious) { e.preventDefault(); setFocusPrev(src, lastNode); } // Let aria.js handle the dropdowns. if (e.key == 'ArrowUp' || e.key == 'ArrowDown') { openDropdownNode = src; e.preventDefault(); } if (e.key == 'Home') { e.preventDefault(); setFocusHomeEnd(firstNode); } if (e.key == 'End') { e.preventDefault(); setFocusHomeEnd(lastNode); } } if (e.key == ' ' || e.key == 'Enter') { e.preventDefault(); // Aria.js handles dropdowns etc. if (!src.parentElement.classList.contains('dropdown')) { src.click(); } } } }; /** * Defined click event handling so we can remove listeners on nodes on resize etc. * * @param {event} e The triggering element and key presses etc. */ const clickListenerEvents = e => { const src = e.srcElement; menuItemHelper(src); }; /** * The initial entry point that a given module can pass a HTMLElement. * * @param {HTMLElement} elementRoot The menu to add handlers upon. */ export default elementRoot => { // Remove any and all instances of old listeners on the passed element. elementRoot.removeEventListener('keydown', keyboardListenerEvents); elementRoot.removeEventListener('click', clickListenerEvents); // (Re)apply our event listeners to the passed element. elementRoot.addEventListener('keydown', keyboardListenerEvents); elementRoot.addEventListener('click', clickListenerEvents); }; // We need this triggered only when the user hits the back button. window.addEventListener('pageshow', dropDownMenuActiveCheck); /** * Handle the focusing to the next element in the dropdown. * * @param {HTMLElement|null} currentNode The node that we want to take action on. * @param {HTMLElement} firstNode The backup node to focus as a last resort. */ const setFocusNext = (currentNode, firstNode) => { const listElement = currentNode.parentElement; const nextListItem = ((el) => { do { el = el.nextElementSibling; } while (el && !el.offsetHeight); // We only work with the visible tabs. return el; })(listElement); const nodeToSelect = clickErrorHandler(nextListItem, firstNode); const parent = listElement.parentElement; const isTabList = parent.getAttribute('role') === 'tablist'; const itemSelector = isTabList ? SELECTORS.tab : SELECTORS.menuitem; const menuItem = nodeToSelect.querySelector(itemSelector); menuItem.focus(); }; /** * Handle the focusing to the previous element in the dropdown. * * @param {HTMLElement|null} currentNode The node that we want to take action on. * @param {HTMLElement} lastNode The backup node to focus as a last resort. */ const setFocusPrev = (currentNode, lastNode) => { const listElement = currentNode.parentElement; const nextListItem = ((el) => { do { el = el.previousElementSibling; } while (el && !el.offsetHeight); // We only work with the visible tabs. return el; })(listElement); const nodeToSelect = clickErrorHandler(nextListItem, lastNode); const parent = listElement.parentElement; const isTabList = parent.getAttribute('role') === 'tablist'; const itemSelector = isTabList ? SELECTORS.tab : SELECTORS.menuitem; const menuItem = nodeToSelect.querySelector(itemSelector); menuItem.focus(); }; /** * Focus on either the start or end of a nav list. * * @param {HTMLElement} node The element to focus on. */ const setFocusHomeEnd = node => { node.querySelector(SELECTORS.menuitem).focus(); }; /** * We need to look within the menu to find a last node we can add focus to. * * @param {HTMLElement} elementRoot Menu to find a final child node within. * @return {HTMLElement} */ const findUsableLastNode = elementRoot => { const lastNode = elementRoot.lastElementChild; // An example is the more menu existing but hidden on the page for the time being. if (!lastNode.classList.contains('d-none')) { return elementRoot.lastElementChild; } else { // Cast the HTMLCollection & reverse it. const extractedNodes = Array.prototype.map.call(elementRoot.children, node => { return node; }).reverse(); // Get rid of any nodes we can not set focus on. const nodesToUse = extractedNodes.filter((node => { if (!node.classList.contains('d-none')) { return node; } })); // If we find no elements we can set focus on, fall back to the absolute first element. if (nodesToUse.length !== 0) { return nodesToUse[0]; } else { return elementRoot.firstElementChild; } } };