sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Bundled Themes: Fixes JS TypeError in Twenty Twenty.

Browse Source 
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
This commit is contained in:
Ian Belanger 2019-11-26 18:19:54 +00:00
parent 4159a41cef
commit 43ecd78bd3
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/wp-content/themes/twentytwenty/assets/js/index.js
View File

@ -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 <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;
};
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 <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
/* -----------------------------------------------------------------------------------------------
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
} );
/* -----------------------------------------------------------------------------------------------