From 8e262a783bf03d24bbf1724469b6d33bec4be0bc Mon Sep 17 00:00:00 2001 From: Felix Arntz Date: Thu, 16 Sep 2021 14:45:35 -0700 Subject: [PATCH 1/3] Remove jQuery in the frontend for Twenty Twelve. --- .../themes/twentytwelve/functions.php | 2 +- .../themes/twentytwelve/js/navigation.js | 85 +++++++++++++------ 2 files changed, 62 insertions(+), 25 deletions(-) diff --git a/src/wp-content/themes/twentytwelve/functions.php b/src/wp-content/themes/twentytwelve/functions.php index a4df147cb2640..ed74b5b489d8d 100644 --- a/src/wp-content/themes/twentytwelve/functions.php +++ b/src/wp-content/themes/twentytwelve/functions.php @@ -199,7 +199,7 @@ function twentytwelve_scripts_styles() { } // Adds JavaScript for handling the navigation menu hide-and-show behavior. - wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20141205', true ); + wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20210916', true ); $font_url = twentytwelve_get_font_url(); if ( ! empty( $font_url ) ) { diff --git a/src/wp-content/themes/twentytwelve/js/navigation.js b/src/wp-content/themes/twentytwelve/js/navigation.js index f7141bff7eefa..6411c20e0d1c6 100644 --- a/src/wp-content/themes/twentytwelve/js/navigation.js +++ b/src/wp-content/themes/twentytwelve/js/navigation.js @@ -3,6 +3,40 @@ * accessibility for submenu items. */ ( function() { + function getParentElements( element, selector ) { + var parentElements = []; + + while ( element.parentElement !== null ) { + if ( ! selector || element.parentElement.matches( selector ) ) { + parentElements.push( element.parentElement ); + } + + element = element.parentElement; + } + + return parentElements; + } + + function getSiblingElements( element, selector ) { + var siblingElements = []; + + Array.from( element.parentElement.children ).forEach( function( sibling ) { + if ( sibling !== element && ( ! selector || sibling.matches( selector ) ) ) { + siblingElements.push( sibling ); + } + } ); + + return siblingElements; + } + + function toggleClass( element, className ) { + if ( -1 !== element.className.indexOf( className ) ) { + element.className = element.className.replace( ' ' + className, '' ); + } else { + element.className += ' ' + className; + } + } + var nav = document.getElementById( 'site-navigation' ), button, menu; if ( ! nav ) { return; @@ -25,31 +59,34 @@ menu.className = 'nav-menu'; } - if ( -1 !== button.className.indexOf( 'toggled-on' ) ) { - button.className = button.className.replace( ' toggled-on', '' ); - menu.className = menu.className.replace( ' toggled-on', '' ); - } else { - button.className += ' toggled-on'; - menu.className += ' toggled-on'; - } + toggleClass( button, 'toggled-on' ); + toggleClass( menu, 'toggled-on' ); }; -} )(); -// Better focus for hidden submenu items for accessibility. -( function( $ ) { - $( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve blur.twentytwelve', function() { - $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' ); + // Better focus for hidden submenu items for accessibility. + function toggleParentsFocusClass() { + getParentElements( this, '.menu-item, .page_item' ).forEach( function( parentElement ) { + toggleClass( parentElement, 'focus' ); + } ); + } + Array.from( document.querySelector( '.main-navigation' ).getElementsByTagName( 'a' ) ).forEach( function( menuLink ) { + menuLink.addEventListener( 'focus', toggleParentsFocusClass ); + menuLink.addEventListener( 'blur', toggleParentsFocusClass ); } ); - if ( 'ontouchstart' in window ) { - $('body').on( 'touchstart.twentytwelve', '.menu-item-has-children > a, .page_item_has_children > a', function( e ) { - var el = $( this ).parent( 'li' ); - - if ( ! el.hasClass( 'focus' ) ) { - e.preventDefault(); - el.toggleClass( 'focus' ); - el.siblings( '.focus').removeClass( 'focus' ); - } - } ); - } -} )( jQuery ); + if ( 'ontouchstart' in window ) { + Array.from( document.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' ) ).forEach( function( menuLink ) { + menuLink.addEventListener( 'touchstart', function( e ) { + var el = getParentElements( this, 'li' )[0]; + + if ( -1 === el.className.indexOf( 'focus' ) ) { + e.preventDefault(); + el.className += ' focus'; + getSiblingElements( el, '.focus' ).forEach( function( siblingElement ) { + siblingElement.className.replace( ' focus', '' ); + } ); + } + } ); + } ); + } +} )(); From dfacf4358979d8376b3bfb2aed02d4f6dfb4acbc Mon Sep 17 00:00:00 2001 From: Felix Arntz Date: Thu, 17 Feb 2022 15:36:50 -0500 Subject: [PATCH 2/3] Address code review feedback, simplify JS. --- .../themes/twentytwelve/js/navigation.js | 43 +++++++++++-------- 1 file changed, 25 insertions(+), 18 deletions(-) diff --git a/src/wp-content/themes/twentytwelve/js/navigation.js b/src/wp-content/themes/twentytwelve/js/navigation.js index 6411c20e0d1c6..181084765a874 100644 --- a/src/wp-content/themes/twentytwelve/js/navigation.js +++ b/src/wp-content/themes/twentytwelve/js/navigation.js @@ -20,7 +20,7 @@ function getSiblingElements( element, selector ) { var siblingElements = []; - Array.from( element.parentElement.children ).forEach( function( sibling ) { + element.parentElement.children.forEach( function( sibling ) { if ( sibling !== element && ( ! selector || sibling.matches( selector ) ) ) { siblingElements.push( sibling ); } @@ -29,14 +29,6 @@ return siblingElements; } - function toggleClass( element, className ) { - if ( -1 !== element.className.indexOf( className ) ) { - element.className = element.className.replace( ' ' + className, '' ); - } else { - element.className += ' ' + className; - } - } - var nav = document.getElementById( 'site-navigation' ), button, menu; if ( ! nav ) { return; @@ -55,35 +47,50 @@ } button.onclick = function() { - if ( -1 === menu.className.indexOf( 'nav-menu' ) ) { + if ( ! menu.classList.contains( 'nav-menu' ) ) { menu.className = 'nav-menu'; } - toggleClass( button, 'toggled-on' ); - toggleClass( menu, 'toggled-on' ); + button.classList.toggle( 'toggled-on' ); + menu.classList.toggle( 'toggled-on' ); }; // Better focus for hidden submenu items for accessibility. function toggleParentsFocusClass() { getParentElements( this, '.menu-item, .page_item' ).forEach( function( parentElement ) { - toggleClass( parentElement, 'focus' ); + parentElement.classList.toggle( 'focus' ); } ); } - Array.from( document.querySelector( '.main-navigation' ).getElementsByTagName( 'a' ) ).forEach( function( menuLink ) { + document.querySelector( '.main-navigation' ).getElementsByTagName( 'a' ).forEach( function( menuLink ) { menuLink.addEventListener( 'focus', toggleParentsFocusClass ); menuLink.addEventListener( 'blur', toggleParentsFocusClass ); } ); if ( 'ontouchstart' in window ) { - Array.from( document.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' ) ).forEach( function( menuLink ) { + document.body.addEventListener( 'touchstart', function( e ) { + for ( var target = e.target; target && target != this; target = target.parentNode ) { + if ( target.matches( '.menu-item-has-children > a, .page_item_has_children > a' ) ) { + var el = getParentElements( target, 'li' )[0]; + if ( el.classList.contains( 'focus' ) ) { + e.preventDefault(); + el.classList.add( 'focus' ); + getSiblingElements( el, '.focus' ).forEach( function( siblingElement ) { + siblingElement.classList.remove( 'focus' ); + } ); + } + break; + } + } + } ); + document.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' ).forEach( function( menuLink ) { menuLink.addEventListener( 'touchstart', function( e ) { var el = getParentElements( this, 'li' )[0]; - if ( -1 === el.className.indexOf( 'focus' ) ) { + if ( el.classList.contains( 'focus' ) ) { e.preventDefault(); - el.className += ' focus'; + el.classList.add( 'focus' ); getSiblingElements( el, '.focus' ).forEach( function( siblingElement ) { - siblingElement.className.replace( ' focus', '' ); + siblingElement.classList.remove( 'focus' ); } ); } } ); From 36962d0488a46c2a5dfe3eb98553fbe296dbcacd Mon Sep 17 00:00:00 2001 From: Felix Arntz Date: Thu, 17 Feb 2022 15:37:27 -0500 Subject: [PATCH 3/3] Update script version. --- src/wp-content/themes/twentytwelve/functions.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-content/themes/twentytwelve/functions.php b/src/wp-content/themes/twentytwelve/functions.php index 2fa8cf7a21e16..cc050cf447b14 100644 --- a/src/wp-content/themes/twentytwelve/functions.php +++ b/src/wp-content/themes/twentytwelve/functions.php @@ -199,7 +199,7 @@ function twentytwelve_scripts_styles() { } // Adds JavaScript for handling the navigation menu hide-and-show behavior. - wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20210916', true ); + wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20220217', true ); $font_url = twentytwelve_get_font_url(); if ( ! empty( $font_url ) ) {