|
@@ -13,9 +13,9 @@
|
|
* Collapse menu when the user clicks outside.
|
|
* Collapse menu when the user clicks outside.
|
|
*/
|
|
*/
|
|
function marianneCollapseMenuOnClickOutside( event ) {
|
|
function marianneCollapseMenuOnClickOutside( event ) {
|
|
- if ( ! document.getElementById( 'menu-primary' ).contains( event.target ) ) {
|
|
|
|
- document.getElementById( 'menu-primary' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
|
|
|
|
- button.setAttribute( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ if ( ! document.getElementById( "menu-primary" ).contains( event.target ) ) {
|
|
|
|
+ document.getElementById( "menu-primary" ).querySelectorAll( ".sub-menu-toggle" ).forEach( function( button ) {
|
|
|
|
+ button.setAttribute( "aria-expanded", "false" );
|
|
} );
|
|
} );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -26,15 +26,17 @@ function marianneCollapseMenuOnClickOutside( event ) {
|
|
* @param {Element} el - The element.
|
|
* @param {Element} el - The element.
|
|
*/
|
|
*/
|
|
function marianneToggleAriaExpanded( el, withListeners ) {
|
|
function marianneToggleAriaExpanded( el, withListeners ) {
|
|
- if ( 'true' !== el.getAttribute( 'aria-expanded' ) ) {
|
|
|
|
- el.setAttribute( 'aria-expanded', 'true' );
|
|
|
|
|
|
+ if ( "true" !== el.getAttribute( "aria-expanded" ) ) {
|
|
|
|
+ el.setAttribute( "aria-expanded", "true" );
|
|
|
|
+
|
|
if ( withListeners ) {
|
|
if ( withListeners ) {
|
|
- document.addEventListener( 'click', marianneCollapseMenuOnClickOutside );
|
|
|
|
|
|
+ document.addEventListener( "click", marianneCollapseMenuOnClickOutside );
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
- el.setAttribute( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ el.setAttribute( "aria-expanded", "false" );
|
|
|
|
+
|
|
if ( withListeners ) {
|
|
if ( withListeners ) {
|
|
- document.addEventListener( 'click', marianneCollapseMenuOnClickOutside );
|
|
|
|
|
|
+ document.addEventListener( "click", marianneCollapseMenuOnClickOutside );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -45,28 +47,27 @@ function marianneToggleAriaExpanded( el, withListeners ) {
|
|
* @param {Element} el - The element.
|
|
* @param {Element} el - The element.
|
|
*/
|
|
*/
|
|
function marianneExpandSubMenu( el ) {
|
|
function marianneExpandSubMenu( el ) {
|
|
-
|
|
|
|
if ( window.matchMedia( "(min-width: 500px)" ).matches ) {
|
|
if ( window.matchMedia( "(min-width: 500px)" ).matches ) {
|
|
// Close other expanded items.
|
|
// Close other expanded items.
|
|
- el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
|
|
|
|
|
|
+ el.closest( "nav" ).querySelectorAll( ".sub-menu-toggle" ).forEach( function( button ) {
|
|
if ( button !== el ) {
|
|
if ( button !== el ) {
|
|
- button.setAttribute( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ button.setAttribute( "aria-expanded", "false" );
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
// Toggle aria-expanded on the button.
|
|
// Toggle aria-expanded on the button.
|
|
marianneToggleAriaExpanded( el, true );
|
|
marianneToggleAriaExpanded( el, true );
|
|
|
|
|
|
// On tab-away collapse the menu.
|
|
// On tab-away collapse the menu.
|
|
- el.parentNode.querySelectorAll( 'ul > li:last-child > a' ).forEach( function( linkEl ) {
|
|
|
|
- linkEl.addEventListener( 'blur', function( event ) {
|
|
|
|
|
|
+ el.parentNode.querySelectorAll( "ul > li:last-child > a" ).forEach( function( linkEl ) {
|
|
|
|
+ linkEl.addEventListener( "blur", function( event ) {
|
|
if ( ! el.parentNode.contains( event.relatedTarget ) ) {
|
|
if ( ! el.parentNode.contains( event.relatedTarget ) ) {
|
|
- el.setAttribute( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ el.setAttribute( "aria-expanded", "false" );
|
|
}
|
|
}
|
|
- });
|
|
|
|
- });
|
|
|
|
|
|
+ } );
|
|
|
|
+ } );
|
|
} else {
|
|
} else {
|
|
- el.removeAttribute( 'aria-haspopup' ).removeAttribute( 'aria-expanded' );
|
|
|
|
|
|
+ el.removeAttribute( "aria-haspopup" ).removeAttribute( "aria-expanded" );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -76,19 +77,25 @@ function marianneExpandSubMenu( el ) {
|
|
* @param {Element} el - The element.
|
|
* @param {Element} el - The element.
|
|
*/
|
|
*/
|
|
function marianneExpandMobileMenu( el ) {
|
|
function marianneExpandMobileMenu( el ) {
|
|
- if ( 'true' !== el.getAttribute( 'aria-expanded' ) ) {
|
|
|
|
- el.setAttribute( 'aria-expanded', 'true' );
|
|
|
|
|
|
+ if ( "true" !== el.getAttribute( "aria-expanded" ) ) {
|
|
|
|
+ el.setAttribute( "aria-expanded", "true" );
|
|
} else {
|
|
} else {
|
|
- el.setAttribute( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ el.setAttribute( "aria-expanded", "false" );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-( function ( $ ) {
|
|
|
|
|
|
+( function( $ ) {
|
|
// Adds role and tabindex to menu links.
|
|
// Adds role and tabindex to menu links.
|
|
- var menu_elements = $( '#menu-primary .menu-item' );
|
|
|
|
|
|
+ var menu_elements = $( "#menu-primary .menu-item" );
|
|
|
|
+
|
|
menu_elements.each( function ( el, item ) {
|
|
menu_elements.each( function ( el, item ) {
|
|
- $( item ).children( 'a' ).attr( 'role', 'menu-item' );
|
|
|
|
- $( item ).children( 'a' ).attr( 'tabindex', '0' );
|
|
|
|
|
|
+ $( item )
|
|
|
|
+ .children( "a" )
|
|
|
|
+ .attr( "role", "menu-item" );
|
|
|
|
+
|
|
|
|
+ $( item )
|
|
|
|
+ .children( "a" )
|
|
|
|
+ .attr( "tabindex", "0" );
|
|
});
|
|
});
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -97,92 +104,117 @@ function marianneExpandMobileMenu( el ) {
|
|
* @param $id - The id of the primary menu.
|
|
* @param $id - The id of the primary menu.
|
|
*/
|
|
*/
|
|
function marianneAriaMenu( $id ) {
|
|
function marianneAriaMenu( $id ) {
|
|
- var id = $id + ' ';
|
|
|
|
|
|
+ var id = $id + " ";
|
|
|
|
|
|
// On screen wider than 500px.
|
|
// On screen wider than 500px.
|
|
- if ( ! window.matchMedia( '(max-width: 500px)' ).matches && ! window.matchMedia( '(hover: none)' ).matches ) {
|
|
|
|
|
|
+ if ( ! window.matchMedia( "(max-width: 500px)" ).matches
|
|
|
|
+ && ! window.matchMedia( "(hover: none)" ).matches
|
|
|
|
+ ) {
|
|
|
|
|
|
// Reset if the mobile menu was first displayed.
|
|
// Reset if the mobile menu was first displayed.
|
|
- if ( ! $( id + '.sub-menu-toggle' ).attr( 'aria-haspopup' ) || ! $( id + '.sub-menu-toggle' ).attr( 'aria-expended' ) ) {
|
|
|
|
- $( id + '.sub-menu-toggle' ).attr( 'aria-haspopup', 'true' );
|
|
|
|
- $( id + '.sub-menu-toggle' ).attr( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ if ( ! $( id + ".sub-menu-toggle" ).attr( "aria-haspopup" )
|
|
|
|
+ || ! $( id + ".sub-menu-toggle" ).attr( "aria-expended" )
|
|
|
|
+ ) {
|
|
|
|
+ $( id + ".sub-menu-toggle" ).attr( "aria-haspopup", "true" );
|
|
|
|
+ $( id + ".sub-menu-toggle" ).attr( "aria-expanded", "false" );
|
|
}
|
|
}
|
|
|
|
|
|
// On hover, set the aria-expanded attribute to true.
|
|
// On hover, set the aria-expanded attribute to true.
|
|
- $( id + '.menu-item-has-children' ).hover( function () {
|
|
|
|
- if ( $( this ).find( '.sub-menu-toggle' ).attr( 'aria-expanded') ) {
|
|
|
|
- $( this ).find( '.sub-menu-toggle' ).attr( 'aria-expanded', 'true' );
|
|
|
|
|
|
+ $( id + ".menu-item-has-children" ).hover( function() {
|
|
|
|
+ if ( $( this ).find( ".sub-menu-toggle" ).attr( "aria-expanded") ) {
|
|
|
|
+ $( this )
|
|
|
|
+ .find( ".sub-menu-toggle" )
|
|
|
|
+ .attr( "aria-expanded", "true" );
|
|
}
|
|
}
|
|
- }, function(){
|
|
|
|
- if ( $( this ).find( '.sub-menu-toggle' ).attr( 'aria-expanded') ) {
|
|
|
|
- $( this ).find( '.sub-menu-toggle' ).attr( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ }, function() {
|
|
|
|
+ if ( $( this ).find( ".sub-menu-toggle" ).attr( "aria-expanded") ) {
|
|
|
|
+ $( this )
|
|
|
|
+ .find( ".sub-menu-toggle" )
|
|
|
|
+ .attr( "aria-expanded", "false" );
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
// On submenu element focus, set the aria-expanded attribute to true.
|
|
// On submenu element focus, set the aria-expanded attribute to true.
|
|
- $( id + '.sub-menu a' ).focus( function( event ) {
|
|
|
|
- $( this ).parents( '.menu-item-has-children' ).find( '.sub-menu-toggle' )
|
|
|
|
- if ( $( this ).parents( '.menu-item-has-children' ).find( '.sub-menu-toggle' ).attr( 'aria-expanded' ) ) {
|
|
|
|
- $( this ).parents( '.menu-item-has-children' ).find( '.sub-menu-toggle' ).attr( 'aria-expanded', 'true' );
|
|
|
|
|
|
+ $( id + ".sub-menu a" ).focus( function() {
|
|
|
|
+ if ( $( this ).parents( ".menu-item-has-children" ).find( ".sub-menu-toggle" ).attr( "aria-expanded" ) ) {
|
|
|
|
+ $( this )
|
|
|
|
+ .parents( ".menu-item-has-children" )
|
|
|
|
+ .find( ".sub-menu-toggle" )
|
|
|
|
+ .attr( "aria-expanded", "true" );
|
|
}
|
|
}
|
|
- });
|
|
|
|
- $( id + '.sub-menu a' ).blur(function() {
|
|
|
|
- if( $( this ).parents( '.menu-item-has-children' ).find( '.sub-menu-toggle' ).attr( 'aria-expanded' ) ) {
|
|
|
|
- $( this ).parents( '.menu-item-has-children' ).find( '.sub-menu-toggle' ).attr( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ } );
|
|
|
|
+
|
|
|
|
+ $( id + ".sub-menu a" ).blur( function() {
|
|
|
|
+ if ( $( this ).parents( ".menu-item-has-children" ).find( ".sub-menu-toggle" ).attr( "aria-expanded" ) ) {
|
|
|
|
+ $( this )
|
|
|
|
+ .parents( ".menu-item-has-children" )
|
|
|
|
+ .find( ".sub-menu-toggle" )
|
|
|
|
+ .attr( "aria-expanded", "false" );
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
// On submenu button focus, set the aria-expanded attribute to true.
|
|
// On submenu button focus, set the aria-expanded attribute to true.
|
|
- $( id + '.sub-menu-toggle' ).focus( function( event ) {
|
|
|
|
- if ( $( this ).closest( '.menu-item-has-children' ).find( '.sub-menu-toggle' ).attr( 'aria-expanded' ) ) {
|
|
|
|
- $( this ).closest( '.menu-item-has-children' ).find( '.sub-menu-toggle' ).attr( 'aria-expanded', 'true' );
|
|
|
|
|
|
+ $( id + ".sub-menu-toggle" ).focus( function() {
|
|
|
|
+ if ( $( this ).closest( ".menu-item-has-children" ).find( ".sub-menu-toggle" ).attr( "aria-expanded" ) ) {
|
|
|
|
+ $( this )
|
|
|
|
+ .closest( ".menu-item-has-children" )
|
|
|
|
+ .find( ".sub-menu-toggle" )
|
|
|
|
+ .attr( "aria-expanded", "true" );
|
|
}
|
|
}
|
|
- });
|
|
|
|
- $( id + '.sub-menu-toggle' ).blur(function() {
|
|
|
|
- if ( $( this ).closest( '.menu-item-has-children' ).find( '.sub-menu-toggle' ).attr( 'aria-expanded' ) ) {
|
|
|
|
- $( this ).closest( '.menu-item-has-children' ).find( '.sub-menu-toggle' ).attr( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ } );
|
|
|
|
+
|
|
|
|
+ $( id + ".sub-menu-toggle" ).blur( function() {
|
|
|
|
+ if ( $( this ).closest( ".menu-item-has-children" ).find( ".sub-menu-toggle" ).attr( "aria-expanded" ) ) {
|
|
|
|
+ $( this )
|
|
|
|
+ .closest( ".menu-item-has-children" )
|
|
|
|
+ .find( ".sub-menu-toggle" )
|
|
|
|
+ .attr( "aria-expanded", "false" );
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
// When esc key is pressed, set the aria-expanded attribute to false.
|
|
// When esc key is pressed, set the aria-expanded attribute to false.
|
|
- document.addEventListener( 'keydown', function( event ) {
|
|
|
|
|
|
+ document.addEventListener( "keydown", function( event ) {
|
|
var escKey = event.keyCode === 27;
|
|
var escKey = event.keyCode === 27;
|
|
|
|
+
|
|
if ( escKey ) {
|
|
if ( escKey ) {
|
|
- $( '.sub-menu-toggle' ).attr( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ $( ".sub-menu-toggle" ).attr( "aria-expanded", "false" );
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
// On small screen.
|
|
// On small screen.
|
|
} else {
|
|
} else {
|
|
- $( id + '.sub-menu-toggle' ).removeAttr( 'aria-haspopup' );
|
|
|
|
- $( id + '.sub-menu-toggle' ).removeAttr( 'aria-expanded' );
|
|
|
|
|
|
+ $( id + ".sub-menu-toggle" ).removeAttr( "aria-haspopup" );
|
|
|
|
+ $( id + ".sub-menu-toggle" ).removeAttr( "aria-expanded" );
|
|
|
|
|
|
- $( '#menu-mobile-button' ).attr( 'aria-haspopup', 'true' ).attr( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ $( "#menu-mobile-button" )
|
|
|
|
+ .attr( "aria-haspopup", "true" )
|
|
|
|
+ .attr( "aria-expanded", "false" );
|
|
|
|
|
|
// When esc key is pressed, hide menu.
|
|
// When esc key is pressed, hide menu.
|
|
$( document ).keydown( function( e ) {
|
|
$( document ).keydown( function( e ) {
|
|
var escKey = e.keyCode === 27;
|
|
var escKey = e.keyCode === 27;
|
|
|
|
+
|
|
if ( escKey ) {
|
|
if ( escKey ) {
|
|
- $( '#menu-mobile-button' ).attr( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ $( "#menu-mobile-button" ).attr( "aria-expanded", "false" );
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
$( document ).mouseup( function( e ) {
|
|
$( document ).mouseup( function( e ) {
|
|
- var container = $( '#menu-primary-container' );
|
|
|
|
|
|
+ var container = $( "#menu-primary-container" );
|
|
|
|
|
|
- if ( ! container.is( e.target ) && container.has( e.target ).length === 0) {
|
|
|
|
- $( '#menu-mobile-button' ).attr( 'aria-expanded', 'false' );
|
|
|
|
|
|
+ if ( ! container.is( e.target ) && container.has( e.target ).length === 0 ) {
|
|
|
|
+ $( "#menu-mobile-button" ).attr( "aria-expanded", "false" );
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ } );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- $( window ).on( 'load', function() {
|
|
|
|
- marianneAriaMenu( '#menu-primary' );
|
|
|
|
- });
|
|
|
|
|
|
+ $( window ).on( "load", function() {
|
|
|
|
+ marianneAriaMenu( "#menu-primary" );
|
|
|
|
+ } );
|
|
|
|
|
|
- $( window ).on( 'resize', function() {
|
|
|
|
- marianneAriaMenu( '#menu-primary' );
|
|
|
|
- });
|
|
|
|
|
|
+ $( window ).on( "resize", function() {
|
|
|
|
+ marianneAriaMenu( "#menu-primary" );
|
|
|
|
+ } );
|
|
|
|
|
|
} )( jQuery );
|
|
} )( jQuery );
|