2.0.9

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,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "2.0.0",
+  "version": "2.0.9",
   "private": false,
   "description": "tools to simplify complex css structures",
   "main": "dist_ts/index.js",
@@ -14,27 +14,27 @@
     "format": "(gitzone format)"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.56",
-    "@gitzone/tsbundle": "^1.0.98",
-    "@gitzone/tstest": "^1.0.68",
-    "@pushrocks/tapbundle": "^5.0.2",
-    "@types/node": "^17.0.21",
+    "@gitzone/tsbuild": "^2.1.61",
+    "@gitzone/tsbundle": "^1.0.102",
+    "@gitzone/tstest": "^1.0.70",
+    "@pushrocks/tapbundle": "^5.0.3",
+    "@types/node": "^17.0.23",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.15.0"
   },
   "dependencies": {
-    "@apiglobal/typedrequest": "^1.0.65",
-    "@designestate/dees-comms": "^1.0.16",
+    "@apiglobal/typedrequest": "^2.0.3",
+    "@designestate/dees-comms": "^1.0.22",
     "@pushrocks/lik": "^5.0.4",
     "@pushrocks/smartdelay": "^2.0.13",
     "@pushrocks/smartpromise": "^3.1.7",
     "@pushrocks/smartrouter": "^1.0.12",
     "@pushrocks/smartrx": "^2.0.25",
-    "@pushrocks/smartstate": "^1.0.23",
-    "@pushrocks/webrequest": "^2.0.15",
+    "@pushrocks/smartstate": "^2.0.0",
+    "@pushrocks/webrequest": "^3.0.3",
     "@pushrocks/websetup": "^3.0.16",
     "@pushrocks/webstore": "^1.0.18",
-    "lit": "^2.2.1",
+    "lit": "^2.2.2",
     "sweet-scroll": "^4.0.0"
   },
   "files": [

ts/domtools.classes.domtools.ts

@@ -6,6 +6,7 @@ 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';
 
 export interface IDomToolsState {
   virtualViewport: TViewport;
@@ -91,18 +92,8 @@ 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();

ts/domtools.classes.keyboard.ts

@@ -0,0 +1,224 @@
+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
+}
+
+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 pressedKeys = new Set<Key>();
+
+  constructor(
+      private domNode: Element | Document
+  ) {
+      this.startListening()
+  }
+
+  on(keys: Key[] | KeyCombo[], callback: Handler) {
+      const combos = this.toCombos(keys)
+
+      combos.forEach(combo => {
+          this.registerComboCallback(combo, callback)
+      })
+  }
+
+  startListening() {
+      this.domNode.addEventListener('keydown', this.handleKeyDown)
+      this.domNode.addEventListener('keyup', this.handleKeyUp)
+  }
+
+  stopListening() {
+      this.domNode.removeEventListener('keydown', this.handleKeyDown)
+      this.domNode.removeEventListener('keyup', this.handleKeyUp)
+  }
+
+  clear() {
+      this.stopListening()
+      this.mapCombosToHandlers.clear()
+      this.pressedKeys.clear()
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+      this.pressedKeys.add(event.keyCode)
+
+      this.mapCombosToHandlers.forEach((handlers, combo) => {
+          if (this.isComboPressed(combo)) {
+              handlers.forEach(handler => handler(event))
+          }
+      })
+  }
+
+  private handleKeyUp = (event: KeyboardEvent) => {
+      this.pressedKeys.delete(event.keyCode)
+  }
+
+  private isComboPressed(combo: number[]) {
+      let result = true
+
+      combo.forEach(key => {
+          if (!this.pressedKeys.has(key)) {
+              result = false
+          }
+      })
+
+      return result
+  }
+
+  private registerComboCallback(combo: Array<Key>, callback: Handler) {
+      if (!this.mapCombosToHandlers.has(combo)) {
+          this.mapCombosToHandlers.set(combo, [])
+      }
+
+      const handlers = this.mapCombosToHandlers.get(combo)
+
+      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[]
+          combos = combos.filter(combo => combo.length > 0)
+      }
+
+      return combos
+  }
+}

ts/domtools.css.basestyles.ts

@@ -43,10 +43,6 @@ export const globalBaseStyles: string = css`
       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;

ts/domtools.css.breakpoints.ts

@@ -2,16 +2,39 @@ 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) {