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();
-
-}));