Skip to content

Commit

Permalink
RWD: removed enquire.js and converted to window.matchMedia (OpenMage#…
Browse files Browse the repository at this point in the history
…3208)

Co-authored-by: Justin Beaty <51970393+justinbeaty@users.noreply.github.com>
  • Loading branch information
fballiano and justinbeaty authored Aug 21, 2023
1 parent 15ffca5 commit d633770
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 360 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion app/design/frontend/rwd/default/layout/page.xml
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@

<!-- Add vendor dependencies -->
<action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
Expand Down
123 changes: 58 additions & 65 deletions skin/frontend/rwd/default/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
});
}
Expand Down Expand Up @@ -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);
}

// ==============================================
Expand All @@ -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
// ==============================================
Expand All @@ -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
// ==============================================
Expand Down
Loading

0 comments on commit d633770

Please sign in to comment.