Skip to content

Commit

Permalink
Refactor drawer breakpoint methods (#238)
Browse files Browse the repository at this point in the history 
This PR refactors the way media query lists are saved by saving the drawer key instead of the HTML element. Now the HTML lookup is done using the key after a breakpoint is matched and filtered.
  • Loading branch information
@sebnitu
sebnitu committed Jul 7, 2020
1 parent b1dcb9b commit 50b4d9f
Show file tree
Hide file tree
Showing 11 changed files with 233 additions and 133 deletions.
30 changes: 19 additions & 11 deletions docs/dist/scripts.cjs.js
View file
Expand Up @@ -438,14 +438,15 @@ var Drawer = function Drawer(options) {

if (drawers) {
drawers.forEach(function (drawer) {
var id = drawer.dataset[camelCase(api.settings.dataDrawer)];
var key = drawer.dataset[camelCase(api.settings.dataBreakpoint)];
var bp = api.settings.breakpoints[key] ? api.settings.breakpoints[key] : key;
var mql = window.matchMedia('(min-width:' + bp + ')');
breakpointMatch(mql, drawer);
mql.addListener(breakpointCheck);
api.mediaQueryLists.push({
'mql': mql,
'drawer': drawer
'drawer': id
});
});
}
Expand All @@ -463,17 +464,24 @@ var Drawer = function Drawer(options) {

var breakpointCheck = function breakpointCheck() {
var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
api.mediaQueryLists.forEach(function (item) {
var filter = event ? event.media == item.mql.media : true;

if (filter) {
breakpointMatch(item.mql, item.drawer);
}
});
var customEvent = new CustomEvent(api.settings.customEventPrefix + 'breakpoint', {
bubbles: true
});
document.dispatchEvent(customEvent);
if (api.mediaQueryLists && api.mediaQueryLists.length) {
api.mediaQueryLists.forEach(function (item) {
var filter = event ? event.media == item.mql.media : true;

if (filter) {
var drawer = document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(item.drawer, "\"]"));

if (drawer) {
breakpointMatch(item.mql, drawer);
}
}
});
var customEvent = new CustomEvent(api.settings.customEventPrefix + 'breakpoint', {
bubbles: true
});
document.dispatchEvent(customEvent);
}
};

var breakpointMatch = function breakpointMatch(mql, drawer) {
Expand Down
30 changes: 19 additions & 11 deletions docs/dist/scripts.js
View file
Expand Up @@ -439,14 +439,15 @@

if (drawers) {
drawers.forEach(function (drawer) {
var id = drawer.dataset[camelCase(api.settings.dataDrawer)];
var key = drawer.dataset[camelCase(api.settings.dataBreakpoint)];
var bp = api.settings.breakpoints[key] ? api.settings.breakpoints[key] : key;
var mql = window.matchMedia('(min-width:' + bp + ')');
breakpointMatch(mql, drawer);
mql.addListener(breakpointCheck);
api.mediaQueryLists.push({
'mql': mql,
'drawer': drawer
'drawer': id
});
});
}
Expand All @@ -464,17 +465,24 @@

var breakpointCheck = function breakpointCheck() {
var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
api.mediaQueryLists.forEach(function (item) {
var filter = event ? event.media == item.mql.media : true;

if (filter) {
breakpointMatch(item.mql, item.drawer);
}
});
var customEvent = new CustomEvent(api.settings.customEventPrefix + 'breakpoint', {
bubbles: true
});
document.dispatchEvent(customEvent);
if (api.mediaQueryLists && api.mediaQueryLists.length) {
api.mediaQueryLists.forEach(function (item) {
var filter = event ? event.media == item.mql.media : true;

if (filter) {
var drawer = document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(item.drawer, "\"]"));

if (drawer) {
breakpointMatch(item.mql, drawer);
}
}
});
var customEvent = new CustomEvent(api.settings.customEventPrefix + 'breakpoint', {
bubbles: true
});
document.dispatchEvent(customEvent);
}
};

var breakpointMatch = function breakpointMatch(mql, drawer) {
Expand Down
2 changes: 1 addition & 1 deletion docs/dist/scripts.min.js
View file

Large diffs are not rendered by default.

30 changes: 19 additions & 11 deletions packages/drawer/dist/scripts.cjs.js
View file
Expand Up @@ -332,14 +332,15 @@ var Drawer = function Drawer(options) {

if (drawers) {
drawers.forEach(function (drawer) {
var id = drawer.dataset[camelCase(api.settings.dataDrawer)];
var key = drawer.dataset[camelCase(api.settings.dataBreakpoint)];
var bp = api.settings.breakpoints[key] ? api.settings.breakpoints[key] : key;
var mql = window.matchMedia('(min-width:' + bp + ')');
breakpointMatch(mql, drawer);
mql.addListener(breakpointCheck);
api.mediaQueryLists.push({
'mql': mql,
'drawer': drawer
'drawer': id
});
});
}
Expand All @@ -357,17 +358,24 @@ var Drawer = function Drawer(options) {

var breakpointCheck = function breakpointCheck() {
var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
api.mediaQueryLists.forEach(function (item) {
var filter = event ? event.media == item.mql.media : true;

if (filter) {
breakpointMatch(item.mql, item.drawer);
}
});
var customEvent = new CustomEvent(api.settings.customEventPrefix + 'breakpoint', {
bubbles: true
});
document.dispatchEvent(customEvent);
if (api.mediaQueryLists && api.mediaQueryLists.length) {
api.mediaQueryLists.forEach(function (item) {
var filter = event ? event.media == item.mql.media : true;

if (filter) {
var drawer = document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(item.drawer, "\"]"));

if (drawer) {
breakpointMatch(item.mql, drawer);
}
}
});
var customEvent = new CustomEvent(api.settings.customEventPrefix + 'breakpoint', {
bubbles: true
});
document.dispatchEvent(customEvent);
}
};

var breakpointMatch = function breakpointMatch(mql, drawer) {
Expand Down
30 changes: 19 additions & 11 deletions packages/drawer/dist/scripts.js
View file
Expand Up @@ -331,14 +331,15 @@

if (drawers) {
drawers.forEach(function (drawer) {
var id = drawer.dataset[camelCase(api.settings.dataDrawer)];
var key = drawer.dataset[camelCase(api.settings.dataBreakpoint)];
var bp = api.settings.breakpoints[key] ? api.settings.breakpoints[key] : key;
var mql = window.matchMedia('(min-width:' + bp + ')');
breakpointMatch(mql, drawer);
mql.addListener(breakpointCheck);
api.mediaQueryLists.push({
'mql': mql,
'drawer': drawer
'drawer': id
});
});
}
Expand All @@ -356,17 +357,24 @@

var breakpointCheck = function breakpointCheck() {
var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
api.mediaQueryLists.forEach(function (item) {
var filter = event ? event.media == item.mql.media : true;

if (filter) {
breakpointMatch(item.mql, item.drawer);
}
});
var customEvent = new CustomEvent(api.settings.customEventPrefix + 'breakpoint', {
bubbles: true
});
document.dispatchEvent(customEvent);
if (api.mediaQueryLists && api.mediaQueryLists.length) {
api.mediaQueryLists.forEach(function (item) {
var filter = event ? event.media == item.mql.media : true;

if (filter) {
var drawer = document.querySelector("[data-".concat(api.settings.dataDrawer, "=\"").concat(item.drawer, "\"]"));

if (drawer) {
breakpointMatch(item.mql, drawer);
}
}
});
var customEvent = new CustomEvent(api.settings.customEventPrefix + 'breakpoint', {
bubbles: true
});
document.dispatchEvent(customEvent);
}
};

var breakpointMatch = function breakpointMatch(mql, drawer) {
Expand Down

0 comments on commit 50b4d9f

Please sign in to comment.