Файловый менеджер

Файловый менеджер - Редактировать - /home/harasnat/www/learning/lib/amd/src/local/dropdown/dialog.js

Назад
// 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 <http://www.gnu.org/licenses/>. /** * Dropdown status JS controls. * * @module core/local/dropdown/dialog * @copyright 2023 Ferran Recio <ferran@moodle.com> * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later / // The jQuery module is only used for interacting with Bootstrap 4. It can be removed when MDL-71979 is integrated. import jQuery from 'jquery'; import { firstFocusableElement, lastFocusableElement, previousFocusableElement, nextFocusableElement, } from 'core/pagehelpers'; import Pending from 'core/pending'; const Selectors = { dropdownButton: '[data-for="dropdowndialog_button"]', dropdownDialog: '[data-for="dropdowndialog_dialog"]', }; /* * Dropdown dialog class. * @private / export class DropdownDialog { /* * Constructor. * @param {HTMLElement} element The element to initialize. / constructor(element) { this.element = element; this.button = element.querySelector(Selectors.dropdownButton); this.panel = element.querySelector(Selectors.dropdownDialog); } /* * Initialize the subpanel element. * * This method adds the event listeners to the subpanel and the position classes. / init() { if (this.element.dataset.dropdownDialogInitialized) { return; } // Menu Item events. this.button.addEventListener('keydown', this._buttonKeyHandler.bind(this)); // Subpanel content events. this.panel.addEventListener('keydown', this._contentKeyHandler.bind(this)); this.element.dataset.dropdownDialogInitialized = true; } /* * Dropdown button key handler. * @param {Event} event * @private / _buttonKeyHandler(event) { if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') { event.stopPropagation(); event.preventDefault(); this.setVisible(false); return; } if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') { event.stopPropagation(); event.preventDefault(); this.setVisible(true); this._focusPanelContent(); } } /* * Sub panel content key handler. * @param {Event} event * @private / _contentKeyHandler(event) { let newFocus = null; if (event.key === 'End') { newFocus = lastFocusableElement(this.panel); } if (event.key === 'Home') { newFocus = firstFocusableElement(this.panel); } if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') { newFocus = previousFocusableElement(this.panel, false); if (!newFocus) { newFocus = this.button; } } if (event.key === 'ArrowDown' \|\| event.key === 'ArrowRight') { newFocus = nextFocusableElement(this.panel, false); } if (newFocus !== null) { event.stopPropagation(); event.preventDefault(); newFocus.focus(); } } /* * Focus on the first focusable element of the subpanel. * @private / _focusPanelContent() { const pendingPromise = new Pending('core/dropdown/dialog:focuscontent'); // Some Bootstrap events are triggered after the click event. // To prevent this from affecting the focus we wait a bit. setTimeout(() => { const firstFocusable = firstFocusableElement(this.panel); if (firstFocusable) { firstFocusable.focus(); } pendingPromise.resolve(); }, 100); } /* * Set the visibility of a subpanel. * @param {Boolean} visible true if the subpanel should be visible. / setVisible(visible) { if (visible === this.isVisible()) { return; } // All jQuery in this code can be replaced when MDL-71979 is integrated. jQuery(this.button).dropdown('toggle'); } /* * Get the visibility of a subpanel. * @returns {Boolean} true if the subpanel is visible. / isVisible() { return this.button.getAttribute('aria-expanded') === 'true'; } /* * Set the content of the button. * @param {String} content / setButtonContent(content) { this.button.innerHTML = content; } /* * Return the main dropdown HTML element. * @returns {HTMLElement} The element. / getElement() { return this.element; } } /* * Get the dropdown dialog instance from a selector. * @param {string} selector The query selector to init. * @returns {DropdownDialog\|null} The dropdown dialog instance if any. / export const getDropdownDialog = (selector) => { const dropdownElement = document.querySelector(selector); if (!dropdownElement) { return null; } return new DropdownDialog(dropdownElement); }; /* * Initialize module. * * @method * @param {string} selector The query selector to init. */ export const init = (selector) => { const dropdown = getDropdownDialog(selector); if (!dropdown) { throw new Error(`Dopdown dialog element not found: ${selector}`); } dropdown.init(); };

| ver. 1.4 | Github | .