Changeset 46786

Timestamp:

11/26/2019 06:19:54 PM (5 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
 } );