Proyectos de Subversion Moodle

Rev

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

Rev 1 Rev 1441
Línea 19... Línea 19...
19 
 * @module      core/local/action_menu/subpanel
 19 
 * @module      core/local/action_menu/subpanel
20 
 * @copyright   2023 Mikel Martín <mikel@moodle.com>
 20 
 * @copyright   2023 Mikel Martín <mikel@moodle.com>
21 
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 21 
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
22 
 */
 22 
 */
Línea 23... Línea -...
23 
 
 - 
 
24 
import jQuery from 'jquery';
 23 
 
25 
import {debounce} from 'core/utils';
 24 
import {debounce} from 'core/utils';
26 
import {
 25 
import {
27 
    isBehatSite,
 26 
    isBehatSite,
28 
    isExtraSmall,
 27 
    isExtraSmall,
Línea 34... Línea 33...
34 
import Pending from 'core/pending';
 33 
import Pending from 'core/pending';
35 
import {
 34 
import {
36 
    hide,
 35 
    hide,
37 
    unhide,
 36 
    unhide,
38 
} from 'core/aria';
 37 
} from 'core/aria';
- 
 
 38 
import EventHandler from 'theme_boost/bootstrap/dom/event-handler';
Línea 39... Línea 39...
39 
 
 39 
 
40 
const Selectors = {
 40 
const Selectors = {
41 
    mainMenu: '[role="menu"]',
 41 
    mainMenu: '[role="menu"]',
42 
    dropdownRight: '.dropdown-menu-right',
 42 
    dropdownRight: '.dropdown-menu-end',
43 
    subPanel: '.dropdown-subpanel',
 43 
    subPanel: '.dropdown-subpanel',
44 
    subPanelMenuItem: '.dropdown-subpanel > .dropdown-item',
 44 
    subPanelMenuItem: '.dropdown-subpanel > .dropdown-item',
45 
    subPanelContent: '.dropdown-subpanel > .dropdown-menu',
 45 
    subPanelContent: '.dropdown-subpanel > .dropdown-menu',
46 
    // Drawer selector.
 46 
    // Drawer selector.
Línea 49... Línea 49...
49 
    blockColumn: '.blockcolumn',
 49 
    blockColumn: '.blockcolumn',
50 
    columnLeft: '.columnleft',
 50 
    columnLeft: '.columnleft',
51 
};
 51 
};
Línea 52... Línea 52...
52 
 
 52 
 
53 
const Classes = {
 53 
const Classes = {
54 
    dropRight: 'dropright',
 54 
    dropRight: 'dropend',
55 
    dropLeft: 'dropleft',
 55 
    dropLeft: 'dropstart',
56 
    dropDown: 'dropdown',
 56 
    dropDown: 'dropdown',
57 
    forceLeft: 'downleft',
 57 
    forceLeft: 'downleft',
58 
    contentDisplayed: 'content-displayed',
 58 
    contentDisplayed: 'content-displayed',
Línea 69... Línea 69...
69 
 */
 69 
 */
70 
const initPageEvents = () => {
 70 
const initPageEvents = () => {
71 
    if (initialized) {
 71 
    if (initialized) {
72 
        return;
 72 
        return;
73 
    }
 73 
    }
74 
    // Hide all subpanels when hidind a dropdown.
 74 
    // Hide all subpanels when hiding a dropdown.
75 
    // This is using JQuery because of BS4 events. JQuery won't be needed with BS5.
 - 
 
76 
    jQuery(document).on(BootstrapEvents.hideDropdown, () => {
 75 
    document.addEventListener(BootstrapEvents.hideDropdown, () => {
77 
        document.querySelectorAll(`${Selectors.subPanelContent}.show`).forEach(visibleSubPanel => {
 76 
        document.querySelectorAll(`${Selectors.subPanelContent}.show`).forEach(visibleSubPanel => {
78 
            const dropdownSubPanel = visibleSubPanel.closest(Selectors.subPanel);
 77 
            const dropdownSubPanel = visibleSubPanel.closest(Selectors.subPanel);
79 
            const subPanel = new SubPanel(dropdownSubPanel);
 78 
            const subPanel = new SubPanel(dropdownSubPanel);
80 
            subPanel.setVisibility(false);
 79 
            subPanel.setVisibility(false);
81 
        });
 80 
        });
Línea 134... Línea 133...
134 
 
 133 
 
135 
        // Full element events.
 134 
        // Full element events.
136 
        this.element.addEventListener('focusin', this._mainElementFocusInHandler.bind(this));
 135 
        this.element.addEventListener('focusin', this._mainElementFocusInHandler.bind(this));
137 
        // Menu Item events.
 136 
        // Menu Item events.
- 
 
 137 
        this.menuItem.addEventListener('click', this._menuItemClickHandler.bind(this));
- 
 
 138 
        // Use the Bootstrap key handler for the menu item key handler.
- 
 
 139 
        // This will avoid Boostrap Dropdown handler to prevent the propagation to the subpanel.
138 
        this.menuItem.addEventListener('click', this._menuItemClickHandler.bind(this));
 140 
        const subpanelMenuItemSelector = `#${this.element.id}${Selectors.subPanelMenuItem}`;
139 
        this.menuItem.addEventListener('keydown', this._menuItemKeyHandler.bind(this));
 141 
        EventHandler.on(document, 'keydown', subpanelMenuItemSelector, this._menuItemKeyHandler.bind(this));
140 
        if (!isBehatSite()) {
 142 
        if (!isBehatSite()) {
141 
            // Behat in Chrome usually move the mouse over the page when trying clicking a subpanel element.
 143 
            // Behat in Chrome usually move the mouse over the page when trying clicking a subpanel element.
142 
            // If the menu has more than one subpanel this could cause closing the subpanel by mistake.
 144 
            // If the menu has more than one subpanel this could cause closing the subpanel by mistake.
143 
            this.menuItem.addEventListener('mouseover', this._menuItemHoverHandler.bind(this));
 145 
            this.menuItem.addEventListener('mouseover', this._menuItemHoverHandler.bind(this));