diff --git a/app/code/Magento/Theme/view/base/requirejs-config.js b/app/code/Magento/Theme/view/base/requirejs-config.js index e472a861cd9f0..57a812f1a1e2d 100644 --- a/app/code/Magento/Theme/view/base/requirejs-config.js +++ b/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' diff --git a/app/design/adminhtml/Magento/backend/etc/view.xml b/app/design/adminhtml/Magento/backend/etc/view.xml index 5d951bfe7ba31..7864ff3d1c4fd 100644 --- a/app/design/adminhtml/Magento/backend/etc/view.xml +++ b/app/design/adminhtml/Magento/backend/etc/view.xml @@ -50,7 +50,7 @@ Lib::jquery/jquery.min.js Lib::jquery/jquery.parsequery.js Lib::jquery/jquery-ui.js - Lib::mediaCheck.js + Lib::matchMedia.js Lib::requirejs/require.js Lib::requirejs/text.js Lib::varien/js.js diff --git a/lib/web/matchMedia.js b/lib/web/matchMedia.js new file mode 100644 index 0000000000000..46c5ee3b2ae69 --- /dev/null +++ b/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); +}; diff --git a/lib/web/mediaCheck.js b/lib/web/mediaCheck.js deleted file mode 100644 index 5dfaec0c9756a..0000000000000 --- a/lib/web/mediaCheck.js +++ /dev/null @@ -1,28 +0,0 @@ -window.mediaCheck = function(options) { - if (typeof window.matchMedia === 'undefined' || !window.matchMedia('!').addListener) { - throw new Error('No matchMedia support'); - } - - function mqChange(mq, options) { - if (mq.matches) { - if (typeof options.entry === 'function') { options.entry(mq); } - } else { - if (typeof options.exit === 'function') { options.exit(mq); } - } - if (typeof options.both === 'function') { options.both(mq); } - } - - function createListener() { - var mq = window.matchMedia(options.media); - mq.addListener(function () { mqChange(mq, options); }); - - window.addEventListener('orientationchange', function () { - mq = window.matchMedia(options.media); - mqChange(mq, options); - }, false); - - mqChange(mq, options); - } - - createListener(); -};