Compare commits
16 Commits
Author | SHA1 | Date | |
---|---|---|---|
b777508b7a | |||
52664d8ea1 | |||
7bad85a1fa | |||
e5056a7be3 | |||
989d4d35d2 | |||
c5e75419b3 | |||
ca52d06c60 | |||
d33366c487 | |||
3bc5e1d0e2 | |||
96a88112dc | |||
6c0c1e165f | |||
653a4138a9 | |||
d776843494 | |||
79e64c4cc2 | |||
7192d3fbf7 | |||
42bcb8243d |
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@designestate/dees-domtools",
|
||||
"version": "2.0.13",
|
||||
"version": "2.0.21",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@designestate/dees-domtools",
|
||||
"version": "2.0.13",
|
||||
"version": "2.0.21",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@apiglobal/typedrequest": "^2.0.3",
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@designestate/dees-domtools",
|
||||
"version": "2.0.13",
|
||||
"version": "2.0.21",
|
||||
"private": false,
|
||||
"description": "tools to simplify complex css structures",
|
||||
"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.21',
|
||||
description: 'tools to simplify complex css structures'
|
||||
}
|
@ -146,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
|
||||
|
@ -128,8 +128,6 @@ export enum Key {
|
||||
Quote = 222,
|
||||
}
|
||||
|
||||
type KeyCombo = Array<Key>;
|
||||
|
||||
export class Keyboard {
|
||||
private mapCombosToHandlers = new Map<number[], plugins.smartrx.rxjs.Subject<KeyboardEvent>>();
|
||||
private pressedKeys = new Set<Key>();
|
||||
@ -140,15 +138,22 @@ export class Keyboard {
|
||||
|
||||
public keyEnum = Key;
|
||||
|
||||
public on(keys: Key[] | KeyCombo[]) {
|
||||
const combos = this.toCombos(keys);
|
||||
public on(keys: Key[]) {
|
||||
const subject = new plugins.smartrx.rxjs.Subject<KeyboardEvent>();
|
||||
combos.forEach((combo) => {
|
||||
this.registerComboCallback(combo, subject);
|
||||
});
|
||||
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);
|
||||
@ -167,22 +172,25 @@ export class Keyboard {
|
||||
|
||||
private handleKeyDown = (event: KeyboardEvent) => {
|
||||
this.pressedKeys.add(event.keyCode);
|
||||
this.checkMatchingKeyboardSubjects(event);
|
||||
};
|
||||
|
||||
this.mapCombosToHandlers.forEach((subjectArg, comboArg) => {
|
||||
if (this.isComboPressed(comboArg)) {
|
||||
subjectArg.next(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 isComboPressed(combo: number[]) {
|
||||
private areAllKeysPressed(keysArg: Key[]) {
|
||||
let result = true;
|
||||
|
||||
combo.forEach((key) => {
|
||||
keysArg.forEach((key) => {
|
||||
if (!this.pressedKeys.has(key)) {
|
||||
result = false;
|
||||
}
|
||||
@ -191,33 +199,15 @@ export class Keyboard {
|
||||
return result;
|
||||
}
|
||||
|
||||
private registerComboCallback(
|
||||
comboArg: Array<Key>,
|
||||
private registerKeys(
|
||||
keysArg: Array<Key>,
|
||||
subjectArg: plugins.smartrx.rxjs.Subject<KeyboardEvent>
|
||||
) {
|
||||
if (!this.mapCombosToHandlers.has(comboArg)) {
|
||||
this.mapCombosToHandlers.set(comboArg, subjectArg);
|
||||
if (!this.mapCombosToHandlers.has(keysArg)) {
|
||||
this.mapCombosToHandlers.set(keysArg, subjectArg);
|
||||
} else {
|
||||
const subject = this.mapCombosToHandlers.get(comboArg);
|
||||
const subject = this.mapCombosToHandlers.get(keysArg);
|
||||
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,30 +6,16 @@ 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;
|
||||
}
|
||||
* {
|
||||
scrollbar-width: 0px;
|
||||
}
|
||||
`.cssText;
|
||||
return returnStyles;
|
||||
})();
|
||||
|
||||
|
@ -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';
|
||||
|
Reference in New Issue
Block a user