@phantomstudios/js-toolkit - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

CHANGELOG.md

 # js-toolkit
 
+## 0.1.2
+
+### Patch Changes
+
+- Fix issues with above
+
 ## 0.1.1
@@ -4,0 +10,0 @@

dist/index.d.ts

@@ -89,2 +89,20 @@ declare const MAX_FILTER_FREQUENCY = 22050;
 
-export { AudioController, type AudioControllerProperties, type AudioPlayOptions, type ClipNodes, type Clips, DEFAULT_REVEAL_CONFIG, type LoopConfig, type LoopingClip, MAX_FILTER_FREQUENCY, type RevealConfig };
+declare class RevealOnScroll {
+    private _config;
+    readonly elements: Element[];
+    private readonly _queueToShow;
+    private _intersectionObserver;
+    private _canRevealNext;
+    constructor(config?: Partial<RevealConfig>);
+    getAllElementsToReveal(): Element[];
+    revealAllElements(): void;
+    private _createIntersectionObserver;
+    private _observeElements;
+    private _revealQueued;
+    isElementOnscreen(element: Element): boolean;
+    revealElement(element: Element): void;
+    private _revealNextElement;
+    refresh(): void;
+}
+
+export { AudioController, type AudioControllerProperties, type AudioPlayOptions, type ClipNodes, type Clips, DEFAULT_REVEAL_CONFIG, type LoopConfig, type LoopingClip, MAX_FILTER_FREQUENCY, type RevealConfig, RevealOnScroll };

dist/index.js

@@ -25,3 +25,4 @@ "use strict";
   DEFAULT_REVEAL_CONFIG: () => DEFAULT_REVEAL_CONFIG,
-  MAX_FILTER_FREQUENCY: () => MAX_FILTER_FREQUENCY
+  MAX_FILTER_FREQUENCY: () => MAX_FILTER_FREQUENCY,
+  RevealOnScroll: () => RevealOnScroll
 });
@@ -260,2 +261,102 @@ module.exports = __toCommonJS(src_exports);
 };
+
+// src/utils/platform.ts
+var IS_BROWSER = window !== void 0;
+var HAS_INTERSECTION_OBSERVER = !!window.IntersectionObserver;
+
+// src/reveal-on-scroll/index.ts
+var RevealOnScroll = class {
+  _config;
+  elements = [];
+  _queueToShow = [];
+  _intersectionObserver;
+  _canRevealNext = true;
+  constructor(config) {
+    if (!IS_BROWSER)
+      return;
+    this._config = { ...DEFAULT_REVEAL_CONFIG, ...config };
+    this.elements = this.getAllElementsToReveal();
+    if (!HAS_INTERSECTION_OBSERVER)
+      this.revealAllElements();
+    else {
+      this._intersectionObserver = this._createIntersectionObserver();
+      this._observeElements(this.elements);
+    }
+  }
+  getAllElementsToReveal() {
+    return Array.from(document.querySelectorAll(this._config.revealSelector));
+  }
+  revealAllElements() {
+    this.elements.forEach(
+      (element) => element.classList.add(this._config.visibleClass)
+    );
+  }
+  _createIntersectionObserver() {
+    return new IntersectionObserver(
+      (entries, observer) => {
+        entries.filter((entry) => entry.isIntersecting).forEach((entry) => {
+          const element = entry.target;
+          const queued = this._queueToShow.includes(element);
+          const alreadyVisible = element.classList.contains(
+            this._config.visibleClass
+          );
+          const hidden = element.classList.contains(this._config.hiddenClass);
+          if (queued || alreadyVisible || hidden)
+            return;
+          else {
+            this._queueToShow.push(element);
+            this._revealQueued();
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: this._config.thresholdToRevealElements }
+    );
+  }
+  _observeElements(elements) {
+    elements.forEach((element) => this._intersectionObserver.observe(element));
+  }
+  _revealQueued() {
+    if (this._canRevealNext && this._queueToShow.length) {
+      this._canRevealNext = false;
+      const element = this._queueToShow.shift();
+      if (!element)
+        return;
+      if (!this.isElementOnscreen(element)) {
+        this.revealElement(element);
+        this._revealNextElement();
+      } else {
+        setTimeout(() => {
+          this.revealElement(element);
+          this._revealNextElement();
+        }, this._config.delayBetweenQueuedElements);
+      }
+    }
+  }
+  isElementOnscreen(element) {
+    const elementRect = element.getBoundingClientRect();
+    const viewHeight = Math.max(
+      document.documentElement.clientHeight,
+      window.innerHeight
+    );
+    return !(elementRect.bottom < 0 || elementRect.top - viewHeight >= 0);
+  }
+  revealElement(element) {
+    const alreadyVisible = element.classList.contains(
+      this._config.visibleClass
+    );
+    if (!alreadyVisible)
+      element.classList.add(this._config.visibleClass);
+  }
+  _revealNextElement() {
+    this._canRevealNext = true;
+    this._revealQueued();
+  }
+  refresh() {
+    const allElements = this.getAllElementsToReveal();
+    const newElements = this.elements.filter((x) => !allElements.includes(x));
+    this._observeElements(newElements);
+    this.elements.concat(newElements);
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
@@ -265,3 +366,4 @@ 0 && (module.exports = {
   DEFAULT_REVEAL_CONFIG,
-  MAX_FILTER_FREQUENCY
+  MAX_FILTER_FREQUENCY,
+  RevealOnScroll
 });

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "0.1.1",
+  "version": "0.1.2",
   "scripts": {
@@ -9,0 +9,0 @@ "build": "tsup src/index.ts --dts",

No alert changes

Improved metrics

Total package byte prevSize

31350

increased by13.78%

Lines of code

895

increased by15.04%

No dependency changes