2.3.2

changelog.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 2025-02-01 - 2.3.2 - fix(scroller)
+Rename method from scrollToElement to toElement for consistency
+
+- Updated method name in Scroller class for better coherence with existing naming conventions.
+
+## 2025-01-31 - 2.3.1 - fix(scroller)
+Removed passive option from scroll event listener
+
+- The 'passive: true' option was removed from the native scroll event listener attachment.
+
+## 2025-01-31 - 2.3.0 - feat(scroller)
+Enhance Scroller class with callback execution and adaptive scroll listener
+
+- Added support for executing scroll callbacks in the Scroller class.
+- Integrated adaptive scrolling mechanism using Lenis, with native smooth scrolling detection.
+- Ensured seamless switching between native scroll listener and Lenis scroll listener.
+
+## 2025-01-31 - 2.2.0 - feat(core)
+Enhance scrolling capabilities by integrating Scroller class and adding lenis support
+
+- Replaced SweetScroll setup in domtools.classes.domtools.ts with Scroller class.
+- Moved SweetScroll initialization and methods to new Scroller class.
+- Added lenis support in the Scroller class for enhanced scrolling capabilities.
+- Updated dev and dependencies versions in package.json.
+
+## 2025-01-09 - 2.1.1 - fix(themamanager)
+Fixed automatic global theme change subscription for background updates.
+
+- Corrected the logic for updating the document's background color upon theme changes using themeObservable subscription.
+
 ## 2025-01-09 - 2.1.0 - feat(themeManager)
 Exposed method to enable automatic global theme change.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-domtools",
-  "version": "2.1.0",
+  "version": "2.3.2",
   "private": false,
   "description": "A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.",
   "main": "dist_ts/index.js",
@@ -15,11 +15,11 @@
     "buildDocs": "tsdoc"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.2.0",
+    "@git.zone/tsbuild": "^2.2.1",
-    "@git.zone/tsbundle": "^2.1.0",
+    "@git.zone/tsbundle": "^2.2.5",
-    "@git.zone/tstest": "^1.0.90",
+    "@git.zone/tstest": "^1.0.96",
-    "@push.rocks/tapbundle": "^5.5.4",
+    "@push.rocks/tapbundle": "^5.5.6",
-    "@types/node": "^22.10.5"
+    "@types/node": "^22.12.0"
   },
   "dependencies": {
     "@api.global/typedrequest": "^3.1.10",
@@ -28,7 +28,7 @@
     "@push.rocks/smartdelay": "^3.0.5",
     "@push.rocks/smartjson": "^5.0.20",
     "@push.rocks/smartmarkdown": "^3.0.3",
-    "@push.rocks/smartpromise": "^4.1.0",
+    "@push.rocks/smartpromise": "^4.2.2",
     "@push.rocks/smartrouter": "^1.3.2",
     "@push.rocks/smartrx": "^3.0.7",
     "@push.rocks/smartstate": "^2.0.19",
@@ -37,6 +37,7 @@
     "@push.rocks/webrequest": "^3.0.37",
     "@push.rocks/websetup": "^3.0.19",
     "@push.rocks/webstore": "^2.0.20",
+    "lenis": "^1.1.20",
     "lit": "^3.2.1",
     "sweet-scroll": "^4.0.0"
   },

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-domtools',
-  version: '2.1.0',
+  version: '2.3.2',
   description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
 }

ts/domtools.classes.domtools.ts

@@ -93,9 +93,7 @@ export class DomTools {
   };
 
   public deesComms = new plugins.deesComms.DeesComms();
-  public scroller = new plugins.SweetScroll({
+  public scroller = new Scroller(this);
-    /* some options */
-  }); // TODO: switch to scroller class
   public themeManager = new ThemeManager(this);
   public keyboard = new Keyboard(document.body);
 

ts/domtools.classes.scroller.ts

@@ -1,5 +1,175 @@
+import type { DomTools } from './domtools.classes.domtools.js';
 import * as plugins from './domtools.plugins.js';
 
 export class Scroller {
-  // TODO: move sweet scroll over to here;
+  public domtoolsInstance: DomTools;
-}
+
+  // Array to store scroll callback functions.
+  private scrollCallbacks: Array<() => void> = [];
+
+  // Lenis instance (if activated) or null.
+  private lenisInstance: plugins.Lenis | null = null;
+
+  // Bound handlers to allow removal from event listeners.
+  private handleNativeScroll = (event: Event): void => {
+    this.executeScrollCallbacks();
+  };
+
+  private handleLenisScroll = (info: any): void => {
+    this.executeScrollCallbacks();
+  };
+
+  constructor(domtoolsInstanceArg: DomTools) {
+    this.domtoolsInstance = domtoolsInstanceArg;
+    // Attach the native scroll listener by default.
+    this.attachNativeScrollListener();
+  }
+
+  private sweetScroller = new plugins.SweetScroll({});
+
+  /**
+   * Scrolls to a given element with options.
+   */
+  public async toElement(
+    elementArg: HTMLElement,
+    optionsArg: Parameters<typeof this.sweetScroller.toElement>[1]
+  ) {
+    this.sweetScroller.toElement(elementArg, optionsArg);
+    await plugins.smartdelay.delayFor(optionsArg.duration);
+  }
+
+  /**
+   * Detects whether native smooth scrolling is enabled.
+   */
+  public async detectNativeSmoothScroll() {
+    const done = plugins.smartpromise.defer<boolean>();
+    const sampleSize = 100;
+    const acceptableDeltaDifference = 3;
+    const minimumSmoothRatio = 0.75;
+
+    const eventDeltas: number[] = [];
+
+    function onWheel(event: WheelEvent) {
+      eventDeltas.push(event.deltaY);
+
+      if (eventDeltas.length >= sampleSize) {
+        window.removeEventListener('wheel', onWheel);
+        analyzeEvents();
+      }
+    }
+
+    function analyzeEvents() {
+      const totalDiffs = eventDeltas.length - 1;
+      let smallDiffCount = 0;
+
+      for (let i = 0; i < totalDiffs; i++) {
+        const diff = Math.abs(eventDeltas[i + 1] - eventDeltas[i]);
+        if (diff <= acceptableDeltaDifference) {
+          smallDiffCount++;
+        }
+      }
+
+      const smoothRatio = smallDiffCount / totalDiffs;
+      if (smoothRatio >= minimumSmoothRatio) {
+        console.log('Smooth scrolling detected.');
+        done.resolve(true);
+      } else {
+        console.log('Smooth scrolling NOT detected.');
+        done.resolve(false);
+      }
+    }
+
+    window.addEventListener('wheel', onWheel);
+    return done.promise;
+  }
+
+  /**
+   * Enables Lenis scrolling.
+   * If optionsArg.disableOnNativeSmoothScroll is true and native smooth scrolling is detected,
+   * Lenis will be destroyed immediately.
+   */
+  public async enableLenisScroll(optionsArg?: { disableOnNativeSmoothScroll?: boolean }) {
+    const lenis = new plugins.Lenis({
+      autoRaf: true,
+    });
+
+    if (optionsArg?.disableOnNativeSmoothScroll) {
+      if (await this.detectNativeSmoothScroll()) {
+        lenis.destroy();
+        return;
+      }
+    }
+
+    // Activate Lenis scrolling.
+    this.lenisInstance = lenis;
+    // Switch from native scroll listener to Lenis scroll listener.
+    this.detachNativeScrollListener();
+    this.attachLenisScrollListener();
+
+    // Monkey-patch the destroy method so that when Lenis is destroyed,
+    // the native scroll listener is reattached.
+    const originalDestroy = lenis.destroy.bind(lenis);
+    lenis.destroy = () => {
+      originalDestroy();
+      this.detachLenisScrollListener();
+      this.attachNativeScrollListener();
+      this.lenisInstance = null;
+    };
+  }
+
+  /**
+   * Registers a callback to be executed on scroll.
+   * @param callback A function to execute on each scroll event.
+   */
+  public onScroll(callback: () => void): void {
+    this.scrollCallbacks.push(callback);
+  }
+
+  /**
+   * Executes all registered scroll callbacks concurrently.
+   */
+  private executeScrollCallbacks(): void {
+    // Execute all callbacks in parallel.
+    this.scrollCallbacks.forEach((callback) => {
+      try {
+        callback();
+      } catch (error) {
+        console.error('Error in scroll callback:', error);
+      }
+    });
+  }
+
+  /**
+   * Attaches the native scroll event listener.
+   */
+  private attachNativeScrollListener(): void {
+    window.addEventListener('scroll', this.handleNativeScroll);
+  }
+
+  /**
+   * Detaches the native scroll event listener.
+   */
+  private detachNativeScrollListener(): void {
+    window.removeEventListener('scroll', this.handleNativeScroll);
+  }
+
+  /**
+   * Attaches the Lenis scroll event listener.
+   */
+  private attachLenisScrollListener(): void {
+    if (this.lenisInstance) {
+      // Assuming that Lenis exposes an `on` method to listen to scroll events.
+      this.lenisInstance.on('scroll', this.handleLenisScroll);
+    }
+  }
+
+  /**
+   * Detaches the Lenis scroll event listener.
+   */
+  private detachLenisScrollListener(): void {
+    if (this.lenisInstance) {
+      // Assuming that Lenis exposes an `off` method to remove scroll event listeners.
+      this.lenisInstance.off('scroll', this.handleLenisScroll);
+    }
+  }
+}

ts/domtools.classes.thememanager.ts

@@ -23,7 +23,11 @@ export class ThemeManager {
 
   public async enableAutomaticGlobalThemeChange() {
     if (document.body && document.body.style) {
-      document.body.style.background = this.goBrightBoolean ? '#fff' : '#000';
+      this.themeObservable.subscribe({
+        next: (goBright) => {
+          document.body.style.background = goBright ? '#fff' : '#000';
+        }
+      });
     }
   }
 

ts/domtools.plugins.ts

@@ -49,6 +49,7 @@ export {
 };
 
 // third party scope
+import Lenis from 'lenis'
 import SweetScroll from 'sweet-scroll';
 
-export { SweetScroll };
+export { Lenis, SweetScroll };