Issue #3239500 by hooroomoo, bnjmnm, lauriii: Add Array.includes polyfill to...

Issue #3239500 by hooroomoo, bnjmnm, lauriii: Add Array.includes polyfill to support IE11 and Opera Mini

(cherry picked from commit b615dbd2)

core/core.libraries.yml

@@ -383,6 +383,11 @@ drupal.array.find:
   js:
     misc/polyfills/array.find.js: { weight: -20 }
 
+drupal.array.includes:
+  version: VERSION
+  js:
+    misc/polyfills/array.includes.js: { weight: -20 }
+
 drupal.batch:
   version: VERSION
   js:

core/misc/polyfills/array.includes.es6.js

+/**
+ * @file
+ * Provides a polyfill for Array.includes().
+ *
+ * This is needed for Internet Explorer 11 and Opera Mini.
+ *
+ * This has based on MDN Web Docs code samples. Code samples in the MDN Web Docs
+ * are licensed under CC0.
+ *
+ * @see https://web.archive.org/web/20161012020930/https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
+ * @see https://developer.mozilla.org/en-US/docs/MDN/About#Code_samples_and_snippets
+ */
+if (!Array.prototype.includes) {
+  // eslint-disable-next-line no-extend-native
+  Array.prototype.includes = function (searchElement) {
+    if (this == null) {
+      throw new TypeError(
+        'Array.prototype.includes called on null or undefined',
+      );
+    }
+
+    const O = Object(this);
+    const len = parseInt(O.length, 10) || 0;
+    if (len === 0) {
+      return false;
+    }
+    // eslint-disable-next-line prefer-rest-params
+    const n = parseInt(arguments[1], 10) || 0;
+    let k;
+    if (n >= 0) {
+      k = n;
+    } else {
+      k = len + n;
+      if (k < 0) {
+        k = 0;
+      }
+    }
+    let currentElement;
+    while (k < len) {
+      currentElement = O[k];
+      if (
+        searchElement === currentElement ||
+        // eslint-disable-next-line no-self-compare
+        (searchElement !== searchElement && currentElement !== currentElement)
+      ) {
+        // NaN !== NaN
+        return true;
+      }
+      k += 1;
+    }
+    return false;
+  };
+}

core/misc/polyfills/array.includes.js

+/**
+* DO NOT EDIT THIS FILE.
+* See the following change record for more information,
+* https://www.drupal.org/node/2815083
+* @preserve
+**/
+
+if (!Array.prototype.includes) {
+  Array.prototype.includes = function (searchElement) {
+    if (this == null) {
+      throw new TypeError('Array.prototype.includes called on null or undefined');
+    }
+
+    var O = Object(this);
+    var len = parseInt(O.length, 10) || 0;
+
+    if (len === 0) {
+      return false;
+    }
+
+    var n = parseInt(arguments[1], 10) || 0;
+    var k;
+
+    if (n >= 0) {
+      k = n;
+    } else {
+      k = len + n;
+
+      if (k < 0) {
+        k = 0;
+      }
+    }
+
+    var currentElement;
+
+    while (k < len) {
+      currentElement = O[k];
+
+      if (searchElement === currentElement || searchElement !== searchElement && currentElement !== currentElement) {
+        return true;
+      }
+
+      k += 1;
+    }
+
+    return false;
+  };
+}
\ No newline at end of file

core/themes/olivero/js/messages.es6.js

@@ -70,7 +70,7 @@
     messageWrapper.setAttribute('data-drupal-message-type', type);
     let svg = '';
 
-    if (['error', 'warning', 'status', 'info'].indexOf(type) > -1) {
+    if (['error', 'warning', 'status', 'info'].includes(type)) {
       svg =
         '<div class="messages__icon"><svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">';
     }
@@ -89,7 +89,7 @@
         '<path d="M32,16c0,8.8-7.2,16-16,16S0,24.8,0,16C0,7.2,7.2,0,16,0S32,7.2,32,16z M16.4,5.3c-3.5,0-5.8,1.5-7.5,4.1c-0.2,0.3-0.2,0.8,0.2,1l2.2,1.7c0.3,0.3,0.8,0.2,1.1-0.1c1.2-1.5,1.9-2.3,3.7-2.3c1.3,0,2.9,0.8,2.9,2.1c0,1-0.8,1.5-2.1,2.2c-1.5,0.9-3.5,1.9-3.5,4.6v0.3c0,0.4,0.3,0.8,0.8,0.8h3.6c0.4,0,0.8-0.3,0.8-0.8v-0.1c0-1.8,5.4-1.9,5.4-6.9C23.9,8.1,20.1,5.3,16.4,5.3z M16,21.3c-1.6,0-3,1.3-3,3c0,1.6,1.3,3,3,3s3-1.3,3-3C19,22.6,17.6,21.3,16,21.3z"/>';
     }
 
-    if (['error', 'warning', 'status', 'info'].indexOf(type) > -1) {
+    if (['error', 'warning', 'status', 'info'].includes(type)) {
       svg += '</svg></div>';
     }
 

core/themes/olivero/js/messages.js

@@ -38,7 +38,7 @@
     messageWrapper.setAttribute('data-drupal-message-type', type);
     var svg = '';
 
-    if (['error', 'warning', 'status', 'info'].indexOf(type) > -1) {
+    if (['error', 'warning', 'status', 'info'].includes(type)) {
       svg = '<div class="messages__icon"><svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">';
     }
 
@@ -52,7 +52,7 @@
       svg += '<path d="M32,16c0,8.8-7.2,16-16,16S0,24.8,0,16C0,7.2,7.2,0,16,0S32,7.2,32,16z M16.4,5.3c-3.5,0-5.8,1.5-7.5,4.1c-0.2,0.3-0.2,0.8,0.2,1l2.2,1.7c0.3,0.3,0.8,0.2,1.1-0.1c1.2-1.5,1.9-2.3,3.7-2.3c1.3,0,2.9,0.8,2.9,2.1c0,1-0.8,1.5-2.1,2.2c-1.5,0.9-3.5,1.9-3.5,4.6v0.3c0,0.4,0.3,0.8,0.8,0.8h3.6c0.4,0,0.8-0.3,0.8-0.8v-0.1c0-1.8,5.4-1.9,5.4-6.9C23.9,8.1,20.1,5.3,16.4,5.3z M16,21.3c-1.6,0-3,1.3-3,3c0,1.6,1.3,3,3,3s3-1.3,3-3C19,22.6,17.6,21.3,16,21.3z"/>';
     }
 
-    if (['error', 'warning', 'status', 'info'].indexOf(type) > -1) {
+    if (['error', 'warning', 'status', 'info'].includes(type)) {
       svg += '</svg></div>';
     }
 

core/themes/olivero/olivero.libraries.yml

@@ -207,6 +207,8 @@ messages:
   version: VERSION
   js:
     js/messages.js: {}
+  dependencies:
+    - core/drupal.array.includes
 
 navigation-primary:
   version: VERSION