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'; import { WebSetup } from '@pushrocks/websetup'; import { ElementInstrumenter } from './domtools.classes.elementinstrumenter'; 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('domtools', { virtualViewport: 'native', }); public router = new plugins.smartrouter.SmartRouter({ debug: false, }); public convenience = { smartdelay: plugins.smartdelay, }; public elementInstrumenter = new ElementInstrumenter(); 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( 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(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 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; } }