design.estate/dees-domtools
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2020-05-27 21:15:38 +00:00
parent fb36c641a9
commit 0ed59e850e
10 changed files with 73 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
package-lock.json generated
View File

@ -1072,14 +1072,14 @@
} }
}, },
"@pushrocks/lik": { "@pushrocks/lik": {
"version": "4.0.10", "version": "4.0.12",
"resolved": "https://verdaccio.lossless.one/@pushrocks%2flik/-/lik-4.0.10.tgz", "resolved": "https://verdaccio.lossless.one/@pushrocks%2flik/-/lik-4.0.12.tgz",
"integrity": "sha512-qlVVIWo/Ysp/cyUyHi2mgtFyT0E9xXLCpewBAb7TrwnuRKrSMrmE4YsqPsGOhBxqziSEOPaXZmWaMLwKqjvQiQ==", "integrity": "sha512-ffd3bJL+kMuhXDulO5VC5OqgfhZR3I4HoVN7IBLlN1z6Dco6j4NFrp+/GKDoPssFPNQY4okv+N4Hm2T/7t+4CQ==",
"requires": { "requires": {
"@pushrocks/smartdelay": "^2.0.9", "@pushrocks/smartdelay": "^2.0.9",
"@pushrocks/smartmatch": "^1.0.7", "@pushrocks/smartmatch": "^1.0.7",
"@pushrocks/smartpromise": "^3.0.6", "@pushrocks/smartpromise": "^3.0.6",
"@pushrocks/smartrx": "^2.0.12", "@pushrocks/smartrx": "^2.0.15",
"@pushrocks/smarttime": "^3.0.18", "@pushrocks/smarttime": "^3.0.18",
"@pushrocks/smartunique": "^3.0.3", "@pushrocks/smartunique": "^3.0.3",
"@types/minimatch": "^3.0.3", "@types/minimatch": "^3.0.3",
@ -1095,11 +1095,11 @@
} }
}, },
"@pushrocks/smartrx": { "@pushrocks/smartrx": {
"version": "2.0.12", "version": "2.0.15",
"resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartrx/-/smartrx-2.0.12.tgz", "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartrx/-/smartrx-2.0.15.tgz",
"integrity": "sha512-1iH5cn3Hvb8cnPlmeBL3oOZ/hkvuEQcQ6dykFeDMJkJQ0zrT5iSkzq8EA4fCmIe12aeMkL+38TOC79CCySb0Hg==", "integrity": "sha512-bvxyO19sUgWj7S/WflVO7QVYggTUXoM4rCYn+Akid844CC5zoSzIRx9Egm2xeMD6y4WbBbFWpHr67L7nEYxGWQ==",
"requires": { "requires": {
"@pushrocks/lik": "^4.0.8", "@pushrocks/lik": "^4.0.11",
"@pushrocks/smartpromise": "^3.0.6", "@pushrocks/smartpromise": "^3.0.6",
"rxjs": "^6.5.5" "rxjs": "^6.5.5"
} }
@ -1383,14 +1383,27 @@
} }
}, },
"@pushrocks/smartstate": { "@pushrocks/smartstate": {
"version": "1.0.15", "version": "1.0.16",
"resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartstate/-/smartstate-1.0.15.tgz", "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartstate/-/smartstate-1.0.16.tgz",
"integrity": "sha512-LuqA8othfyd6Ne/DaFt42K/mS7MUa9twbsFboOuXSUi/S6DNWy7Z62EHIsftrVHtgrenBeF+JZaJ8lLCVMHcng==", "integrity": "sha512-RUdeKuM2N5S3su9WEX2XoSE0VV12vMyR4vh4h2gV+uS4Syu4H13ntoN2MQfGh63JHkviICELZ0u+XqRtNvAO4g==",
"requires": { "requires": {
"@pushrocks/lik": "^4.0.0", "@pushrocks/lik": "^4.0.12",
"@pushrocks/smartpromise": "^3.0.6",
"@pushrocks/smartrx": "^2.0.15",
"rxjs": "^6.5.5"
},
"dependencies": {
"@pushrocks/smartrx": {
"version": "2.0.15",
"resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartrx/-/smartrx-2.0.15.tgz",
"integrity": "sha512-bvxyO19sUgWj7S/WflVO7QVYggTUXoM4rCYn+Akid844CC5zoSzIRx9Egm2xeMD6y4WbBbFWpHr67L7nEYxGWQ==",
"requires": {
"@pushrocks/lik": "^4.0.11",
"@pushrocks/smartpromise": "^3.0.6", "@pushrocks/smartpromise": "^3.0.6",
"rxjs": "^6.5.5" "rxjs": "^6.5.5"
} }
}
}
}, },
"@pushrocks/smarttime": { "@pushrocks/smarttime": {
"version": "3.0.15", "version": "3.0.15",

4
package.json
View File

@ -22,9 +22,9 @@
"tslint-config-prettier": "^1.15.0" "tslint-config-prettier": "^1.15.0"
}, },
"dependencies": { "dependencies": {
"@pushrocks/lik": "^4.0.10", "@pushrocks/lik": "^4.0.12",
"@pushrocks/smartpromise": "^3.0.6", "@pushrocks/smartpromise": "^3.0.6",
"@pushrocks/smartstate": "^1.0.15", "@pushrocks/smartstate": "^1.0.16",
"lit-element": "^2.3.1" "lit-element": "^2.3.1"
}, },
"files": [ "files": [

33
ts/domtools.breakpoints.ts
View File

@ -1,24 +1,29 @@
import { DomTools } from './domtools.classes.domtools';
export const desktop = 1240; export const desktop = 1240;
export const tablet = 700; export const tablet = 700;
export const phablet = 500; export const phablet = 500;
export const phone = 340; export const phone = 340;
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone'; export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
let environment: TEnvironment = 'native'; export const getEnvironment = async (): Promise<TViewport> => {
const domToolsInstance = await DomTools.setupDomTools();
export const setEnvironment = envArg => { return domToolsInstance.domToolsStatePart.getState().virtualViewport;
environment = envArg;
}; };
export const cssForTablet = (contentArg) => { export const cssForTablet = async contentArg => {
if (environment === 'native' || environment === 'desktop') { if ((await getEnvironment()) === 'native' || (await getEnvironment()) === 'desktop') {
return ` return `
@media (max-width: ${tablet}px) { @media (max-width: ${tablet}px) {
${contentArg} ${contentArg}
} }
`; `;
} else if (environment === 'tablet' || environment === 'phablet' || environment === 'phone') { } else if (
(await getEnvironment()) === 'tablet' ||
(await getEnvironment()) === 'phablet' ||
(await getEnvironment()) === 'phone'
) {
return ` return `
@media (min-width: 0px) { @media (min-width: 0px) {
${contentArg} ${contentArg}
@ -27,14 +32,14 @@ export const cssForTablet = (contentArg) => {
} }
}; };
export const cssForPhablet = (contentArg) => { export const cssForPhablet = async contentArg => {
if (environment === 'native' || environment === 'desktop') { if ((await getEnvironment()) === 'native' || (await getEnvironment()) === 'desktop') {
return ` return `
@media (max-width: ${phablet}px) { @media (max-width: ${phablet}px) {
${contentArg} ${contentArg}
} }
`; `;
} else if (environment === 'phablet' || environment === 'phone') { } else if ((await getEnvironment()) === 'phablet' || (await getEnvironment()) === 'phone') {
return ` return `
@media (min-width: 0px) { @media (min-width: 0px) {
${contentArg} ${contentArg}
@ -43,14 +48,14 @@ export const cssForPhablet = (contentArg) => {
} }
}; };
export const cssForPhone = (contentArg) => { export const cssForPhone = async contentArg => {
if (environment === 'native' || environment === 'desktop') { if ((await getEnvironment()) === 'native' || (await getEnvironment()) === 'desktop') {
return ` return `
@media (max-width: ${phone}px) { @media (max-width: ${phone}px) {
${contentArg} ${contentArg}
} }
`; `;
} else if (environment === 'phone') { } else if ((await getEnvironment()) === 'phone') {
return ` return `
@media (min-width: 0px) { @media (min-width: 0px) {
${contentArg} ${contentArg}

20
ts/domtools.classes.domtools.ts
View File

@ -1,6 +1,11 @@
import * as plugins from './domtools.plugins'; import * as plugins from './domtools.plugins';
import { Stringmap } from '@pushrocks/lik/dist_ts/lik.stringmap'; import { Stringmap } from '@pushrocks/lik/dist_ts/lik.stringmap';
import { FastMap } from '@pushrocks/lik/dist_ts/lik.fastmap'; import { FastMap } from '@pushrocks/lik/dist_ts/lik.fastmap';
import { TViewport } from './domtools.breakpoints';
export interface IDomToolsState {
virtualViewport: TViewport;
}
export class DomTools { export class DomTools {
public static async setupDomTools() { public static async setupDomTools() {
@ -26,6 +31,7 @@ export class DomTools {
} }
public smartstate = new plugins.smartstate.Smartstate(); public smartstate = new plugins.smartstate.Smartstate();
public domToolsStatePart = this.smartstate.getStatePart<IDomToolsState>('domtools');
public domToolsReady = plugins.smartpromise.defer(); public domToolsReady = plugins.smartpromise.defer();
public domReady = plugins.smartpromise.defer(); public domReady = plugins.smartpromise.defer();
@ -37,9 +43,11 @@ export class DomTools {
bodyElement: HTMLElement; bodyElement: HTMLElement;
} = { } = {
headElement: null, headElement: null,
bodyElement: null, bodyElement: null
}; };
constructor() {}
public async setGlobalStyles(stylesText: string) { public async setGlobalStyles(stylesText: string) {
await this.domReady.promise; await this.domReady.promise;
const styleElement = document.createElement('style'); const styleElement = document.createElement('style');
@ -64,11 +72,15 @@ export class DomTools {
this.runOnceResultMap.addToMap(identifierArg, result); this.runOnceResultMap.addToMap(identifierArg, result);
this.runOnceTrackerStringMap.removeString(runningId); this.runOnceTrackerStringMap.removeString(runningId);
} }
return await this.runOnceTrackerStringMap.registerUntilTrue(stringMap => { return await this.runOnceTrackerStringMap.registerUntilTrue(
stringMap => {
return !stringMap.includes(runningId); return !stringMap.includes(runningId);
}, () => { },
() => {
return this.runOnceResultMap.getByKey(identifierArg); return this.runOnceResultMap.getByKey(identifierArg);
}); }
);
} }
setVirtualViewport() {}
} }

3
ts/domtools.css.ts
View File

@ -1,7 +1,8 @@
export const cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number) => { export const cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number) => {
let returnString = ``; let returnString = ``;
for (let i = 0; i < amountOfColumnsArg; i++) { for (let i = 0; i < amountOfColumnsArg; i++) {
returnString += ` calc((100%/${amountOfColumnsArg}) - (${gapSizeArg * (amountOfColumnsArg - 1)}px/${amountOfColumnsArg}))`; returnString += ` calc((100%/${amountOfColumnsArg}) - (${gapSizeArg *
(amountOfColumnsArg - 1)}px/${amountOfColumnsArg}))`;
} }
return returnString; return returnString;
}; };

2
ts/domtools.elementbasic.ts
View File

@ -1,7 +1,6 @@
import * as plugins from './domtools.plugins'; import * as plugins from './domtools.plugins';
import { DomTools } from './domtools.classes.domtools'; import { DomTools } from './domtools.classes.domtools';
import { html } from 'lit-element'; import { html } from 'lit-element';
export const styles = html` export const styles = html`
<style> <style>
@ -12,7 +11,6 @@ export const styles = html`
</style> </style>
`; `;
/** /**
* a basic setup for elements * a basic setup for elements
* makes sure everything is in check * makes sure everything is in check

5
ts/domtools.plugins.ts
View File

@ -2,7 +2,4 @@
import * as smartpromise from '@pushrocks/smartpromise'; import * as smartpromise from '@pushrocks/smartpromise';
import * as smartstate from '@pushrocks/smartstate'; import * as smartstate from '@pushrocks/smartstate';
export { export { smartpromise, smartstate };
smartpromise,
smartstate
};

6
ts/index.ts
View File

@ -4,8 +4,4 @@ import * as elementBasic from './domtools.elementbasic';
import * as breakpoints from './domtools.breakpoints'; import * as breakpoints from './domtools.breakpoints';
import * as css from './domtools.css'; import * as css from './domtools.css';
export { export { css, breakpoints, elementBasic };
css,
breakpoints,
elementBasic
};