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 { Scroller } from './domtools.classes.scroller';
import { delayForRandom } from '@pushrocks/smartdelay';
import { setupGlobalTheme } from './domtools.css.theme';

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 setup theming
      setupGlobalTheme(domToolsInstance);

      // 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() {
    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<IDomToolsState>('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<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();

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

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