fork from scoresaber-reloaded

src/stores/container.js

@@ -0,0 +1,52 @@
+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,
+  }
+};