Use pull request #11393 from DanielRuf/fix/matchmedia-polyfill-window-fix-ie11 for...

e7554d60d fix: set matchMedia on window to fix issue on IE11, fixes #11358
1a36a44e7 chore: update MatchMedia polyfill to v0.3.1

Co-Authored-By: Nicolas Coden <nicolas@ncoden.fr>
Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

diff --git a/js/foundation.util.mediaQuery.js b/js/foundation.util.mediaQuery.js
index e80f973ce5ca6b62de48b9249d795cc6fc93c5fc..6eafabd68ff377e01dbcf5eaf679054fc0119179 100644 (file)
--- a/js/foundation.util.mediaQuery.js
+++ b/js/foundation.util.mediaQuery.js
@@ -17,9 +17,10 @@ const defaultQueries = {
 
 
 // matchMedia() polyfill - Test a CSS media type/query in JS.
-// Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license
-let matchMedia = window.matchMedia || (function() {
-  'use strict';
+// Authors & copyright(c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. MIT license
+/* eslint-disable */
+window.matchMedia || (window.matchMedia = (function () {
+  "use strict";
 
   // For browsers that support matchMedium api such as IE 9 and webkit
   var styleMedia = (window.styleMedia || window.media);
@@ -33,14 +34,18 @@ let matchMedia = window.matchMedia || (function() {
     style.type  = 'text/css';
     style.id    = 'matchmediajs-test';
 
-    script && script.parentNode && script.parentNode.insertBefore(style, script);
+    if (!script) {
+      document.head.appendChild(style);
+    } else {
+      script.parentNode.insertBefore(style, script);
+    }
 
     // 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
     info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
 
     styleMedia = {
-      matchMedium(media) {
-        var text = `@media ${media}{ #matchmediajs-test { width: 1px; } }`;
+      matchMedium: function (media) {
+        var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
 
         // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
         if (style.styleSheet) {
@@ -52,7 +57,7 @@ let matchMedia = window.matchMedia || (function() {
         // Test if media query is true or false
         return info.width === '1px';
       }
-    }
+    };
   }
 
   return function(media) {
@@ -60,8 +65,9 @@ let matchMedia = window.matchMedia || (function() {
       matches: styleMedia.matchMedium(media || 'all'),
       media: media || 'all'
     };
-  }
-})();
+  };
+})());
+/* eslint-enable */
 
 var MediaQuery = {
   queries: [],
@@ -109,7 +115,7 @@ var MediaQuery = {
     var query = this.get(size);
 
     if (query) {
-      return matchMedia(query).matches;
+      return window.matchMedia(query).matches;
     }
 
     return false;
@@ -160,7 +166,7 @@ var MediaQuery = {
     for (var i = 0; i < this.queries.length; i++) {
       var query = this.queries[i];
 
-      if (matchMedia(query.value).matches) {
+      if (window.matchMedia(query.value).matches) {
         matched = query;
       }
     }