Compare commits
168 Commits
Author | SHA1 | Date | |
---|---|---|---|
fa24708a47 | |||
31126e30eb | |||
ef0a4eae80 | |||
e711302c28 | |||
1cfc07fe8e | |||
7f221c1a8c | |||
09f927c0d4 | |||
1042e79625 | |||
fced2efcbd | |||
83fe1d62e7 | |||
78bce9600c | |||
2860b5b6e0 | |||
b802935d27 | |||
b73a702b74 | |||
b3deb31ab5 | |||
6ea5482e3d | |||
0ead7215ff | |||
286bb0887a | |||
4456f00816 | |||
b60a1bebe0 | |||
94127227a6 | |||
b5af1b1226 | |||
a6f382dd7f | |||
0de00cb2c1 | |||
570a026cf8 | |||
48b5cc770c | |||
7ae2de5843 | |||
e4d87ae882 | |||
259a669e24 | |||
bf461dd1a0 | |||
63c9ae97d4 | |||
a83239e0d9 | |||
8da64f1b50 | |||
2d4c0e4e49 | |||
1c8f7fa59e | |||
a613c0aca2 | |||
127564cd71 | |||
e077bf5b25 | |||
64a3f57813 | |||
1315e8c3f6 | |||
d059862841 | |||
ad34affb9e | |||
011b3fb76a | |||
47099d02b5 | |||
f4029ed008 | |||
d5732822e4 | |||
c467a92e7c | |||
746c1148e3 | |||
d75e66ba78 | |||
7c805a075e | |||
5e1a44ad88 | |||
093eae2c97 | |||
991d318de6 | |||
c7c3650fe9 | |||
8d355f234f | |||
a5c22ec1db | |||
f5263a0cc4 | |||
4a022a7d1d | |||
bd6ba6d6db | |||
317bc63bc7 | |||
22eeb7809b | |||
fdd550ec21 | |||
9db1f92ba3 | |||
772d0b0b97 | |||
a68e9e1bf9 | |||
f9507b0dbd | |||
f8c1a0135a | |||
7d884f6556 | |||
8a8ee5cd7b | |||
1660381be6 | |||
f0ad441415 | |||
27c087b693 | |||
63463a751c | |||
a01f5a5b8a | |||
bb1ad4e037 | |||
eb871161f9 | |||
090e5b4d42 | |||
8168dd1a0c | |||
de15bc0d1c | |||
13fa3d655e | |||
18b93b860d | |||
e8e6416b6f | |||
fbe2f381c9 | |||
3cb0aceaad | |||
6d6c92eee4 | |||
4385909677 | |||
2dc36d8170 | |||
ffbde62744 | |||
7bde843e43 | |||
faa7adcffe | |||
7977538c05 | |||
afaa88047c | |||
8aabe2820e | |||
570d370c97 | |||
73552ad80f | |||
537902aa53 | |||
e033bfa5b3 | |||
4983e1ed90 | |||
899775b050 | |||
7655fc0348 | |||
8aa5576318 | |||
1ff54b0fcd | |||
3901258272 | |||
27380d1483 | |||
e2f9991f96 | |||
133ce80b0a | |||
cf12f45c9b | |||
6cc5ec315e | |||
88810bae2c | |||
21369d8da5 | |||
a5973944ee | |||
ad3f4b31fa | |||
91b50ecde5 | |||
45fecfbde8 | |||
e3e6d06969 | |||
50ace4c236 | |||
90f68965bb | |||
6c92a9cdf8 | |||
d4e24d615a | |||
37b7dca212 | |||
7d9dc1ad65 | |||
20f06e5935 | |||
d3fa33f0cc | |||
aa91dad272 | |||
05a22599b8 | |||
bd0b279fc2 | |||
8276a5b09b | |||
a9200859ec | |||
210a0ad8a1 | |||
2756a3cb68 | |||
acf0ea3874 | |||
284d2be0e3 | |||
dfb9175613 | |||
16a213f536 | |||
9869b0c6aa | |||
e63cb9669b | |||
06766c6895 | |||
48f1b02f0b | |||
f41550fa22 | |||
ac18ed0684 | |||
0ed59e850e | |||
fb36c641a9 | |||
ae74e0b4f2 | |||
d2a330e5d9 | |||
f40287fbb6 | |||
e27bd8a53f | |||
d6fc173a5b | |||
52c245d655 | |||
c2e0c0ab19 | |||
455d68338b | |||
710e99a69a | |||
e3939865aa | |||
ba20508642 | |||
bef4ea7bed | |||
17a8151b2f | |||
5aee15a23b | |||
38d78b4e12 | |||
ec36a516c0 | |||
1c844d35ca | |||
ecb387f59e | |||
9b3c92fef5 | |||
74cf94a69e | |||
9f76d4e920 | |||
082ef21078 | |||
4db0e6f5fc | |||
40b8c5010d | |||
16297dc630 | |||
7c3d131b46 |
@ -19,23 +19,35 @@ mirror:
|
||||
stage: security
|
||||
script:
|
||||
- npmci git mirror
|
||||
only:
|
||||
- tags
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
audit:
|
||||
auditProductionDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci command npm install --production --ignore-scripts
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command npm audit --audit-level=high --only=prod --production
|
||||
tags:
|
||||
- docker
|
||||
|
||||
auditDevDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
stage: security
|
||||
script:
|
||||
- npmci npm prepare
|
||||
- npmci command npm install --ignore-scripts
|
||||
- npmci command npm config set registry https://registry.npmjs.org
|
||||
- npmci command npm audit --audit-level=high
|
||||
- npmci command npm audit --audit-level=high --only=dev
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
allow_failure: true
|
||||
|
||||
# ====================
|
||||
# test stage
|
||||
@ -50,9 +62,7 @@ testStable:
|
||||
- npmci npm test
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- priv
|
||||
|
||||
testBuild:
|
||||
stage: test
|
||||
@ -63,9 +73,7 @@ testBuild:
|
||||
- npmci command npm run build
|
||||
coverage: /\d+.?\d+?\%\s*coverage/
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
- notpriv
|
||||
|
||||
release:
|
||||
stage: release
|
||||
@ -85,6 +93,8 @@ release:
|
||||
codequality:
|
||||
stage: metadata
|
||||
allow_failure: true
|
||||
only:
|
||||
- tags
|
||||
script:
|
||||
- npmci command npm install -g tslint typescript
|
||||
- npmci npm prepare
|
||||
|
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -15,7 +15,7 @@
|
||||
"properties": {
|
||||
"projectType": {
|
||||
"type": "string",
|
||||
"enum": ["website", "element", "service", "npm"]
|
||||
"enum": ["website", "element", "service", "npm", "wcc"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -4,9 +4,9 @@
|
||||
"module": {
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "designestate",
|
||||
"gitrepo": "dees-csstools",
|
||||
"gitrepo": "dees-domtools",
|
||||
"shortDescription": "tools to simplify complex css structures",
|
||||
"npmPackagename": "@designestate/dees-csstools",
|
||||
"npmPackagename": "@designestate/dees-domtools",
|
||||
"license": "MIT",
|
||||
"projectDomain": "design.estate"
|
||||
}
|
||||
|
26812
package-lock.json
generated
26812
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
35
package.json
35
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@designestate/dees-csstools",
|
||||
"version": "1.0.4",
|
||||
"name": "@designestate/dees-domtools",
|
||||
"version": "1.0.89",
|
||||
"private": false,
|
||||
"description": "tools to simplify complex css structures",
|
||||
"main": "dist_ts/index.js",
|
||||
@ -9,20 +9,32 @@
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"test": "(tstest test/ --web)",
|
||||
"build": "(tsbuild --web)",
|
||||
"build": "(tsbuild --web && tsbundle npm)",
|
||||
"format": "(gitzone format)"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.0.22",
|
||||
"@gitzone/tstest": "^1.0.15",
|
||||
"@pushrocks/tapbundle": "^3.0.7",
|
||||
"@types/node": "^10.11.7",
|
||||
"tslint": "^5.11.0",
|
||||
"@gitzone/tsbuild": "^2.1.25",
|
||||
"@gitzone/tsbundle": "^1.0.80",
|
||||
"@gitzone/tstest": "^1.0.52",
|
||||
"@pushrocks/tapbundle": "^3.2.14",
|
||||
"@types/node": "^14.14.33",
|
||||
"tslint": "^6.1.3",
|
||||
"tslint-config-prettier": "^1.15.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@pushrocks/smartpromise": "^3.0.6",
|
||||
"lit-element": "^2.3.1"
|
||||
"@apiglobal/typedrequest": "^1.0.56",
|
||||
"@designestate/dees-comms": "^1.0.9",
|
||||
"@pushrocks/lik": "^4.0.20",
|
||||
"@pushrocks/smartdelay": "^2.0.10",
|
||||
"@pushrocks/smartpromise": "^3.1.3",
|
||||
"@pushrocks/smartrouter": "^1.0.7",
|
||||
"@pushrocks/smartrx": "^2.0.19",
|
||||
"@pushrocks/smartstate": "^1.0.21",
|
||||
"@pushrocks/webrequest": "^2.0.13",
|
||||
"@pushrocks/websetup": "^3.0.15",
|
||||
"@pushrocks/webstore": "^1.0.16",
|
||||
"lit-element": "^2.4.0",
|
||||
"sweet-scroll": "^4.0.0"
|
||||
},
|
||||
"files": [
|
||||
"ts/**/*",
|
||||
@ -35,5 +47,8 @@
|
||||
"cli.js",
|
||||
"npmextra.json",
|
||||
"readme.md"
|
||||
],
|
||||
"browserslist": [
|
||||
"last 1 chrome versions"
|
||||
]
|
||||
}
|
||||
|
31
readme.md
31
readme.md
@ -1,20 +1,27 @@
|
||||
# @designestate/dees-csstools
|
||||
# @designestate/dees-domtools
|
||||
tools to simplify complex css structures
|
||||
|
||||
## Availabililty and Links
|
||||
* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/dees-csstools)
|
||||
* [gitlab.com (source)](https://gitlab.com/designestate/dees-csstools)
|
||||
* [github.com (source mirror)](https://github.com/designestate/dees-csstools)
|
||||
* [docs (typedoc)](https://designestate.gitlab.io/dees-csstools/)
|
||||
* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/dees-domtools)
|
||||
* [gitlab.com (source)](https://gitlab.com/designestate/dees-domtools)
|
||||
* [github.com (source mirror)](https://github.com/designestate/dees-domtools)
|
||||
* [docs (typedoc)](https://designestate.gitlab.io/dees-domtools/)
|
||||
|
||||
## Status for master
|
||||
[](https://gitlab.com/designestate/dees-csstools/commits/master)
|
||||
[](https://gitlab.com/designestate/dees-csstools/commits/master)
|
||||
[](https://www.npmjs.com/package/@designestate/dees-csstools)
|
||||
[](https://snyk.io/test/npm/@designestate/dees-csstools)
|
||||
[](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
[](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
[](https://prettier.io/)
|
||||
|
||||
Status Category | Status Badge
|
||||
-- | --
|
||||
GitLab Pipelines | [](https://lossless.cloud)
|
||||
GitLab Pipline Test Coverage | [](https://lossless.cloud)
|
||||
npm | [](https://lossless.cloud)
|
||||
Snyk | [](https://lossless.cloud)
|
||||
TypeScript Support | [](https://lossless.cloud)
|
||||
node Support | [](https://nodejs.org/dist/latest-v10.x/docs/api/)
|
||||
Code Style | [](https://lossless.cloud)
|
||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||
Platform support | [](https://lossless.cloud) [](https://lossless.cloud)
|
||||
|
||||
## Usage
|
||||
|
||||
|
9
test/test.browser.ts
Normal file
9
test/test.browser.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import { expect, tap } from '@pushrocks/tapbundle';
|
||||
import * as domtools from '../ts/index';
|
||||
|
||||
tap.test('first test', async () => {
|
||||
const domtoolsInstance = await domtools.DomTools.setupDomTools();
|
||||
expect(domtoolsInstance).to.be.instanceof(domtools.DomTools);
|
||||
});
|
||||
|
||||
tap.start();
|
@ -1,8 +0,0 @@
|
||||
import { expect, tap } from '@pushrocks/tapbundle';
|
||||
import * as deesCsstools from '../ts/index';
|
||||
|
||||
tap.test('first test', async () => {
|
||||
console.log('hi');
|
||||
});
|
||||
|
||||
tap.start();
|
@ -1,60 +0,0 @@
|
||||
export const desktop = 1240;
|
||||
export const tablet = 700;
|
||||
export const phablet = 500;
|
||||
export const phone = 340;
|
||||
|
||||
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
||||
|
||||
let environment: TEnvironment = 'native';
|
||||
|
||||
export const setEnvironment = envArg => {
|
||||
environment = envArg;
|
||||
};
|
||||
|
||||
export const cssForTablet = (contentArg) => {
|
||||
if (environment === 'native' || environment === 'desktop') {
|
||||
return `
|
||||
@media (max-width: ${tablet}px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
} else if (environment === 'tablet' || environment === 'phablet' || environment === 'phone') {
|
||||
return `
|
||||
@media (min-width: 0px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
export const cssForPhablet = (contentArg) => {
|
||||
if (environment === 'native' || environment === 'desktop') {
|
||||
return `
|
||||
@media (max-width: ${phablet}px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
} else if (environment === 'phablet' || environment === 'phone') {
|
||||
return `
|
||||
@media (min-width: 0px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
export const cssForPhone = (contentArg) => {
|
||||
if (environment === 'native' || environment === 'desktop') {
|
||||
return `
|
||||
@media (max-width: ${phone}px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
} else if (environment === 'phone') {
|
||||
return `
|
||||
@media (min-width: 0px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
}
|
||||
};
|
@ -1,14 +0,0 @@
|
||||
import { defer } from '@pushrocks/smartpromise';
|
||||
|
||||
/**
|
||||
* a basic setup for elements
|
||||
* makes sure everything is in check
|
||||
*/
|
||||
export const elementBasicSetup = async () => {
|
||||
if (globalThis.deesCssToolsReady) {
|
||||
await globalThis.deesCssToolsReady.promise;
|
||||
} else {
|
||||
globalThis.deesCssToolsReady = defer();
|
||||
globalThis.deesCssToolsReady.resolve();
|
||||
}
|
||||
};
|
@ -1,9 +0,0 @@
|
||||
import { html } from 'lit-element';
|
||||
export const elementBasicStyles = html`
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
`;
|
71
ts/domtools.breakpoints.ts
Normal file
71
ts/domtools.breakpoints.ts
Normal file
@ -0,0 +1,71 @@
|
||||
import { DomTools } from './domtools.classes.domtools';
|
||||
|
||||
export const desktop = 1240;
|
||||
export const tablet = 1024;
|
||||
export const phablet = 600;
|
||||
export const phone = 400;
|
||||
|
||||
export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
||||
|
||||
export const getEnvironment = (): TViewport => {
|
||||
if (
|
||||
globalThis.deesDomTools &&
|
||||
globalThis.deesDomTools.domToolsStatePart.getState().virtualViewport
|
||||
) {
|
||||
return globalThis.deesDomTools.domToolsStatePart.getState().virtualViewport;
|
||||
} else {
|
||||
return 'native';
|
||||
}
|
||||
};
|
||||
|
||||
export const cssForTablet = (contentArg) => {
|
||||
if (getEnvironment() === 'native' || getEnvironment() === 'desktop') {
|
||||
return `
|
||||
@media (max-width: ${tablet}px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
} else if (
|
||||
getEnvironment() === 'tablet' ||
|
||||
getEnvironment() === 'phablet' ||
|
||||
getEnvironment() === 'phone'
|
||||
) {
|
||||
return `
|
||||
@media (min-width: 0px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
export const cssForPhablet = (contentArg) => {
|
||||
if (getEnvironment() === 'native' || getEnvironment() === 'desktop') {
|
||||
return `
|
||||
@media (max-width: ${phablet}px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
} else if (getEnvironment() === 'phablet' || getEnvironment() === 'phone') {
|
||||
return `
|
||||
@media (min-width: 0px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
}
|
||||
};
|
||||
|
||||
export const cssForPhone = (contentArg) => {
|
||||
if (getEnvironment() === 'native' || getEnvironment() === 'desktop') {
|
||||
return `
|
||||
@media (max-width: ${phone}px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
} else if (getEnvironment() === 'phone') {
|
||||
return `
|
||||
@media (min-width: 0px) {
|
||||
${contentArg}
|
||||
}
|
||||
`;
|
||||
}
|
||||
};
|
159
ts/domtools.classes.domtools.ts
Normal file
159
ts/domtools.classes.domtools.ts
Normal file
@ -0,0 +1,159 @@
|
||||
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.breakpoints';
|
||||
|
||||
import { Scroller } from './domtools.classes.scroller';
|
||||
import { WebSetup } from '@pushrocks/websetup';
|
||||
import { ThemeManager } from './domtools.classes.thememanager';
|
||||
|
||||
export interface IDomToolsState {
|
||||
virtualViewport: TViewport;
|
||||
}
|
||||
|
||||
export class DomTools {
|
||||
// ======
|
||||
// STATIC
|
||||
// ======
|
||||
/**
|
||||
* setups domtools
|
||||
*/
|
||||
public static async setupDomTools() {
|
||||
let domToolsInstance: DomTools;
|
||||
if (!globalThis.deesDomTools) {
|
||||
globalThis.deesDomTools = new DomTools();
|
||||
domToolsInstance = globalThis.deesDomTools;
|
||||
|
||||
// lets make sure the dom is ready
|
||||
const readyStateChangedFunc = () => {
|
||||
if (document.readyState === 'interactive' || document.readyState === 'complete') {
|
||||
domToolsInstance.elements.headElement = document.querySelector('head');
|
||||
domToolsInstance.elements.bodyElement = document.querySelector('body');
|
||||
domToolsInstance.domReady.resolve();
|
||||
}
|
||||
};
|
||||
document.addEventListener('readystatechange', readyStateChangedFunc);
|
||||
domToolsInstance.domToolsReady.resolve();
|
||||
} else {
|
||||
domToolsInstance = globalThis.deesDomTools;
|
||||
}
|
||||
await domToolsInstance.domToolsReady.promise;
|
||||
return domToolsInstance;
|
||||
}
|
||||
|
||||
/**
|
||||
* if you can, use the static asysnc .setupDomTools() function instead since it is safer to use.
|
||||
*/
|
||||
public static getGlobalDomToolsSync(): DomTools {
|
||||
const globalDomTools: DomTools = globalThis.deesDomTools;
|
||||
if (!globalDomTools) {
|
||||
throw new Error('You tried to access domtools synchronously too early');
|
||||
}
|
||||
return globalThis.deesDomTools;
|
||||
}
|
||||
|
||||
// ========
|
||||
// INSTANCE
|
||||
// ========
|
||||
// elements
|
||||
public elements: {
|
||||
headElement: HTMLElement;
|
||||
bodyElement: HTMLElement;
|
||||
} = {
|
||||
headElement: null,
|
||||
bodyElement: null,
|
||||
};
|
||||
|
||||
public websetup: WebSetup = new WebSetup({
|
||||
metaObject: {
|
||||
title: 'loading...',
|
||||
},
|
||||
});
|
||||
|
||||
public smartstate = new plugins.smartstate.Smartstate();
|
||||
public domToolsStatePart = this.smartstate.getStatePart<IDomToolsState>('domtools', {
|
||||
virtualViewport: 'native',
|
||||
});
|
||||
|
||||
public router = new plugins.smartrouter.SmartRouter({
|
||||
debug: false,
|
||||
});
|
||||
|
||||
public convenience = {
|
||||
|
||||
smartdelay: plugins.smartdelay,
|
||||
};
|
||||
|
||||
public deesComms = new plugins.deesComms.DeesComms();
|
||||
public scroller = new plugins.SweetScroll({
|
||||
/* 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 domToolsReady = plugins.smartpromise.defer();
|
||||
public domReady = plugins.smartpromise.defer();
|
||||
public globalStylesReady = plugins.smartpromise.defer();
|
||||
|
||||
constructor() {}
|
||||
|
||||
private runOnceTrackerStringMap = new Stringmap();
|
||||
private runOnceResultMap = new FastMap();
|
||||
/**
|
||||
* run a function once and always get the Promise of the first execution
|
||||
* @param identifierArg the indentifier arg identifies functions. functions with the same identifier are considered equal
|
||||
* @param funcArg the actual func arg to run
|
||||
*/
|
||||
public async runOnce<T>(identifierArg: string, funcArg: () => Promise<T>) {
|
||||
const runningId = `${identifierArg}+runningCheck`;
|
||||
if (!this.runOnceTrackerStringMap.checkString(identifierArg)) {
|
||||
this.runOnceTrackerStringMap.addString(identifierArg);
|
||||
this.runOnceTrackerStringMap.addString(runningId);
|
||||
const result = await funcArg();
|
||||
this.runOnceResultMap.addToMap(identifierArg, result);
|
||||
this.runOnceTrackerStringMap.removeString(runningId);
|
||||
}
|
||||
return await this.runOnceTrackerStringMap.registerUntilTrue(
|
||||
(stringMap) => {
|
||||
return !stringMap.includes(runningId);
|
||||
},
|
||||
() => {
|
||||
return this.runOnceResultMap.getByKey(identifierArg);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// setStuff
|
||||
|
||||
public async setGlobalStyles(stylesText: string) {
|
||||
await this.domReady.promise;
|
||||
const styleElement = document.createElement('style');
|
||||
styleElement.type = 'text/css';
|
||||
styleElement.appendChild(document.createTextNode(stylesText));
|
||||
this.elements.headElement.appendChild(styleElement);
|
||||
}
|
||||
|
||||
public async setExternalCss(cssLinkArg: string) {
|
||||
const cssTag = document.createElement('link');
|
||||
cssTag.rel = 'stylesheet';
|
||||
cssTag.crossOrigin = 'anonymous';
|
||||
cssTag.href = cssLinkArg;
|
||||
document.head.append(cssTag);
|
||||
}
|
||||
|
||||
public setVirtualViewport(environmentArg: TViewport) {
|
||||
this.domToolsStatePart.dispatchAction(this.actionSetVirtualViewport, environmentArg);
|
||||
}
|
||||
|
||||
public async setWebsiteInfo(optionsArg: plugins.websetup.IWebSetupConstructorOptions) {
|
||||
await this.websetup.setup(optionsArg);
|
||||
await this.websetup.readyPromise;
|
||||
}
|
||||
}
|
5
ts/domtools.classes.scroller.ts
Normal file
5
ts/domtools.classes.scroller.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import * as plugins from './domtools.plugins';
|
||||
|
||||
export class Scroller {
|
||||
// TODO: move sweet scroll over to here;
|
||||
}
|
46
ts/domtools.classes.thememanager.ts
Normal file
46
ts/domtools.classes.thememanager.ts
Normal file
@ -0,0 +1,46 @@
|
||||
import { LitElement } from 'lit-element';
|
||||
import { DomTools } from './domtools.classes.domtools';
|
||||
import * as plugins from './domtools.plugins';
|
||||
|
||||
export class ThemeManager {
|
||||
public domtoolsRef: DomTools;
|
||||
|
||||
public goBrightBoolean = false;
|
||||
public preferredColorSchemeMediaMatch = window.matchMedia('(prefers-color-scheme: light)');
|
||||
|
||||
public themeObservable = new plugins.smartrx.rxjs.ReplaySubject<boolean>(1);
|
||||
|
||||
constructor(domtoolsRefArg: DomTools) {
|
||||
this.domtoolsRef = domtoolsRefArg;
|
||||
|
||||
// lets care
|
||||
this.goBrightBoolean = this.preferredColorSchemeMediaMatch.matches;
|
||||
this.preferredColorSchemeMediaMatch.addEventListener('change', (eventArg) => {
|
||||
this.goBrightBoolean = eventArg.matches;
|
||||
this.updateAllConnectedElements();
|
||||
});
|
||||
this.updateAllConnectedElements();
|
||||
}
|
||||
|
||||
private async updateAllConnectedElements() {
|
||||
if (document.body && document.body.style) {
|
||||
document.body.style.background = this.goBrightBoolean ? '#fff' : '#000';
|
||||
}
|
||||
this.themeObservable.next(this.goBrightBoolean);
|
||||
}
|
||||
|
||||
public goBright() {
|
||||
this.goBrightBoolean = true;
|
||||
this.updateAllConnectedElements();
|
||||
}
|
||||
|
||||
public goDark() {
|
||||
this.goBrightBoolean = false;
|
||||
this.updateAllConnectedElements();
|
||||
}
|
||||
|
||||
public toggleDarkBright() {
|
||||
this.goBrightBoolean = !this.goBrightBoolean;
|
||||
this.updateAllConnectedElements();
|
||||
}
|
||||
}
|
6
ts/domtools.colors.ts
Normal file
6
ts/domtools.colors.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export interface IDeesColorSet {
|
||||
primaryAccent: string;
|
||||
secondaryAccent: string;
|
||||
primaryBackground: string;
|
||||
secondaryBackground: string;
|
||||
}
|
31
ts/domtools.css.theme.ts
Normal file
31
ts/domtools.css.theme.ts
Normal file
@ -0,0 +1,31 @@
|
||||
import { DomTools } from './domtools.classes.domtools';
|
||||
|
||||
/**
|
||||
* changes scrollbar styles to be consistent across OS borders
|
||||
*/
|
||||
export const scrollBarStyles = (() => {
|
||||
const returnStyles =
|
||||
navigator.userAgent.indexOf('Windows') !== -1
|
||||
? `
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #777;
|
||||
}
|
||||
`
|
||||
: ``;
|
||||
})();
|
9
ts/domtools.css.ts
Normal file
9
ts/domtools.css.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export const cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number) => {
|
||||
let returnString = ``;
|
||||
for (let i = 0; i < amountOfColumnsArg; i++) {
|
||||
returnString += ` calc((100%/${amountOfColumnsArg}) - (${
|
||||
gapSizeArg * (amountOfColumnsArg - 1)
|
||||
}px/${amountOfColumnsArg}))`;
|
||||
}
|
||||
return returnString;
|
||||
};
|
82
ts/domtools.elementbasic.ts
Normal file
82
ts/domtools.elementbasic.ts
Normal file
@ -0,0 +1,82 @@
|
||||
import * as plugins from './domtools.plugins';
|
||||
import { DomTools } from './domtools.classes.domtools';
|
||||
import { scrollBarStyles } from './domtools.css.theme';
|
||||
|
||||
import { html, LitElement, css, unsafeCSS } from 'lit-element';
|
||||
|
||||
export const staticStyles = css`
|
||||
* {
|
||||
transition: background 0.1s, color 0.1s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
${unsafeCSS(scrollBarStyles)}
|
||||
`;
|
||||
|
||||
/**
|
||||
* styles to be included in every webcomponent
|
||||
*/
|
||||
export const styles = html`
|
||||
<style>
|
||||
* {
|
||||
transition: background 0.1s, color 0.1s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
${scrollBarStyles}
|
||||
</style>
|
||||
`;
|
||||
|
||||
/**
|
||||
* a basic setup for elements
|
||||
* makes sure everything is in check
|
||||
*/
|
||||
export const setup = async (elementArg?: LitElement): Promise<DomTools> => {
|
||||
const domTools = await DomTools.setupDomTools();
|
||||
|
||||
if (elementArg) {
|
||||
// lets do something with the element
|
||||
// not used right now
|
||||
}
|
||||
|
||||
domTools.runOnce('elementBasicSetup', async () => {
|
||||
// bodyStyles
|
||||
domTools.setGlobalStyles(`
|
||||
body {
|
||||
margin: 0px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
`);
|
||||
|
||||
// material font
|
||||
domTools.setGlobalStyles(`
|
||||
@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
|
||||
domTools.setGlobalStyles(`
|
||||
@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');
|
||||
`);
|
||||
|
||||
// scrollbars
|
||||
domTools.setGlobalStyles(`
|
||||
${scrollBarStyles}
|
||||
`);
|
||||
});
|
||||
return domTools;
|
||||
};
|
42
ts/domtools.plugins.ts
Normal file
42
ts/domtools.plugins.ts
Normal file
@ -0,0 +1,42 @@
|
||||
// designestate scope
|
||||
import * as deesComms from '@designestate/dees-comms';
|
||||
|
||||
export { deesComms };
|
||||
|
||||
// apiglobal scope
|
||||
import * as typedrequest from '@apiglobal/typedrequest';
|
||||
|
||||
export { typedrequest };
|
||||
|
||||
// pushrocks scope
|
||||
import * as smartdelay from '@pushrocks/smartdelay';
|
||||
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 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';
|
||||
const lik = {
|
||||
ObjectMap,
|
||||
};
|
||||
|
||||
export {
|
||||
lik,
|
||||
smartdelay,
|
||||
smartpromise,
|
||||
smartrouter,
|
||||
smartrx,
|
||||
smartstate,
|
||||
webrequest,
|
||||
websetup,
|
||||
webstore,
|
||||
};
|
||||
|
||||
// third party scope
|
||||
import SweetScroll from 'sweet-scroll';
|
||||
|
||||
export { SweetScroll };
|
20
ts/index.ts
20
ts/index.ts
@ -1,8 +1,18 @@
|
||||
export * from './csstools.elementbasicsetup';
|
||||
export * from './csstools.elementbasicstyles';
|
||||
export * from './domtools.colors';
|
||||
|
||||
import * as breakpoints from './csstools.breakpoints';
|
||||
import * as elementBasic from './domtools.elementbasic';
|
||||
import * as breakpoints from './domtools.breakpoints';
|
||||
import * as css from './domtools.css';
|
||||
|
||||
export {
|
||||
breakpoints
|
||||
export { css, breakpoints, elementBasic };
|
||||
export { DomTools } from './domtools.classes.domtools';
|
||||
export { TypedRequest } from '@apiglobal/typedrequest';
|
||||
export { IWebSetupConstructorOptions } from '@pushrocks/websetup';
|
||||
export { rxjs } from '@pushrocks/smartrx';
|
||||
|
||||
import * as allPlugins from './domtools.plugins';
|
||||
|
||||
export const plugins = {
|
||||
smartdelay: allPlugins.smartdelay,
|
||||
smartpromise: allPlugins.smartpromise,
|
||||
};
|
||||
|
Reference in New Issue
Block a user