Changeset 43904 for branches/5.0/src/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js

Timestamp:

11/16/2018 12:13:32 AM (6 years ago)

Author:

allancole

Message:

Updating Twenty Nineteen, our new default theme for 2019, set for 5.0.

This update changes the following:

• Improve menu UI to support keyboard navigation in both directions
• Improve more-menu-link visibility when no menu items are hidden
• Improve text-selection custom colors for better contrast and legibility
• Improve support for sticky toolbars in the editor
• Improve table element fonts
• Add .button class support
• Remove translation escaping
• Fix menu JS to prevent unused touched event listeners
• Fix duplicate more-menu-link issue on selective refresh in the customizer
• Fix editor font-weights for headings
• Fix search form input style
• Fix nested blockquote styles
• Fix download block button style when download text stretches more than one line
• Fix audio block centering issue
• Fix align-full blocks in the editor so they don’t create horizontal scrollbars
• Fix editor to prevent Gutenberg's meta boxes area from overlapping the content

Initial development occurred on GitHub. See: ​https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, ntwb, b-07, khleomix, audrasjb, nielslange, mmaumio, richsalvucci, littlebigthing, dimadin, joyously, anevins12, peterwilsoncc, DannyCooper, WPprodigy, siriokun, briannaorg, 00travelgirl00, shahjehanali1, ianbelanger79, nadim1992, Ismail-elkorchi, nativeinside, iamchetanp, grappler, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, jasmussen, laurelfulford, mdawaffe, kraftbj, dereksmart, naokomc, mayukojpn, enodekciw, chetansatasiya, ketuchetan, atanas-angelov-dev, carolinan, sharazghouri, artisan-asad, mukeshpanchal27, mukesh27, burhandodhy, @crunnells, aryaprakasa, tlxo, themeroots, whizbangik, yingles, tlxo, youthkee, brentswisher, smy315, ahmadawais, desi-developer, 2ndkauboy, mor10.

File:

• branches/5.0/src/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js (modified) (13 diffs)

branches/5.0/src/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js

@@ -7 +7 @@
 (function() {
 
-    // Debounce
+    /**
+     * Debounce
+     *
+     * @param {Function} func
+     * @param {number} wait
+     * @param {boolean} immediate
+     */
     function debounce(func, wait, immediate) {
         'use strict';
@@ -37 +43 @@
     }
 
-    // Add Class
+    /**
+     * Add class
+     *
+     * @param {Object} el
+     * @param {string} cls
+     */
     function addClass(el, cls) {
         if ( ! el.className.match( '(?:^|\\s)' + cls + '(?!\\S)') ) {
@@ -44 +55 @@
     }
 
-    // Delete Class
+    /**
+     * Delete class
+     *
+     * @param {Object} el
+     * @param {string} cls
+     */
     function deleteClass(el, cls) {
         el.className = el.className.replace( new RegExp( '(?:^|\\s)' + cls + '(?!\\S)' ),'' );
     }
 
-    // Has Class?
+    /**
+     * Has class?
+     *
+     * @param {Object} el
+     * @param {string} cls
+     *
+     * @returns {boolean} Has class
+     */
     function hasClass(el, cls) {
 
@@ -57 +80 @@
     }
 
-    // Toggle Aria Expanded state for screenreaders
+    /**
+     * Toggle Aria Expanded state for screenreaders
+     *
+     * @param {Object} ariaItem
+     */
     function toggleAriaExpandedState( ariaItem ) {
         'use strict';
@@ -72 +99 @@
     }
 
-    // Open sub-menu
+    /**
+     * Open sub-menu
+     *
+     * @param {Object} currentSubMenu
+     */
     function openSubMenu( currentSubMenu ) {
         'use strict';
@@ -85 +116 @@
     }
 
-    // Close sub-menu
+    /**
+     * Close sub-menu
+     *
+     * @param {Object} currentSubMenu
+     */
     function closeSubMenu( currentSubMenu ) {
         'use strict';
@@ -117 +152 @@
     }
 
-    // Find first ancestor of an element by selector
+    /**
+     * Find first ancestor of an element by selector
+     *
+     * @param {Object} child
+     * @param {String} selector
+     * @param {String} stopSelector
+     */
     function getCurrentParent( child, selector, stopSelector ) {
 
@@ -140 +181 @@
     }
 
-    // Remove all off-canvas states
+    /**
+     * Remove all off-canvas states
+     */
     function removeAllFocusStates() {
         'use strict';
 
-        var getFocusedElements = document.querySelectorAll(':hover, :focus, :focus-within');
+        var siteBranding            = document.getElementsByClassName( 'site-branding' )[0];
+        var getFocusedElements      = siteBranding.querySelectorAll(':hover, :focus, :focus-within');
+        var getFocusedClassElements = siteBranding.querySelectorAll('.is-focused');
         var i;
+
 
         for ( i = 0; i < getFocusedElements.length; i++) {
             getFocusedElements[i].blur();
         }
-    }
-
-    // Matches polyfill for IE11
+
+        for ( o = 0; o < getFocusedClassElements.length; o++) {
+            deleteClass( getFocusedClassElements[o], 'is-focused' );
+        }
+    }
+
+    /**
+     * Matches polyfill for IE11
+     */
     if (!Element.prototype.matches) {
         Element.prototype.matches = Element.prototype.msMatchesSelector;
     }
 
-    // Toggle `focus` class to allow sub-menu access on touch screens.
+    /**
+     * Toggle `focus` class to allow sub-menu access on touch screens.
+     */
     function toggleSubmenuDisplay() {
 
@@ -211 +265 @@
                 // Prevent default mouse events
                 event.preventDefault();
-            }
-
-            // Prevent default mouse events
-            event.preventDefault();
+            } else if (
+                event.target.matches('.submenu-expand') ||
+                null != getCurrentParent( event.target, '.submenu-expand' ) &&
+                getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ||
+                event.target.matches('.menu-item-link-return') ||
+                null != getCurrentParent( event.target, '.menu-item-link-return' ) &&
+                getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) {
+                    // Prevent default mouse events
+                    event.preventDefault();
+            }
 
             // Prevent default mouse/focus events
@@ -223 +283 @@
         document.addEventListener('focus', function(event) {
 
-            if ( event.target.matches('.main-navigation > div > ul > li > a') ) {
-
-                // Remove Focuse elements in sibling div
-                var currentDiv        = getCurrentParent( event.target, 'div' );
+            if ( event.target.matches('.main-navigation > div > ul > li a') ) {
+
+                // Remove Focuse elements in sibling div
+                var currentDiv        = getCurrentParent( event.target, 'div' );
                 var currentDivSibling = currentDiv.previousElementSibling === null ? currentDiv.nextElementSibling : currentDiv.previousElementSibling;
                 var focusedElement    = currentDivSibling.querySelector( '.is-focused' );
                 var focusedClass      = 'is-focused';
-                var prevLi            = event.target.parentNode.previousElementSibling;
-                var nextLi            = event.target.parentNode.nextElementSibling;
+                var prevLi            = .previousElementSibling;
+                var nextLi            = .nextElementSibling;
 
                 if ( null !== focusedElement && null !== hasClass( focusedElement, focusedClass ) ) {
@@ -237 +297 @@
                 }
 
-                // Add .is-focused class to top-level ul
-                if ( event.target.parentNode.querySelector( '.main-navigation ul ul') ) {
-                    addClass( event.target.parentNode, focusedClass );
+                // Add .is-focused class to top-level 
+                if ( ) ) {
+                    addClass( , focusedClass );
                 }
 
@@ -252 +312 @@
                 }
             }
+
         }, true);
-    }
-
-    // Run our sub-menu function as soon as the document is `ready`
+
+        document.addEventListener('click', function(event) {
+
+            // Remove all focused menu states when clicking outside site branding
+            if ( event.target !== document.getElementsByClassName( 'site-branding' )[0] ) {
+                removeAllFocusStates();
+            } else {
+                // nothing
+            }
+
+        }, false);
+    }
+
+    /**
+     * Run our sub-menu function as soon as the document is `ready`
+     */
     document.addEventListener( 'DOMContentLoaded', function() {
         toggleSubmenuDisplay();
     });
-    // Annnnnd also every time the window resizes
+
+    /**
+     * Run our sub-menu function on selective refresh in the customizer
+     */
+    document.addEventListener( 'customize-preview-menu-refreshed', function( e, params ) {
+        if ( 'menu-1' === params.wpNavMenuArgs.theme_location ) {
+            toggleSubmenuDisplay();
+        }
+    });
+
+    /**
+     * Run our sub-menu function every time the window resizes
+     */
     var isResizing = false;
-    window.addEventListener( 'resize',
+    window.addEventListener( 'resize', function() {
+        isResizing = true;
         debounce( function() {
             if ( isResizing ) {
@@ -267 +354 @@
             }
 
-            isResizing = true;
-            setTimeout( function() {
-                toggleSubmenuDisplay();
-                isResizing = false;
-            }, 150 );
-        } )
-    );
+            toggleSubmenuDisplay();
+            isResizing = false;
+
+        }, 150 );
+    } );
 
 })();