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 { delayForRandom } from '@pushrocks/smartdelay'; 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 smartstate = new plugins.smartstate.Smartstate(); public domToolsStatePart = this.smartstate.getStatePart('domtools', { virtualViewport: 'native', }); public router = new plugins.smartrouter.SmartRouter({ debug: false, }); public convenience = { smartdelay: plugins.smartdelay, }; public scroller: plugins.SweetScroll; private actionSetVirtualViewport = this.domToolsStatePart.createAction( 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() { // lets care about third party stuff this.domToolsReady.promise.then(() => { this.scroller = new plugins.SweetScroll({ /* some options */ }); }); } 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(identifierArg: string, funcArg: () => Promise) { 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 setVirtualViewport(environmentArg: TViewport) { this.domToolsStatePart.dispatchAction(this.actionSetVirtualViewport, environmentArg); } public async setWebsiteInfo(optionsArg: plugins.websetup.IWebSetupConstructorOptions) { const websetup = new plugins.websetup.WebSetup(optionsArg); await websetup.setup(); } }