WordPress.org

Make WordPress Core

Changeset 46787


Ignore:
Timestamp:
11/26/2019 06:41:31 PM (10 months ago)
Author:
desrosj
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, ianbelanger.
Fixes #48601.

Location:
branches/5.3
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • branches/5.3

  • branches/5.3/src/wp-content/themes/twentytwenty/assets/js/index.js

    r46712 r46787  
    7272// Add a class to the body for when touch is enabled for browsers that don't support media queries
    7373// for interaction media features. Adapted from <https://codepen.io/Ferie/pen/vQOMmO>
    74 ( function() {
    75     var matchMedia = function() {
    76         // Include the 'heartz' as a way to have a non matching MQ to help terminate the join. See <https://git.io/vznFH>.
    77         var prefixes = [ '-webkit-', '-moz-', '-o-', '-ms-' ];
    78         var query = [ '(', prefixes.join( 'touch-enabled),(' ), 'heartz', ')' ].join( '' );
    79         return window.matchMedia && window.matchMedia( query ).matches;
    80     };
    81 
    82     if ( ( 'ontouchstart' in window ) || ( window.DocumentTouch && document instanceof window.DocumentTouch ) || matchMedia() ) {
    83         document.body.classList.add( 'touch-enabled' );
    84     }
    85 }() );
     74twentytwenty.touchEnabled = {
     75
     76    init: function() {
     77        var matchMedia = function() {
     78            // Include the 'heartz' as a way to have a non matching MQ to help terminate the join. See <https://git.io/vznFH>.
     79            var prefixes = [ '-webkit-', '-moz-', '-o-', '-ms-' ];
     80            var query = [ '(', prefixes.join( 'touch-enabled),(' ), 'heartz', ')' ].join( '' );
     81            return window.matchMedia && window.matchMedia( query ).matches;
     82        };
     83
     84        if ( ( 'ontouchstart' in window ) || ( window.DocumentTouch && document instanceof window.DocumentTouch ) || matchMedia() ) {
     85            document.body.classList.add( 'touch-enabled' );
     86        }
     87    }
     88}; // twentytwenty.touchEnabled
    8689
    8790/*  -----------------------------------------------------------------------------------------------
     
    746749    twentytwenty.modalMenu.init();  // Modal Menu
    747750    twentytwenty.primaryMenu.init();    // Primary Menu
     751    twentytwenty.touchEnabled.init();   // Add class to body if device is touch-enabled
    748752} );
    749753
Note: See TracChangeset for help on using the changeset viewer.