wp/wp-includes/blocks/navigation/view.js
changeset 21 48c4eec2b7e6
parent 19 3d72ae0968f4
child 22 8c2e4d02f4ef
equal deleted inserted replaced
20:7b1b88e27a20 21:48c4eec2b7e6
     1 /******/ (function() { // webpackBootstrap
     1 import * as __WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__ from "@wordpress/interactivity";
     2 /******/ 	"use strict";
     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 /************************************************************************/
     3 var __webpack_exports__ = {};
    24 var __webpack_exports__ = {};
     4 
    25 
     5 ;// CONCATENATED MODULE: ./node_modules/micromodal/dist/micromodal.es.js
    26 ;// CONCATENATED MODULE: external "@wordpress/interactivity"
     6 function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function t(e){return function(e){if(Array.isArray(e))return o(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(!e)return;if("string"==typeof e)return o(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return o(e,t)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var o=0,n=new Array(t);o<t;o++)n[o]=e[o];return n}var n,i,a,r,s,l=(n=["a[href]","area[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])","iframe","object","embed","[contenteditable]",'[tabindex]:not([tabindex^="-"])'],i=function(){function o(e){var n=e.targetModal,i=e.triggers,a=void 0===i?[]:i,r=e.onShow,s=void 0===r?function(){}:r,l=e.onClose,c=void 0===l?function(){}:l,d=e.openTrigger,u=void 0===d?"data-micromodal-trigger":d,f=e.closeTrigger,h=void 0===f?"data-micromodal-close":f,v=e.openClass,g=void 0===v?"is-open":v,m=e.disableScroll,b=void 0!==m&&m,y=e.disableFocus,p=void 0!==y&&y,w=e.awaitCloseAnimation,E=void 0!==w&&w,k=e.awaitOpenAnimation,M=void 0!==k&&k,A=e.debugMode,C=void 0!==A&&A;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),this.modal=document.getElementById(n),this.config={debugMode:C,disableScroll:b,openTrigger:u,closeTrigger:h,openClass:g,onShow:s,onClose:c,awaitCloseAnimation:E,awaitOpenAnimation:M,disableFocus:p},a.length>0&&this.registerTriggers.apply(this,t(a)),this.onClick=this.onClick.bind(this),this.onKeydown=this.onKeydown.bind(this)}var i,a,r;return i=o,(a=[{key:"registerTriggers",value:function(){for(var e=this,t=arguments.length,o=new Array(t),n=0;n<t;n++)o[n]=arguments[n];o.filter(Boolean).forEach((function(t){t.addEventListener("click",(function(t){return e.showModal(t)}))}))}},{key:"showModal",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(this.activeElement=document.activeElement,this.modal.setAttribute("aria-hidden","false"),this.modal.classList.add(this.config.openClass),this.scrollBehaviour("disable"),this.addEventListeners(),this.config.awaitOpenAnimation){var o=function t(){e.modal.removeEventListener("animationend",t,!1),e.setFocusToFirstNode()};this.modal.addEventListener("animationend",o,!1)}else this.setFocusToFirstNode();this.config.onShow(this.modal,this.activeElement,t)}},{key:"closeModal",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=this.modal;if(this.modal.setAttribute("aria-hidden","true"),this.removeEventListeners(),this.scrollBehaviour("enable"),this.activeElement&&this.activeElement.focus&&this.activeElement.focus(),this.config.onClose(this.modal,this.activeElement,e),this.config.awaitCloseAnimation){var o=this.config.openClass;this.modal.addEventListener("animationend",(function e(){t.classList.remove(o),t.removeEventListener("animationend",e,!1)}),!1)}else t.classList.remove(this.config.openClass)}},{key:"closeModalById",value:function(e){this.modal=document.getElementById(e),this.modal&&this.closeModal()}},{key:"scrollBehaviour",value:function(e){if(this.config.disableScroll){var t=document.querySelector("body");switch(e){case"enable":Object.assign(t.style,{overflow:""});break;case"disable":Object.assign(t.style,{overflow:"hidden"})}}}},{key:"addEventListeners",value:function(){this.modal.addEventListener("touchstart",this.onClick),this.modal.addEventListener("click",this.onClick),document.addEventListener("keydown",this.onKeydown)}},{key:"removeEventListeners",value:function(){this.modal.removeEventListener("touchstart",this.onClick),this.modal.removeEventListener("click",this.onClick),document.removeEventListener("keydown",this.onKeydown)}},{key:"onClick",value:function(e){(e.target.hasAttribute(this.config.closeTrigger)||e.target.parentNode.hasAttribute(this.config.closeTrigger))&&(e.preventDefault(),e.stopPropagation(),this.closeModal(e))}},{key:"onKeydown",value:function(e){27===e.keyCode&&this.closeModal(e),9===e.keyCode&&this.retainFocus(e)}},{key:"getFocusableNodes",value:function(){var e=this.modal.querySelectorAll(n);return Array.apply(void 0,t(e))}},{key:"setFocusToFirstNode",value:function(){var e=this;if(!this.config.disableFocus){var t=this.getFocusableNodes();if(0!==t.length){var o=t.filter((function(t){return!t.hasAttribute(e.config.closeTrigger)}));o.length>0&&o[0].focus(),0===o.length&&t[0].focus()}}}},{key:"retainFocus",value:function(e){var t=this.getFocusableNodes();if(0!==t.length)if(t=t.filter((function(e){return null!==e.offsetParent})),this.modal.contains(document.activeElement)){var o=t.indexOf(document.activeElement);e.shiftKey&&0===o&&(t[t.length-1].focus(),e.preventDefault()),!e.shiftKey&&t.length>0&&o===t.length-1&&(t[0].focus(),e.preventDefault())}else t[0].focus()}}])&&e(i.prototype,a),r&&e(i,r),o}(),a=null,r=function(e){if(!document.getElementById(e))return console.warn("MicroModal: ❗Seems like you have missed %c'".concat(e,"'"),"background-color: #f8f9fa;color: #50596c;font-weight: bold;","ID somewhere in your code. Refer example below to resolve it."),console.warn("%cExample:","background-color: #f8f9fa;color: #50596c;font-weight: bold;",'<div class="modal" id="'.concat(e,'"></div>')),!1},s=function(e,t){if(function(e){e.length<=0&&(console.warn("MicroModal: ❗Please specify at least one %c'micromodal-trigger'","background-color: #f8f9fa;color: #50596c;font-weight: bold;","data attribute."),console.warn("%cExample:","background-color: #f8f9fa;color: #50596c;font-weight: bold;",'<a href="#" data-micromodal-trigger="my-modal"></a>'))}(e),!t)return!0;for(var o in t)r(o);return!0},{init:function(e){var o=Object.assign({},{openTrigger:"data-micromodal-trigger"},e),n=t(document.querySelectorAll("[".concat(o.openTrigger,"]"))),r=function(e,t){var o=[];return e.forEach((function(e){var n=e.attributes[t].value;void 0===o[n]&&(o[n]=[]),o[n].push(e)})),o}(n,o.openTrigger);if(!0!==o.debugMode||!1!==s(n,r))for(var l in r){var c=r[l];o.targetModal=l,o.triggers=t(c),a=new i(o)}},show:function(e,t){var o=t||{};o.targetModal=e,!0===o.debugMode&&!1===r(e)||(a&&a.removeEventListeners(),(a=new i(o)).showModal())},close:function(e){e?a.closeModalById(e):a.closeModal()}});"undefined"!=typeof window&&(window.MicroModal=l);/* harmony default export */ var micromodal_es = (l);
    27 var x = (y) => {
     7 
    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) });
     8 ;// CONCATENATED MODULE: ./node_modules/@wordpress/block-library/build-module/navigation/view.js
    32 ;// CONCATENATED MODULE: ./node_modules/@wordpress/block-library/build-module/navigation/view.js
     9 /**
    33 /**
    10  * External dependencies
    34  * WordPress dependencies
    11  */
    35  */
    12  // Responsive navigation toggle.
    36 
    13 
    37 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^="-"])'];
    14 function navigationToggleModal(modal) {
    38 
    15   const dialogContainer = modal.querySelector(`.wp-block-navigation__responsive-dialog`);
    39 // This is a fix for Safari in iOS/iPadOS. Without it, Safari doesn't focus out
    16   const isHidden = 'true' === modal.getAttribute('aria-hidden');
    40 // when the user taps in the body. It can be removed once we add an overlay to
    17   modal.classList.toggle('has-modal-open', !isHidden);
    41 // capture the clicks, instead of relying on the focusout event.
    18   dialogContainer.toggleAttribute('aria-modal', !isHidden);
    42 document.addEventListener('click', () => {});
    19 
    43 const {
    20   if (isHidden) {
    44   state,
    21     dialogContainer.removeAttribute('role');
    45   actions
    22     dialogContainer.removeAttribute('aria-modal');
    46 } = (0,interactivity_namespaceObject.store)('core/navigation', {
    23   } else {
    47   state: {
    24     dialogContainer.setAttribute('role', 'dialog');
    48     get roleAttribute() {
    25     dialogContainer.setAttribute('aria-modal', 'true');
    49       const ctx = (0,interactivity_namespaceObject.getContext)();
    26   } // Add a class to indicate the modal is open.
    50       return ctx.type === 'overlay' && state.isMenuOpen ? 'dialog' : null;
    27 
    51     },
    28 
    52     get ariaModal() {
    29   const htmlElement = document.documentElement;
    53       const ctx = (0,interactivity_namespaceObject.getContext)();
    30   htmlElement.classList.toggle('has-modal-open');
    54       return ctx.type === 'overlay' && state.isMenuOpen ? 'true' : null;
    31 } // Open on click functionality.
    55     },
    32 
    56     get ariaLabel() {
    33 
    57       const ctx = (0,interactivity_namespaceObject.getContext)();
    34 function closeSubmenus(element) {
    58       return ctx.type === 'overlay' && state.isMenuOpen ? ctx.ariaLabel : null;
    35   element.querySelectorAll('[aria-expanded="true"]').forEach(function (toggle) {
    59     },
    36     toggle.setAttribute('aria-expanded', 'false');
    60     get isMenuOpen() {
    37   });
    61       // The menu is opened if either `click`, `hover` or `focus` is true.
    38 }
    62       return Object.values(state.menuOpenedBy).filter(Boolean).length > 0;
    39 
    63     },
    40 function toggleSubmenuOnClick(event) {
    64     get menuOpenedBy() {
    41   const buttonToggle = event.target.closest('[aria-expanded]');
    65       const ctx = (0,interactivity_namespaceObject.getContext)();
    42   const isSubmenuOpen = buttonToggle.getAttribute('aria-expanded');
    66       return ctx.type === 'overlay' ? ctx.overlayOpenedBy : ctx.submenuOpenedBy;
    43 
    67     }
    44   if (isSubmenuOpen === 'true') {
    68   },
    45     closeSubmenus(buttonToggle.closest('.wp-block-navigation-item'));
    69   actions: {
    46   } else {
    70     openMenuOnHover() {
    47     // Close all sibling submenus.
    71       const {
    48     const parentElement = buttonToggle.closest('.wp-block-navigation-item');
    72         type,
    49     const navigationParent = buttonToggle.closest('.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list');
    73         overlayOpenedBy
    50     navigationParent.querySelectorAll('.wp-block-navigation-item').forEach(function (child) {
    74       } = (0,interactivity_namespaceObject.getContext)();
    51       if (child !== parentElement) {
    75       if (type === 'submenu' &&
    52         closeSubmenus(child);
    76       // Only open on hover if the overlay is closed.
    53       }
    77       Object.values(overlayOpenedBy || {}).filter(Boolean).length === 0) {
    54     }); // Open submenu.
    78         actions.openMenu('hover');
    55 
    79       }
    56     buttonToggle.setAttribute('aria-expanded', 'true');
    80     },
       
    81     closeMenuOnHover() {
       
    82       const {
       
    83         type,
       
    84         overlayOpenedBy
       
    85       } = (0,interactivity_namespaceObject.getContext)();
       
    86       if (type === 'submenu' &&
       
    87       // Only close on hover if the overlay is closed.
       
    88       Object.values(overlayOpenedBy || {}).filter(Boolean).length === 0) {
       
    89         actions.closeMenu('hover');
       
    90       }
       
    91     },
       
    92     openMenuOnClick() {
       
    93       const ctx = (0,interactivity_namespaceObject.getContext)();
       
    94       const {
       
    95         ref
       
    96       } = (0,interactivity_namespaceObject.getElement)();
       
    97       ctx.previousFocus = ref;
       
    98       actions.openMenu('click');
       
    99     },
       
   100     closeMenuOnClick() {
       
   101       actions.closeMenu('click');
       
   102       actions.closeMenu('focus');
       
   103     },
       
   104     openMenuOnFocus() {
       
   105       actions.openMenu('focus');
       
   106     },
       
   107     toggleMenuOnClick() {
       
   108       const ctx = (0,interactivity_namespaceObject.getContext)();
       
   109       const {
       
   110         ref
       
   111       } = (0,interactivity_namespaceObject.getElement)();
       
   112       // 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
       
   113       if (window.document.activeElement !== ref) {
       
   114         ref.focus();
       
   115       }
       
   116       const {
       
   117         menuOpenedBy
       
   118       } = state;
       
   119       if (menuOpenedBy.click || menuOpenedBy.focus) {
       
   120         actions.closeMenu('click');
       
   121         actions.closeMenu('focus');
       
   122       } else {
       
   123         ctx.previousFocus = ref;
       
   124         actions.openMenu('click');
       
   125       }
       
   126     },
       
   127     handleMenuKeydown(event) {
       
   128       const {
       
   129         type,
       
   130         firstFocusableElement,
       
   131         lastFocusableElement
       
   132       } = (0,interactivity_namespaceObject.getContext)();
       
   133       if (state.menuOpenedBy.click) {
       
   134         // If Escape close the menu.
       
   135         if (event?.key === 'Escape') {
       
   136           actions.closeMenu('click');
       
   137           actions.closeMenu('focus');
       
   138           return;
       
   139         }
       
   140 
       
   141         // Trap focus if it is an overlay (main menu).
       
   142         if (type === 'overlay' && event.key === 'Tab') {
       
   143           // If shift + tab it change the direction.
       
   144           if (event.shiftKey && window.document.activeElement === firstFocusableElement) {
       
   145             event.preventDefault();
       
   146             lastFocusableElement.focus();
       
   147           } else if (!event.shiftKey && window.document.activeElement === lastFocusableElement) {
       
   148             event.preventDefault();
       
   149             firstFocusableElement.focus();
       
   150           }
       
   151         }
       
   152       }
       
   153     },
       
   154     handleMenuFocusout(event) {
       
   155       const {
       
   156         modal,
       
   157         type
       
   158       } = (0,interactivity_namespaceObject.getContext)();
       
   159       // If focus is outside modal, and in the document, close menu
       
   160       // event.target === The element losing focus
       
   161       // event.relatedTarget === The element receiving focus (if any)
       
   162       // When focusout is outside the document,
       
   163       // `window.document.activeElement` doesn't change.
       
   164 
       
   165       // The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
       
   166       if (event.relatedTarget === null || !modal?.contains(event.relatedTarget) && event.target !== window.document.activeElement && type === 'submenu') {
       
   167         actions.closeMenu('click');
       
   168         actions.closeMenu('focus');
       
   169       }
       
   170     },
       
   171     openMenu(menuOpenedOn = 'click') {
       
   172       const {
       
   173         type
       
   174       } = (0,interactivity_namespaceObject.getContext)();
       
   175       state.menuOpenedBy[menuOpenedOn] = true;
       
   176       if (type === 'overlay') {
       
   177         // Add a `has-modal-open` class to the <html> root.
       
   178         document.documentElement.classList.add('has-modal-open');
       
   179       }
       
   180     },
       
   181     closeMenu(menuClosedOn = 'click') {
       
   182       const ctx = (0,interactivity_namespaceObject.getContext)();
       
   183       state.menuOpenedBy[menuClosedOn] = false;
       
   184       // Check if the menu is still open or not.
       
   185       if (!state.isMenuOpen) {
       
   186         if (ctx.modal?.contains(window.document.activeElement)) {
       
   187           ctx.previousFocus?.focus();
       
   188         }
       
   189         ctx.modal = null;
       
   190         ctx.previousFocus = null;
       
   191         if (ctx.type === 'overlay') {
       
   192           document.documentElement.classList.remove('has-modal-open');
       
   193         }
       
   194       }
       
   195     }
       
   196   },
       
   197   callbacks: {
       
   198     initMenu() {
       
   199       const ctx = (0,interactivity_namespaceObject.getContext)();
       
   200       const {
       
   201         ref
       
   202       } = (0,interactivity_namespaceObject.getElement)();
       
   203       if (state.isMenuOpen) {
       
   204         const focusableElements = ref.querySelectorAll(focusableSelectors);
       
   205         ctx.modal = ref;
       
   206         ctx.firstFocusableElement = focusableElements[0];
       
   207         ctx.lastFocusableElement = focusableElements[focusableElements.length - 1];
       
   208       }
       
   209     },
       
   210     focusFirstElement() {
       
   211       const {
       
   212         ref
       
   213       } = (0,interactivity_namespaceObject.getElement)();
       
   214       if (state.isMenuOpen) {
       
   215         const focusableElements = ref.querySelectorAll(focusableSelectors);
       
   216         focusableElements?.[0]?.focus();
       
   217       }
       
   218     }
    57   }
   219   }
    58 } // Necessary for some themes such as TT1 Blocks, where
   220 }, {
    59 // scripts could be loaded before the body.
   221   lock: true
    60 
       
    61 
       
    62 window.addEventListener('load', () => {
       
    63   micromodal_es.init({
       
    64     onShow: navigationToggleModal,
       
    65     onClose: navigationToggleModal,
       
    66     openClass: 'is-menu-open'
       
    67   });
       
    68   const submenuButtons = document.querySelectorAll('.wp-block-navigation-submenu__toggle');
       
    69   submenuButtons.forEach(function (button) {
       
    70     button.addEventListener('click', toggleSubmenuOnClick);
       
    71   }); // Close on click outside.
       
    72 
       
    73   document.addEventListener('click', function (event) {
       
    74     const navigationBlocks = document.querySelectorAll('.wp-block-navigation');
       
    75     navigationBlocks.forEach(function (block) {
       
    76       if (!block.contains(event.target)) {
       
    77         closeSubmenus(block);
       
    78       }
       
    79     });
       
    80   }); // Close on focus outside.
       
    81 
       
    82   document.addEventListener('keyup', function (event) {
       
    83     const submenuBlocks = document.querySelectorAll('.wp-block-navigation-item.has-child');
       
    84     submenuBlocks.forEach(function (block) {
       
    85       if (!block.contains(event.target)) {
       
    86         closeSubmenus(block);
       
    87       }
       
    88     });
       
    89   });
       
    90 });
   222 });
    91 
   223 
    92 /******/ })()
       
    93 ;