dees-element/ts/dees-element.classes.cssmanager.ts

import { CSSResult, unsafeCSS } from 'lit';
import * as plugins from './dees-element.plugins.js';
import * as domtools from '@designestate/dees-domtools';

export interface IBdVarTriplet {
  cssVarName: string;
  darkValue: string;
  brightValue: string;
}

export class CssManager {
  public domtoolsPromise = domtools.DomTools.setupDomTools();
  public goBright: boolean = false;
  public bdVarTripletStore: IBdVarTriplet[] = [];

  constructor() {
    this.domtoolsPromise.then(async (domtoolsArg) => {
      domtoolsArg.themeManager.themeObservable.subscribe(async (goBrightArg) => {
        this.goBright = goBrightArg;
        await domtoolsArg.domReady.promise;
        for (const bdTripletArg of this.bdVarTripletStore) {
          document.body.style.setProperty(
            bdTripletArg.cssVarName,
            this.goBright ? bdTripletArg.brightValue : bdTripletArg.darkValue
          );
        }
      });
    });
  }

  public get defaultStyles() {
    return domtools.elementBasic.staticStyles;
  }

  public cssForDesktop(contentArg: CSSResult) {
    return unsafeCSS(domtools.breakpoints.cssForDesktop(contentArg));
  }

  public cssForNotebook(contentArg: CSSResult) {
    return unsafeCSS(domtools.breakpoints.cssForNotebook(contentArg));
  }

  public cssForTablet(contentArg: CSSResult) {
    return unsafeCSS(domtools.breakpoints.cssForTablet(contentArg));
  }

  public cssForPhablet(contentArg: CSSResult) {
    return unsafeCSS(domtools.breakpoints.cssForPhablet(contentArg));
  }

  public cssForPhone(contentArg: CSSResult) {
    return unsafeCSS(domtools.breakpoints.cssForPhone(contentArg));
  }

  public bdTheme(brightValueArg: string, darkValueArg: string): CSSResult {
    let returnCssVar: string;

    // lets determine the default value for quick page rendering.
    let defaultValue: string;
    if (domtools.DomTools.getGlobalDomToolsSync()) {
      defaultValue = domtools.DomTools.getGlobalDomToolsSync().themeManager.goBrightBoolean ? brightValueArg : darkValueArg;
    } else {
      defaultValue = darkValueArg
    }


    const existingTriplet = this.bdVarTripletStore.find(
      (tripletArg) =>
        tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg
    );
    if (existingTriplet) {
      returnCssVar = existingTriplet.cssVarName;
    } else {
      const newTriplet: IBdVarTriplet = {
        cssVarName: `--${plugins.isounique.uni()}`,
        brightValue: brightValueArg,
        darkValue: darkValueArg,
      };
      this.bdVarTripletStore.push(newTriplet);
      
      this.domtoolsPromise.then(async (domtoolsArg) => {
        await domtoolsArg.domReady.promise;
        document.body.style.setProperty(
          newTriplet.cssVarName,
          defaultValue
        );
      });
      returnCssVar = newTriplet.cssVarName;
    }
    return plugins.lit.unsafeCSS(`var(${returnCssVar}, ${defaultValue})`);
  }

  public cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number): CSSResult => {
    let returnString = ``;
    for (let i = 0; i < amountOfColumnsArg; i++) {
      returnString += ` calc((100%/${amountOfColumnsArg}) - (${
        gapSizeArg * (amountOfColumnsArg - 1)
      }px/${amountOfColumnsArg}))`;
    }
    return plugins.lit.unsafeCSS(returnString);
  };
}