2.0.20

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "2.0.9",
+  "version": "2.0.20",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-domtools",
-      "version": "2.0.9",
+      "version": "2.0.20",
       "license": "MIT",
       "dependencies": {
         "@apiglobal/typedrequest": "^2.0.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "2.0.9",
+  "version": "2.0.20",
   "private": false,
   "description": "tools to simplify complex css structures",
   "main": "dist_ts/index.js",

ts/00_commitinfo_data.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@designestate/dees-domtools',
+  version: '2.0.20',
+  description: 'tools to simplify complex css structures'
+}

ts/domtools.classes.domtools.ts

@@ -6,13 +6,17 @@ import { TViewport } from './domtools.css.breakpoints.js';
 import { Scroller } from './domtools.classes.scroller.js';
 import { WebSetup } from '@pushrocks/websetup';
 import { ThemeManager } from './domtools.classes.thememanager.js';
-import { Keyboard, Key } from './domtools.classes.keyboard.js';
+import { Keyboard } from './domtools.classes.keyboard.js';
 
 export interface IDomToolsState {
   virtualViewport: TViewport;
   jwt: string;
 }
 
+export interface IDomToolsContructorOptions {
+  ignoreGlobal?: boolean;
+}
+
 export class DomTools {
   // ======
   // STATIC
@@ -20,10 +24,10 @@ export class DomTools {
   /**
    * setups domtools
    */
-  public static async setupDomTools() {
+  public static async setupDomTools(optionsArg: IDomToolsContructorOptions = {}) {
     let domToolsInstance: DomTools;
-    if (!globalThis.deesDomTools) {
+    if (!globalThis.deesDomTools && !optionsArg.ignoreGlobal) {
-      globalThis.deesDomTools = new DomTools();
+      globalThis.deesDomTools = new DomTools(optionsArg);
       domToolsInstance = globalThis.deesDomTools;
 
       // lets make sure the dom is ready
@@ -36,6 +40,8 @@ export class DomTools {
       };
       document.addEventListener('readystatechange', readyStateChangedFunc);
       domToolsInstance.domToolsReady.resolve();
+    } else if (optionsArg.ignoreGlobal) {
+      domToolsInstance = new DomTools(optionsArg);
     } else {
       domToolsInstance = globalThis.deesDomTools;
     }
@@ -75,7 +81,7 @@ export class DomTools {
   public smartstate = new plugins.smartstate.Smartstate();
   public domToolsStatePart = this.smartstate.getStatePart<IDomToolsState>('domtools', {
     virtualViewport: 'native',
-    jwt: null
+    jwt: null,
   });
 
   public router = new plugins.smartrouter.SmartRouter({
@@ -94,12 +100,11 @@ export class DomTools {
   public themeManager = new ThemeManager(this);
   public keyboard = new Keyboard(document.body);
 
-
   public domToolsReady = plugins.smartpromise.defer();
   public domReady = plugins.smartpromise.defer();
   public globalStylesReady = plugins.smartpromise.defer();
 
-  constructor() {}
+  constructor(optionsArg: IDomToolsContructorOptions) {}
 
   private runOnceTrackerStringMap = new Stringmap();
   private runOnceResultMap = new FastMap();
@@ -141,6 +146,23 @@ export class DomTools {
     this.elements.headElement.appendChild(styleElement);
   }
 
+  /**
+   * allows to set global styles
+   * @param stylesText the css text you want to set
+   */
+   public async setExternalScript(scriptLinkArg: string) {
+    await this.domReady.promise;
+    const done = plugins.smartpromise.defer();
+    const script = document.createElement('script')
+    script.src = scriptLinkArg;
+    script.addEventListener('load', function() {
+      done.resolve();
+    });
+    const parentNode = document.head || document.body;
+    parentNode.append(script);
+    await done.promise;
+  }
+
   /**
    * allows setting external css files
    * @param cssLinkArg a url to an external stylesheet

ts/domtools.classes.keyboard.ts

@@ -1,3 +1,5 @@
+import * as plugins from './domtools.plugins.js';
+
 export enum Key {
   Backspace = 8,
   Tab = 9,
@@ -123,102 +125,89 @@ export enum Key {
 
   OpenBracket = 219,
   ClosedBracket = 221,
-  Quote = 222
+  Quote = 222,
 }
 
-type KeyCombo = Array<Key>
-
-/**
- * @param {KeyboardEvent} event - pressed key event, in case of multi-key combos
- *  the last pressed key event is passed to this handler
- */
-type Handler = (event: KeyboardEvent) => void
-
 export class Keyboard {
-  private mapCombosToHandlers = new Map<number[], Handler[]>();
+  private mapCombosToHandlers = new Map<number[], plugins.smartrx.rxjs.Subject<KeyboardEvent>>();
   private pressedKeys = new Set<Key>();
 
-  constructor(
+  constructor(private domNode: Element | Document) {
-      private domNode: Element | Document
+    this.startListening();
-  ) {
-      this.startListening()
   }
 
-  on(keys: Key[] | KeyCombo[], callback: Handler) {
+  public keyEnum = Key;
-      const combos = this.toCombos(keys)
 
-      combos.forEach(combo => {
+  public on(keys: Key[]) {
-          this.registerComboCallback(combo, callback)
+    const subject = new plugins.smartrx.rxjs.Subject<KeyboardEvent>();
-      })
+    this.registerKeys(keys, subject);
+    return subject;
   }
 
-  startListening() {
+  public triggerKeyPress(keysArg: Key[]) {
-      this.domNode.addEventListener('keydown', this.handleKeyDown)
+    for (const key of keysArg) {
-      this.domNode.addEventListener('keyup', this.handleKeyUp)
+      this.pressedKeys.add(key);
+    }
+    this.checkMatchingKeyboardSubjects();
+    for (const key of keysArg) {
+      this.pressedKeys.delete(key);
+    }
   }
 
-  stopListening() {
+  public startListening() {
-      this.domNode.removeEventListener('keydown', this.handleKeyDown)
+    this.domNode.addEventListener('keydown', this.handleKeyDown);
-      this.domNode.removeEventListener('keyup', this.handleKeyUp)
+    this.domNode.addEventListener('keyup', this.handleKeyUp);
   }
 
-  clear() {
+  public stopListening() {
-      this.stopListening()
+    this.domNode.removeEventListener('keydown', this.handleKeyDown);
-      this.mapCombosToHandlers.clear()
+    this.domNode.removeEventListener('keyup', this.handleKeyUp);
-      this.pressedKeys.clear()
+  }
+
+  public clear() {
+    this.stopListening();
+    this.mapCombosToHandlers.clear();
+    this.pressedKeys.clear();
   }
 
   private handleKeyDown = (event: KeyboardEvent) => {
-      this.pressedKeys.add(event.keyCode)
+    this.pressedKeys.add(event.keyCode);
+    this.checkMatchingKeyboardSubjects(event);
+  };
 
-      this.mapCombosToHandlers.forEach((handlers, combo) => {
+  private checkMatchingKeyboardSubjects(payloadArg?) {
-          if (this.isComboPressed(combo)) {
+    this.mapCombosToHandlers.forEach((subjectArg, keysArg) => {
-              handlers.forEach(handler => handler(event))
+      if (this.areAllKeysPressed(keysArg)) {
+        subjectArg.next(payloadArg);
       }
-      })
+    });
   }
 
   private handleKeyUp = (event: KeyboardEvent) => {
-      this.pressedKeys.delete(event.keyCode)
+    this.pressedKeys.delete(event.keyCode);
-  }
+  };
 
-  private isComboPressed(combo: number[]) {
+  private areAllKeysPressed(keysArg: Key[]) {
-      let result = true
+    let result = true;
 
-      combo.forEach(key => {
+    keysArg.forEach((key) => {
       if (!this.pressedKeys.has(key)) {
-              result = false
+        result = false;
       }
-      })
+    });
 
-      return result
+    return result;
   }
 
-  private registerComboCallback(combo: Array<Key>, callback: Handler) {
+  private registerKeys(
-      if (!this.mapCombosToHandlers.has(combo)) {
+    keysArg: Array<Key>,
-          this.mapCombosToHandlers.set(combo, [])
+    subjectArg: plugins.smartrx.rxjs.Subject<KeyboardEvent>
-      }
+  ) {
-
+    if (!this.mapCombosToHandlers.has(keysArg)) {
-      const handlers = this.mapCombosToHandlers.get(combo)
+      this.mapCombosToHandlers.set(keysArg, subjectArg);
-
-      handlers!.push(callback)
-  }
-
-  private toCombos(keys: KeyCombo[] | Key[]) {
-      if (keys.length === 0) {
-          return []
-      }
-
-      const isKeys = !Array.isArray(keys[0])
-      let combos: KeyCombo[] = []
-
-      if (isKeys) {
-          combos = (keys as Key[]).map(key => [key])
     } else {
-          combos = keys as KeyCombo[]
+      const subject = this.mapCombosToHandlers.get(keysArg);
-          combos = combos.filter(combo => combo.length > 0)
+      return subject;
     }
-
-      return combos
   }
 }

ts/domtools.css.basestyles.ts

@@ -6,12 +6,11 @@ import { css, unsafeCSS } from 'lit';
  * changes scrollbar styles to be consistent across OS borders
  */
 export const scrollBarStyles: string = (() => {
-  const returnStyles =
+  const returnStylesOld = navigator.userAgent.indexOf('Mac OS X') === -1 ? css``.cssText : ``;
-    navigator.userAgent.indexOf('Mac OS X') === -1
+  const returnStyles = css`
-      ? css`
     /* width */
     ::-webkit-scrollbar {
-            width: 6px;
+      width: 0px;
     }
 
     /* Track */
@@ -28,8 +27,7 @@ export const scrollBarStyles: string = (() => {
     ::-webkit-scrollbar-thumb:hover {
       background: #777;
     }
-        `.cssText
+  `.cssText;
-      : ``;
   return returnStyles;
 })();
 

ts/domtools.elementbasic.ts

@@ -1,5 +1,5 @@
 import * as plugins from './domtools.plugins.js';
-import { DomTools } from './domtools.classes.domtools.js';
+import { DomTools, IDomToolsContructorOptions } from './domtools.classes.domtools.js';
 import { scrollBarStyles, globalBaseStyles } from './domtools.css.basestyles.js';
 
 import { html, LitElement, css, unsafeCSS } from 'lit';
@@ -40,8 +40,8 @@ export const styles = html`
  * a basic setup for elements
  * makes sure everything is in check
  */
-export const setup = async (elementArg?: LitElement): Promise<DomTools> => {
+export const setup = async (elementArg?: LitElement, optionsArg: IDomToolsContructorOptions = {}): Promise<DomTools> => {
-  const domTools = await DomTools.setupDomTools();
+  const domTools = await DomTools.setupDomTools(optionsArg);
 
   if (elementArg) {
     // lets do something with the element

ts/index.ts

@@ -5,7 +5,7 @@ import * as breakpoints from './domtools.css.breakpoints.js';
 import * as css from './domtools.css.js';
 
 export { css, breakpoints, elementBasic };
-export { DomTools } from './domtools.classes.domtools.js';
+export { DomTools, IDomToolsContructorOptions } from './domtools.classes.domtools.js';
 export { TypedRequest } from '@apiglobal/typedrequest';
 export { IWebSetupConstructorOptions } from '@pushrocks/websetup';
 export { rxjs } from '@pushrocks/smartrx';