@wordpress/block-library/build-module/navigation/view-modal.js

Block library for the WordPress editor.

/**
 * External dependencies
 */
import MicroModal from 'micromodal'; // Responsive navigation toggle.

function navigationToggleModal(modal) {
  const dialogContainer = modal.querySelector(`.wp-block-navigation__responsive-dialog`);
  const isHidden = 'true' === modal.getAttribute('aria-hidden');
  modal.classList.toggle('has-modal-open', !isHidden);
  dialogContainer.toggleAttribute('aria-modal', !isHidden);

  if (isHidden) {
    dialogContainer.removeAttribute('role');
    dialogContainer.removeAttribute('aria-modal');
  } else {
    dialogContainer.setAttribute('role', 'dialog');
    dialogContainer.setAttribute('aria-modal', 'true');
  } // Add a class to indicate the modal is open.


  const htmlElement = document.documentElement;
  htmlElement.classList.toggle('has-modal-open');
}

window.addEventListener('load', () => {
  MicroModal.init({
    onShow: navigationToggleModal,
    onClose: navigationToggleModal,
    openClass: 'is-menu-open'
  }); // Close modal automatically on clicking anchor links inside modal.

  const navigationLinks = document.querySelectorAll('.wp-block-navigation-item__content');
  navigationLinks.forEach(function (link) {
    var _link$getAttribute, _link$attributes;

    // Ignore non-anchor links and anchor links which open on a new tab.
    if (!((_link$getAttribute = link.getAttribute('href')) !== null && _link$getAttribute !== void 0 && _link$getAttribute.startsWith('#')) || ((_link$attributes = link.attributes) === null || _link$attributes === void 0 ? void 0 : _link$attributes.target) === '_blank') {
      return;
    } // Find the specific parent modal for this link
    // since .close() won't work without an ID if there are
    // multiple navigation menus in a post/page.


    const modal = link.closest('.wp-block-navigation__responsive-container');
    const modalId = modal === null || modal === void 0 ? void 0 : modal.getAttribute('id');
    link.addEventListener('click', () => {
      // check if modal exists and is open before trying to close it
      // otherwise Micromodal will toggle the `has-modal-open` class
      // on the html tag which prevents scrolling
      if (modalId && modal.classList.contains('has-modal-open')) {
        MicroModal.close(modalId);
      }
    });
  });
});
//# sourceMappingURL=view-modal.js.map