diff --git a/src/wp-content/themes/twentyeleven/functions.php b/src/wp-content/themes/twentyeleven/functions.php index 251d2807a41e8..c6f669f01f577 100644 --- a/src/wp-content/themes/twentyeleven/functions.php +++ b/src/wp-content/themes/twentyeleven/functions.php @@ -303,10 +303,23 @@ function twentyeleven_setup() { * Enqueues scripts and styles for front end. * * @since Twenty Eleven 2.9 + * @since Twenty Eleven 5.3 Added navigation script for touch devices. */ function twentyeleven_scripts_styles() { // Theme block stylesheet. wp_enqueue_style( 'twentyeleven-block-style', get_template_directory_uri() . '/blocks.css', array(), '20240703' ); + + // Adds JavaScript for opening submenus on touch devices. + wp_enqueue_script( + 'twentyeleven-navigation', + get_template_directory_uri() . '/js/navigation.js', + array(), + '20261028', + array( + 'in_footer' => false, + 'strategy' => 'defer', + ) + ); } add_action( 'wp_enqueue_scripts', 'twentyeleven_scripts_styles' ); diff --git a/src/wp-content/themes/twentyeleven/js/navigation.js b/src/wp-content/themes/twentyeleven/js/navigation.js new file mode 100644 index 0000000000000..92277d701d394 --- /dev/null +++ b/src/wp-content/themes/twentyeleven/js/navigation.js @@ -0,0 +1,68 @@ +/** + * Makes submenus of the main navigation menu usable on touch devices. + * + * Submenus are only shown on hover, which touch devices emulate + * inconsistently. The first tap on a menu item with a submenu opens + * the submenu, and a second tap follows the link. + */ +( function() { + var nav = document.getElementById( 'access' ); + + if ( ! nav || ! ( 'ontouchstart' in window ) ) { + return; + } + + /** + * Closes all open submenus, except the ones containing the given menu item. + * + * @since Twenty Eleven 5.3 + * + * @param {Element} [item] Menu item whose submenus stay open. + */ + function closeSubmenus( item ) { + nav.querySelectorAll( '.focus' ).forEach( function( openItem ) { + if ( ! item || ! openItem.contains( item ) ) { + openItem.classList.remove( 'focus' ); + } + } ); + } + + /** + * Opens the submenu of a tapped menu item, unless it is already open. + * + * @since Twenty Eleven 5.3 + * + * @param {TouchEvent} event Touch event within the menu. + */ + function onTouchStart( event ) { + var link = event.target.closest( + '.menu-item-has-children > a, .page_item_has_children > a' + ); + + if ( ! link || link.parentNode.classList.contains( 'focus' ) ) { + return; + } + + // Open the submenu instead of following the link. + event.preventDefault(); + closeSubmenus( link.parentNode ); + link.parentNode.classList.add( 'focus' ); + } + + // Listen on the container, as the Customizer may re-render the menu. + nav.addEventListener( 'touchstart', onTouchStart ); + + // Close open submenus when tapping outside the menu. + document.addEventListener( 'touchstart', function( event ) { + if ( ! nav.contains( event.target ) ) { + closeSubmenus(); + } + } ); + + // Close submenus when the page is restored from the back/forward cache. + window.addEventListener( 'pageshow', function( event ) { + if ( event.persisted ) { + closeSubmenus(); + } + } ); +} )(); diff --git a/src/wp-content/themes/twentyeleven/style.css b/src/wp-content/themes/twentyeleven/style.css index 59955886a9049..56d8131672533 100644 --- a/src/wp-content/themes/twentyeleven/style.css +++ b/src/wp-content/themes/twentyeleven/style.css @@ -636,6 +636,7 @@ a.assistive-text:focus, background: #efefef; } #access li:hover > a, +#access li.focus > a, #access a:focus { background: #f9f9f9; /* Show a solid color for older browsers */ background: -moz-linear-gradient(#f9f9f9, #e5e5e5); @@ -644,7 +645,8 @@ a.assistive-text:focus, background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); color: #373737; } -#access ul li:hover > ul { +#access ul li:hover > ul, +#access ul li.focus > ul { display: block; } #access .current-menu-item > a,