Merge pull request #34021 from andrewbess/revert-removing-match-media

Revert "Removing the MatchMedia"

Author: andrewbess

app/code/Magento/Theme/view/base/requirejs-config.js

@@ -34,8 +34,7 @@ var config = {
         'domReady': 'requirejs/domReady',
         'spectrum': 'jquery/spectrum/spectrum',
         'tinycolor': 'jquery/spectrum/tinycolor',
-        'jquery-ui-modules': 'jquery/ui-modules',
-        'matchMedia': 'mediaCheck'
+        'jquery-ui-modules': 'jquery/ui-modules'
     },
     deps: [
         'jquery/jquery-migrate'

app/design/adminhtml/Magento/backend/etc/view.xml

@@ -50,7 +50,7 @@
         <item type="file">Lib::jquery/jquery.min.js</item>
         <item type="file">Lib::jquery/jquery.parsequery.js</item>
         <item type="file">Lib::jquery/jquery-ui.js</item>
-        <item type="file">Lib::mediaCheck.js</item>
+        <item type="file">Lib::matchMedia.js</item>
         <item type="file">Lib::requirejs/require.js</item>
         <item type="file">Lib::requirejs/text.js</item>
         <item type="file">Lib::varien/js.js</item>

lib/web/matchMedia.js

@@ -0,0 +1,148 @@
+/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. MIT 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';
+
+        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: 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) {
+                    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'
+        };
+    };
+}());
+
+/*! matchMedia() polyfill addListener/removeListener extension. Author & copyright (c) 2012: Scott Jehl. Dual MIT/BSD license */
+(function() {
+    // Bail out for browsers that have addListener support
+    if (window.matchMedia && window.matchMedia('all').addListener) {
+        return false;
+    }
+
+    var localMatchMedia = window.matchMedia,
+        hasMediaQueries = localMatchMedia('only all').matches,
+        isListening = false,
+        timeoutID = 0, // setTimeout for debouncing 'handleChange'
+        queries = [], // Contains each 'mql' and associated 'listeners' if 'addListener' is used
+        handleChange = function(evt) {
+            // Debounce
+            clearTimeout(timeoutID);
+
+            timeoutID = setTimeout(function() {
+                for (var i = 0, il = queries.length; i < il; i++) {
+                    var mql = queries[i].mql,
+                        listeners = queries[i].listeners || [],
+                        matches = localMatchMedia(mql.media).matches;
+
+                    // Update mql.matches value and call listeners
+                    // Fire listeners only if transitioning to or from matched state
+                    if (matches !== mql.matches) {
+                        mql.matches = matches;
+
+                        for (var j = 0, jl = listeners.length; j < jl; j++) {
+                            listeners[j].call(window, mql);
+                        }
+                    }
+                }
+            }, 30);
+        };
+
+    window.matchMedia = function(media) {
+        var mql = localMatchMedia(media),
+            listeners = [],
+            index = 0;
+
+        mql.addListener = function(listener) {
+            // Changes would not occur to css media type so return now (Affects IE <= 8)
+            if (!hasMediaQueries) {
+                return;
+            }
+
+            // Set up 'resize' listener for browsers that support CSS3 media queries (Not for IE <= 8)
+            // There should only ever be 1 resize listener running for performance
+            if (!isListening) {
+                isListening = true;
+                window.addEventListener('resize', handleChange, true);
+            }
+
+            // Push object only if it has not been pushed already
+            if (index === 0) {
+                index = queries.push({
+                    mql: mql,
+                    listeners: listeners
+                });
+            }
+
+            listeners.push(listener);
+        };
+
+        mql.removeListener = function(listener) {
+            for (var i = 0, il = listeners.length; i < il; i++) {
+                if (listeners[i] === listener) {
+                    listeners.splice(i, 1);
+                }
+            }
+        };
+
+        return mql;
+    };
+}());
+
+window.mediaCheck = function(options) {
+    var mq;
+
+    function mqChange(mq, options) {
+        if (mq.matches) {
+            if (typeof options.entry === "function") {
+                options.entry();
+            }
+        } else if (typeof options.exit === "function") {
+            options.exit();
+        }
+    };
+
+    mq = window.matchMedia(options.media);
+
+    mq.addListener(function() {
+        mqChange(mq, options);
+    });
+
+    mqChange(mq, options);
+};