Compare commits
12 Commits
Author | SHA1 | Date | |
---|---|---|---|
7bad85a1fa | |||
e5056a7be3 | |||
989d4d35d2 | |||
c5e75419b3 | |||
ca52d06c60 | |||
d33366c487 | |||
3bc5e1d0e2 | |||
96a88112dc | |||
6c0c1e165f | |||
653a4138a9 | |||
d776843494 | |||
79e64c4cc2 |
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.14",
|
"version": "2.0.20",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "@designestate/dees-domtools",
|
"name": "@designestate/dees-domtools",
|
||||||
"version": "2.0.14",
|
"version": "2.0.20",
|
||||||
"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.14",
|
"version": "2.0.20",
|
||||||
"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",
|
||||||
|
8
ts/00_commitinfo_data.ts
Normal file
8
ts/00_commitinfo_data.ts
Normal file
@ -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'
|
||||||
|
}
|
@ -146,6 +146,23 @@ export class DomTools {
|
|||||||
this.elements.headElement.appendChild(styleElement);
|
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
|
* allows setting external css files
|
||||||
* @param cssLinkArg a url to an external stylesheet
|
* @param cssLinkArg a url to an external stylesheet
|
||||||
|
@ -128,8 +128,6 @@ export enum Key {
|
|||||||
Quote = 222,
|
Quote = 222,
|
||||||
}
|
}
|
||||||
|
|
||||||
type KeyCombo = Array<Key>;
|
|
||||||
|
|
||||||
export class Keyboard {
|
export class Keyboard {
|
||||||
private mapCombosToHandlers = new Map<number[], plugins.smartrx.rxjs.Subject<KeyboardEvent>>();
|
private mapCombosToHandlers = new Map<number[], plugins.smartrx.rxjs.Subject<KeyboardEvent>>();
|
||||||
private pressedKeys = new Set<Key>();
|
private pressedKeys = new Set<Key>();
|
||||||
@ -140,15 +138,22 @@ export class Keyboard {
|
|||||||
|
|
||||||
public keyEnum = Key;
|
public keyEnum = Key;
|
||||||
|
|
||||||
public on(keys: Key[] | KeyCombo[]) {
|
public on(keys: Key[]) {
|
||||||
const combos = this.toCombos(keys);
|
|
||||||
const subject = new plugins.smartrx.rxjs.Subject<KeyboardEvent>();
|
const subject = new plugins.smartrx.rxjs.Subject<KeyboardEvent>();
|
||||||
combos.forEach((combo) => {
|
this.registerKeys(keys, subject);
|
||||||
this.registerComboCallback(combo, subject);
|
|
||||||
});
|
|
||||||
return 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() {
|
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);
|
||||||
@ -167,22 +172,25 @@ export class Keyboard {
|
|||||||
|
|
||||||
private handleKeyDown = (event: KeyboardEvent) => {
|
private handleKeyDown = (event: KeyboardEvent) => {
|
||||||
this.pressedKeys.add(event.keyCode);
|
this.pressedKeys.add(event.keyCode);
|
||||||
|
this.checkMatchingKeyboardSubjects(event);
|
||||||
|
};
|
||||||
|
|
||||||
this.mapCombosToHandlers.forEach((subjectArg, comboArg) => {
|
private checkMatchingKeyboardSubjects(payloadArg?) {
|
||||||
if (this.isComboPressed(comboArg)) {
|
this.mapCombosToHandlers.forEach((subjectArg, keysArg) => {
|
||||||
subjectArg.next(event);
|
if (this.areAllKeysPressed(keysArg)) {
|
||||||
|
subjectArg.next(payloadArg);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
|
||||||
private handleKeyUp = (event: KeyboardEvent) => {
|
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)) {
|
if (!this.pressedKeys.has(key)) {
|
||||||
result = false;
|
result = false;
|
||||||
}
|
}
|
||||||
@ -191,33 +199,15 @@ export class Keyboard {
|
|||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
private registerComboCallback(
|
private registerKeys(
|
||||||
comboArg: Array<Key>,
|
keysArg: Array<Key>,
|
||||||
subjectArg: plugins.smartrx.rxjs.Subject<KeyboardEvent>
|
subjectArg: plugins.smartrx.rxjs.Subject<KeyboardEvent>
|
||||||
) {
|
) {
|
||||||
if (!this.mapCombosToHandlers.has(comboArg)) {
|
if (!this.mapCombosToHandlers.has(keysArg)) {
|
||||||
this.mapCombosToHandlers.set(comboArg, subjectArg);
|
this.mapCombosToHandlers.set(keysArg, subjectArg);
|
||||||
} else {
|
} else {
|
||||||
const subject = this.mapCombosToHandlers.get(comboArg);
|
const subject = this.mapCombosToHandlers.get(keysArg);
|
||||||
return subject;
|
return subject;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -6,12 +6,11 @@ import { css, unsafeCSS } from 'lit';
|
|||||||
* changes scrollbar styles to be consistent across OS borders
|
* changes scrollbar styles to be consistent across OS borders
|
||||||
*/
|
*/
|
||||||
export const scrollBarStyles: string = (() => {
|
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 */
|
/* width */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Track */
|
/* Track */
|
||||||
@ -28,8 +27,7 @@ export const scrollBarStyles: string = (() => {
|
|||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: #777;
|
background: #777;
|
||||||
}
|
}
|
||||||
`.cssText
|
`.cssText;
|
||||||
: ``;
|
|
||||||
return returnStyles;
|
return returnStyles;
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user