From d633770a898c596019a1431aa73f8a062e31a08e Mon Sep 17 00:00:00 2001 From: Fabrizio Balliano Date: Mon, 21 Aug 2023 12:17:37 +0300 Subject: [PATCH] RWD: removed enquire.js and converted to window.matchMedia (#3208) Co-authored-by: Justin Beaty <51970393+justinbeaty@users.noreply.github.com> --- README.md | 2 +- .../frontend/rwd/default/layout/page.xml | 1 - skin/frontend/rwd/default/js/app.js | 123 ++++---- skin/frontend/rwd/default/js/lib/enquire.js | 293 ------------------ 4 files changed, 59 insertions(+), 360 deletions(-) delete mode 100644 skin/frontend/rwd/default/js/lib/enquire.js diff --git a/README.md b/README.md index 245fcf9fd88..e096eb78b03 100644 --- a/README.md +++ b/README.md @@ -271,7 +271,7 @@ UPS shut down their old CGI APIs so we removed the support for it from the Mage_ - PHP 8.1 as minimum required version - Removed scriptaculous/dragdrop.js (#3215) -- RWD theme: updated jQuery to 3.7.0 (#3204) +- RWD theme: updated jQuery to 3.7.0 (#3204), removed enquire.js (#3208) - Unified CSRF configuration (#3147) and added form key validation to Contacts form (#3146) - Removed double span element from HTML buttons (#3123) - Removed all deprecated Mysql4_ classes (#2730). If there are any old modules/extensions in your installation that use such classes, you must run `shell/rename-mysql4-class-to-resource.php` in the command line in order to convert them. Backup all files before running the script diff --git a/app/design/frontend/rwd/default/layout/page.xml b/app/design/frontend/rwd/default/layout/page.xml index 80d9c39ae33..6cd71a745f4 100644 --- a/app/design/frontend/rwd/default/layout/page.xml +++ b/app/design/frontend/rwd/default/layout/page.xml @@ -42,7 +42,6 @@ skin_jsjs/lib/modernizr.custom.min.js - skin_jsjs/lib/enquire.js skin_jsjs/app.js skin_jsjs/lib/jquery.cycle2.min.js skin_jsjs/lib/jquery.cycle2.swipe.min.js diff --git a/skin/frontend/rwd/default/js/app.js b/skin/frontend/rwd/default/js/app.js index d3d87359c95..3a3a81a69c2 100644 --- a/skin/frontend/rwd/default/js/app.js +++ b/skin/frontend/rwd/default/js/app.js @@ -767,47 +767,42 @@ $j(document).ready(function () { // In order to display the language switcher next to the logo, we are moving the content at different viewports, // rather than having duplicate markup or changing the design - enquire.register('(max-width: ' + bp.medium + 'px)', { - match: function () { + let repositionLanguageSwitcher = function (mq) { + if (mq.matches) { $j('.page-header-container .store-language-container').prepend($j('.form-language')); - }, - unmatch: function () { + } else { $j('.header-language-container .store-language-container').prepend($j('.form-language')); } - }); + } + + let maxWidthLargeMediaQuery = window.matchMedia('(max-width: ' + bp.large + 'px)'); + let maxWidthMediumMediaQuery = window.matchMedia('(max-width: ' + bp.medium + 'px)'); + maxWidthMediumMediaQuery.addEventListener('change', repositionLanguageSwitcher); + repositionLanguageSwitcher(maxWidthMediumMediaQuery); // ============================================== - // Enquire JS + // Menu State // ============================================== - enquire.register('screen and (min-width: ' + (bp.medium + 1) + 'px)', { - match: function () { - $j('.menu-active').removeClass('menu-active'); - $j('.sub-menu-active').removeClass('sub-menu-active'); - $j('.skip-active').removeClass('skip-active'); - }, - unmatch: function () { - $j('.menu-active').removeClass('menu-active'); - $j('.sub-menu-active').removeClass('sub-menu-active'); - $j('.skip-active').removeClass('skip-active'); - } - }); + let resetMenuState = function (mq) { + $j('.menu-active').removeClass('menu-active'); + $j('.sub-menu-active').removeClass('sub-menu-active'); + $j('.skip-active').removeClass('skip-active'); + } + maxWidthMediumMediaQuery.addEventListener('change', resetMenuState); + resetMenuState(maxWidthMediumMediaQuery); // ============================================== // UI Pattern - Media Switcher // ============================================== // Used to swap primary product photo from thumbnails. - var mediaListLinks = $j('.media-list').find('a'); var mediaPrimaryImage = $j('.primary-image').find('img'); - if (mediaListLinks.length) { mediaListLinks.on('click', function (e) { e.preventDefault(); - var self = $j(this); - mediaPrimaryImage.attr('src', self.attr('href')); }); } @@ -949,15 +944,15 @@ $j(document).ready(function () { // (since other blocks can be inserted into left_first), it creates simpler code to move the entire // .col-left-first block, so that is the approach we're taking if ($j('.col-left-first > .block').length && $j('div.category-products').length) { - enquire.register('screen and (max-width: ' + bp.medium + 'px)', { - match: function () { + let repositionLayered = function (mq) { + if (mq.matches) { $j('.col-left-first').insertBefore($j('div.category-products')); - }, - unmatch: function () { - // Move layered nav back to left column + } else { $j('.col-left-first').insertBefore($j('.col-main')); } - }); + } + maxWidthMediumMediaQuery.addEventListener('change', repositionLayered); + repositionLayered(maxWidthMediumMediaQuery); } // ============================================== @@ -966,61 +961,60 @@ $j(document).ready(function () { // On viewports smaller than 1000px, move the right column into the left column if ($j('.main-container.col3-layout').length > 0) { - enquire.register('screen and (max-width: 1000px)', { - match: function () { + let reposition3rdColumn = function (mq) { + if (mq.matches) { var rightColumn = $j('.col-right'); var colWrapper = $j('.col-wrapper'); - rightColumn.appendTo(colWrapper); - }, - unmatch: function () { + } else { var rightColumn = $j('.col-right'); var main = $j('.main'); - rightColumn.appendTo(main); } - }); + } + let maxWidth1000MediaQuery = window.matchMedia('(max-width: 1000px)'); + maxWidth1000MediaQuery.addEventListener('change', reposition3rdColumn); + reposition3rdColumn(maxWidth1000MediaQuery); } - // ============================================== // Block collapsing (on smaller viewports) // ============================================== - enquire.register('(max-width: ' + bp.medium + 'px)', { - setup: function () { - this.toggleElements = $j( - // This selects the menu on the My Account and CMS pages + let toggleElementsForMediumSize = function (mq) { + if (mq.matches) { + $j( '.col-left-first .block:not(.block-layered-nav) .block-title, ' + - '.col-left-first .block-layered-nav .block-subtitle--filter, ' + - '.sidebar:not(.col-left-first) .block .block-title' - ); - }, - match: function () { - this.toggleElements.toggleSingle(); - }, - unmatch: function () { - this.toggleElements.toggleSingle({destruct: true}); + '.col-left-first .block-layered-nav .block-subtitle--filter, ' + + '.sidebar:not(.col-left-first) .block .block-title' + ).toggleSingle(); + } else { + $j( + '.col-left-first .block:not(.block-layered-nav) .block-title, ' + + '.col-left-first .block-layered-nav .block-subtitle--filter, ' + + '.sidebar:not(.col-left-first) .block .block-title' + ).toggleSingle({destruct: true}); } - }); - + } + maxWidthMediumMediaQuery.addEventListener('change', toggleElementsForMediumSize); + toggleElementsForMediumSize(maxWidthMediumMediaQuery); // ============================================== // OPC - Progress Block // ============================================== if ($j('body.checkout-onepage-index').length) { - enquire.register('(max-width: ' + bp.large + 'px)', { - match: function () { + let repositionCheckoutProgress = function (mq) { + if (mq.matches) { $j('#checkout-step-review').prepend($j('#checkout-progress-wrapper')); - }, - unmatch: function () { + } else { $j('.col-right').prepend($j('#checkout-progress-wrapper')); } - }); + } + maxWidthLargeMediaQuery.addEventListener('change', repositionCheckoutProgress); + repositionCheckoutProgress(maxWidthLargeMediaQuery); } - // ============================================== // Checkout Cart - events // ============================================== @@ -1031,27 +1025,26 @@ $j(document).ready(function () { }); } - // ============================================== // Gift Registry Styles // ============================================== if ($j('.a-left').length) { - enquire.register('(max-width: ' + bp.large + 'px)', { - match: function () { + repositionGiftRegistry = function (mq) { + if (mq.matches) { $j('.gift-info').each(function() { - $j(this).next('td').children('textarea').appendTo(this).children(); + $j(this).next('td').children('textarea').appendTo(this).children(); }); - }, - unmatch: function () { + } else { $j('.left-note').each(function() { $j(this).prev('td').children('textarea').appendTo(this).children(); }); } - }); + } + maxWidthLargeMediaQuery.addEventListener(repositionGiftRegistry); + repositionGiftRegistry(maxWidthLargeMediaQuery); } - // ============================================== // Product Listing - Align action buttons/links // ============================================== diff --git a/skin/frontend/rwd/default/js/lib/enquire.js b/skin/frontend/rwd/default/js/lib/enquire.js deleted file mode 100644 index 187793192f0..00000000000 --- a/skin/frontend/rwd/default/js/lib/enquire.js +++ /dev/null @@ -1,293 +0,0 @@ -/*! - * enquire.js v2.1.0 - Awesome Media Queries in JavaScript - * Copyright (c) 2013 Nick Williams - http://wicky.nillia.ms/enquire.js - * License: MIT (http://www.opensource.org/licenses/mit-license.php) - */ - -;(function (name, context, factory) { - var matchMedia = context.matchMedia; - - if (typeof module !== 'undefined' && module.exports) { - module.exports = factory(matchMedia); - } - else if (typeof define === 'function' && define.amd) { - define(function() { - return (context[name] = factory(matchMedia)); - }); - } - else { - context[name] = factory(matchMedia); - } -}('enquire', this, function (matchMedia) { - - 'use strict'; - - /*jshint unused:false */ - /** - * Helper function for iterating over a collection - * - * @param collection - * @param fn - */ - function each(collection, fn) { - var i = 0, - length = collection.length, - cont; - - for(i; i < length; i++) { - cont = fn(collection[i], i); - if(cont === false) { - break; //allow early exit - } - } - } - - /** - * Helper function for determining whether target object is an array - * - * @param target the object under test - * @return {Boolean} true if array, false otherwise - */ - function isArray(target) { - return Object.prototype.toString.apply(target) === '[object Array]'; - } - - /** - * Helper function for determining whether target object is a function - * - * @param target the object under test - * @return {Boolean} true if function, false otherwise - */ - function isFunction(target) { - return typeof target === 'function'; - } - - /** - * Delegate to handle a media query being matched and unmatched. - * - * @param {object} options - * @param {function} options.match callback for when the media query is matched - * @param {function} [options.unmatch] callback for when the media query is unmatched - * @param {function} [options.setup] one-time callback triggered the first time a query is matched - * @param {boolean} [options.deferSetup=false] should the setup callback be run immediately, rather than first time query is matched? - * @constructor - */ - function QueryHandler(options) { - this.options = options; - !options.deferSetup && this.setup(); - } - QueryHandler.prototype = { - - /** - * coordinates setup of the handler - * - * @function - */ - setup : function() { - if(this.options.setup) { - this.options.setup(); - } - this.initialised = true; - }, - - /** - * coordinates setup and triggering of the handler - * - * @function - */ - on : function() { - !this.initialised && this.setup(); - this.options.match && this.options.match(); - }, - - /** - * coordinates the unmatch event for the handler - * - * @function - */ - off : function() { - this.options.unmatch && this.options.unmatch(); - }, - - /** - * called when a handler is to be destroyed. - * delegates to the destroy or unmatch callbacks, depending on availability. - * - * @function - */ - destroy : function() { - this.options.destroy ? this.options.destroy() : this.off(); - }, - - /** - * determines equality by reference. - * if object is supplied compare options, if function, compare match callback - * - * @function - * @param {object || function} [target] the target for comparison - */ - equals : function(target) { - return this.options === target || this.options.match === target; - } - - }; - /** - * Represents a single media query, manages it's state and registered handlers for this query - * - * @constructor - * @param {string} query the media query string - * @param {boolean} [isUnconditional=false] whether the media query should run regardless of whether the conditions are met. Primarily for helping older browsers deal with mobile-first design - */ - function MediaQuery(query, isUnconditional) { - this.query = query; - this.isUnconditional = isUnconditional; - this.handlers = []; - this.mql = matchMedia(query); - - var self = this; - this.listener = function(mql) { - self.mql = mql; - self.assess(); - }; - this.mql.addListener(this.listener); - } - MediaQuery.prototype = { - - /** - * add a handler for this query, triggering if already active - * - * @param {object} handler - * @param {function} handler.match callback for when query is activated - * @param {function} [handler.unmatch] callback for when query is deactivated - * @param {function} [handler.setup] callback for immediate execution when a query handler is registered - * @param {boolean} [handler.deferSetup=false] should the setup callback be deferred until the first time the handler is matched? - */ - addHandler : function(handler) { - var qh = new QueryHandler(handler); - this.handlers.push(qh); - - this.matches() && qh.on(); - }, - - /** - * removes the given handler from the collection, and calls it's destroy methods - * - * @param {object || function} handler the handler to remove - */ - removeHandler : function(handler) { - var handlers = this.handlers; - each(handlers, function(h, i) { - if(h.equals(handler)) { - h.destroy(); - return !handlers.splice(i,1); //remove from array and exit each early - } - }); - }, - - /** - * Determine whether the media query should be considered a match - * - * @return {Boolean} true if media query can be considered a match, false otherwise - */ - matches : function() { - return this.mql.matches || this.isUnconditional; - }, - - /** - * Clears all handlers and unbinds events - */ - clear : function() { - each(this.handlers, function(handler) { - handler.destroy(); - }); - this.mql.removeListener(this.listener); - this.handlers.length = 0; //clear array - }, - - /* - * Assesses the query, turning on all handlers if it matches, turning them off if it doesn't match - */ - assess : function() { - var action = this.matches() ? 'on' : 'off'; - - each(this.handlers, function(handler) { - handler[action](); - }); - } - }; - /** - * Allows for registration of query handlers. - * Manages the query handler's state and is responsible for wiring up browser events - * - * @constructor - */ - function MediaQueryDispatch () { - if(!matchMedia) { - throw new Error('matchMedia not present, legacy browsers require a polyfill'); - } - - this.queries = {}; - this.browserIsIncapable = !matchMedia('only all').matches; - } - - MediaQueryDispatch.prototype = { - - /** - * Registers a handler for the given media query - * - * @param {string} q the media query - * @param {object || Array || Function} options either a single query handler object, a function, or an array of query handlers - * @param {function} options.match fired when query matched - * @param {function} [options.unmatch] fired when a query is no longer matched - * @param {function} [options.setup] fired when handler first triggered - * @param {boolean} [options.deferSetup=false] whether setup should be run immediately or deferred until query is first matched - * @param {boolean} [shouldDegrade=false] whether this particular media query should always run on incapable browsers - */ - register : function(q, options, shouldDegrade) { - var queries = this.queries, - isUnconditional = shouldDegrade && this.browserIsIncapable; - - if(!queries[q]) { - queries[q] = new MediaQuery(q, isUnconditional); - } - - //normalise to object in an array - if(isFunction(options)) { - options = { match : options }; - } - if(!isArray(options)) { - options = [options]; - } - each(options, function(handler) { - queries[q].addHandler(handler); - }); - - return this; - }, - - /** - * unregisters a query and all it's handlers, or a specific handler for a query - * - * @param {string} q the media query to target - * @param {object || function} [handler] specific handler to unregister - */ - unregister : function(q, handler) { - var query = this.queries[q]; - - if(query) { - if(handler) { - query.removeHandler(handler); - } - else { - query.clear(); - delete this.queries[q]; - } - } - - return this; - } - }; - - return new MediaQueryDispatch(); - -}));