You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

212 lines
7.8 KiB

1 year ago
  1. "use strict";
  2. (self["__WordPressPrivateInteractivityAPI__"] = self["__WordPressPrivateInteractivityAPI__"] || []).push([[3],{
  3. /***/ 932:
  4. /***/ (function(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {
  5. /* harmony import */ var _wordpress_interactivity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(754);
  6. /**
  7. * WordPress dependencies
  8. */
  9. 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^="-"])'];
  10. // This is a fix for Safari in iOS/iPadOS. Without it, Safari doesn't focus out
  11. // when the user taps in the body. It can be removed once we add an overlay to
  12. // capture the clicks, instead of relying on the focusout event.
  13. document.addEventListener('click', () => {});
  14. const openMenu = (store, menuOpenedOn) => {
  15. const {
  16. context,
  17. selectors
  18. } = store;
  19. selectors.core.navigation.menuOpenedBy(store)[menuOpenedOn] = true;
  20. if (context.core.navigation.type === 'overlay') {
  21. // Add a `has-modal-open` class to the <html> root.
  22. document.documentElement.classList.add('has-modal-open');
  23. }
  24. };
  25. const closeMenu = (store, menuClosedOn) => {
  26. const {
  27. context,
  28. selectors
  29. } = store;
  30. selectors.core.navigation.menuOpenedBy(store)[menuClosedOn] = false;
  31. // Check if the menu is still open or not.
  32. if (!selectors.core.navigation.isMenuOpen(store)) {
  33. if (context.core.navigation.modal?.contains(window.document.activeElement)) {
  34. context.core.navigation.previousFocus?.focus();
  35. }
  36. context.core.navigation.modal = null;
  37. context.core.navigation.previousFocus = null;
  38. if (context.core.navigation.type === 'overlay') {
  39. document.documentElement.classList.remove('has-modal-open');
  40. }
  41. }
  42. };
  43. (0,_wordpress_interactivity__WEBPACK_IMPORTED_MODULE_0__/* .store */ .h)({
  44. effects: {
  45. core: {
  46. navigation: {
  47. initMenu: store => {
  48. const {
  49. context,
  50. selectors,
  51. ref
  52. } = store;
  53. if (selectors.core.navigation.isMenuOpen(store)) {
  54. const focusableElements = ref.querySelectorAll(focusableSelectors);
  55. context.core.navigation.modal = ref;
  56. context.core.navigation.firstFocusableElement = focusableElements[0];
  57. context.core.navigation.lastFocusableElement = focusableElements[focusableElements.length - 1];
  58. }
  59. },
  60. focusFirstElement: store => {
  61. const {
  62. selectors,
  63. ref
  64. } = store;
  65. if (selectors.core.navigation.isMenuOpen(store)) {
  66. ref.querySelector('.wp-block-navigation-item > *:first-child').focus();
  67. }
  68. }
  69. }
  70. }
  71. },
  72. selectors: {
  73. core: {
  74. navigation: {
  75. roleAttribute: store => {
  76. const {
  77. context,
  78. selectors
  79. } = store;
  80. return context.core.navigation.type === 'overlay' && selectors.core.navigation.isMenuOpen(store) ? 'dialog' : null;
  81. },
  82. ariaModal: store => {
  83. const {
  84. context,
  85. selectors
  86. } = store;
  87. return context.core.navigation.type === 'overlay' && selectors.core.navigation.isMenuOpen(store) ? 'true' : null;
  88. },
  89. ariaLabel: store => {
  90. const {
  91. context,
  92. selectors
  93. } = store;
  94. return context.core.navigation.type === 'overlay' && selectors.core.navigation.isMenuOpen(store) ? context.core.navigation.ariaLabel : null;
  95. },
  96. isMenuOpen: ({
  97. context
  98. }) =>
  99. // The menu is opened if either `click`, `hover` or `focus` is true.
  100. Object.values(context.core.navigation[context.core.navigation.type === 'overlay' ? 'overlayOpenedBy' : 'submenuOpenedBy']).filter(Boolean).length > 0,
  101. menuOpenedBy: ({
  102. context
  103. }) => context.core.navigation[context.core.navigation.type === 'overlay' ? 'overlayOpenedBy' : 'submenuOpenedBy']
  104. }
  105. }
  106. },
  107. actions: {
  108. core: {
  109. navigation: {
  110. openMenuOnHover(store) {
  111. const {
  112. navigation
  113. } = store.context.core;
  114. if (navigation.type === 'submenu' &&
  115. // Only open on hover if the overlay is closed.
  116. Object.values(navigation.overlayOpenedBy || {}).filter(Boolean).length === 0) openMenu(store, 'hover');
  117. },
  118. closeMenuOnHover(store) {
  119. closeMenu(store, 'hover');
  120. },
  121. openMenuOnClick(store) {
  122. const {
  123. context,
  124. ref
  125. } = store;
  126. context.core.navigation.previousFocus = ref;
  127. openMenu(store, 'click');
  128. },
  129. closeMenuOnClick(store) {
  130. closeMenu(store, 'click');
  131. closeMenu(store, 'focus');
  132. },
  133. openMenuOnFocus(store) {
  134. openMenu(store, 'focus');
  135. },
  136. toggleMenuOnClick: store => {
  137. const {
  138. selectors,
  139. context,
  140. ref
  141. } = store;
  142. // 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
  143. if (window.document.activeElement !== ref) ref.focus();
  144. const menuOpenedBy = selectors.core.navigation.menuOpenedBy(store);
  145. if (menuOpenedBy.click || menuOpenedBy.focus) {
  146. closeMenu(store, 'click');
  147. closeMenu(store, 'focus');
  148. } else {
  149. context.core.navigation.previousFocus = ref;
  150. openMenu(store, 'click');
  151. }
  152. },
  153. handleMenuKeydown: store => {
  154. const {
  155. context,
  156. selectors,
  157. event
  158. } = store;
  159. if (selectors.core.navigation.menuOpenedBy(store).click) {
  160. // If Escape close the menu.
  161. if (event?.key === 'Escape') {
  162. closeMenu(store, 'click');
  163. closeMenu(store, 'focus');
  164. return;
  165. }
  166. // Trap focus if it is an overlay (main menu).
  167. if (context.core.navigation.type === 'overlay' && event.key === 'Tab') {
  168. // If shift + tab it change the direction.
  169. if (event.shiftKey && window.document.activeElement === context.core.navigation.firstFocusableElement) {
  170. event.preventDefault();
  171. context.core.navigation.lastFocusableElement.focus();
  172. } else if (!event.shiftKey && window.document.activeElement === context.core.navigation.lastFocusableElement) {
  173. event.preventDefault();
  174. context.core.navigation.firstFocusableElement.focus();
  175. }
  176. }
  177. }
  178. },
  179. handleMenuFocusout: store => {
  180. const {
  181. context,
  182. event
  183. } = store;
  184. // If focus is outside modal, and in the document, close menu
  185. // event.target === The element losing focus
  186. // event.relatedTarget === The element receiving focus (if any)
  187. // When focusout is outsite the document,
  188. // `window.document.activeElement` doesn't change.
  189. // The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
  190. if (event.relatedTarget === null || !context.core.navigation.modal?.contains(event.relatedTarget) && event.target !== window.document.activeElement) {
  191. closeMenu(store, 'click');
  192. closeMenu(store, 'focus');
  193. }
  194. }
  195. }
  196. }
  197. }
  198. });
  199. /***/ })
  200. },
  201. /******/ function(__webpack_require__) { // webpackRuntimeModules
  202. /******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
  203. /******/ var __webpack_exports__ = (__webpack_exec__(932));
  204. /******/ }
  205. ]);