[ Index ]

PHP Cross Reference of WordPress Trunk (Updated Daily)

Search

title

Body

[close]

/wp-includes/blocks/ -> navigation.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  /******/ !function() {
   8  /******/     // define getter functions for harmony exports
   9  /******/     __webpack_require__.d = function(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  /******/ !function() {
  20  /******/     __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
  21  /******/ }();
  22  /******/ 
  23  /************************************************************************/
  24  var __webpack_exports__ = {};
  25  
  26  ;// CONCATENATED MODULE: external "@wordpress/interactivity"
  27  var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
  28  var y = x => () => x
  29  var 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 });
  30  ;// CONCATENATED MODULE: ./node_modules/@wordpress/block-library/build-module/navigation/constants.js
  31  const DEFAULT_BLOCK = {
  32    name: 'core/navigation-link'
  33  };
  34  const ALLOWED_BLOCKS = (/* unused pure expression or super */ null && (['core/navigation-link', 'core/search', 'core/social-links', 'core/page-list', 'core/spacer', 'core/home-link', 'core/site-title', 'core/site-logo', 'core/navigation-submenu', 'core/loginout', 'core/buttons']));
  35  const PRIORITIZED_INSERTER_BLOCKS = (/* unused pure expression or super */ null && (['core/navigation-link/page', 'core/navigation-link']));
  36  
  37  // These parameters must be kept aligned with those in
  38  // lib/compat/wordpress-6.3/navigation-block-preloading.php
  39  // and
  40  // edit-site/src/components/sidebar-navigation-screen-navigation-menus/constants.js
  41  const PRELOADED_NAVIGATION_MENUS_QUERY = {
  42    per_page: 100,
  43    status: ['publish', 'draft'],
  44    order: 'desc',
  45    orderby: 'date'
  46  };
  47  const SELECT_NAVIGATION_MENUS_ARGS = ['postType', 'wp_navigation', PRELOADED_NAVIGATION_MENUS_QUERY];
  48  const NAVIGATION_MOBILE_COLLAPSE = '600px';
  49  ;// CONCATENATED MODULE: ./node_modules/@wordpress/block-library/build-module/navigation/view.js
  50  /**
  51   * WordPress dependencies
  52   */
  53  
  54  
  55  /**
  56   * Internal dependencies
  57   */
  58  
  59  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^="-"])'];
  60  
  61  // This is a fix for Safari in iOS/iPadOS. Without it, Safari doesn't focus out
  62  // when the user taps in the body. It can be removed once we add an overlay to
  63  // capture the clicks, instead of relying on the focusout event.
  64  document.addEventListener('click', () => {});
  65  const {
  66    state,
  67    actions
  68  } = (0,interactivity_namespaceObject.store)('core/navigation', {
  69    state: {
  70      get roleAttribute() {
  71        const ctx = (0,interactivity_namespaceObject.getContext)();
  72        return ctx.type === 'overlay' && state.isMenuOpen ? 'dialog' : null;
  73      },
  74      get ariaModal() {
  75        const ctx = (0,interactivity_namespaceObject.getContext)();
  76        return ctx.type === 'overlay' && state.isMenuOpen ? 'true' : null;
  77      },
  78      get ariaLabel() {
  79        const ctx = (0,interactivity_namespaceObject.getContext)();
  80        return ctx.type === 'overlay' && state.isMenuOpen ? ctx.ariaLabel : null;
  81      },
  82      get isMenuOpen() {
  83        // The menu is opened if either `click`, `hover` or `focus` is true.
  84        return Object.values(state.menuOpenedBy).filter(Boolean).length > 0;
  85      },
  86      get menuOpenedBy() {
  87        const ctx = (0,interactivity_namespaceObject.getContext)();
  88        return ctx.type === 'overlay' ? ctx.overlayOpenedBy : ctx.submenuOpenedBy;
  89      }
  90    },
  91    actions: {
  92      openMenuOnHover() {
  93        const {
  94          type,
  95          overlayOpenedBy
  96        } = (0,interactivity_namespaceObject.getContext)();
  97        if (type === 'submenu' &&
  98        // Only open on hover if the overlay is closed.
  99        Object.values(overlayOpenedBy || {}).filter(Boolean).length === 0) actions.openMenu('hover');
 100      },
 101      closeMenuOnHover() {
 102        actions.closeMenu('hover');
 103      },
 104      openMenuOnClick() {
 105        const ctx = (0,interactivity_namespaceObject.getContext)();
 106        const {
 107          ref
 108        } = (0,interactivity_namespaceObject.getElement)();
 109        ctx.previousFocus = ref;
 110        actions.openMenu('click');
 111      },
 112      closeMenuOnClick() {
 113        actions.closeMenu('click');
 114        actions.closeMenu('focus');
 115      },
 116      openMenuOnFocus() {
 117        actions.openMenu('focus');
 118      },
 119      toggleMenuOnClick() {
 120        const ctx = (0,interactivity_namespaceObject.getContext)();
 121        const {
 122          ref
 123        } = (0,interactivity_namespaceObject.getElement)();
 124        // 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
 125        if (window.document.activeElement !== ref) ref.focus();
 126        const {
 127          menuOpenedBy
 128        } = state;
 129        if (menuOpenedBy.click || menuOpenedBy.focus) {
 130          actions.closeMenu('click');
 131          actions.closeMenu('focus');
 132        } else {
 133          ctx.previousFocus = ref;
 134          actions.openMenu('click');
 135        }
 136      },
 137      handleMenuKeydown(event) {
 138        const {
 139          type,
 140          firstFocusableElement,
 141          lastFocusableElement
 142        } = (0,interactivity_namespaceObject.getContext)();
 143        if (state.menuOpenedBy.click) {
 144          // If Escape close the menu.
 145          if (event?.key === 'Escape') {
 146            actions.closeMenu('click');
 147            actions.closeMenu('focus');
 148            return;
 149          }
 150  
 151          // Trap focus if it is an overlay (main menu).
 152          if (type === 'overlay' && event.key === 'Tab') {
 153            // If shift + tab it change the direction.
 154            if (event.shiftKey && window.document.activeElement === firstFocusableElement) {
 155              event.preventDefault();
 156              lastFocusableElement.focus();
 157            } else if (!event.shiftKey && window.document.activeElement === lastFocusableElement) {
 158              event.preventDefault();
 159              firstFocusableElement.focus();
 160            }
 161          }
 162        }
 163      },
 164      handleMenuFocusout(event) {
 165        const {
 166          modal
 167        } = (0,interactivity_namespaceObject.getContext)();
 168        // If focus is outside modal, and in the document, close menu
 169        // event.target === The element losing focus
 170        // event.relatedTarget === The element receiving focus (if any)
 171        // When focusout is outsite the document,
 172        // `window.document.activeElement` doesn't change.
 173  
 174        // The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
 175        if (event.relatedTarget === null || !modal?.contains(event.relatedTarget) && event.target !== window.document.activeElement) {
 176          actions.closeMenu('click');
 177          actions.closeMenu('focus');
 178        }
 179      },
 180      openMenu(menuOpenedOn = 'click') {
 181        const {
 182          type
 183        } = (0,interactivity_namespaceObject.getContext)();
 184        state.menuOpenedBy[menuOpenedOn] = true;
 185        if (type === 'overlay') {
 186          // Add a `has-modal-open` class to the <html> root.
 187          document.documentElement.classList.add('has-modal-open');
 188        }
 189      },
 190      closeMenu(menuClosedOn = 'click') {
 191        const ctx = (0,interactivity_namespaceObject.getContext)();
 192        state.menuOpenedBy[menuClosedOn] = false;
 193        // Check if the menu is still open or not.
 194        if (!state.isMenuOpen) {
 195          if (ctx.modal?.contains(window.document.activeElement)) {
 196            ctx.previousFocus?.focus();
 197          }
 198          ctx.modal = null;
 199          ctx.previousFocus = null;
 200          if (ctx.type === 'overlay') {
 201            document.documentElement.classList.remove('has-modal-open');
 202          }
 203        }
 204      }
 205    },
 206    callbacks: {
 207      initMenu() {
 208        const ctx = (0,interactivity_namespaceObject.getContext)();
 209        const {
 210          ref
 211        } = (0,interactivity_namespaceObject.getElement)();
 212        if (state.isMenuOpen) {
 213          const focusableElements = ref.querySelectorAll(focusableSelectors);
 214          ctx.modal = ref;
 215          ctx.firstFocusableElement = focusableElements[0];
 216          ctx.lastFocusableElement = focusableElements[focusableElements.length - 1];
 217        }
 218      },
 219      focusFirstElement() {
 220        const {
 221          ref
 222        } = (0,interactivity_namespaceObject.getElement)();
 223        if (state.isMenuOpen) {
 224          const focusableElements = ref.querySelectorAll(focusableSelectors);
 225          focusableElements?.[0]?.focus();
 226        }
 227      },
 228      initNav() {
 229        const context = (0,interactivity_namespaceObject.getContext)();
 230        const mediaQuery = window.matchMedia(`(max-width: $NAVIGATION_MOBILE_COLLAPSE})`);
 231  
 232        // Run once to set the initial state.
 233        context.isCollapsed = mediaQuery.matches;
 234        function handleCollapse(event) {
 235          context.isCollapsed = event.matches;
 236        }
 237  
 238        // Run on resize to update the state.
 239        mediaQuery.addEventListener('change', handleCollapse);
 240  
 241        // Remove the listener when the component is unmounted.
 242        return () => {
 243          mediaQuery.removeEventListener('change', handleCollapse);
 244        };
 245      }
 246    }
 247  });


Generated : Wed Jan 31 08:20:02 2024 Cross-referenced by PHPXref