MOD: Change position tracking to a per-element opt-in

mrdarrengriffin · Nov 8, 2023 · 7ca3883 · 7ca3883
1 parent 544ea49
commit 7ca3883
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 29 deletions.
diff --git a/dist/dsap.es.js b/dist/dsap.es.js
@@ -1,12 +1,11 @@
-var h = Object.defineProperty;
-var p = (s, t, e) => t in s ? h(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var n = (s, t, e) => (p(s, typeof t != "symbol" ? t + "" : t, e), e);
-class u {
-  constructor(t = {}) {
-    n(this, "elems");
-    n(this, "maxScrollDelta", 1e3);
-    n(this, "defaultOptions", { trackPosition: !0 });
-    this.options = { ...this.defaultOptions, ...t }, this.init();
+var m = Object.defineProperty;
+var p = (a, t, e) => t in a ? m(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var r = (a, t, e) => (p(a, typeof t != "symbol" ? t + "" : t, e), e);
+class S {
+  constructor() {
+    r(this, "elems");
+    r(this, "maxScrollDelta", 1e3);
+    this.init();
   }
   init() {
     this.elems = document.querySelectorAll("[data-dsap]"), this.elems.forEach((t) => {
@@ -15,22 +14,22 @@ class u {
   }
   doScroll() {
     const t = window.scrollY, e = t + window.innerHeight;
-    let o = [`:root{--dsap-max-scroll-delta: ${this.maxScrollDelta}}`];
-    this.elems.forEach((i) => {
-      const d = i.getBoundingClientRect().top + t, c = d + i.getBoundingClientRect().height;
-      let l = !1, a = !1, r = 0;
-      e < d ? a = !1 : t > c ? a = !0 : l = !0, this.options.trackPosition && (l ? r = ((e - d) / (i.getBoundingClientRect().height + window.innerHeight) * this.maxScrollDelta).toFixed(0) : a && (r = this.maxScrollDelta)), i.dataset.dsapIs = l ? "in" : a ? "above" : "below", l && (i.dataset.dsapSeen = !0), this.options.trackPosition && o.push(`[data-dsap="${i.dataset.dsap}"]{--dsap-scroll-delta: ${r}}`);
-    }), this.style.innerHTML !== o.join("") && (this.style.innerHTML = o.join(""));
+    let i = [`:root{--dsap-max-scroll-delta: ${this.maxScrollDelta}}`];
+    this.elems.forEach((l) => {
+      const o = l.getBoundingClientRect().top + t, h = o + l.getBoundingClientRect().height, c = !!l.dataset.dsapScroll;
+      let s = !1, n = !1, d = 0;
+      e < o ? n = !1 : t > h ? n = !0 : s = !0, c && (s ? d = ((e - o) / (l.getBoundingClientRect().height + window.innerHeight) * this.maxScrollDelta).toFixed(0) : n && (d = this.maxScrollDelta)), l.dataset.dsapIs = s ? "in" : n ? "above" : "below", s && (l.dataset.dsapSeen = !0), c && i.push(`[data-dsap="${l.dataset.dsap}"]{--dsap-scroll-delta: ${d}}`);
+    }), this.style.innerHTML !== i.join("") && (this.style.innerHTML = i.join(""));
   }
   debounce(t) {
     let e;
-    return (...o) => {
+    return (...i) => {
       e && cancelAnimationFrame(e), e = requestAnimationFrame(() => {
-        t(...o);
+        t(...i);
       });
     };
   }
 }
 export {
-  u as DSAP
+  S as DSAP
 };
diff --git a/lib/dsap.js b/lib/dsap.js
@@ -5,14 +5,7 @@ class DSAP {
     // Set the range of the viewport delta to 1000. The higher the number, the better "resolution" of the scroll delta
     maxScrollDelta = 1000;
 
-    defaultOptions = {
-        trackPosition: true,
-    }
-
-    constructor(options = {}) {
-        // Merge the default options with the options passed in
-        this.options = { ...this.defaultOptions, ...options };
-
+    constructor() {
         this.init();
     }
 
@@ -58,6 +51,7 @@ class DSAP {
             // Get the element's top and bottom position
             const elementTop = elem.getBoundingClientRect().top + scrollY;
             const elementBottom = elementTop + elem.getBoundingClientRect().height;
+            const trackScroll = !!elem.dataset.dsapScroll;
 
             // Setup some variables to track the element's position relative to the viewport
             let inViewport = false;
@@ -73,7 +67,8 @@ class DSAP {
                 inViewport = true;
             }
 
-            if (this.options.trackPosition) {
+            // Only track the scroll if the element has the data-dsap-scroll attribute
+            if (trackScroll) {
                 // If the element is in the viewport, calculate the delta of the element that is visible
                 if (inViewport) {
                     const delta = (viewportBottom - elementTop) / (elem.getBoundingClientRect().height + window.innerHeight);
@@ -92,8 +87,8 @@ class DSAP {
                 elem.dataset.dsapSeen = true;
             }
 
-            // Prepare the CSS to be injected
-            if(this.options.trackPosition){
+            // Prepare the CSS to be injected. Only inject CSS if scroll tracking is enabled
+            if (trackScroll) {
                 styles.push(`[data-dsap="${elem.dataset.dsap}"]{--dsap-scroll-delta: ${viewportDelta}}`);
             }
         });