Changed matchMedia to compensate with unit tolerance so it doesn't clash with other breakpoints

This commit is contained in:
Djamil Legato
2015-04-17 13:12:03 -07:00
parent dce8a27a41
commit 2eb6f07d53
2 changed files with 20 additions and 4 deletions
+10 -2
View File
@@ -70,7 +70,7 @@ var Menu = new prime({
} }
if (mobileContainer) { if (mobileContainer) {
var query = 'only all and (max-width: ' + (mobileContainer.data('g-menu-breakpoint') || '48rem') + ')', var query = 'only all and (max-width: ' + this._calculateBreakpoint((mobileContainer.data('g-menu-breakpoint') || '48rem')) + ')',
match = matchMedia(query); match = matchMedia(query);
match.addListener(this.bound('_checkQuery')); match.addListener(this.bound('_checkQuery'));
this._checkQuery(match); this._checkQuery(match);
@@ -131,7 +131,7 @@ var Menu = new prime({
} }
if ((menuType == 'megamenu' || !parent.parent(selectors.mainContainer)) && (parent.find(' > ' + selectors.dropdown) || isGoingBack)) { if ((menuType == 'megamenu' || !parent.parent(selectors.mainContainer)) && (parent.find(' > ' + selectors.dropdown) || isGoingBack)) {
var sublevel = target.parent('.g-sublevel'), slideout = parent.find('.g-sublevel'); var sublevel = target.parent('.g-sublevel') || target.parent('.g-toplevel'), slideout = parent.find('.g-sublevel');
if (sublevel) { if (sublevel) {
this._fixHeights(sublevel, slideout, isGoingBack); this._fixHeights(sublevel, slideout, isGoingBack);
sublevel[!isSelected ? 'addClass' : 'removeClass']('g-slide-out'); sublevel[!isSelected ? 'addClass' : 'removeClass']('g-slide-out');
@@ -208,6 +208,14 @@ var Menu = new prime({
} }
}, },
_calculateBreakpoint: function(value) {
var digit = parseFloat(value.match(/^\d{1,}/).shift()),
unit = value.match(/[a-z]{1,}$/i).shift(),
tolerance = unit.match(/r?em/) ? -0.062 : -1;
return (digit + tolerance) + unit;
},
_checkQuery: function(mq) { _checkQuery: function(mq) {
var selectors = this.options.selectors, var selectors = this.options.selectors,
+10 -2
View File
@@ -92,7 +92,7 @@ var Menu = new prime({
} }
if (mobileContainer) { if (mobileContainer) {
var query = 'only all and (max-width: ' + (mobileContainer.data('g-menu-breakpoint') || '48rem') + ')', var query = 'only all and (max-width: ' + this._calculateBreakpoint((mobileContainer.data('g-menu-breakpoint') || '48rem')) + ')',
match = matchMedia(query); match = matchMedia(query);
match.addListener(this.bound('_checkQuery')); match.addListener(this.bound('_checkQuery'));
this._checkQuery(match); this._checkQuery(match);
@@ -153,7 +153,7 @@ var Menu = new prime({
} }
if ((menuType == 'megamenu' || !parent.parent(selectors.mainContainer)) && (parent.find(' > ' + selectors.dropdown) || isGoingBack)) { if ((menuType == 'megamenu' || !parent.parent(selectors.mainContainer)) && (parent.find(' > ' + selectors.dropdown) || isGoingBack)) {
var sublevel = target.parent('.g-sublevel'), slideout = parent.find('.g-sublevel'); var sublevel = target.parent('.g-sublevel') || target.parent('.g-toplevel'), slideout = parent.find('.g-sublevel');
if (sublevel) { if (sublevel) {
this._fixHeights(sublevel, slideout, isGoingBack); this._fixHeights(sublevel, slideout, isGoingBack);
sublevel[!isSelected ? 'addClass' : 'removeClass']('g-slide-out'); sublevel[!isSelected ? 'addClass' : 'removeClass']('g-slide-out');
@@ -230,6 +230,14 @@ var Menu = new prime({
} }
}, },
_calculateBreakpoint: function(value) {
var digit = parseFloat(value.match(/^\d{1,}/).shift()),
unit = value.match(/[a-z]{1,}$/i).shift(),
tolerance = unit.match(/r?em/) ? -0.062 : -1;
return (digit + tolerance) + unit;
},
_checkQuery: function(mq) { _checkQuery: function(mq) {
var selectors = this.options.selectors, var selectors = this.options.selectors,