Skip to content

Commit

Permalink
feat: breakpoints js and scss media variables exported (devhatt#89)
Browse files Browse the repository at this point in the history
* feat: breakpoints js and scss media variables exported

fix devhatt#87

* feat: breakpoints withou validation

fix devhatt#87

* feat: validations breakpoints

* fix: change incorrect names and created a foreach to make it more simplified

87
  • Loading branch information
juliaam authored and DominMFD committed Mar 27, 2024
1 parent f1a3b54 commit dc97eb1
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/styles/breakpoints.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@import 'breakpoints';

:export {
extraSmallSize: $extraSmallDeviceSizeMin;
smallSize: $smallDeviceSizeMin;
mediumSize: $mediumDeviceSizeMin;
largeSize: $largeDeviceSizeMin;
largestSize: $largestDeviceSizeMin;
}
42 changes: 42 additions & 0 deletions src/utils/breakpoints/breakpoints.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import variables from '../../styles/breakpoints.module.scss';

const { extraSmallSize, smallSize, mediumSize, largeSize, largestSize } = variables;

const events = new Map();
events.set('from320', new Set());
events.set('from360', new Set());
events.set('from667', new Set());
events.set('from1024', new Set());
events.set('from1280', new Set());

export function listenBreakpoint(breakpoint, callback) {
const callbacks = events.get(breakpoint);
if (!callbacks) {
console.warn('callback not found: ', breakpoint);
return;
}
callbacks.add(callback);
}

export function unlistenBreakpoint(breakpoint, callback) {
const callbacks = events.get(breakpoint);
if (!callbacks) {
console.warn('callback not found: ', breakpoint);
return;
}
callbacks.delete(callback);
}
const obj = {
from320: window.matchMedia(`(min-width: ${extraSmallSize})`),
from360: window.matchMedia(`(min-width: ${smallSize})`),
from667: window.matchMedia(`(min-width: ${mediumSize})`),
from1024: window.matchMedia(`(min-width: ${largeSize})`),
from1280: window.matchMedia(`(min-width: ${largestSize})`),
};

Object.keys(obj).forEach((key) => {
obj[key].addEventListener('change', (e) => {
const callbacks = events.get(key);
callbacks.forEach((callback) => callback(e.matches));
});
});

0 comments on commit dc97eb1

Please sign in to comment.