Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 23... Línea 23...
23
 */
23
 */
Línea 24... Línea 24...
24
 
24
 
25
const SELECTORS = {
25
const SELECTORS = {
26
    'menuitem': '[role="menuitem"]',
26
    'menuitem': '[role="menuitem"]',
27
    'tab': '[role="tab"]',
27
    'tab': '[role="tab"]',
28
    'dropdowntoggle': '[data-toggle="dropdown"]',
-
 
29
    'primarymenuitemactive': '.primary-navigation .dropdown-item[aria-current="true"]',
28
    'dropdowntoggle': '[data-bs-toggle="dropdown"]',
Línea 30... Línea 29...
30
};
29
};
Línea 31... Línea 30...
31
 
30
 
Línea 84... Línea 83...
84
        src.setAttribute('aria-current', 'true');
83
        src.setAttribute('aria-current', 'true');
85
    }
84
    }
86
};
85
};
Línea 87... Línea 86...
87
 
86
 
88
/**
-
 
89
 * Check if there are sub items in a dropdown menu. There can be one element active only. That is usually controlled
-
 
90
 * by the server. However, when you click, the newly clicked item gets the active state as well. This is no problem
-
 
91
 * because the user leaves the page and a new page load happens. When the user hits the back button, the old page dom
-
 
92
 * is restored from the cache, with both menu items active. If there is such a case, we need to uncheck the item that
-
 
93
 * was clicked when leaving this page.
-
 
94
 * Make sure that this function is applied in the main menu only. The gradebook may contain drop down menus as well
-
 
95
 * were more than one item can be flagged as active.
-
 
96
 */
-
 
97
const dropDownMenuActiveCheck = function() {
-
 
98
    const items = document.querySelectorAll(SELECTORS.primarymenuitemactive);
-
 
99
    // Do the check only, if there is more than one subitem active.
-
 
100
    if (items !== null && items.length > 1) {
-
 
101
        items.forEach(function(e) {
-
 
102
            // Get the link target from the href attribute and compare it with the current url in the browser.
-
 
103
            const href = e.getAttribute('href');
-
 
104
            const windowHref = window.location.href || '';
-
 
105
            const windowPath = window.location.pathname || '';
-
 
106
            if (href !== windowHref && href !== windowPath
-
 
107
                && href !== windowHref + '/index.php' && href !== windowPath + 'index.php') {
-
 
108
                e.classList.remove('active');
-
 
109
                e.removeAttribute('aria-current');
-
 
110
            }
-
 
111
        });
-
 
112
    }
-
 
113
};
-
 
114
 
-
 
115
/**
87
/**
116
 * Defined keyboard event handling so we can remove listeners on nodes on resize etc.
88
 * Defined keyboard event handling so we can remove listeners on nodes on resize etc.
117
 *
89
 *
118
 * @param {event} e The triggering element and key presses etc.
90
 * @param {event} e The triggering element and key presses etc.
119
 */
91
 */
Línea 206... Línea 178...
206
    // (Re)apply our event listeners to the passed element.
178
    // (Re)apply our event listeners to the passed element.
207
    elementRoot.addEventListener('keydown', keyboardListenerEvents);
179
    elementRoot.addEventListener('keydown', keyboardListenerEvents);
208
    elementRoot.addEventListener('click', clickListenerEvents);
180
    elementRoot.addEventListener('click', clickListenerEvents);
209
};
181
};
Línea 210... Línea -...
210
 
-
 
211
// We need this triggered only when the user hits the back button.
-
 
212
window.addEventListener('pageshow', dropDownMenuActiveCheck);
-
 
213
 
182
 
214
/**
183
/**
215
 * Handle the focusing to the next element in the dropdown.
184
 * Handle the focusing to the next element in the dropdown.
216
 *
185
 *
217
 * @param {HTMLElement|null} currentNode The node that we want to take action on.
186
 * @param {HTMLElement|null} currentNode The node that we want to take action on.