WebSVN – Moodle – Diff – /theme/boost/amd/src/drawers.js

 import {dispatchEvent} from 'core/event_dispatcher';
 import {debounce} from 'core/utils';
 import {isSmall, isLarge} from 'core/pagehelpers';
 import Pending from 'core/pending';
 import {setUserPreference} from 'core_user/repository';
-// The jQuery module is only used for interacting with Boostrap 4. It can we removed when MDL-71979 is integrated.
+import Tooltip from './bootstrap/tooltip';
-import jQuery from 'jquery';
+import * as FocusLock from 'core/local/aria/focuslock';
 let backdropPromise = null;
  * @param {boolean} enableOnBlur if the tooltip must be re-enabled on blur.
  * @private
  */
 const disableButtonTooltip = (button, enableOnBlur) => {
     if (button.hasAttribute('data-original-title')) {
-        // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
-        jQuery(button).tooltip('disable');
+        Tooltip.getInstance(button).disable();
         button.setAttribute('title', button.dataset.originalTitle);
     } else {
         button.dataset.disabledToggle = button.dataset.toggle;
-        button.removeAttribute('data-toggle');
+        button.removeAttribute('data-bs-toggle');
+    }
     if (enableOnBlur) {
         button.dataset.restoreTooltipOnBlur = true;
+    }
 };
+ *
  * @param {HTMLElement} button the button element
  * @private
  */
 const enableButtonTooltip = (button) => {
-    // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
-    if (button.hasAttribute('data-original-title')) {
+    if (button.hasAttribute('data-bs-original-title')) {
-        jQuery(button).tooltip('enable');
+        Tooltip.getInstance(button).enable();
         button.removeAttribute('title');
     } else if (button.dataset.disabledToggle) {
         button.dataset.toggle = button.dataset.disabledToggle;
-        jQuery(button).tooltip();
+        new Tooltip(button);
+    }
     delete button.dataset.restoreTooltipOnBlur;
 };
         // Remove open tooltip if still visible.
-        let openButton = getDrawerOpenButton(this.drawerNode.id);
-        if (openButton && openButton.hasAttribute('data-original-title')) {
+        let openButton = getDrawerOpenButton(this.drawerNode.id);
-            // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
+        if (openButton && openButton.hasAttribute('data-original-title')) {
-            jQuery(openButton)?.tooltip('hide');
+            Tooltip.getInstance(openButton)?.hide();
+        }
                 const pageWrapper = document.getElementById('page');
                 pageWrapper.style.overflow = 'hidden';
                 return backdrop;
             })
+            .catch(() => {
+                return;
-            .catch();
+            });
+        }
         // Show close button and header content once the drawer is fully opened.
             closeButton.classList.toggle('hidden', false);
             headerContent.classList.toggle('hidden', false);
             if (focusOnCloseButton) {
                 closeButton.focus();
+            }
+            // On small devices, the drawer must have a trap focus once the focus is inside
+            // to prevent the user from focussing on covered elements.
+            if (isSmall()) {
+                FocusLock.trapFocus(this.drawerNode);
+            }
             pendingPromise.resolve();
         }, 300);
         this.dispatchEvent(Drawers.eventTypes.drawerShown);
+     *
      * @param {object} args
      * @param {boolean} [args.focusOnOpenButton=true] Whether to alter page focus when opening the drawer
      * @param {boolean} [args.updatePreferences=true] Whether to update the user prewference
      */
-    closeDrawer({focusOnOpenButton = true, updatePreferences = true} = {}) {
+        closeDrawer({focusOnOpenButton = true, updatePreferences = true} = {}) {
         const pendingPromise = new Pending('theme_boost/drawers:close');
         closeButton?.classList.toggle('hidden', true);
         const headerContent = this.drawerNode.querySelector(SELECTORS.HEADERCONTENT);
         headerContent?.classList.toggle('hidden', true);
         // Remove the close button tooltip if visible.
         if (closeButton.hasAttribute('data-original-title')) {
-            // The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
-            jQuery(closeButton)?.tooltip('hide');
+            Tooltip.getInstance(closeButton)?.hide();
+        }
         const preference = this.drawerNode.dataset.preference;
         if (preference && updatePreferences && !isSmall()) {
                 const pageWrapper = document.getElementById('page');
                 pageWrapper.style.overflow = 'visible';
+            }
             return backdrop;
         })
-        .catch();
+        .catch(() => {
+                return;
+        });
+        if (isSmall()) {
+            FocusLock.untrapFocus();
+        }
         // Move focus to the open drawer (or toggler) button once the drawer is hidden.
         let openButton = getDrawerOpenButton(this.drawerNode.id);
         if (openButton) {
             disableButtonTooltip(openButton, true);
         if (isSmall()) {
             let anyOpen = false;
             drawerMap.forEach(drawerInstance => {
                 disableDrawerTooltips(drawerInstance.drawerNode);
                 if (drawerInstance.isOpen) {
+                    const currentFocus = document.activeElement;
+                    const drawerContent = drawerInstance.drawerNode.querySelector(SELECTORS.DRAWERCONTENT);
+                    const shouldClose = drawerInstance.closeOnResize && (!drawerContent || !drawerContent.contains(currentFocus));
-                    if (drawerInstance.closeOnResize) {
+                    if (shouldClose) {
                         drawerInstance.closeDrawer();
                     } else {
                         anyOpen = true;
+                    }
+                }
             getBackdrop().then(backdrop => backdrop.hide()).catch();
+        }
     };
+    document.addEventListener('scroll', () => {
+        const currentFocus = document.activeElement;
+        const drawerContentElements = document.querySelectorAll(SELECTORS.DRAWERCONTENT);
+        // Check if the current focus is within any drawer content.
+        if (Array.from(drawerContentElements).some(drawer => drawer.contains(currentFocus))) {
+            return;
     document.addEventListener('scroll', () => {
         const body = document.querySelector('body');
         if (window.scrollY >= window.innerHeight) {
             body.classList.add(CLASSES.SCROLLED);
         } else {
     const preventOverlap = debounce(Drawers.preventCoveringFocusedElement, 100);
     document.addEventListener('focusin', preventOverlap);
     document.addEventListener('focusout', preventOverlap);
-    window.addEventListener('resize', debounce(closeOnResizeListener, 400));
+    window.addEventListener('resize', debounce(closeOnResizeListener, 400, {pending: true}));
 };

Proyectos de Subversion Moodle

(root)/theme/boost/amd/src/drawers.js – Rev 1 → 1441