PluginProbe
Gutenberg / 16.6.0
Gutenberg v16.6.0
24.0.0 23.9.1 23.9.0 23.8.0 23.7.2 23.7.1 23.7.0 23.6.1 23.6.2 23.6.0 23.5.3 23.5.2 23.5.1 23.5.0 23.4.0 23.3.2 23.3.1 23.3.0 23.2.0 23.2.1 23.2.2 23.1.1 23.1.0 23.0.1 12.6.0 All 403 releases
gutenberg / build / block-library / blocks / navigation / view.js

view.js in Gutenberg 16.6.0, at build/block-library/blocks/navigation/view.js

95 lines 2.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /******/ (() => { // webpackBootstrap
2 var __webpack_exports__ = {};
3 /*eslint-env browser*/
4 // Open on click functionality.
5
6 /**
7 * Keep track of whether a submenu is open to short-circuit delegated event listeners.
8 *
9 * @type {boolean}
10 */
11 let hasOpenSubmenu = false;
12
13 /**
14 * Close submenu items for a navigation item.
15 *
16 * @param {HTMLElement} navigationItem - Either a NAV or LI element.
17 */
18 function closeSubmenus(navigationItem) {
19 navigationItem.querySelectorAll('[aria-expanded="true"]').forEach(function (toggle) {
20 toggle.setAttribute('aria-expanded', 'false');
21 });
22 hasOpenSubmenu = false;
23 }
24
25 /**
26 * Toggle submenu on click.
27 *
28 * @param {HTMLButtonElement} buttonToggle
29 */
30 function toggleSubmenuOnClick(buttonToggle) {
31 const isSubmenuOpen = buttonToggle.getAttribute('aria-expanded') === 'true';
32 const navigationItem = buttonToggle.closest('.wp-block-navigation-item');
33 if (isSubmenuOpen) {
34 closeSubmenus(navigationItem);
35 } else {
36 // Close all sibling submenus.
37 const navigationParent = buttonToggle.closest('.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list');
38 navigationParent.querySelectorAll('.wp-block-navigation-item').forEach(child => {
39 if (child !== navigationItem) {
40 closeSubmenus(child);
41 }
42 });
43
44 // Open submenu.
45 buttonToggle.setAttribute('aria-expanded', 'true');
46 hasOpenSubmenu = true;
47 }
48 }
49
50 // Open on button click or close on click outside.
51 document.addEventListener('click', function (event) {
52 const target = event.target;
53 const button = target.closest('.wp-block-navigation-submenu__toggle');
54
55 // Close any other open submenus.
56 if (hasOpenSubmenu) {
57 const navigationBlocks = document.querySelectorAll('.wp-block-navigation');
58 navigationBlocks.forEach(function (block) {
59 if (!block.contains(target)) {
60 closeSubmenus(block);
61 }
62 });
63 }
64
65 // Now open the submenu if one was clicked.
66 if (button instanceof HTMLButtonElement) {
67 toggleSubmenuOnClick(button);
68 }
69 }, {
70 passive: true
71 });
72
73 // Close on focus outside or escape key.
74 document.addEventListener('keyup', function (event) {
75 // Abort if there aren't any submenus open anyway.
76 if (!hasOpenSubmenu) {
77 return;
78 }
79 const submenuBlocks = document.querySelectorAll('.wp-block-navigation-item.has-child');
80 submenuBlocks.forEach(function (block) {
81 if (!block.contains(event.target)) {
82 closeSubmenus(block);
83 } else if (event.key === 'Escape') {
84 const toggle = block.querySelector('[aria-expanded="true"]');
85 closeSubmenus(block);
86 // Focus the submenu trigger so focus does not get trapped in the closed submenu.
87 toggle?.focus();
88 }
89 });
90 }, {
91 passive: true
92 });
93
94 /******/ })()
95 ;