diff --git a/package-lock.json b/package-lock.json index e12fc00..b8503f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1072,14 +1072,14 @@ } }, "@pushrocks/lik": { - "version": "4.0.10", - "resolved": "https://verdaccio.lossless.one/@pushrocks%2flik/-/lik-4.0.10.tgz", - "integrity": "sha512-qlVVIWo/Ysp/cyUyHi2mgtFyT0E9xXLCpewBAb7TrwnuRKrSMrmE4YsqPsGOhBxqziSEOPaXZmWaMLwKqjvQiQ==", + "version": "4.0.12", + "resolved": "https://verdaccio.lossless.one/@pushrocks%2flik/-/lik-4.0.12.tgz", + "integrity": "sha512-ffd3bJL+kMuhXDulO5VC5OqgfhZR3I4HoVN7IBLlN1z6Dco6j4NFrp+/GKDoPssFPNQY4okv+N4Hm2T/7t+4CQ==", "requires": { "@pushrocks/smartdelay": "^2.0.9", "@pushrocks/smartmatch": "^1.0.7", "@pushrocks/smartpromise": "^3.0.6", - "@pushrocks/smartrx": "^2.0.12", + "@pushrocks/smartrx": "^2.0.15", "@pushrocks/smarttime": "^3.0.18", "@pushrocks/smartunique": "^3.0.3", "@types/minimatch": "^3.0.3", @@ -1095,11 +1095,11 @@ } }, "@pushrocks/smartrx": { - "version": "2.0.12", - "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartrx/-/smartrx-2.0.12.tgz", - "integrity": "sha512-1iH5cn3Hvb8cnPlmeBL3oOZ/hkvuEQcQ6dykFeDMJkJQ0zrT5iSkzq8EA4fCmIe12aeMkL+38TOC79CCySb0Hg==", + "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.8", + "@pushrocks/lik": "^4.0.11", "@pushrocks/smartpromise": "^3.0.6", "rxjs": "^6.5.5" } @@ -1383,13 +1383,26 @@ } }, "@pushrocks/smartstate": { - "version": "1.0.15", - "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartstate/-/smartstate-1.0.15.tgz", - "integrity": "sha512-LuqA8othfyd6Ne/DaFt42K/mS7MUa9twbsFboOuXSUi/S6DNWy7Z62EHIsftrVHtgrenBeF+JZaJ8lLCVMHcng==", + "version": "1.0.16", + "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartstate/-/smartstate-1.0.16.tgz", + "integrity": "sha512-RUdeKuM2N5S3su9WEX2XoSE0VV12vMyR4vh4h2gV+uS4Syu4H13ntoN2MQfGh63JHkviICELZ0u+XqRtNvAO4g==", "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", + "rxjs": "^6.5.5" + } + } } }, "@pushrocks/smarttime": { diff --git a/package.json b/package.json index 61e2811..865d882 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,9 @@ "tslint-config-prettier": "^1.15.0" }, "dependencies": { - "@pushrocks/lik": "^4.0.10", + "@pushrocks/lik": "^4.0.12", "@pushrocks/smartpromise": "^3.0.6", - "@pushrocks/smartstate": "^1.0.15", + "@pushrocks/smartstate": "^1.0.16", "lit-element": "^2.3.1" }, "files": [ @@ -39,4 +39,4 @@ "npmextra.json", "readme.md" ] -} +} \ No newline at end of file diff --git a/ts/domtools.breakpoints.ts b/ts/domtools.breakpoints.ts index ba37056..c75c7f6 100644 --- a/ts/domtools.breakpoints.ts +++ b/ts/domtools.breakpoints.ts @@ -1,24 +1,29 @@ +import { DomTools } from './domtools.classes.domtools'; + export const desktop = 1240; export const tablet = 700; export const phablet = 500; 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 setEnvironment = envArg => { - environment = envArg; +export const getEnvironment = async (): Promise => { + const domToolsInstance = await DomTools.setupDomTools(); + return domToolsInstance.domToolsStatePart.getState().virtualViewport; }; -export const cssForTablet = (contentArg) => { - if (environment === 'native' || environment === 'desktop') { +export const cssForTablet = async contentArg => { + if ((await getEnvironment()) === 'native' || (await getEnvironment()) === 'desktop') { return ` @media (max-width: ${tablet}px) { ${contentArg} } `; - } else if (environment === 'tablet' || environment === 'phablet' || environment === 'phone') { + } else if ( + (await getEnvironment()) === 'tablet' || + (await getEnvironment()) === 'phablet' || + (await getEnvironment()) === 'phone' + ) { return ` @media (min-width: 0px) { ${contentArg} @@ -27,14 +32,14 @@ export const cssForTablet = (contentArg) => { } }; -export const cssForPhablet = (contentArg) => { - if (environment === 'native' || environment === 'desktop') { +export const cssForPhablet = async contentArg => { + if ((await getEnvironment()) === 'native' || (await getEnvironment()) === 'desktop') { return ` @media (max-width: ${phablet}px) { ${contentArg} } `; - } else if (environment === 'phablet' || environment === 'phone') { + } else if ((await getEnvironment()) === 'phablet' || (await getEnvironment()) === 'phone') { return ` @media (min-width: 0px) { ${contentArg} @@ -43,14 +48,14 @@ export const cssForPhablet = (contentArg) => { } }; -export const cssForPhone = (contentArg) => { - if (environment === 'native' || environment === 'desktop') { +export const cssForPhone = async contentArg => { + if ((await getEnvironment()) === 'native' || (await getEnvironment()) === 'desktop') { return ` @media (max-width: ${phone}px) { ${contentArg} } `; - } else if (environment === 'phone') { + } else if ((await getEnvironment()) === 'phone') { return ` @media (min-width: 0px) { ${contentArg} diff --git a/ts/domtools.classes.domtools.ts b/ts/domtools.classes.domtools.ts index b3503fa..55c42bd 100644 --- a/ts/domtools.classes.domtools.ts +++ b/ts/domtools.classes.domtools.ts @@ -1,6 +1,11 @@ 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'; + +export interface IDomToolsState { + virtualViewport: TViewport; +} export class DomTools { public static async setupDomTools() { @@ -26,6 +31,7 @@ export class DomTools { } public smartstate = new plugins.smartstate.Smartstate(); + public domToolsStatePart = this.smartstate.getStatePart('domtools'); public domToolsReady = plugins.smartpromise.defer(); public domReady = plugins.smartpromise.defer(); @@ -37,9 +43,11 @@ export class DomTools { bodyElement: HTMLElement; } = { headElement: null, - bodyElement: null, + bodyElement: null }; + constructor() {} + public async setGlobalStyles(stylesText: string) { await this.domReady.promise; const styleElement = document.createElement('style'); @@ -57,18 +65,22 @@ export class DomTools { */ public async runOnce(identifierArg: string, funcArg: () => Promise) { const runningId = `${identifierArg}+runningCheck`; - if(!this.runOnceTrackerStringMap.checkString(identifierArg)) { + 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); - }); + return await this.runOnceTrackerStringMap.registerUntilTrue( + stringMap => { + return !stringMap.includes(runningId); + }, + () => { + return this.runOnceResultMap.getByKey(identifierArg); + } + ); } -} \ No newline at end of file + setVirtualViewport() {} +} diff --git a/ts/domtools.classes.router.ts b/ts/domtools.classes.router.ts index c189c02..9759a87 100644 --- a/ts/domtools.classes.router.ts +++ b/ts/domtools.classes.router.ts @@ -1 +1 @@ -import * as plugins from './domtools.plugins'; \ No newline at end of file +import * as plugins from './domtools.plugins'; diff --git a/ts/domtools.colors.ts b/ts/domtools.colors.ts index 867068d..5afbc85 100644 --- a/ts/domtools.colors.ts +++ b/ts/domtools.colors.ts @@ -3,4 +3,4 @@ export interface IDeesColorSet { secondaryAccent: string; primaryBackground: string; secondaryBackground: string; -} \ No newline at end of file +} diff --git a/ts/domtools.css.ts b/ts/domtools.css.ts index 89f30ef..eeaa542 100644 --- a/ts/domtools.css.ts +++ b/ts/domtools.css.ts @@ -1,7 +1,8 @@ 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}))`; + returnString += ` calc((100%/${amountOfColumnsArg}) - (${gapSizeArg * + (amountOfColumnsArg - 1)}px/${amountOfColumnsArg}))`; } return returnString; }; diff --git a/ts/domtools.elementbasic.ts b/ts/domtools.elementbasic.ts index 49013d4..2ddf092 100644 --- a/ts/domtools.elementbasic.ts +++ b/ts/domtools.elementbasic.ts @@ -1,7 +1,6 @@ import * as plugins from './domtools.plugins'; import { DomTools } from './domtools.classes.domtools'; - import { html } from 'lit-element'; export const styles = html` `; - /** * a basic setup for elements * makes sure everything is in check diff --git a/ts/domtools.plugins.ts b/ts/domtools.plugins.ts index 5e2ea75..66d42d1 100644 --- a/ts/domtools.plugins.ts +++ b/ts/domtools.plugins.ts @@ -2,7 +2,4 @@ import * as smartpromise from '@pushrocks/smartpromise'; import * as smartstate from '@pushrocks/smartstate'; -export { - smartpromise, - smartstate -}; +export { smartpromise, smartstate }; diff --git a/ts/index.ts b/ts/index.ts index c949b3c..df141cd 100644 --- a/ts/index.ts +++ b/ts/index.ts @@ -4,8 +4,4 @@ import * as elementBasic from './domtools.elementbasic'; import * as breakpoints from './domtools.breakpoints'; import * as css from './domtools.css'; -export { - css, - breakpoints, - elementBasic -}; +export { css, breakpoints, elementBasic };