Skip to content

Global Header/Navigation: Switch to observer for menu open & close actions #682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Global Header/Navigation: Switch to observer for menu open & close actions #682

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions mu-plugins/blocks/global-header-footer/js/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* global MutationObserver */
/**
* File wporg-global-header-script.js.
*
Expand Down Expand Up @@ -195,7 +196,7 @@

const openButtons = document.querySelectorAll(
'.global-header__navigation [data-wp-on-async--click="actions.openMenuOnClick"],' +
'.global-header__search [data-wp-on-async--click="actions.openMenuOnClick"]'
'.global-header__search [data-wp-on-async--click="actions.openMenuOnClick"]'
);
openButtons.forEach( function ( button ) {
// When any open menu button is clicked, find any existing close buttons and click them.
Expand All @@ -215,16 +216,29 @@
} );
} );

const closeButtons = document.querySelectorAll(
'.global-header__navigation [data-wp-on-async--click="actions.closeMenuOnClick"],' +
'.global-header__search [data-wp-on-async--click="actions.closeMenuOnClick"]'
);
// When the global menus are closed (close button is clicked), remove the helper class.
closeButtons.forEach( function ( button ) {
button.addEventListener( 'click', function () {
document.documentElement.classList.remove( 'has-global-modal-open' );
// Watching for changes to the html element's class, which indicates open/close state of navigation.
const observer = new MutationObserver( ( mutations ) => {
mutations.forEach( ( mutation ) => {
const oldClass = mutation.oldValue || '';
const newClass = mutation.target.className || '';
if ( oldClass.includes( 'has-modal-open' ) && ! newClass.includes( 'has-modal-open' ) ) {
// Menu has closed, remove the helper class if it exists. If the previously
// open menu was not the global nav, there will be not effect here.
mutation.target.classList.remove( 'has-global-modal-open' );
} else if ( ! oldClass.includes( 'has-modal-open' ) && newClass.includes( 'has-modal-open' ) ) {
// Any nav menu has opened, scroll to the top of the page to show the
// entire menu (and prevent incorrect positioning).
window.scrollTo( { top: 0, behavior: 'instant' } );
}
} );
} );

// Observe the html element for changes only to the class attribute.
observer.observe( document.documentElement, {
attributes: true,
attributeFilter: [ 'class' ],
attributeOldValue: true,
} );
} );

window.addEventListener( 'resize', () => {
Expand Down
Loading