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

Refactor drawer breakpoint methods #238

Merged
merged 5 commits into from Jul 7, 2020
Merged

Refactor drawer breakpoint methods #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6e9138a
refactor: mediaQueryLists now stores drawer key instead of HTML element
sebnitu Jul 7, 2020
11113b4
chore: run drawer build
sebnitu Jul 7, 2020
11b8a99
docs: update example html with breakpoint api
sebnitu Jul 7, 2020
760ecf1
chore: run build for vrembem and docs
sebnitu Jul 7, 2020
3c9a273
docs: remove a console.log from example
sebnitu Jul 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 19 additions & 11 deletions docs/dist/scripts.cjs.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

30 changes: 19 additions & 11 deletions packages/drawer/dist/scripts.cjs.js
View file
Open in desktop
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
Open in desktop
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