Compare commits
4 Commits
Author | SHA1 | Date | |
---|---|---|---|
a5ff175913 | |||
f84e7c48ae | |||
185d9ff957 | |||
6145bd66dc |
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "@designestate/dees-domtools",
|
"name": "@designestate/dees-domtools",
|
||||||
"version": "2.0.9",
|
"version": "2.0.11",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "@designestate/dees-domtools",
|
"name": "@designestate/dees-domtools",
|
||||||
"version": "2.0.9",
|
"version": "2.0.11",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@apiglobal/typedrequest": "^2.0.3",
|
"@apiglobal/typedrequest": "^2.0.3",
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@designestate/dees-domtools",
|
"name": "@designestate/dees-domtools",
|
||||||
"version": "2.0.9",
|
"version": "2.0.11",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "tools to simplify complex css structures",
|
"description": "tools to simplify complex css structures",
|
||||||
"main": "dist_ts/index.js",
|
"main": "dist_ts/index.js",
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
import * as plugins from './domtools.plugins.js';
|
||||||
|
|
||||||
export enum Key {
|
export enum Key {
|
||||||
Backspace = 8,
|
Backspace = 8,
|
||||||
Tab = 9,
|
Tab = 9,
|
||||||
@ -123,102 +125,97 @@ export enum Key {
|
|||||||
|
|
||||||
OpenBracket = 219,
|
OpenBracket = 219,
|
||||||
ClosedBracket = 221,
|
ClosedBracket = 221,
|
||||||
Quote = 222
|
Quote = 222,
|
||||||
}
|
}
|
||||||
|
|
||||||
type KeyCombo = Array<Key>
|
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 {
|
export class Keyboard {
|
||||||
private mapCombosToHandlers = new Map<number[], Handler[]>();
|
private mapCombosToHandlers = new Map<number[], plugins.smartrx.rxjs.Subject<KeyboardEvent>>();
|
||||||
private pressedKeys = new Set<Key>();
|
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 on(keys: Key[] | KeyCombo[]) {
|
||||||
const combos = this.toCombos(keys)
|
const combos = this.toCombos(keys);
|
||||||
|
const subject = new plugins.smartrx.rxjs.Subject<KeyboardEvent>();
|
||||||
combos.forEach(combo => {
|
combos.forEach((combo) => {
|
||||||
this.registerComboCallback(combo, callback)
|
this.registerComboCallback(combo, subject);
|
||||||
})
|
});
|
||||||
|
return subject;
|
||||||
}
|
}
|
||||||
|
|
||||||
startListening() {
|
public startListening() {
|
||||||
this.domNode.addEventListener('keydown', this.handleKeyDown)
|
this.domNode.addEventListener('keydown', this.handleKeyDown);
|
||||||
this.domNode.addEventListener('keyup', this.handleKeyUp)
|
this.domNode.addEventListener('keyup', this.handleKeyUp);
|
||||||
}
|
}
|
||||||
|
|
||||||
stopListening() {
|
public stopListening() {
|
||||||
this.domNode.removeEventListener('keydown', this.handleKeyDown)
|
this.domNode.removeEventListener('keydown', this.handleKeyDown);
|
||||||
this.domNode.removeEventListener('keyup', this.handleKeyUp)
|
this.domNode.removeEventListener('keyup', this.handleKeyUp);
|
||||||
}
|
}
|
||||||
|
|
||||||
clear() {
|
public clear() {
|
||||||
this.stopListening()
|
this.stopListening();
|
||||||
this.mapCombosToHandlers.clear()
|
this.mapCombosToHandlers.clear();
|
||||||
this.pressedKeys.clear()
|
this.pressedKeys.clear();
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleKeyDown = (event: KeyboardEvent) => {
|
private handleKeyDown = (event: KeyboardEvent) => {
|
||||||
this.pressedKeys.add(event.keyCode)
|
this.pressedKeys.add(event.keyCode);
|
||||||
|
|
||||||
this.mapCombosToHandlers.forEach((handlers, combo) => {
|
this.mapCombosToHandlers.forEach((subjectArg, comboArg) => {
|
||||||
if (this.isComboPressed(combo)) {
|
if (this.isComboPressed(comboArg)) {
|
||||||
handlers.forEach(handler => handler(event))
|
subjectArg.next(event);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
private handleKeyUp = (event: KeyboardEvent) => {
|
private handleKeyUp = (event: KeyboardEvent) => {
|
||||||
this.pressedKeys.delete(event.keyCode)
|
this.pressedKeys.delete(event.keyCode);
|
||||||
}
|
};
|
||||||
|
|
||||||
private isComboPressed(combo: number[]) {
|
private isComboPressed(combo: number[]) {
|
||||||
let result = true
|
let result = true;
|
||||||
|
|
||||||
combo.forEach(key => {
|
combo.forEach((key) => {
|
||||||
if (!this.pressedKeys.has(key)) {
|
if (!this.pressedKeys.has(key)) {
|
||||||
result = false
|
result = false;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
return result
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
private registerComboCallback(combo: Array<Key>, callback: Handler) {
|
private registerComboCallback(
|
||||||
if (!this.mapCombosToHandlers.has(combo)) {
|
comboArg: Array<Key>,
|
||||||
this.mapCombosToHandlers.set(combo, [])
|
subjectArg: plugins.smartrx.rxjs.Subject<KeyboardEvent>
|
||||||
}
|
) {
|
||||||
|
if (!this.mapCombosToHandlers.has(comboArg)) {
|
||||||
const handlers = this.mapCombosToHandlers.get(combo)
|
this.mapCombosToHandlers.set(comboArg, subjectArg);
|
||||||
|
} else {
|
||||||
handlers!.push(callback)
|
const subject = this.mapCombosToHandlers.get(comboArg);
|
||||||
|
return subject;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private toCombos(keys: KeyCombo[] | Key[]) {
|
private toCombos(keys: KeyCombo[] | Key[]) {
|
||||||
if (keys.length === 0) {
|
if (keys.length === 0) {
|
||||||
return []
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
const isKeys = !Array.isArray(keys[0])
|
const isKeys = !Array.isArray(keys[0]);
|
||||||
let combos: KeyCombo[] = []
|
let combos: KeyCombo[] = [];
|
||||||
|
|
||||||
if (isKeys) {
|
if (isKeys) {
|
||||||
combos = (keys as Key[]).map(key => [key])
|
combos = (keys as Key[]).map((key) => [key]);
|
||||||
} else {
|
} else {
|
||||||
combos = keys as KeyCombo[]
|
combos = keys as KeyCombo[];
|
||||||
combos = combos.filter(combo => combo.length > 0)
|
combos = combos.filter((combo) => combo.length > 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
return combos
|
return combos;
|
||||||
}
|
}
|
||||||
}
|
}
|
Reference in New Issue
Block a user