dees-domtools/ts/domtools.classes.domtools.ts

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 { DomToolsRouter } from './domtools.classes.router';

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;
  }

  // ========
  // INSTANCE
  // ========
  public smartstate = new plugins.smartstate.Smartstate();
  public domToolsStatePart = this.smartstate.getStatePart<IDomToolsState>('domtools', {
    virtualViewport: 'native',
  });

  public router = new DomToolsRouter({
    debug: false
  });

  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();

  // elements
  public elements: {
    headElement: HTMLElement;
    bodyElement: HTMLElement;
  } = {
    headElement: null,
    bodyElement: null,
  };

  constructor() {}

  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);
  }

  private runOnceTrackerStringMap = new Stringmap();
  private runOnceResultMap = new FastMap();
  /**
   * run a function once and always get the Promise of the first execution
   * @param identifierArg
   * @param funcArg
   */
  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);
      }
    );
  }

  setVirtualViewport(environmentArg: TViewport) {
    this.domToolsStatePart.dispatchAction(this.actionSetVirtualViewport, environmentArg);
  }
}