foundation.util.mediaQuery.js.es6 in foundation-rails-6.4.1.0

- old
+ new

@@ -1,8 +1,8 @@
 'use strict';
 
-!function($) {
+import $ from 'jquery';
 
 // Default set of media queries
 const defaultQueries = {
   'default' : 'only screen',
   landscape : 'only screen and (orientation: landscape)',
@@ -11,12 +11,60 @@
     'only screen and (min--moz-device-pixel-ratio: 2),' +
     'only screen and (-o-min-device-pixel-ratio: 2/1),' +
     'only screen and (min-device-pixel-ratio: 2),' +
     'only screen and (min-resolution: 192dpi),' +
     'only screen and (min-resolution: 2dppx)'
-};
+  };
 
+
+// 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';
+
+  // For browsers that support matchMedium api such as IE 9 and webkit
+  var styleMedia = (window.styleMedia || window.media);
+
+  // For those that don't support matchMedium
+  if (!styleMedia) {
+    var style   = document.createElement('style'),
+    script      = document.getElementsByTagName('script')[0],
+    info        = null;
+
+    style.type  = 'text/css';
+    style.id    = 'matchmediajs-test';
+
+    script && script.parentNode && 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; } }`;
+
+        // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
+        if (style.styleSheet) {
+          style.styleSheet.cssText = text;
+        } else {
+          style.textContent = text;
+        }
+
+        // Test if media query is true or false
+        return info.width === '1px';
+      }
+    }
+  }
+
+  return function(media) {
+    return {
+      matches: styleMedia.matchMedium(media || 'all'),
+      media: media || 'all'
+    };
+  }
+})();
+
 var MediaQuery = {
   queries: [],
 
   current: '',
 
@@ -25,10 +73,15 @@
    * @function
    * @private
    */
   _init() {
     var self = this;
+    var $meta = $('meta.foundation-mq');
+    if(!$meta.length){
+      $('<meta class="foundation-mq">').appendTo(document.head);
+    }
+
     var extractedStyles = $('.foundation-mq').css('font-family');
     var namedQueries;
 
     namedQueries = parseStyleToObject(extractedStyles);
 
@@ -54,11 +107,11 @@
    */
   atLeast(size) {
     var query = this.get(size);
 
     if (query) {
-      return window.matchMedia(query).matches;
+      return matchMedia(query).matches;
     }
 
     return false;
   },
 
@@ -105,11 +158,11 @@
     var matched;
 
     for (var i = 0; i < this.queries.length; i++) {
       var query = this.queries[i];
 
-      if (window.matchMedia(query.value).matches) {
+      if (matchMedia(query.value).matches) {
         matched = query;
       }
     }
 
     if (typeof matched === 'object') {
@@ -123,11 +176,11 @@
    * Activates the breakpoint watcher, which fires an event on the window whenever the breakpoint changes.
    * @function
    * @private
    */
   _watcher() {
-    $(window).on('resize.zf.mediaquery', () => {
+    $(window).off('resize.zf.mediaquery').on('resize.zf.mediaquery', () => {
       var newSize = this._getCurrentSize(), currentSize = this.current;
 
       if (newSize !== currentSize) {
         // Change the current media query
         this.current = newSize;
@@ -137,59 +190,12 @@
       }
     });
   }
 };
 
-Foundation.MediaQuery = MediaQuery;
 
-// 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
-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);
-
-  // For those that don't support matchMedium
-  if (!styleMedia) {
-    var style   = document.createElement('style'),
-    script      = document.getElementsByTagName('script')[0],
-    info        = null;
-
-    style.type  = 'text/css';
-    style.id    = 'matchmediajs-test';
-
-    script && script.parentNode && 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; } }`;
-
-        // 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
-        if (style.styleSheet) {
-          style.styleSheet.cssText = text;
-        } else {
-          style.textContent = text;
-        }
-
-        // Test if media query is true or false
-        return info.width === '1px';
-      }
-    }
-  }
-
-  return function(media) {
-    return {
-      matches: styleMedia.matchMedium(media || 'all'),
-      media: media || 'all'
-    };
-  }
-}());
-
 // Thank you: https://github.com/sindresorhus/query-string
 function parseStyleToObject(str) {
   var styleObject = {};
 
   if (typeof str !== 'string') {
@@ -223,8 +229,6 @@
   }, {});
 
   return styleObject;
 }
 
-Foundation.MediaQuery = MediaQuery;
-
-}(jQuery);
+export {MediaQuery};