@onsvisual/svelte-components 0.1.4 → 0.1.6

package/dist/@types/layout/Scroller/Scroller.svelte.d.ts

@@ -14,6 +14,8 @@ export default class Scroller extends SvelteComponentTyped<{
     visible?: boolean;
 }, {
     change: CustomEvent<any>;
+    enter: CustomEvent<any>;
+    exit: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -40,6 +42,8 @@ declare const __propDef: {
     };
     events: {
         change: CustomEvent<any>;
+        enter: CustomEvent<any>;
+        exit: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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,19 @@
 
   $: widthStyle = fixed ? `width:${width}px;` : "";
 
-  onMount(() => {
-    sections = foreground.querySelectorAll(query);
+  function initSections(sections) {
+    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;
@@ -180,7 +188,10 @@
     const fg = foreground.getBoundingClientRect();
     const bg = background.getBoundingClientRect();
 
-    visible = fg.top < wh && fg.bottom > 0;
+    const visible_new = fg.top < wh && fg.bottom > 0;
+    const entered = visible_new && !visible;
+    const exited = !visible_new && visible;
+    visible = visible_new;
 
     const foreground_height = fg.bottom - fg.top;
     const background_height = bg.bottom - bg.top;
@@ -203,16 +214,16 @@
       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);
       if (bottom >= threshold_px) {
-        if (index !== i) {
+        if (index !== i || entered) {
           index = i;
           sectionId = section.dataset.id ? section.dataset.id : null;
           dispatch("change", { id, index, sectionId });
@@ -220,6 +231,9 @@
         break;
       }
     }
+
+    if (entered) dispatch("enter", { id, index, sectionId });
+    if (exited) dispatch("exit", { id, index, sectionId });
   }
 </script>
 

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.6",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",