From 43ecd78bd3163db63fb9f61ddaffc05256be473d Mon Sep 17 00:00:00 2001 From: Ian Belanger Date: Tue, 26 Nov 2019 18:19:54 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@46786 602fd350-edb4-49c9-b593-d223f7449a82 --- .../themes/twentytwenty/assets/js/index.js | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/wp-content/themes/twentytwenty/assets/js/index.js b/src/wp-content/themes/twentytwenty/assets/js/index.js index 60b007ccef..9234f11976 100644 --- a/src/wp-content/themes/twentytwenty/assets/js/index.js +++ b/src/wp-content/themes/twentytwenty/assets/js/index.js @@ -71,18 +71,21 @@ if ( ! Element.prototype.matches ) { // 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 -( function() { - var matchMedia = function() { - // Include the 'heartz' as a way to have a non matching MQ to help terminate the join. See . - var prefixes = [ '-webkit-', '-moz-', '-o-', '-ms-' ]; - var query = [ '(', prefixes.join( 'touch-enabled),(' ), 'heartz', ')' ].join( '' ); - return window.matchMedia && window.matchMedia( query ).matches; - }; +twentytwenty.touchEnabled = { - if ( ( 'ontouchstart' in window ) || ( window.DocumentTouch && document instanceof window.DocumentTouch ) || matchMedia() ) { - document.body.classList.add( 'touch-enabled' ); + init: function() { + var matchMedia = function() { + // Include the 'heartz' as a way to have a non matching MQ to help terminate the join. See . + 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 /* ----------------------------------------------------------------------------------------------- Cover Modals @@ -745,6 +748,7 @@ twentytwentyDomReady( function() { twentytwenty.smoothScroll.init(); // Smooth scroll to anchor link or a specific element twentytwenty.modalMenu.init(); // Modal Menu twentytwenty.primaryMenu.init(); // Primary Menu + twentytwenty.touchEnabled.init(); // Add class to body if device is touch-enabled } ); /* -----------------------------------------------------------------------------------------------