@design.estate/dees-domtools 2.5.4 → 2.5.6

package/ts/domtools.classes.keyboard.ts

@@ -129,8 +129,15 @@ export enum Key {
 }
 
 export class Keyboard {
-  private mapCombosToHandlers = new Map<number[], plugins.smartrx.rxjs.Subject<KeyboardEvent>>();
+  private mapCombosToHandlers = new Map<
+    string,
+    {
+      keys: Key[];
+      subjects: plugins.smartrx.rxjs.Subject<KeyboardEvent>[];
+    }
+  >();
   private pressedKeys = new Set<Key>();
+  private listening = false;
 
   constructor(private domNode: Element | Document) {
     this.startListening();
@@ -145,46 +152,74 @@ export class Keyboard {
   }
 
   public triggerKeyPress(keysArg: Key[]) {
-    for (const key of keysArg) {
+    const normalizedKeys = this.normalizeKeys(keysArg);
+    for (const key of normalizedKeys) {
       this.pressedKeys.add(key);
     }
-    this.checkMatchingKeyboardSubjects();
-    for (const key of keysArg) {
+    this.checkMatchingKeyboardSubjects(this.createKeyboardEvent(normalizedKeys));
+    for (const key of normalizedKeys) {
       this.pressedKeys.delete(key);
     }
   }
 
   public startListening() {
+    if (this.listening) {
+      return;
+    }
     this.domNode.addEventListener('keydown', this.handleKeyDown as EventListener);
     this.domNode.addEventListener('keyup', this.handleKeyUp as EventListener);
+    this.listening = true;
   }
 
   public stopListening() {
+    if (!this.listening) {
+      return;
+    }
     this.domNode.removeEventListener('keydown', this.handleKeyDown as EventListener);
     this.domNode.removeEventListener('keyup', this.handleKeyUp as EventListener);
+    this.listening = false;
   }
 
   public clear() {
     this.stopListening();
+    for (const comboEntry of this.mapCombosToHandlers.values()) {
+      for (const subject of comboEntry.subjects) {
+        subject.complete();
+      }
+    }
     this.mapCombosToHandlers.clear();
     this.pressedKeys.clear();
   }
 
+  public dispose() {
+    this.clear();
+  }
+
   private handleKeyDown = (event: KeyboardEvent) => {
-    this.pressedKeys.add(event.keyCode);
+    const resolvedKey = this.resolveKey(event);
+    if (resolvedKey === null) {
+      return;
+    }
+    this.pressedKeys.add(resolvedKey);
     this.checkMatchingKeyboardSubjects(event);
   };
 
-  private checkMatchingKeyboardSubjects(payloadArg?) {
-    this.mapCombosToHandlers.forEach((subjectArg, keysArg) => {
-      if (this.areAllKeysPressed(keysArg)) {
-        subjectArg.next(payloadArg);
+  private checkMatchingKeyboardSubjects(payloadArg: KeyboardEvent) {
+    this.mapCombosToHandlers.forEach((comboEntry) => {
+      if (this.areAllKeysPressed(comboEntry.keys)) {
+        for (const subjectArg of comboEntry.subjects) {
+          subjectArg.next(payloadArg);
+        }
       }
     });
   }
 
   private handleKeyUp = (event: KeyboardEvent) => {
-    this.pressedKeys.delete(event.keyCode);
+    const resolvedKey = this.resolveKey(event);
+    if (resolvedKey === null) {
+      return;
+    }
+    this.pressedKeys.delete(resolvedKey);
   };
 
   private areAllKeysPressed(keysArg: Key[]) {
@@ -203,11 +238,335 @@ export class Keyboard {
     keysArg: Array<Key>,
     subjectArg: plugins.smartrx.rxjs.Subject<KeyboardEvent>
   ) {
-    if (!this.mapCombosToHandlers.has(keysArg)) {
-      this.mapCombosToHandlers.set(keysArg, subjectArg);
-    } else {
-      const subject = this.mapCombosToHandlers.get(keysArg);
-      return subject;
+    const normalizedKeys = this.normalizeKeys(keysArg);
+    const comboKey = normalizedKeys.join('+');
+    const existingEntry = this.mapCombosToHandlers.get(comboKey);
+    if (!existingEntry) {
+      this.mapCombosToHandlers.set(comboKey, {
+        keys: normalizedKeys,
+        subjects: [subjectArg],
+      });
+      return;
+    }
+    existingEntry.subjects.push(subjectArg);
+  }
+
+  private normalizeKeys(keysArg: Key[]) {
+    return [...new Set(keysArg)].sort((leftKey, rightKey) => leftKey - rightKey);
+  }
+
+  private resolveKey(event: KeyboardEvent): Key | null {
+    return this.resolveKeyFromCode(event.code)
+      ?? this.resolveKeyFromKey(event.key)
+      ?? this.resolveKeyFromKeyCode(event.keyCode);
+  }
+
+  private resolveKeyFromCode(codeArg: string): Key | null {
+    if (!codeArg) {
+      return null;
+    }
+
+    if (codeArg.startsWith('Key') && codeArg.length === 4) {
+      return Key[codeArg.slice(3) as keyof typeof Key] ?? null;
+    }
+
+    if (codeArg.startsWith('Digit') && codeArg.length === 6) {
+      return this.resolveKeyFromKey(codeArg.slice(5));
+    }
+
+    switch (codeArg) {
+      case 'Backspace':
+        return Key.Backspace;
+      case 'Tab':
+        return Key.Tab;
+      case 'Enter':
+      case 'NumpadEnter':
+        return Key.Enter;
+      case 'ShiftLeft':
+      case 'ShiftRight':
+        return Key.Shift;
+      case 'ControlLeft':
+      case 'ControlRight':
+        return Key.Ctrl;
+      case 'AltLeft':
+      case 'AltRight':
+        return Key.Alt;
+      case 'Pause':
+        return Key.PauseBreak;
+      case 'CapsLock':
+        return Key.CapsLock;
+      case 'Escape':
+        return Key.Escape;
+      case 'Space':
+        return Key.Space;
+      case 'PageUp':
+        return Key.PageUp;
+      case 'PageDown':
+        return Key.PageDown;
+      case 'End':
+        return Key.End;
+      case 'Home':
+        return Key.Home;
+      case 'ArrowLeft':
+        return Key.LeftArrow;
+      case 'ArrowUp':
+        return Key.UpArrow;
+      case 'ArrowRight':
+        return Key.RightArrow;
+      case 'ArrowDown':
+        return Key.DownArrow;
+      case 'Insert':
+        return Key.Insert;
+      case 'Delete':
+        return Key.Delete;
+      case 'MetaLeft':
+        return Key.LeftWindowKey;
+      case 'MetaRight':
+        return Key.RightWindowKey;
+      case 'ContextMenu':
+        return Key.SelectKey;
+      case 'Numpad0':
+        return Key.Numpad0;
+      case 'Numpad1':
+        return Key.Numpad1;
+      case 'Numpad2':
+        return Key.Numpad2;
+      case 'Numpad3':
+        return Key.Numpad3;
+      case 'Numpad4':
+        return Key.Numpad4;
+      case 'Numpad5':
+        return Key.Numpad5;
+      case 'Numpad6':
+        return Key.Numpad6;
+      case 'Numpad7':
+        return Key.Numpad7;
+      case 'Numpad8':
+        return Key.Numpad8;
+      case 'Numpad9':
+        return Key.Numpad9;
+      case 'NumpadMultiply':
+        return Key.Multiply;
+      case 'NumpadAdd':
+        return Key.Add;
+      case 'NumpadSubtract':
+        return Key.Subtract;
+      case 'NumpadDecimal':
+        return Key.DecimalPoint;
+      case 'NumpadDivide':
+        return Key.Divide;
+      case 'F1':
+        return Key.F1;
+      case 'F2':
+        return Key.F2;
+      case 'F3':
+        return Key.F3;
+      case 'F4':
+        return Key.F4;
+      case 'F5':
+        return Key.F5;
+      case 'F6':
+        return Key.F6;
+      case 'F7':
+        return Key.F7;
+      case 'F8':
+        return Key.F8;
+      case 'F9':
+        return Key.F9;
+      case 'F10':
+        return Key.F10;
+      case 'F11':
+        return Key.F11;
+      case 'F12':
+        return Key.F12;
+      case 'NumLock':
+        return Key.NumLock;
+      case 'ScrollLock':
+        return Key.ScrollLock;
+      case 'Semicolon':
+        return Key.SemiColon;
+      case 'Equal':
+        return Key.Equals;
+      case 'Comma':
+        return Key.Comma;
+      case 'Minus':
+        return Key.Dash;
+      case 'Period':
+        return Key.Period;
+      case 'Slash':
+        return Key.ForwardSlash;
+      case 'Backquote':
+        return Key.Tilde;
+      case 'BracketLeft':
+        return Key.OpenBracket;
+      case 'BracketRight':
+        return Key.ClosedBracket;
+      case 'Quote':
+        return Key.Quote;
+      default:
+        return null;
+    }
+  }
+
+  private resolveKeyFromKey(keyArg: string): Key | null {
+    if (!keyArg) {
+      return null;
+    }
+
+    if (keyArg.length === 1) {
+      const upperKey = keyArg.toUpperCase();
+      if (upperKey >= 'A' && upperKey <= 'Z') {
+        return Key[upperKey as keyof typeof Key] ?? null;
+      }
+
+      switch (keyArg) {
+        case '0':
+          return Key.Zero;
+        case '1':
+          return Key.One;
+        case '2':
+          return Key.Two;
+        case '3':
+          return Key.Three;
+        case '4':
+          return Key.Four;
+        case '5':
+          return Key.Five;
+        case '6':
+          return Key.Six;
+        case '7':
+          return Key.Seven;
+        case '8':
+          return Key.Eight;
+        case '9':
+          return Key.Nine;
+        case ' ':
+          return Key.Space;
+        case ';':
+          return Key.SemiColon;
+        case '=':
+          return Key.Equals;
+        case ',':
+          return Key.Comma;
+        case '-':
+          return Key.Dash;
+        case '.':
+          return Key.Period;
+        case '/':
+          return Key.ForwardSlash;
+        case '`':
+          return Key.Tilde;
+        case '[':
+          return Key.OpenBracket;
+        case ']':
+          return Key.ClosedBracket;
+        case '\'':
+          return Key.Quote;
+        default:
+          return null;
+      }
+    }
+
+    switch (keyArg) {
+      case 'Backspace':
+        return Key.Backspace;
+      case 'Tab':
+        return Key.Tab;
+      case 'Enter':
+        return Key.Enter;
+      case 'Shift':
+        return Key.Shift;
+      case 'Control':
+        return Key.Ctrl;
+      case 'Alt':
+        return Key.Alt;
+      case 'Pause':
+        return Key.PauseBreak;
+      case 'CapsLock':
+        return Key.CapsLock;
+      case 'Escape':
+        return Key.Escape;
+      case 'PageUp':
+        return Key.PageUp;
+      case 'PageDown':
+        return Key.PageDown;
+      case 'End':
+        return Key.End;
+      case 'Home':
+        return Key.Home;
+      case 'ArrowLeft':
+        return Key.LeftArrow;
+      case 'ArrowUp':
+        return Key.UpArrow;
+      case 'ArrowRight':
+        return Key.RightArrow;
+      case 'ArrowDown':
+        return Key.DownArrow;
+      case 'Insert':
+        return Key.Insert;
+      case 'Delete':
+        return Key.Delete;
+      case 'Meta':
+        return Key.LeftWindowKey;
+      case 'ContextMenu':
+        return Key.SelectKey;
+      case 'NumLock':
+        return Key.NumLock;
+      case 'ScrollLock':
+        return Key.ScrollLock;
+      default:
+        return null;
+    }
+  }
+
+  private resolveKeyFromKeyCode(keyCodeArg: number): Key | null {
+    if (typeof keyCodeArg !== 'number') {
+      return null;
+    }
+
+    return typeof Key[keyCodeArg as Key] !== 'undefined' ? (keyCodeArg as Key) : null;
+  }
+
+  private createKeyboardEvent(keysArg: Key[]) {
+    const triggerKey = keysArg[keysArg.length - 1] ?? Key.Enter;
+    const keyDescriptor = this.getKeyDescriptor(triggerKey);
+    return new KeyboardEvent('keydown', {
+      key: keyDescriptor.key,
+      code: keyDescriptor.code,
+      ctrlKey: keysArg.includes(Key.Ctrl),
+      shiftKey: keysArg.includes(Key.Shift),
+      altKey: keysArg.includes(Key.Alt),
+      metaKey: keysArg.includes(Key.LeftWindowKey) || keysArg.includes(Key.RightWindowKey),
+    });
+  }
+
+  private getKeyDescriptor(keyArg: Key): { key: string; code: string } {
+    switch (keyArg) {
+      case Key.Ctrl:
+        return { key: 'Control', code: 'ControlLeft' };
+      case Key.Shift:
+        return { key: 'Shift', code: 'ShiftLeft' };
+      case Key.Alt:
+        return { key: 'Alt', code: 'AltLeft' };
+      case Key.Enter:
+        return { key: 'Enter', code: 'Enter' };
+      case Key.Space:
+        return { key: ' ', code: 'Space' };
+      default: {
+        const keyName = Key[keyArg];
+        if (keyName && keyName.length === 1) {
+          if (keyName >= 'A' && keyName <= 'Z') {
+            return { key: keyName.toLowerCase(), code: `Key${keyName}` };
+          }
+        }
+
+        if (keyArg >= Key.Zero && keyArg <= Key.Nine) {
+          const digit = String(keyArg - Key.Zero);
+          return { key: digit, code: `Digit${digit}` };
+        }
+
+        return { key: keyName ?? 'Unidentified', code: 'Unidentified' };
+      }
     }
   }
 }

package/ts/domtools.classes.scroller.ts

@@ -3,19 +3,22 @@ import * as plugins from './domtools.plugins.js';
 
 export class Scroller {
   public domtoolsInstance: DomTools;
+  private disposed = false;
 
   // Array to store scroll callback functions.
   private scrollCallbacks: Array<() => void> = [];
 
   // Lenis instance (if activated) or null.
   private lenisInstance: plugins.Lenis | null = null;
+  private lenisScrollUnsubscribe: (() => void) | null = null;
+  private nativeScrollListenerAttached = false;
 
   // Bound handlers to allow removal from event listeners.
-  private handleNativeScroll = (event: Event): void => {
+  private handleNativeScroll = (_event: Event): void => {
     this.executeScrollCallbacks();
   };
 
-  private handleLenisScroll = (info: any): void => {
+  private handleLenisScroll = (_info: plugins.Lenis): void => {
     this.executeScrollCallbacks();
   };
 
@@ -44,23 +47,40 @@ export class Scroller {
    * Detects whether native smooth scrolling is enabled.
    */
   public async detectNativeSmoothScroll() {
+    const rootScrollBehavior = getComputedStyle(document.documentElement).scrollBehavior;
+    const bodyScrollBehavior = document.body ? getComputedStyle(document.body).scrollBehavior : 'auto';
+    if (rootScrollBehavior === 'smooth' || bodyScrollBehavior === 'smooth') {
+      return true;
+    }
+
     const done = plugins.smartpromise.defer<boolean>();
-    const sampleSize = 100;
+    const sampleSize = 12;
     const acceptableDeltaDifference = 3;
     const minimumSmoothRatio = 0.75;
+    const timeoutInMs = 1200;
 
     const eventDeltas: number[] = [];
 
+    const finalize = (result: boolean) => {
+      window.removeEventListener('wheel', onWheel);
+      window.clearTimeout(timeoutId);
+      done.resolve(result);
+    };
+
     function onWheel(event: WheelEvent) {
       eventDeltas.push(event.deltaY);
 
       if (eventDeltas.length >= sampleSize) {
-        window.removeEventListener('wheel', onWheel);
         analyzeEvents();
       }
     }
 
     function analyzeEvents() {
+      if (eventDeltas.length < 2) {
+        finalize(false);
+        return;
+      }
+
       const totalDiffs = eventDeltas.length - 1;
       let smallDiffCount = 0;
 
@@ -72,16 +92,14 @@ export class Scroller {
       }
 
       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);
-      }
+      finalize(smoothRatio >= minimumSmoothRatio);
     }
 
-    window.addEventListener('wheel', onWheel);
+    const timeoutId = window.setTimeout(() => {
+      analyzeEvents();
+    }, timeoutInMs);
+
+    window.addEventListener('wheel', onWheel, { passive: true });
     return done.promise;
   }
 
@@ -91,6 +109,14 @@ export class Scroller {
    * Lenis will be destroyed immediately.
    */
   public async enableLenisScroll(optionsArg?: { disableOnNativeSmoothScroll?: boolean }) {
+    if (this.disposed) {
+      return;
+    }
+
+    if (this.lenisInstance) {
+      this.disableLenisScroll();
+    }
+
     const lenis = new plugins.Lenis({
       autoRaf: true,
     });
@@ -107,24 +133,28 @@ export class Scroller {
     // 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;
-    };
+  public disableLenisScroll() {
+    if (!this.lenisInstance) {
+      return;
+    }
+
+    this.detachLenisScrollListener();
+    this.lenisInstance.destroy();
+    this.lenisInstance = null;
+    this.attachNativeScrollListener();
   }
 
   /**
    * Registers a callback to be executed on scroll.
    * @param callback A function to execute on each scroll event.
    */
-  public onScroll(callback: () => void): void {
+  public onScroll(callback: () => void): () => void {
     this.scrollCallbacks.push(callback);
+    return () => {
+      this.scrollCallbacks = this.scrollCallbacks.filter((existingCallback) => existingCallback !== callback);
+    };
   }
 
   /**
@@ -145,23 +175,30 @@ export class Scroller {
    * Attaches the native scroll event listener.
    */
   private attachNativeScrollListener(): void {
+    if (this.nativeScrollListenerAttached || this.disposed) {
+      return;
+    }
     window.addEventListener('scroll', this.handleNativeScroll);
+    this.nativeScrollListenerAttached = true;
   }
 
   /**
    * Detaches the native scroll event listener.
    */
   private detachNativeScrollListener(): void {
+    if (!this.nativeScrollListenerAttached) {
+      return;
+    }
     window.removeEventListener('scroll', this.handleNativeScroll);
+    this.nativeScrollListenerAttached = false;
   }
 
   /**
    * 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);
+    if (this.lenisInstance && !this.lenisScrollUnsubscribe) {
+      this.lenisScrollUnsubscribe = this.lenisInstance.on('scroll', this.handleLenisScroll);
     }
   }
 
@@ -169,9 +206,23 @@ export class Scroller {
    * 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);
+    if (this.lenisScrollUnsubscribe) {
+      this.lenisScrollUnsubscribe();
+      this.lenisScrollUnsubscribe = null;
     }
   }
-}
+
+  public dispose() {
+    if (this.disposed) {
+      return;
+    }
+
+    this.disposed = true;
+    this.detachLenisScrollListener();
+    this.lenisInstance?.destroy();
+    this.lenisInstance = null;
+    this.detachNativeScrollListener();
+    this.scrollCallbacks = [];
+    this.sweetScroller.destroy();
+  }
+}

package/ts/domtools.classes.thememanager.ts

@@ -8,30 +8,36 @@ export class ThemeManager {
   public preferredColorSchemeMediaMatch = window.matchMedia('(prefers-color-scheme: light)');
 
   public themeObservable = new plugins.smartrx.rxjs.ReplaySubject<boolean>(1);
+  private automaticGlobalThemeChangeSubscription: plugins.smartrx.rxjs.Subscription | null = null;
+  private readonly preferredColorSchemeChangeHandler = (eventArg: MediaQueryListEvent) => {
+    this.goBrightBoolean = eventArg.matches;
+    this.updateAllConnectedElements();
+  };
 
   constructor(domtoolsRefArg: DomTools) {
     this.domtoolsRef = domtoolsRefArg;
 
     // lets care
     this.goBrightBoolean = this.preferredColorSchemeMediaMatch.matches;
-    this.preferredColorSchemeMediaMatch.addEventListener('change', (eventArg) => {
-      this.goBrightBoolean = eventArg.matches;
-      this.updateAllConnectedElements();
-    });
+    this.preferredColorSchemeMediaMatch.addEventListener('change', this.preferredColorSchemeChangeHandler);
     this.updateAllConnectedElements();
   }
 
   public async enableAutomaticGlobalThemeChange() {
-    if (document.body && document.body.style) {
-      this.themeObservable.subscribe({
+    await this.domtoolsRef.domReady.promise;
+    if (!this.automaticGlobalThemeChangeSubscription) {
+      this.automaticGlobalThemeChangeSubscription = this.themeObservable.subscribe({
         next: (goBright) => {
           document.body.style.background = goBright ? '#fff' : '#000';
-        }
+        },
       });
     }
   }
 
-  private async updateAllConnectedElements() {
+  private updateAllConnectedElements() {
+    if (this.domtoolsRef.disposed) {
+      return;
+    }
     this.themeObservable.next(this.goBrightBoolean);
   }
 
@@ -58,4 +64,11 @@ export class ThemeManager {
     this.goBrightBoolean = !this.goBrightBoolean;
     this.updateAllConnectedElements();
   }
+
+  public dispose() {
+    this.preferredColorSchemeMediaMatch.removeEventListener('change', this.preferredColorSchemeChangeHandler);
+    this.automaticGlobalThemeChangeSubscription?.unsubscribe();
+    this.automaticGlobalThemeChangeSubscription = null;
+    this.themeObservable.complete();
+  }
 }