Restrict page previews to browsers that support multiple not selectors

Change-Id: Ia45c03d1fd6949bf83ebed6d40075e453e42cdd7
This commit is contained in:
Jon Robson 2023-05-12 13:40:03 -07:00
parent d4376bf203
commit 8f03303dc4
4 changed files with 10 additions and 38 deletions

Binary file not shown.

Binary file not shown.

View file

@ -1,7 +1,14 @@
var types = require( './types.json' );
// Load Popups when touch events are not available in the browser (e.g. not a mobile device).
var isTouchDevice = 'ontouchstart' in document.documentElement;
if ( !isTouchDevice ) {
var supportNotQueries;
try {
supportNotQueries = document.body.matches( 'div:not(.foo,.bar)' );
supportNotQueries = true;
} catch ( e ) {
supportNotQueries = false;
}
if ( !isTouchDevice && supportNotQueries ) {
mw.loader.using( types.concat( [ 'ext.popups.main' ] ) ).then( function () {
// Load custom popup types
types.forEach( function ( moduleName ) {

View file

@ -111,38 +111,9 @@ export function createNullModel( title, url ) {
* @return {boolean}
*/
const elementMatchesSelector = ( element, selector ) => {
try {
return element.matches( selector );
} catch ( e ) {
// The native element.matches method will fail if:
// 1) The method hasn't been implemented in the current browser
// 2) The method doesn't suppport :not with multiple arguments
// (https://caniuse.com/css-not-sel-list)
// The try / catch block can be removed if and when Popups is restricted
// to ES6 browsers.
return $( element ).is( selector );
}
return element.matches( selector );
};
/**
* Emulates closest method for browsers that do not
* support it. e.g. IE11.
*
* @param {Element} element
* @param {string} selector
* @return {Element|null}
*/
function legacyClosest( element, selector ) {
const parentNode = element.parentNode;
if ( elementMatchesSelector( element, selector ) ) {
return element;
} else if ( !parentNode || parentNode === document.body ) {
// The `body` cannot be used as a preview selector.
return null;
}
return legacyClosest( parentNode, selector );
}
/**
* Recursively checks the element and its parents.
* @param {Element} element
@ -150,13 +121,7 @@ function legacyClosest( element, selector ) {
*/
export function findNearestEligibleTarget( element ) {
const selector = selectors.join( ', ' );
try {
return element.closest( selector );
} catch ( e ) {
// The browser either doesn't support the selector we gave it or doesn't
// have the closest method.
return legacyClosest( element, selector );
}
return element.closest( selector );
}
/**