2.0.29

license

@@ -1,4 +1,5 @@
 Copyright (c) 2020 Lossless GmbH (hello@lossless.com)
+Copyright (c) 2017 Nathan Friend (ts-keycode-enum)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,39 +1,40 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.114",
+  "version": "2.0.29",
   "private": false,
   "description": "tools to simplify complex css structures",
   "main": "dist_ts/index.js",
   "typings": "dist_ts/index.d.ts",
+  "type": "module",
   "author": "Lossless GmbH",
   "license": "MIT",
   "scripts": {
     "test": "(tstest test/ --web)",
-    "build": "(tsbuild --web && tsbundle npm)",
+    "build": "(tsbuild --web --allowimplicitany && tsbundle npm)",
     "format": "(gitzone format)"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.29",
-    "@gitzone/tsbundle": "^1.0.89",
-    "@gitzone/tstest": "^1.0.60",
-    "@pushrocks/tapbundle": "^4.0.0",
-    "@types/node": "^17.0.13",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.15.0"
+    "@gitzone/tsbuild": "^2.1.63",
+    "@gitzone/tsbundle": "^2.0.6",
+    "@gitzone/tstest": "^1.0.72",
+    "@pushrocks/tapbundle": "^5.0.4",
+    "@types/node": "^18.15.11"
   },
   "dependencies": {
-    "@apiglobal/typedrequest": "^1.0.65",
-    "@designestate/dees-comms": "^1.0.16",
-    "@pushrocks/lik": "^5.0.4",
-    "@pushrocks/smartdelay": "^2.0.13",
-    "@pushrocks/smartpromise": "^3.1.6",
-    "@pushrocks/smartrouter": "^1.0.12",
-    "@pushrocks/smartrx": "^2.0.25",
-    "@pushrocks/smartstate": "^1.0.23",
-    "@pushrocks/webrequest": "^2.0.13",
+    "@apiglobal/typedrequest": "^2.0.8",
+    "@designestate/dees-comms": "^1.0.22",
+    "@pushrocks/lik": "^6.0.2",
+    "@pushrocks/smartdelay": "^3.0.1",
+    "@pushrocks/smartjson": "^5.0.5",
+    "@pushrocks/smartpromise": "^4.0.0",
+    "@pushrocks/smartrouter": "^1.0.14",
+    "@pushrocks/smartrx": "^3.0.0",
+    "@pushrocks/smartstate": "^2.0.4",
+    "@pushrocks/smarturl": "^3.0.5",
+    "@pushrocks/webrequest": "^3.0.21",
     "@pushrocks/websetup": "^3.0.16",
-    "@pushrocks/webstore": "^1.0.18",
-    "lit": "^2.1.2",
+    "@pushrocks/webstore": "^2.0.5",
+    "lit": "^2.7.1",
     "sweet-scroll": "^4.0.0"
   },
   "files": [

ts/00_commitinfo_data.ts

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

ts/domtools.classes.domtools.ts

@@ -1,17 +1,19 @@
-import * as plugins from './domtools.plugins';
-import { Stringmap } from '@pushrocks/lik/dist_ts/lik.stringmap';
-import { FastMap } from '@pushrocks/lik/dist_ts/lik.fastmap';
-import { TViewport } from './domtools.css.breakpoints';
-
-import { Scroller } from './domtools.classes.scroller';
+import * as plugins from './domtools.plugins.js';
+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';
+import { ThemeManager } from './domtools.classes.thememanager.js';
+import { Keyboard } from './domtools.classes.keyboard.js';
 
 export interface IDomToolsState {
   virtualViewport: TViewport;
   jwt: string;
 }
 
+export interface IDomToolsContructorOptions {
+  ignoreGlobal?: boolean;
+}
+
 export class DomTools {
   // ======
   // STATIC
@@ -19,10 +21,10 @@ export class DomTools {
   /**
    * setups domtools
    */
-  public static async setupDomTools() {
+  public static async setupDomTools(optionsArg: IDomToolsContructorOptions = {}) {
     let domToolsInstance: DomTools;
-    if (!globalThis.deesDomTools) {
-      globalThis.deesDomTools = new DomTools();
+    if (!globalThis.deesDomTools && !optionsArg.ignoreGlobal) {
+      globalThis.deesDomTools = new DomTools(optionsArg);
       domToolsInstance = globalThis.deesDomTools;
 
       // lets make sure the dom is ready
@@ -35,6 +37,8 @@ export class DomTools {
       };
       document.addEventListener('readystatechange', readyStateChangedFunc);
       domToolsInstance.domToolsReady.resolve();
+    } else if (optionsArg.ignoreGlobal) {
+      domToolsInstance = new DomTools(optionsArg);
     } else {
       domToolsInstance = globalThis.deesDomTools;
     }
@@ -74,7 +78,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({
@@ -84,6 +88,8 @@ export class DomTools {
   public convenience = {
     typedrequest: plugins.typedrequest,
     smartdelay: plugins.smartdelay,
+    smartjson: plugins.smartjson,
+    smarturl: plugins.smarturl,
   };
 
   public deesComms = new plugins.deesComms.DeesComms();
@@ -91,27 +97,16 @@ export class DomTools {
     /* some options */
   }); // TODO: switch to scroller class
   public themeManager = new ThemeManager(this);
-
-  /* private actionSetVirtualViewport = this.domToolsStatePart.createAction<TViewport>(
-    async (statePart, payload) => {
-      const currentState = statePart.getState();
-      currentState.virtualViewport = payload;
-      return currentState;
-    }
-  );
-
-  public setVirtualViewport(environmentArg: TViewport) {
-    this.domToolsStatePart.dispatchAction(this.actionSetVirtualViewport, environmentArg);
-  } */
+  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();
+  private runOnceTrackerStringMap = new plugins.lik.Stringmap();
+  private runOnceResultMap = new plugins.lik.FastMap();
 
   /**
    * run a function once and always get the Promise of the first execution
@@ -150,6 +145,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

@@ -0,0 +1,213 @@
+import * as plugins from './domtools.plugins.js';
+
+export enum Key {
+  Backspace = 8,
+  Tab = 9,
+  Enter = 13,
+  Shift = 16,
+  Ctrl = 17,
+  Alt = 18,
+  PauseBreak = 19,
+  CapsLock = 20,
+  Escape = 27,
+  Space = 32,
+  PageUp = 33,
+  PageDown = 34,
+  End = 35,
+  Home = 36,
+
+  LeftArrow = 37,
+  UpArrow = 38,
+  RightArrow = 39,
+  DownArrow = 40,
+
+  Insert = 45,
+  Delete = 46,
+
+  Zero = 48,
+  ClosedParen = Zero,
+  One = 49,
+  ExclamationMark = One,
+  Two = 50,
+  AtSign = Two,
+  Three = 51,
+  PoundSign = Three,
+  Hash = PoundSign,
+  Four = 52,
+  DollarSign = Four,
+  Five = 53,
+  PercentSign = Five,
+  Six = 54,
+  Caret = Six,
+  Hat = Caret,
+  Seven = 55,
+  Ampersand = Seven,
+  Eight = 56,
+  Star = Eight,
+  Asterik = Star,
+  Nine = 57,
+  OpenParen = Nine,
+
+  A = 65,
+  B = 66,
+  C = 67,
+  D = 68,
+  E = 69,
+  F = 70,
+  G = 71,
+  H = 72,
+  I = 73,
+  J = 74,
+  K = 75,
+  L = 76,
+  M = 77,
+  N = 78,
+  O = 79,
+  P = 80,
+  Q = 81,
+  R = 82,
+  S = 83,
+  T = 84,
+  U = 85,
+  V = 86,
+  W = 87,
+  X = 88,
+  Y = 89,
+  Z = 90,
+
+  LeftWindowKey = 91,
+  RightWindowKey = 92,
+  SelectKey = 93,
+
+  Numpad0 = 96,
+  Numpad1 = 97,
+  Numpad2 = 98,
+  Numpad3 = 99,
+  Numpad4 = 100,
+  Numpad5 = 101,
+  Numpad6 = 102,
+  Numpad7 = 103,
+  Numpad8 = 104,
+  Numpad9 = 105,
+
+  Multiply = 106,
+  Add = 107,
+  Subtract = 109,
+  DecimalPoint = 110,
+  Divide = 111,
+
+  F1 = 112,
+  F2 = 113,
+  F3 = 114,
+  F4 = 115,
+  F5 = 116,
+  F6 = 117,
+  F7 = 118,
+  F8 = 119,
+  F9 = 120,
+  F10 = 121,
+  F11 = 122,
+  F12 = 123,
+
+  NumLock = 144,
+  ScrollLock = 145,
+
+  SemiColon = 186,
+  Equals = 187,
+  Comma = 188,
+  Dash = 189,
+  Period = 190,
+  UnderScore = Dash,
+  PlusSign = Equals,
+  ForwardSlash = 191,
+  Tilde = 192,
+  GraveAccent = Tilde,
+
+  OpenBracket = 219,
+  ClosedBracket = 221,
+  Quote = 222,
+}
+
+export class Keyboard {
+  private mapCombosToHandlers = new Map<number[], plugins.smartrx.rxjs.Subject<KeyboardEvent>>();
+  private pressedKeys = new Set<Key>();
+
+  constructor(private domNode: Element | Document) {
+    this.startListening();
+  }
+
+  public keyEnum = Key;
+
+  public on(keys: Key[]) {
+    const subject = new plugins.smartrx.rxjs.Subject<KeyboardEvent>();
+    this.registerKeys(keys, subject);
+    return subject;
+  }
+
+  public triggerKeyPress(keysArg: Key[]) {
+    for (const key of keysArg) {
+      this.pressedKeys.add(key);
+    }
+    this.checkMatchingKeyboardSubjects();
+    for (const key of keysArg) {
+      this.pressedKeys.delete(key);
+    }
+  }
+
+  public startListening() {
+    this.domNode.addEventListener('keydown', this.handleKeyDown);
+    this.domNode.addEventListener('keyup', this.handleKeyUp);
+  }
+
+  public stopListening() {
+    this.domNode.removeEventListener('keydown', this.handleKeyDown);
+    this.domNode.removeEventListener('keyup', this.handleKeyUp);
+  }
+
+  public clear() {
+    this.stopListening();
+    this.mapCombosToHandlers.clear();
+    this.pressedKeys.clear();
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    this.pressedKeys.add(event.keyCode);
+    this.checkMatchingKeyboardSubjects(event);
+  };
+
+  private checkMatchingKeyboardSubjects(payloadArg?) {
+    this.mapCombosToHandlers.forEach((subjectArg, keysArg) => {
+      if (this.areAllKeysPressed(keysArg)) {
+        subjectArg.next(payloadArg);
+      }
+    });
+  }
+
+  private handleKeyUp = (event: KeyboardEvent) => {
+    this.pressedKeys.delete(event.keyCode);
+  };
+
+  private areAllKeysPressed(keysArg: Key[]) {
+    let result = true;
+
+    keysArg.forEach((key) => {
+      if (!this.pressedKeys.has(key)) {
+        result = false;
+      }
+    });
+
+    return result;
+  }
+
+  private registerKeys(
+    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;
+    }
+  }
+}

ts/domtools.classes.scroller.ts

@@ -1,4 +1,4 @@
-import * as plugins from './domtools.plugins';
+import * as plugins from './domtools.plugins.js';
 
 export class Scroller {
   // TODO: move sweet scroll over to here;

ts/domtools.classes.thememanager.ts

@@ -1,5 +1,5 @@
-import { DomTools } from './domtools.classes.domtools';
-import * as plugins from './domtools.plugins';
+import { DomTools } from './domtools.classes.domtools.js';
+import * as plugins from './domtools.plugins.js';
 
 export class ThemeManager {
   public domtoolsRef: DomTools;

ts/domtools.css.basestyles.ts

@@ -1,4 +1,4 @@
-import { DomTools } from './domtools.classes.domtools';
+import { DomTools } from './domtools.classes.domtools.js';
 
 import { css, unsafeCSS } from 'lit';
 
@@ -6,51 +6,33 @@ import { css, unsafeCSS } from 'lit';
  * changes scrollbar styles to be consistent across OS borders
  */
 export const scrollBarStyles: string = (() => {
-  const returnStyles =
-    navigator.userAgent.indexOf('Mac OS X') === -1
-      ? css`
-          /* width */
-          ::-webkit-scrollbar {
-            width: 6px;
-          }
-
-          /* Track */
-          ::-webkit-scrollbar-track {
-            background: #111;
-          }
-
-          /* Handle */
-          ::-webkit-scrollbar-thumb {
-            background: #666;
-          }
-
-          /* Handle on hover */
-          ::-webkit-scrollbar-thumb:hover {
-            background: #777;
-          }
-        `.cssText
-      : ``;
+  const returnStylesOld = navigator.userAgent.indexOf('Mac OS X') === -1 ? css``.cssText : ``;
+  const returnStyles = css`
+    /* width */
+    ::-webkit-scrollbar {
+      width: 0px;
+    }
+    body {
+      scrollbar-width: none;
+    }
+  `.cssText;
   return returnStyles;
 })();
 
 export const globalBaseStyles: string = css`
-  /* global material font */
+  /*
   @font-face {
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
     src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)
       format('woff2');
-  }
-
-  /* Roboto Font */
-  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400');
-  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400');
+  } */
 
   /* global body styles */
   body {
     margin: 0px;
-    font-family: 'Roboto', sans-serif;
+    font-family: 'Inter', sans-serif;
     box-sizing: border-box;
   }
 

ts/domtools.css.breakpoints.ts

@@ -1,17 +1,40 @@
-import { DomTools } from './domtools.classes.domtools';
+import { DomTools } from './domtools.classes.domtools.js';
 
 import { CSSResult, unsafeCSS } from 'lit';
 
-export const desktop = 1240;
+export const desktop = 1600;
+export const notebook = 1240;
 export const tablet = 1024;
 export const phablet = 600;
 export const phone = 400;
 
 export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
 
+export const cssForDesktop = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (min-width: ${desktop}px) {
+      ${cssArg.cssText}
+    }
+    @media (min-width: ${desktop}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};
+
+export const cssForNotebook = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (max-width: ${notebook}px) {
+      ${cssArg.cssText}
+    }
+    @media (max-width: ${notebook}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};
+
 export const cssForTablet = (cssArg: CSSResult) => {
   return unsafeCSS(`
-    @container wccToolsViewport size(max-width: ${tablet}px) {
+    @container wccToolsViewport (max-width: ${tablet}px) {
       ${cssArg.cssText}
     }
     @media (max-width: ${tablet}px) {
@@ -22,7 +45,7 @@ export const cssForTablet = (cssArg: CSSResult) => {
 
 export const cssForPhablet = (cssArg: CSSResult) => {
   return unsafeCSS(`
-    @container wccToolsViewport size(max-width: ${phablet}px) {
+    @container wccToolsViewport (max-width: ${phablet}px) {
       ${cssArg.cssText}
     }
     @media (max-width: ${phablet}px) {
@@ -33,7 +56,7 @@ export const cssForPhablet = (cssArg: CSSResult) => {
 
 export const cssForPhone = (cssArg: CSSResult) => {
   return unsafeCSS(`
-    @container wccToolsViewport size(max-width: ${phone}px) {
+    @container wccToolsViewport (max-width: ${phone}px) {
       ${cssArg.cssText}
     }
     @media (max-width: ${phone}px) {

ts/domtools.elementbasic.ts

@@ -1,6 +1,6 @@
-import * as plugins from './domtools.plugins';
-import { DomTools } from './domtools.classes.domtools';
-import { scrollBarStyles, globalBaseStyles } from './domtools.css.basestyles';
+import * as plugins from './domtools.plugins.js';
+import { DomTools, IDomToolsContructorOptions } from './domtools.classes.domtools.js';
+import { scrollBarStyles, globalBaseStyles } from './domtools.css.basestyles.js';
 
 import { html, LitElement, css, unsafeCSS } from 'lit';
 
@@ -12,7 +12,7 @@ export const staticStyles = css`
 
   :host {
     box-sizing: border-box;
-    font-family: 'Roboto', sans-serif;
+    font-family: 'Inter', sans-serif;
   }
 
   ${unsafeCSS(scrollBarStyles)}
@@ -29,7 +29,7 @@ export const styles = html`
     }
 
     :host {
-      font-family: 'Roboto', sans-serif;
+      font-family: 'Inter', sans-serif;
     }
 
     ${scrollBarStyles}
@@ -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> => {
-  const domTools = await DomTools.setupDomTools();
+export const setup = async (elementArg?: LitElement, optionsArg: IDomToolsContructorOptions = {}): Promise<DomTools> => {
+  const domTools = await DomTools.setupDomTools(optionsArg);
 
   if (elementArg) {
     // lets do something with the element

ts/domtools.plugins.ts

@@ -10,26 +10,34 @@ export { typedrequest };
 
 // pushrocks scope
 import * as smartdelay from '@pushrocks/smartdelay';
+import * as smartjson from '@pushrocks/smartjson';
 import * as smartpromise from '@pushrocks/smartpromise';
 import * as smartrouter from '@pushrocks/smartrouter';
 import * as smartrx from '@pushrocks/smartrx';
 import * as smartstate from '@pushrocks/smartstate';
+import * as smarturl from '@pushrocks/smarturl';
 import * as webrequest from '@pushrocks/webrequest';
 import * as websetup from '@pushrocks/websetup';
 import * as webstore from '@pushrocks/webstore';
 
 // subscope lik
-import { ObjectMap } from '@pushrocks/lik/dist_ts/lik.objectmap';
+import { ObjectMap } from '@pushrocks/lik/dist_ts/lik.objectmap.js';
+import { Stringmap } from '@pushrocks/lik/dist_ts/lik.stringmap.js';
+import { FastMap } from '@pushrocks/lik/dist_ts/lik.fastmap.js';
 const lik = {
   ObjectMap,
+  Stringmap,
+  FastMap,
 };
 
 export {
   lik,
   smartdelay,
+  smartjson,
   smartpromise,
   smartrouter,
   smartrx,
+  smarturl,
   smartstate,
   webrequest,
   websetup,

ts/index.ts

@@ -1,16 +1,16 @@
-export * from './domtools.colors';
+export * from './domtools.colors.js';
 
-import * as elementBasic from './domtools.elementbasic';
-import * as breakpoints from './domtools.css.breakpoints';
-import * as css from './domtools.css';
+import * as elementBasic from './domtools.elementbasic.js';
+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';
+export { DomTools, IDomToolsContructorOptions } from './domtools.classes.domtools.js';
 export { TypedRequest } from '@apiglobal/typedrequest';
 export { IWebSetupConstructorOptions } from '@pushrocks/websetup';
 export { rxjs } from '@pushrocks/smartrx';
 
-import * as allPlugins from './domtools.plugins';
+import * as allPlugins from './domtools.plugins.js';
 
 export const plugins = {
   smartdelay: allPlugins.smartdelay,

tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "nodenext",
+    "esModuleInterop": true
+  }
+}

tslint.json

@@ -1,17 +0,0 @@
-{
-  "extends": ["tslint:latest", "tslint-config-prettier"],
-  "rules": {
-    "semicolon": [true, "always"],
-    "no-console": false,
-    "ordered-imports": false,
-    "object-literal-sort-keys": false,
-    "member-ordering": {
-      "options":{
-        "order": [
-          "static-method"
-        ]
-      }
-    }
-  },
-  "defaultSeverity": "warning"
-}