Bundled Themes: Import Twenty Twenty-One, the new default theme for WordPress 5.6.
Welcome to the bundled themes family!
Twenty Twenty-One is a blank canvas for your ideas, making the block editor your best brush.
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwentyone/.
Props poena, melchoyce, luminuu, elmastudio, bethsoderberg, williampatton, aristath, jffng, kjellr, jeffikus, audrasjb, fabiankaegy, mukesh27, dingo_d, kellylawrence, acosmin, whyisjake, metodiew, ryelle, nielslange, littlebigthing, mahesh901122, zebulan, kishanjasani, lukecavanagh, scruffian, abhijitrakas, utz119, sudoshreyansh, kau-boy, justinahinon, joostdevalk, bduclos, hareesh-pillai, mager19, rolfsiebers, webmigrates, sresok, guidooffermans, francina, marybaum, hareshlive, navanathbhosale, afercia, richtabor, joyously, sarahricker, nrqsnchz, glauberglauber, sabernhardt, kraftbj, ItsJonQ, joen, CTMartin0, decrecementofeliz, bhautikvirani.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49216
git-svn-id: http://core.svn.wordpress.org/trunk@48978 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-19 21:14:10 -04:00
|
|
|
/**
|
|
|
|
* File primary-navigation.js.
|
|
|
|
*
|
|
|
|
* Required to open and close the mobile navigation.
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Toggle an attribute's value
|
|
|
|
*
|
|
|
|
* @param {Element} el - The element.
|
|
|
|
* @param {boolean} withListeners - Whether we want to add/remove listeners or not.
|
|
|
|
* @since 1.0.0
|
|
|
|
*/
|
|
|
|
function twentytwentyoneToggleAriaExpanded( el, withListeners ) {
|
|
|
|
if ( 'true' !== el.getAttribute( 'aria-expanded' ) ) {
|
|
|
|
el.setAttribute( 'aria-expanded', 'true' );
|
2020-11-02 14:45:07 -05:00
|
|
|
twentytwentyoneSubmenuPosition( el.parentElement );
|
Bundled Themes: Import Twenty Twenty-One, the new default theme for WordPress 5.6.
Welcome to the bundled themes family!
Twenty Twenty-One is a blank canvas for your ideas, making the block editor your best brush.
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwentyone/.
Props poena, melchoyce, luminuu, elmastudio, bethsoderberg, williampatton, aristath, jffng, kjellr, jeffikus, audrasjb, fabiankaegy, mukesh27, dingo_d, kellylawrence, acosmin, whyisjake, metodiew, ryelle, nielslange, littlebigthing, mahesh901122, zebulan, kishanjasani, lukecavanagh, scruffian, abhijitrakas, utz119, sudoshreyansh, kau-boy, justinahinon, joostdevalk, bduclos, hareesh-pillai, mager19, rolfsiebers, webmigrates, sresok, guidooffermans, francina, marybaum, hareshlive, navanathbhosale, afercia, richtabor, joyously, sarahricker, nrqsnchz, glauberglauber, sabernhardt, kraftbj, ItsJonQ, joen, CTMartin0, decrecementofeliz, bhautikvirani.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49216
git-svn-id: http://core.svn.wordpress.org/trunk@48978 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-19 21:14:10 -04:00
|
|
|
if ( withListeners ) {
|
|
|
|
document.addEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
el.setAttribute( 'aria-expanded', 'false' );
|
|
|
|
if ( withListeners ) {
|
|
|
|
document.removeEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function twentytwentyoneCollapseMenuOnClickOutside( event ) {
|
|
|
|
if ( ! document.getElementById( 'site-navigation' ).contains( event.target ) ) {
|
|
|
|
document.getElementById( 'site-navigation' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
|
|
|
|
button.setAttribute( 'aria-expanded', 'false' );
|
|
|
|
} );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-02 14:45:07 -05:00
|
|
|
/**
|
|
|
|
* Changes the position of submenus so they always fit the screen horizontally.
|
|
|
|
*
|
|
|
|
* @param {Element} li - The li element.
|
|
|
|
*/
|
|
|
|
function twentytwentyoneSubmenuPosition( li ) {
|
|
|
|
var subMenu = li.querySelector( 'ul.sub-menu' ),
|
Twenty Twenty-One: Sync the latest changes for 5.6 RC2.
This will be the final sync from GitHub before placing that repository into read-only mode. All further changes should now flow entirely through Trac.
For a full list of changes since [49633], see https://github.com/WordPress/twentytwentyone/compare/1d5a895...53acd9b.
Props poena, luminuu, kjellr, ryelle, allancole, melchoyce, felipeelia, aljullu, kebbet, chaton666, Clorith, mkaz, ingereck, paaljoachim.
Reviewed by desrosj, SergeyBiryukov.
Merges [49726] to the 5.6 branch.
Fixes #51526.
Built from https://develop.svn.wordpress.org/branches/5.6@49728
git-svn-id: http://core.svn.wordpress.org/branches/5.6@49451 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-12-01 14:27:08 -05:00
|
|
|
rect,
|
|
|
|
right,
|
|
|
|
left,
|
|
|
|
windowWidth;
|
|
|
|
|
|
|
|
if ( ! subMenu ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
rect = subMenu.getBoundingClientRect();
|
|
|
|
right = Math.round( rect.right );
|
|
|
|
left = Math.round( rect.left );
|
|
|
|
windowWidth = Math.round( window.innerWidth );
|
2020-11-02 14:45:07 -05:00
|
|
|
|
|
|
|
if ( right > windowWidth ) {
|
|
|
|
subMenu.classList.add( 'submenu-reposition-right' );
|
|
|
|
} else if ( document.body.classList.contains( 'rtl' ) && left < 0 ) {
|
|
|
|
subMenu.classList.add( 'submenu-reposition-left' );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
Bundled Themes: Import Twenty Twenty-One, the new default theme for WordPress 5.6.
Welcome to the bundled themes family!
Twenty Twenty-One is a blank canvas for your ideas, making the block editor your best brush.
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwentyone/.
Props poena, melchoyce, luminuu, elmastudio, bethsoderberg, williampatton, aristath, jffng, kjellr, jeffikus, audrasjb, fabiankaegy, mukesh27, dingo_d, kellylawrence, acosmin, whyisjake, metodiew, ryelle, nielslange, littlebigthing, mahesh901122, zebulan, kishanjasani, lukecavanagh, scruffian, abhijitrakas, utz119, sudoshreyansh, kau-boy, justinahinon, joostdevalk, bduclos, hareesh-pillai, mager19, rolfsiebers, webmigrates, sresok, guidooffermans, francina, marybaum, hareshlive, navanathbhosale, afercia, richtabor, joyously, sarahricker, nrqsnchz, glauberglauber, sabernhardt, kraftbj, ItsJonQ, joen, CTMartin0, decrecementofeliz, bhautikvirani.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49216
git-svn-id: http://core.svn.wordpress.org/trunk@48978 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-19 21:14:10 -04:00
|
|
|
/**
|
|
|
|
* Handle clicks on submenu toggles.
|
|
|
|
*
|
|
|
|
* @param {Element} el - The element.
|
|
|
|
*/
|
2020-11-12 13:48:08 -05:00
|
|
|
function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
|
Bundled Themes: Import Twenty Twenty-One, the new default theme for WordPress 5.6.
Welcome to the bundled themes family!
Twenty Twenty-One is a blank canvas for your ideas, making the block editor your best brush.
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwentyone/.
Props poena, melchoyce, luminuu, elmastudio, bethsoderberg, williampatton, aristath, jffng, kjellr, jeffikus, audrasjb, fabiankaegy, mukesh27, dingo_d, kellylawrence, acosmin, whyisjake, metodiew, ryelle, nielslange, littlebigthing, mahesh901122, zebulan, kishanjasani, lukecavanagh, scruffian, abhijitrakas, utz119, sudoshreyansh, kau-boy, justinahinon, joostdevalk, bduclos, hareesh-pillai, mager19, rolfsiebers, webmigrates, sresok, guidooffermans, francina, marybaum, hareshlive, navanathbhosale, afercia, richtabor, joyously, sarahricker, nrqsnchz, glauberglauber, sabernhardt, kraftbj, ItsJonQ, joen, CTMartin0, decrecementofeliz, bhautikvirani.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49216
git-svn-id: http://core.svn.wordpress.org/trunk@48978 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-19 21:14:10 -04:00
|
|
|
// Close other expanded items.
|
|
|
|
el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
|
|
|
|
if ( button !== el ) {
|
|
|
|
button.setAttribute( 'aria-expanded', 'false' );
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
|
|
|
|
// Toggle aria-expanded on the button.
|
|
|
|
twentytwentyoneToggleAriaExpanded( el, true );
|
|
|
|
|
|
|
|
// On tab-away collapse the menu.
|
|
|
|
el.parentNode.querySelectorAll( 'ul > li:last-child > a' ).forEach( function( linkEl ) {
|
|
|
|
linkEl.addEventListener( 'blur', function( event ) {
|
|
|
|
if ( ! el.parentNode.contains( event.relatedTarget ) ) {
|
|
|
|
el.setAttribute( 'aria-expanded', 'false' );
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
} );
|
|
|
|
}
|
|
|
|
|
|
|
|
( function() {
|
|
|
|
/**
|
|
|
|
* Menu Toggle Behaviors
|
|
|
|
*
|
|
|
|
* @param {string} id - The ID.
|
|
|
|
*/
|
|
|
|
var navMenu = function( id ) {
|
|
|
|
var wrapper = document.body, // this is the element to which a CSS class is added when a mobile nav menu is open
|
|
|
|
mobileButton = document.getElementById( id + '-mobile-menu' );
|
|
|
|
|
|
|
|
if ( mobileButton ) {
|
|
|
|
mobileButton.onclick = function() {
|
|
|
|
wrapper.classList.toggle( id + '-navigation-open' );
|
|
|
|
wrapper.classList.toggle( 'lock-scrolling' );
|
|
|
|
twentytwentyoneToggleAriaExpanded( mobileButton );
|
|
|
|
mobileButton.focus();
|
|
|
|
};
|
|
|
|
}
|
|
|
|
/**
|
|
|
|
* Trap keyboard navigation in the menu modal.
|
|
|
|
* Adapted from TwentyTwenty
|
|
|
|
*/
|
|
|
|
document.addEventListener( 'keydown', function( event ) {
|
|
|
|
var modal, elements, selectors, lastEl, firstEl, activeEl, tabKey, shiftKey, escKey;
|
|
|
|
if ( ! wrapper.classList.contains( id + '-navigation-open' ) ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
modal = document.querySelector( '.' + id + '-navigation' );
|
|
|
|
selectors = 'input, a, button';
|
|
|
|
elements = modal.querySelectorAll( selectors );
|
|
|
|
elements = Array.prototype.slice.call( elements );
|
|
|
|
tabKey = event.keyCode === 9;
|
|
|
|
shiftKey = event.shiftKey;
|
|
|
|
escKey = event.keyCode === 27;
|
2020-11-17 14:00:08 -05:00
|
|
|
activeEl = document.activeElement; // eslint-disable-line @wordpress/no-global-active-element
|
Bundled Themes: Import Twenty Twenty-One, the new default theme for WordPress 5.6.
Welcome to the bundled themes family!
Twenty Twenty-One is a blank canvas for your ideas, making the block editor your best brush.
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwentyone/.
Props poena, melchoyce, luminuu, elmastudio, bethsoderberg, williampatton, aristath, jffng, kjellr, jeffikus, audrasjb, fabiankaegy, mukesh27, dingo_d, kellylawrence, acosmin, whyisjake, metodiew, ryelle, nielslange, littlebigthing, mahesh901122, zebulan, kishanjasani, lukecavanagh, scruffian, abhijitrakas, utz119, sudoshreyansh, kau-boy, justinahinon, joostdevalk, bduclos, hareesh-pillai, mager19, rolfsiebers, webmigrates, sresok, guidooffermans, francina, marybaum, hareshlive, navanathbhosale, afercia, richtabor, joyously, sarahricker, nrqsnchz, glauberglauber, sabernhardt, kraftbj, ItsJonQ, joen, CTMartin0, decrecementofeliz, bhautikvirani.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49216
git-svn-id: http://core.svn.wordpress.org/trunk@48978 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-19 21:14:10 -04:00
|
|
|
lastEl = elements[ elements.length - 1 ];
|
|
|
|
firstEl = elements[0];
|
|
|
|
|
|
|
|
if ( escKey ) {
|
|
|
|
event.preventDefault();
|
|
|
|
wrapper.classList.remove( id + '-navigation-open', 'lock-scrolling' );
|
|
|
|
twentytwentyoneToggleAriaExpanded( mobileButton );
|
|
|
|
mobileButton.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( ! shiftKey && tabKey && lastEl === activeEl ) {
|
|
|
|
event.preventDefault();
|
|
|
|
firstEl.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( shiftKey && tabKey && firstEl === activeEl ) {
|
|
|
|
event.preventDefault();
|
|
|
|
lastEl.focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
// If there are no elements in the menu, don't move the focus
|
|
|
|
if ( tabKey && firstEl === lastEl ) {
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
|
|
|
|
document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) {
|
|
|
|
li.addEventListener( 'mouseenter', function() {
|
2020-10-26 22:00:07 -04:00
|
|
|
this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'true' );
|
2020-11-02 14:45:07 -05:00
|
|
|
twentytwentyoneSubmenuPosition( li );
|
Bundled Themes: Import Twenty Twenty-One, the new default theme for WordPress 5.6.
Welcome to the bundled themes family!
Twenty Twenty-One is a blank canvas for your ideas, making the block editor your best brush.
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwentyone/.
Props poena, melchoyce, luminuu, elmastudio, bethsoderberg, williampatton, aristath, jffng, kjellr, jeffikus, audrasjb, fabiankaegy, mukesh27, dingo_d, kellylawrence, acosmin, whyisjake, metodiew, ryelle, nielslange, littlebigthing, mahesh901122, zebulan, kishanjasani, lukecavanagh, scruffian, abhijitrakas, utz119, sudoshreyansh, kau-boy, justinahinon, joostdevalk, bduclos, hareesh-pillai, mager19, rolfsiebers, webmigrates, sresok, guidooffermans, francina, marybaum, hareshlive, navanathbhosale, afercia, richtabor, joyously, sarahricker, nrqsnchz, glauberglauber, sabernhardt, kraftbj, ItsJonQ, joen, CTMartin0, decrecementofeliz, bhautikvirani.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49216
git-svn-id: http://core.svn.wordpress.org/trunk@48978 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-19 21:14:10 -04:00
|
|
|
} );
|
|
|
|
li.addEventListener( 'mouseleave', function() {
|
2020-10-26 22:00:07 -04:00
|
|
|
this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'false' );
|
Bundled Themes: Import Twenty Twenty-One, the new default theme for WordPress 5.6.
Welcome to the bundled themes family!
Twenty Twenty-One is a blank canvas for your ideas, making the block editor your best brush.
Theme development to this point has taken place on GitHub. See: https://github.com/WordPress/twentytwentyone/.
Props poena, melchoyce, luminuu, elmastudio, bethsoderberg, williampatton, aristath, jffng, kjellr, jeffikus, audrasjb, fabiankaegy, mukesh27, dingo_d, kellylawrence, acosmin, whyisjake, metodiew, ryelle, nielslange, littlebigthing, mahesh901122, zebulan, kishanjasani, lukecavanagh, scruffian, abhijitrakas, utz119, sudoshreyansh, kau-boy, justinahinon, joostdevalk, bduclos, hareesh-pillai, mager19, rolfsiebers, webmigrates, sresok, guidooffermans, francina, marybaum, hareshlive, navanathbhosale, afercia, richtabor, joyously, sarahricker, nrqsnchz, glauberglauber, sabernhardt, kraftbj, ItsJonQ, joen, CTMartin0, decrecementofeliz, bhautikvirani.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49216
git-svn-id: http://core.svn.wordpress.org/trunk@48978 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-19 21:14:10 -04:00
|
|
|
} );
|
|
|
|
} );
|
|
|
|
};
|
|
|
|
|
|
|
|
window.addEventListener( 'load', function() {
|
|
|
|
new navMenu( 'primary' );
|
|
|
|
} );
|
|
|
|
}() );
|