@onsvisual/svelte-components 0.1.4 → 0.1.5

package/dist/layout/Scroller/Scroller.svelte

@@ -45,11 +45,13 @@
       },
 
       remove: ({ outer, update }) => {
-        const index = handlers.indexOf(update);
-        if (index !== -1) handlers.splice(index, 1);
+        if (map.get(outer)) {
+          const index = handlers.indexOf(update);
+          if (index !== -1) handlers.splice(index, 1);
 
-        map.delete(outer);
-        observer.unobserve(outer);
+          map.delete(outer);
+          observer.unobserve(outer);
+        }
       },
     };
   } else {
@@ -67,7 +69,9 @@
 </script>
 
 <script>
-  import { onMount, createEventDispatcher } from "svelte";
+  import { onMount, setContext, createEventDispatcher } from "svelte";
+  import { writable } from "svelte/store";
+
   const dispatch = createEventDispatcher();
 
   // config
@@ -94,7 +98,6 @@
 
   let top = 0;
   let bottom = 1;
-  let query = "section";
   let parallax = false;
 
   // bindings
@@ -129,11 +132,14 @@
    */
   export let visible = false;
 
+  const sections = writable([]);
+  setContext("sections", sections);
+
+  let scroller;
   let outer;
   let foreground;
   let background;
   let left;
-  let sections;
   let wh = 0;
   let fixed;
   let offset_top = 0;
@@ -156,17 +162,20 @@
 
   $: widthStyle = fixed ? `width:${width}px;` : "";
 
-  onMount(() => {
-    sections = foreground.querySelectorAll(query);
+  function initSections(sections) {
+    console.log("updating scroller", sections.length);
+    if (scroller) manager.remove(scroller);
+
     count = sections.length;
 
     update();
 
-    const scroller = { outer, update };
+    scroller = { outer, update };
 
     manager.add(scroller);
     return () => manager.remove(scroller);
-  });
+  }
+  $: outer && initSections($sections);
 
   function update() {
     if (!foreground) return;
@@ -203,11 +212,11 @@
       fixed = true;
     }
 
-    for (let i = 0; i < sections.length; i++) {
-      const section = sections[i];
+    for (let i = 0; i < $sections.length; i++) {
+      const section = $sections[i];
       const { top } = section.getBoundingClientRect();
 
-      const next = sections[i + 1];
+      const next = $sections[i + 1];
       const bottom = next ? next.getBoundingClientRect().top : fg.bottom;
 
       offset = (threshold_px - top) / (bottom - top);

package/dist/layout/Scroller/ScrollerSection.svelte

@@ -1,5 +1,5 @@
 <script>
-  // import { onMount } from "svelte";
+  import { onMount, onDestroy, getContext } from "svelte";
   import Container from "../../wrappers/Container/Container.svelte";
 
   /**
@@ -24,12 +24,20 @@
   export let hideTitle = false;
 
   let section;
-  // let background;
 
-  // onMount(() => {
-  //   background = getComputedStyle(section).getPropertyValue("--background").replaceAll('"', "");
-  //   console.log(section, getComputedStyle(section), background);
-  // });
+  const sections = getContext("sections");
+
+  onMount(() => {
+    if (sections) {
+      $sections = [...$sections, section];
+    }
+  });
+
+  onDestroy(() => {
+    if (sections) {
+      $sections = $sections.filter((s) => s !== section);
+    }
+  });
 </script>
 
 <section data-id="{id}" bind:this="{section}">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",