61 lines
1.2 KiB
JavaScript
61 lines
1.2 KiB
JavaScript
import { writable } from "svelte/store";
|
|
|
|
export default (
|
|
sizes = { phone: 0, tablet: 768, desktop: 1024, xxl: 1749 }
|
|
) => {
|
|
const defaultValue = { name: null, width: null, nodeWidth: null, rect: null };
|
|
const { subscribe, unsubscribe, set } = writable(defaultValue);
|
|
|
|
let ro = null;
|
|
let node = null;
|
|
|
|
const unobserve = () => {
|
|
if (!node) return;
|
|
|
|
ro.unobserve(node);
|
|
|
|
node = null;
|
|
};
|
|
|
|
const observe = (nodeToObserve) => {
|
|
if (!nodeToObserve) return null;
|
|
|
|
if (node) unobserve();
|
|
|
|
node = nodeToObserve;
|
|
|
|
let lastWidth = null;
|
|
|
|
ro = new ResizeObserver(() => {
|
|
const rect = node.getBoundingClientRect();
|
|
const nodeWidth = rect.width;
|
|
if (lastWidth === nodeWidth) return;
|
|
|
|
lastWidth = nodeWidth;
|
|
|
|
set(
|
|
Object.entries(sizes)
|
|
.sort((a, b) => a[1] - b[1])
|
|
.reduce(
|
|
(cum, item) =>
|
|
item[1] <= nodeWidth
|
|
? { name: item[0], width: item[1], nodeWidth, rect }
|
|
: cum,
|
|
defaultValue
|
|
)
|
|
);
|
|
});
|
|
|
|
ro.observe(node);
|
|
|
|
return node;
|
|
};
|
|
|
|
return {
|
|
subscribe,
|
|
unsubscribe,
|
|
observe,
|
|
unobserve,
|
|
};
|
|
};
|