From 7ca38835ab064f3ef5244f067db0bfe19835c895 Mon Sep 17 00:00:00 2001 From: Darren Griffin Date: Wed, 8 Nov 2023 12:35:23 +0000 Subject: [PATCH] MOD: Change position tracking to a per-element opt-in --- dist/dsap.es.js | 35 +++++++++++++++++------------------ lib/dsap.js | 17 ++++++----------- 2 files changed, 23 insertions(+), 29 deletions(-) diff --git a/dist/dsap.es.js b/dist/dsap.es.js index 4cb0558..c08d9fc 100644 --- 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 index 34098a0..dd37082 100644 --- 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}}`); } });