WordPress/wp-includes/blocks/navigation/view.js

250 lines
9.5 KiB
JavaScript
Raw Normal View History

import * as __WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__ from "@wordpress/interactivity";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
;// CONCATENATED MODULE: external "@wordpress/interactivity"
var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
var y = x => () => x
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 });
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-library/build-module/navigation/constants.js
const DEFAULT_BLOCK = {
name: 'core/navigation-link'
};
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']));
const PRIORITIZED_INSERTER_BLOCKS = (/* unused pure expression or super */ null && (['core/navigation-link/page', 'core/navigation-link']));
// These parameters must be kept aligned with those in
// lib/compat/wordpress-6.3/navigation-block-preloading.php
// and
// edit-site/src/components/sidebar-navigation-screen-navigation-menus/constants.js
const PRELOADED_NAVIGATION_MENUS_QUERY = {
per_page: 100,
status: ['publish', 'draft'],
order: 'desc',
orderby: 'date'
};
const SELECT_NAVIGATION_MENUS_ARGS = ['postType', 'wp_navigation', PRELOADED_NAVIGATION_MENUS_QUERY];
const NAVIGATION_MOBILE_COLLAPSE = '600px';
;// CONCATENATED MODULE: ./node_modules/@wordpress/block-library/build-module/navigation/view.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
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^="-"])'];
// This is a fix for Safari in iOS/iPadOS. Without it, Safari doesn't focus out
// when the user taps in the body. It can be removed once we add an overlay to
// capture the clicks, instead of relying on the focusout event.
document.addEventListener('click', () => {});
const {
state,
actions
} = (0,interactivity_namespaceObject.store)('core/navigation', {
state: {
get roleAttribute() {
const ctx = (0,interactivity_namespaceObject.getContext)();
return ctx.type === 'overlay' && state.isMenuOpen ? 'dialog' : null;
},
get ariaModal() {
const ctx = (0,interactivity_namespaceObject.getContext)();
return ctx.type === 'overlay' && state.isMenuOpen ? 'true' : null;
},
get ariaLabel() {
const ctx = (0,interactivity_namespaceObject.getContext)();
return ctx.type === 'overlay' && state.isMenuOpen ? ctx.ariaLabel : null;
},
get isMenuOpen() {
// The menu is opened if either `click`, `hover` or `focus` is true.
return Object.values(state.menuOpenedBy).filter(Boolean).length > 0;
},
get menuOpenedBy() {
const ctx = (0,interactivity_namespaceObject.getContext)();
return ctx.type === 'overlay' ? ctx.overlayOpenedBy : ctx.submenuOpenedBy;
}
},
actions: {
openMenuOnHover() {
const {
type,
overlayOpenedBy
} = (0,interactivity_namespaceObject.getContext)();
if (type === 'submenu' &&
// Only open on hover if the overlay is closed.
Object.values(overlayOpenedBy || {}).filter(Boolean).length === 0) actions.openMenu('hover');
},
closeMenuOnHover() {
actions.closeMenu('hover');
},
openMenuOnClick() {
const ctx = (0,interactivity_namespaceObject.getContext)();
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
ctx.previousFocus = ref;
actions.openMenu('click');
},
closeMenuOnClick() {
actions.closeMenu('click');
actions.closeMenu('focus');
},
openMenuOnFocus() {
actions.openMenu('focus');
},
toggleMenuOnClick() {
const ctx = (0,interactivity_namespaceObject.getContext)();
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
// 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
if (window.document.activeElement !== ref) ref.focus();
const {
menuOpenedBy
} = state;
if (menuOpenedBy.click || menuOpenedBy.focus) {
actions.closeMenu('click');
actions.closeMenu('focus');
} else {
ctx.previousFocus = ref;
actions.openMenu('click');
}
},
handleMenuKeydown(event) {
const {
type,
firstFocusableElement,
lastFocusableElement
} = (0,interactivity_namespaceObject.getContext)();
if (state.menuOpenedBy.click) {
// If Escape close the menu.
if (event?.key === 'Escape') {
actions.closeMenu('click');
actions.closeMenu('focus');
return;
}
// Trap focus if it is an overlay (main menu).
if (type === 'overlay' && event.key === 'Tab') {
// If shift + tab it change the direction.
if (event.shiftKey && window.document.activeElement === firstFocusableElement) {
event.preventDefault();
lastFocusableElement.focus();
} else if (!event.shiftKey && window.document.activeElement === lastFocusableElement) {
event.preventDefault();
firstFocusableElement.focus();
}
}
}
},
handleMenuFocusout(event) {
const {
modal
} = (0,interactivity_namespaceObject.getContext)();
// If focus is outside modal, and in the document, close menu
// event.target === The element losing focus
// event.relatedTarget === The element receiving focus (if any)
// When focusout is outsite the document,
// `window.document.activeElement` doesn't change.
// The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
if (event.relatedTarget === null || !modal?.contains(event.relatedTarget) && event.target !== window.document.activeElement) {
actions.closeMenu('click');
actions.closeMenu('focus');
}
},
openMenu(menuOpenedOn = 'click') {
const {
type
} = (0,interactivity_namespaceObject.getContext)();
state.menuOpenedBy[menuOpenedOn] = true;
if (type === 'overlay') {
// Add a `has-modal-open` class to the <html> root.
document.documentElement.classList.add('has-modal-open');
}
},
closeMenu(menuClosedOn = 'click') {
const ctx = (0,interactivity_namespaceObject.getContext)();
state.menuOpenedBy[menuClosedOn] = false;
// Check if the menu is still open or not.
if (!state.isMenuOpen) {
if (ctx.modal?.contains(window.document.activeElement)) {
ctx.previousFocus?.focus();
}
ctx.modal = null;
ctx.previousFocus = null;
if (ctx.type === 'overlay') {
document.documentElement.classList.remove('has-modal-open');
}
}
}
},
callbacks: {
initMenu() {
const ctx = (0,interactivity_namespaceObject.getContext)();
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
if (state.isMenuOpen) {
const focusableElements = ref.querySelectorAll(focusableSelectors);
ctx.modal = ref;
ctx.firstFocusableElement = focusableElements[0];
ctx.lastFocusableElement = focusableElements[focusableElements.length - 1];
}
},
focusFirstElement() {
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
if (state.isMenuOpen) {
const focusableElements = ref.querySelectorAll(focusableSelectors);
focusableElements?.[0]?.focus();
}
},
initNav() {
const context = (0,interactivity_namespaceObject.getContext)();
const mediaQuery = window.matchMedia(`(max-width: ${NAVIGATION_MOBILE_COLLAPSE})`);
// Run once to set the initial state.
context.isCollapsed = mediaQuery.matches;
function handleCollapse(event) {
context.isCollapsed = event.matches;
}
// Run on resize to update the state.
mediaQuery.addEventListener('change', handleCollapse);
// Remove the listener when the component is unmounted.
return () => {
mediaQuery.removeEventListener('change', handleCollapse);
};
}
}
});