Changeset 46786 for trunk

Timestamp:

11/26/2019 06:19:54 PM (7 years ago)

Author:

ianbelanger

Message:

Bundled Themes: Fixes JS TypeError in Twenty Twenty.

On mobile devices using a webkit browser, the menu and search modals could not be opened due to a TypeError: document.body is null. This commit fixes that issue by adding a touch-enabled class to the body for browsers that do not support media queries.

Props quicoto, poena, Boga86, acosmin, macmanx.
Fixes #48601.

File:

• trunk/src/wp-content/themes/twentytwenty/assets/js/index.js (modified) (2 diffs)

trunk/src/wp-content/themes/twentytwenty/assets/js/index.js

@@ -72 +72 @@
 // Add a class to the body for when touch is enabled for browsers that don't support media queries
 // for interaction media features. Adapted from <https://codepen.io/Ferie/pen/vQOMmO>
-( function() {
-        var matchMedia = function() {
-                // Include the 'heartz' as a way to have a non matching MQ to help terminate the join. See <https://git.io/vznFH>.
-                var prefixes = [ '-webkit-', '-moz-', '-o-', '-ms-' ];
-                var query = [ '(', prefixes.join( 'touch-enabled),(' ), 'heartz', ')' ].join( '' );
-                return window.matchMedia && window.matchMedia( query ).matches;
-        };
-
-        if ( ( 'ontouchstart' in window ) || ( window.DocumentTouch && document instanceof window.DocumentTouch ) || matchMedia() ) {
-                document.body.classList.add( 'touch-enabled' );
-        }
-}() );
+twentytwenty.touchEnabled = {
+
+        init: function() {
+                var matchMedia = function() {
+                        // Include the 'heartz' as a way to have a non matching MQ to help terminate the join. See <https://git.io/vznFH>.
+                        var prefixes = [ '-webkit-', '-moz-', '-o-', '-ms-' ];
+                        var query = [ '(', prefixes.join( 'touch-enabled),(' ), 'heartz', ')' ].join( '' );
+                        return window.matchMedia && window.matchMedia( query ).matches;
+                };
+
+                if ( ( 'ontouchstart' in window ) || ( window.DocumentTouch && document instanceof window.DocumentTouch ) || matchMedia() ) {
+                        document.body.classList.add( 'touch-enabled' );
+                }
+        }
+}; // twentytwenty.touchEnabled
 
 /*      -----------------------------------------------------------------------------------------------
@@ -746 +749 @@
         twentytwenty.modalMenu.init();  // Modal Menu
         twentytwenty.primaryMenu.init();        // Primary Menu
+        twentytwenty.touchEnabled.init();       // Add class to body if device is touch-enabled
 } );