From 6cdffe212c595b7110b20e172ed1603f3e83cae9 Mon Sep 17 00:00:00 2001
From: victor <victor@elalemanyo.de>
Date: Sat, 26 Oct 2024 20:09:59 +0200
Subject: [PATCH 1/2] Add toggle option to ScrollReveal for conditional
 unobserving

---
 components/scroll-reveal/src/index.ts | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/components/scroll-reveal/src/index.ts b/components/scroll-reveal/src/index.ts
index 29d14a4..b26fb0a 100644
--- a/components/scroll-reveal/src/index.ts
+++ b/components/scroll-reveal/src/index.ts
@@ -4,16 +4,19 @@ interface Option {
   class?: string
   threshold?: number
   rootMargin?: string
+  toggle?: boolean
 }
 
 export default class ScrollReveal extends Controller {
   declare classValue: string
   declare thresholdValue: number
   declare rootMarginValue: string
+  declare toggleValue: boolean
 
   declare class: string
   declare threshold: number
   declare rootMargin: string
+  declare toggle: boolean
   declare observer: IntersectionObserver
 
   declare readonly itemTargets: HTMLElement[]
@@ -23,6 +26,7 @@ export default class ScrollReveal extends Controller {
     class: String,
     threshold: Number,
     rootMargin: String,
+    toggle: Boolean,
   }
 
   initialize(): void {
@@ -33,6 +37,7 @@ export default class ScrollReveal extends Controller {
     this.class = this.classValue || this.defaultOptions.class || "in"
     this.threshold = this.thresholdValue || this.defaultOptions.threshold || 0.1
     this.rootMargin = this.rootMarginValue || this.defaultOptions.rootMargin || "0px"
+    this.toggle = this.toggleValue || this.defaultOptions.toggle || false
 
     this.observer = new IntersectionObserver(this.intersectionObserverCallback, this.intersectionObserverOptions)
     this.itemTargets.forEach((item) => this.observer.observe(item))
@@ -42,17 +47,23 @@ export default class ScrollReveal extends Controller {
     this.itemTargets.forEach((item) => this.observer.unobserve(item))
   }
 
-  intersectionObserverCallback(entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {
-    entries.forEach((entry) => {
+  intersectionObserverCallback (entries: IntersectionObserverEntry[], observer: IntersectionObserver): void {
+    entries.forEach(entry => {
+      const target = entry.target as HTMLElement
       if (entry.intersectionRatio > this.threshold) {
-        const target = entry.target as HTMLElement
         target.classList.add(...this.class.split(" "))
 
         if (target.dataset.delay) {
           target.style.transitionDelay = target.dataset.delay
         }
 
-        observer.unobserve(target)
+        if (!this.toggle) {
+          observer.unobserve(target)
+        }
+      }
+
+      if (this.toggle && (entry.intersectionRatio < this.threshold || !entry.isIntersecting)) {
+        target.classList.remove(...this.class.split(' '))
       }
     })
   }

From aa798653987823c298153c42ed26bea8e5793bbb Mon Sep 17 00:00:00 2001
From: victor <victor@elalemanyo.de>
Date: Sat, 26 Oct 2024 20:10:06 +0200
Subject: [PATCH 2/2] Add toggle attribute for ScrollReveal component

---
 components/scroll-reveal/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/scroll-reveal/index.html b/components/scroll-reveal/index.html
index 0d67fde..772f8d0 100644
--- a/components/scroll-reveal/index.html
+++ b/components/scroll-reveal/index.html
@@ -31,7 +31,7 @@
 
         <div class="h-screen"></div>
 
-        <div data-controller="scroll-reveal" data-scroll-reveal-threshold-value="0.9">
+        <div data-controller="scroll-reveal" data-scroll-reveal-threshold-value="0.9" data-scroll-reveal-toggle-value="true">
           <p data-scroll-reveal-target="item" class="reveal">With custom</p>
           <p data-scroll-reveal-target="item" class="reveal">options!</p>
         </div>