mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-21 20:59:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

breaking(breakpoint): add breakpointObserver store (#1092)

Browse source 
* breaking: re-name event "on:match" to "on:change" in `Breakpoint.svelte`

* feat: add `breakpointObserver` read-only store

* refactor: export breakpoint constants from `breakpoints.js`
This commit is contained in:
brunnerh 2022-03-08 17:38:58 +01:00 • committed by GitHub
commit 5de0d9a357
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 180 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

84
src/Breakpoint/Breakpoint.svelte
View file

@ -2,7 +2,7 @@
/**
* @typedef {"sm" | "md" | "lg" | "xlg" | "max"} BreakpointSize
* @typedef {320 | 672 | 1056 | 1312 | 1584} BreakpointValue
* @event {{ size: BreakpointSize; breakpointValue: BreakpointValue; }} match
* @event {{ size: BreakpointSize; breakpointValue: BreakpointValue; }} change
* @slot {{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; }}
*/
@ -24,77 +24,23 @@
max: false,
};
/**
* Reference the Carbon grid breakpoints
* @type {Record<BreakpointSize, BreakpointValue>}
*/
export const breakpoints = {
sm: 320,
md: 672,
lg: 1056,
xlg: 1312,
max: 1584,
};
import { createEventDispatcher, onMount } from "svelte";
import { createEventDispatcher } from "svelte";
import { breakpointObserver } from "./breakpointObserver";
import { breakpoints } from "./breakpoints";
const dispatch = createEventDispatcher();
const observer = breakpointObserver();
onMount(() => {
const width = window.innerWidth;
if (width > breakpoints.max) size = "max";
else if (width < breakpoints.md) size = "sm";
else if (width >= breakpoints.md && width <= breakpoints.lg) size = "md";
else if (width >= breakpoints.lg && width <= breakpoints.xlg) size = "lg";
else if (width >= breakpoints.xlg && width <= breakpoints.max) size = "xlg";
const match = {
sm: window.matchMedia(`(max-width: ${breakpoints.md}px)`),
md: window.matchMedia(
`(min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg}px)`
),
lg: window.matchMedia(
`(min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xlg}px)`
),
xlg: window.matchMedia(
`(min-width: ${breakpoints.xlg}px) and (max-width: ${breakpoints.max}px)`
),
max: window.matchMedia(`(min-width: ${breakpoints.max}px)`),
};
const matchers = Object.entries(match);
const matchersBySize = Object.fromEntries(
matchers.map(([size, queryList]) => [queryList.media, size])
);
function handleChange({ matches, media }) {
const size = matchersBySize[media];
sizes = { ...sizes };
sizes[size] = matches;
if (matches)
dispatch("match", { size, breakpointValue: breakpoints[size] });
}
matchers.forEach(([size, queryList]) =>
queryList.addEventListener("change", handleChange)
);
return () => {
matchers.forEach(([size, queryList]) =>
queryList.removeEventListener("change", handleChange)
);
};
});
$: {
if (sizes.sm) size = "sm";
if (sizes.md) size = "md";
if (sizes.lg) size = "lg";
if (sizes.xlg) size = "xlg";
if (sizes.max) size = "max";
}
$: size = $observer;
$: sizes = {
sm: size == "sm",
md: size == "md",
lg: size == "lg",
xlg: size == "xlg",
max: size == "max",
};
$: if (size != undefined)
dispatch("change", { size, breakpointValue: breakpoints[size] });
</script>
<slot size="{size}" sizes="{sizes}" />