IntenseWebs/gantry5
3
0
Fork 0
mirror of https://github.com/gantry/gantry5.git synced 2026-08-19 01:15:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

Implemented matchMedia to move the menu to and from the offcanvas based on the Large Mobile breakpoint

Browse Source
This commit is contained in:
Djamil Legato
2015-04-15 17:26:35 -07:00
parent bf9301506d
commit 15c1020b85
2 changed files with 76 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/common/application/menu/index.js
+34 -2
View File
@@ -20,6 +20,7 @@ var Menu = new prime({
selectors: {
mainContainer: '.g-main-nav',
mobileContainer: '#g-mobilemenu-container',
topLevel: '.g-toplevel',
rootItems: '> ul > li',
parent: '.g-parent',
item: '.g-menu-item',
@@ -52,7 +53,8 @@ var Menu = new prime({
attach: function() {
var selectors = this.selectors,
main = $(selectors.mainContainer + ' ' + selectors.item);
main = $(selectors.mainContainer + ' ' + selectors.item),
mobileContainer = $(selectors.mobileContainer);
main.on('mouseenter', this.bound('mouseenter'));
main.on('mouseleave', this.bound('mouseleave'));
@@ -61,11 +63,19 @@ var Menu = new prime({
var parents = $(selectors.mainContainer + '.' + this.states.touchEvents + ' ' + selectors.parent);
parents.on('touchend', this.bound('touchend'));
}
if (mobileContainer) {
var query = 'only all and (max-width: ' + (mobileContainer.data('g-menu-breakpoint') || '30rem') + ')',
match = matchMedia(query);
match.addListener(this.bound('_checkQuery'));
this._checkQuery(match);
}
},
detach: function() {
var selectors = this.selectors,
main = $(selectors.mainContainer + ' ' + selectors.item);
main = $(selectors.mainContainer + ' ' + selectors.item),
mobileContainer = $(selectors.mobileContainer);
main.off('mouseenter', this.bound('mouseenter'));
main.off('mouseleave', this.bound('mouseleave'));
@@ -74,6 +84,12 @@ var Menu = new prime({
var parents = $(selectors.mainContainer + '.' + this.states.touchEvents + ' ' + selectors.parent);
parents.off('touchend', this.bound('touchend'));
}
if (mobileContainer) {
var query = 'only all and (max-width: ' + (mobileContainer.data('g-menu-breakpoint') || '30rem') + ')',
match = matchMedia(query);
match.removeListener(this.bound('_checkQuery'));
}
},
mouseenter: function(event) {
@@ -143,6 +159,22 @@ var Menu = new prime({
}
},
_checkQuery: function(mq) {
var selectors = this.options.selectors,
mobileContainer = $(selectors.mobileContainer),
mainContainer = $(selectors.mainContainer),
find;
if (mq.matches) {
find = mainContainer.find(selectors.topLevel);
if (find) { find.top(mobileContainer); }
} else {
find = mobileContainer.find(selectors.topLevel);
if (find) { find.top(mainContainer); }
}
},
_debug: function() {}
});
assets/common/js/main.js
+42 -4
View File
@@ -40,6 +40,7 @@ var Menu = new prime({
selectors: {
mainContainer: '.g-main-nav',
mobileContainer: '#g-mobilemenu-container',
topLevel: '.g-toplevel',
rootItems: '> ul > li',
parent: '.g-parent',
item: '.g-menu-item',
@@ -72,7 +73,8 @@ var Menu = new prime({
attach: function() {
var selectors = this.selectors,
main = $(selectors.mainContainer + ' ' + selectors.item);
main = $(selectors.mainContainer + ' ' + selectors.item),
mobileContainer = $(selectors.mobileContainer);
main.on('mouseenter', this.bound('mouseenter'));
main.on('mouseleave', this.bound('mouseleave'));
@@ -81,11 +83,19 @@ var Menu = new prime({
var parents = $(selectors.mainContainer + '.' + this.states.touchEvents + ' ' + selectors.parent);
parents.on('touchend', this.bound('touchend'));
}
if (mobileContainer) {
var query = 'only all and (max-width: ' + (mobileContainer.data('g-menu-breakpoint') || '30rem') + ')',
match = matchMedia(query);
match.addListener(this.bound('_checkQuery'));
this._checkQuery(match);
}
},
detach: function() {
var selectors = this.selectors,
main = $(selectors.mainContainer + ' ' + selectors.item);
main = $(selectors.mainContainer + ' ' + selectors.item),
mobileContainer = $(selectors.mobileContainer);
main.off('mouseenter', this.bound('mouseenter'));
main.off('mouseleave', this.bound('mouseleave'));
@@ -94,14 +104,26 @@ var Menu = new prime({
var parents = $(selectors.mainContainer + '.' + this.states.touchEvents + ' ' + selectors.parent);
parents.off('touchend', this.bound('touchend'));
}
if (mobileContainer) {
var query = 'only all and (max-width: ' + (mobileContainer.data('g-menu-breakpoint') || '30rem') + ')',
match = matchMedia(query);
match.removeListener(this.bound('_checkQuery'));
}
},
mouseenter: function(event) {
this.openDropdown(event.target);
var element = $(event.target);
if (element.parent(this.options.selectors.item) && !element.parent('.g-standard')) { return; }
this.openDropdown(element);
},
mouseleave: function(event) {
this.closeDropdown(event.target);
var element = $(event.target);
if (element.parent(this.options.selectors.item) && !element.parent('.g-standard')) { return; }
this.closeDropdown(element);
},
touchend: function(event) {
@@ -157,6 +179,22 @@ var Menu = new prime({
}
},
_checkQuery: function(mq) {
var selectors = this.options.selectors,
mobileContainer = $(selectors.mobileContainer),
mainContainer = $(selectors.mainContainer),
find;
if (mq.matches) {
find = mainContainer.find(selectors.topLevel);
if (find) { find.top(mobileContainer); }
} else {
find = mobileContainer.find(selectors.topLevel);
if (find) { find.top(mainContainer); }
}
},
_debug: function() {}
});