[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-includes/blocks/navigation/ -> view.js (source)

   1  import * as __WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__ from "@wordpress/interactivity";
   2  /******/ // The require scope
   3  /******/ var __webpack_require__ = {};
   4  /******/ 
   5  /************************************************************************/
   6  /******/ /* webpack/runtime/define property getters */
   7  /******/ (() => {
   8  /******/     // define getter functions for harmony exports
   9  /******/     __webpack_require__.d = (exports, definition) => {
  10  /******/         for(var key in definition) {
  11  /******/             if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
  12  /******/                 Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
  13  /******/             }
  14  /******/         }
  15  /******/     };
  16  /******/ })();
  17  /******/ 
  18  /******/ /* webpack/runtime/hasOwnProperty shorthand */
  19  /******/ (() => {
  20  /******/     __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
  21  /******/ })();
  22  /******/ 
  23  /************************************************************************/
  24  var __webpack_exports__ = {};
  25  
  26  ;// external "@wordpress/interactivity"
  27  var x = (y) => {
  28      var x = {}; __webpack_require__.d(x, y); return x
  29  } 
  30  var y = (x) => (() => (x))
  31  const interactivity_namespaceObject = x({ ["getContext"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getContext), ["getElement"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getElement), ["store"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.store) });
  32  ;// ./node_modules/@wordpress/block-library/build-module/navigation/view.js
  33  /* wp:polyfill */
  34  /**
  35   * WordPress dependencies
  36   */
  37  
  38  const focusableSelectors = ['a[href]', 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])', 'select:not([disabled]):not([aria-hidden])', 'textarea:not([disabled]):not([aria-hidden])', 'button:not([disabled]):not([aria-hidden])', '[contenteditable]', '[tabindex]:not([tabindex^="-"])'];
  39  
  40  // This is a fix for Safari in iOS/iPadOS. Without it, Safari doesn't focus out
  41  // when the user taps in the body. It can be removed once we add an overlay to
  42  // capture the clicks, instead of relying on the focusout event.
  43  document.addEventListener('click', () => {});
  44  const {
  45    state,
  46    actions
  47  } = (0,interactivity_namespaceObject.store)('core/navigation', {
  48    state: {
  49      get roleAttribute() {
  50        const ctx = (0,interactivity_namespaceObject.getContext)();
  51        return ctx.type === 'overlay' && state.isMenuOpen ? 'dialog' : null;
  52      },
  53      get ariaModal() {
  54        const ctx = (0,interactivity_namespaceObject.getContext)();
  55        return ctx.type === 'overlay' && state.isMenuOpen ? 'true' : null;
  56      },
  57      get ariaLabel() {
  58        const ctx = (0,interactivity_namespaceObject.getContext)();
  59        return ctx.type === 'overlay' && state.isMenuOpen ? ctx.ariaLabel : null;
  60      },
  61      get isMenuOpen() {
  62        // The menu is opened if either `click`, `hover` or `focus` is true.
  63        return Object.values(state.menuOpenedBy).filter(Boolean).length > 0;
  64      },
  65      get menuOpenedBy() {
  66        const ctx = (0,interactivity_namespaceObject.getContext)();
  67        return ctx.type === 'overlay' ? ctx.overlayOpenedBy : ctx.submenuOpenedBy;
  68      }
  69    },
  70    actions: {
  71      openMenuOnHover() {
  72        const {
  73          type,
  74          overlayOpenedBy
  75        } = (0,interactivity_namespaceObject.getContext)();
  76        if (type === 'submenu' &&
  77        // Only open on hover if the overlay is closed.
  78        Object.values(overlayOpenedBy || {}).filter(Boolean).length === 0) {
  79          actions.openMenu('hover');
  80        }
  81      },
  82      closeMenuOnHover() {
  83        const {
  84          type,
  85          overlayOpenedBy
  86        } = (0,interactivity_namespaceObject.getContext)();
  87        if (type === 'submenu' &&
  88        // Only close on hover if the overlay is closed.
  89        Object.values(overlayOpenedBy || {}).filter(Boolean).length === 0) {
  90          actions.closeMenu('hover');
  91        }
  92      },
  93      openMenuOnClick() {
  94        const ctx = (0,interactivity_namespaceObject.getContext)();
  95        const {
  96          ref
  97        } = (0,interactivity_namespaceObject.getElement)();
  98        ctx.previousFocus = ref;
  99        actions.openMenu('click');
 100      },
 101      closeMenuOnClick() {
 102        actions.closeMenu('click');
 103        actions.closeMenu('focus');
 104      },
 105      openMenuOnFocus() {
 106        actions.openMenu('focus');
 107      },
 108      toggleMenuOnClick() {
 109        const ctx = (0,interactivity_namespaceObject.getContext)();
 110        const {
 111          ref
 112        } = (0,interactivity_namespaceObject.getElement)();
 113        // Safari won't send focus to the clicked element, so we need to manually place it: https://bugs.webkit.org/show_bug.cgi?id=22261
 114        if (window.document.activeElement !== ref) {
 115          ref.focus();
 116        }
 117        const {
 118          menuOpenedBy
 119        } = state;
 120        if (menuOpenedBy.click || menuOpenedBy.focus) {
 121          actions.closeMenu('click');
 122          actions.closeMenu('focus');
 123        } else {
 124          ctx.previousFocus = ref;
 125          actions.openMenu('click');
 126        }
 127      },
 128      handleMenuKeydown(event) {
 129        const {
 130          type,
 131          firstFocusableElement,
 132          lastFocusableElement
 133        } = (0,interactivity_namespaceObject.getContext)();
 134        if (state.menuOpenedBy.click) {
 135          // If Escape close the menu.
 136          if (event?.key === 'Escape') {
 137            actions.closeMenu('click');
 138            actions.closeMenu('focus');
 139            return;
 140          }
 141  
 142          // Trap focus if it is an overlay (main menu).
 143          if (type === 'overlay' && event.key === 'Tab') {
 144            // If shift + tab it change the direction.
 145            if (event.shiftKey && window.document.activeElement === firstFocusableElement) {
 146              event.preventDefault();
 147              lastFocusableElement.focus();
 148            } else if (!event.shiftKey && window.document.activeElement === lastFocusableElement) {
 149              event.preventDefault();
 150              firstFocusableElement.focus();
 151            }
 152          }
 153        }
 154      },
 155      handleMenuFocusout(event) {
 156        const {
 157          modal,
 158          type
 159        } = (0,interactivity_namespaceObject.getContext)();
 160        // If focus is outside modal, and in the document, close menu
 161        // event.target === The element losing focus
 162        // event.relatedTarget === The element receiving focus (if any)
 163        // When focusout is outside the document,
 164        // `window.document.activeElement` doesn't change.
 165  
 166        // The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
 167        if (event.relatedTarget === null || !modal?.contains(event.relatedTarget) && event.target !== window.document.activeElement && type === 'submenu') {
 168          actions.closeMenu('click');
 169          actions.closeMenu('focus');
 170        }
 171      },
 172      openMenu(menuOpenedOn = 'click') {
 173        const {
 174          type
 175        } = (0,interactivity_namespaceObject.getContext)();
 176        state.menuOpenedBy[menuOpenedOn] = true;
 177        if (type === 'overlay') {
 178          // Add a `has-modal-open` class to the <html> root.
 179          document.documentElement.classList.add('has-modal-open');
 180        }
 181      },
 182      closeMenu(menuClosedOn = 'click') {
 183        const ctx = (0,interactivity_namespaceObject.getContext)();
 184        state.menuOpenedBy[menuClosedOn] = false;
 185        // Check if the menu is still open or not.
 186        if (!state.isMenuOpen) {
 187          if (ctx.modal?.contains(window.document.activeElement)) {
 188            ctx.previousFocus?.focus();
 189          }
 190          ctx.modal = null;
 191          ctx.previousFocus = null;
 192          if (ctx.type === 'overlay') {
 193            document.documentElement.classList.remove('has-modal-open');
 194          }
 195        }
 196      }
 197    },
 198    callbacks: {
 199      initMenu() {
 200        const ctx = (0,interactivity_namespaceObject.getContext)();
 201        const {
 202          ref
 203        } = (0,interactivity_namespaceObject.getElement)();
 204        if (state.isMenuOpen) {
 205          const focusableElements = ref.querySelectorAll(focusableSelectors);
 206          ctx.modal = ref;
 207          ctx.firstFocusableElement = focusableElements[0];
 208          ctx.lastFocusableElement = focusableElements[focusableElements.length - 1];
 209        }
 210      },
 211      focusFirstElement() {
 212        const {
 213          ref
 214        } = (0,interactivity_namespaceObject.getElement)();
 215        if (state.isMenuOpen) {
 216          const focusableElements = ref.querySelectorAll(focusableSelectors);
 217          focusableElements?.[0]?.focus();
 218        }
 219      }
 220    }
 221  }, {
 222    lock: true
 223  });
 224  


Generated : Sat Feb 22 08:20:01 2025 Cross-referenced by PHPXref