Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

RWD: removed enquire.js and converted to window.matchMedia #3208

Merged
merged 15 commits into from
Aug 21, 2023
Merged

RWD: removed enquire.js and converted to window.matchMedia #3208

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
37123d1
RWD: removed enquire.js and converted to window.matchMedia
fballiano Apr 21, 2023
a07d703
Suggestions by @justinbeaty
fballiano Apr 22, 2023
ebc5b4b
Merge branch 'next' into enquire
fballiano Apr 28, 2023
378d2ac
added "let"
fballiano Apr 28, 2023
51532cd
Merge branch 'next' into enquire
fballiano May 3, 2023
dc5582e
Merge branch 'next' into enquire
fballiano May 3, 2023
5dd78d2
Merge branch 'next' into enquire
fballiano May 10, 2023
036c726
Merge branch 'next' into enquire
fballiano May 30, 2023
4e5e21b
Merge branch 'next' into enquire
fballiano May 30, 2023
782943f
Merge branch 'next' into enquire
fballiano Jun 17, 2023
21c2fd8
Merge branch 'next' into enquire
fballiano Jul 3, 2023
72cf6d6
Merge branch 'next' into enquire
fballiano Jul 15, 2023
d7024b8
Merge branch 'next' into enquire
fballiano Aug 18, 2023
721172d
Merge branch 'next' into enquire
fballiano Aug 21, 2023
37d726b
Added info in readme
fballiano Aug 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion app/design/frontend/rwd/default/layout/page.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,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
View file
Open in desktop
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 () {
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');
}
});
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 () {
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 () {
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
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 () {
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