dees-element/ts/classes.cssmanager.ts

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

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

export class CssManager {
  // STATIC
  private static instance: CssManager | null = null;

  /**
   * Returns the singleton instance of CssManager
   */
  public static getSingleton(): CssManager {
    if (!CssManager.instance) {
      CssManager.instance = new CssManager();
    }
    return CssManager.instance;
  }

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

  private getContainerNameFromClass(elementClass: { is?: string; name: string }): string {
    return elementClass.is || elementClass.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
  }

  public cssForDesktop(contentArg: CSSResult, elementClass?: { is?: string; name: string }) {
    if (elementClass) {
      return unsafeCSS(domtools.breakpoints.cssForContainer(
        contentArg, `(min-width: ${domtools.breakpoints.desktop}px)`, this.getContainerNameFromClass(elementClass),
      ));
    }
    return unsafeCSS(domtools.breakpoints.cssForDesktop(contentArg));
  }

  public cssForNotebook(contentArg: CSSResult, elementClass?: { is?: string; name: string }) {
    if (elementClass) {
      return unsafeCSS(domtools.breakpoints.cssForContainer(
        contentArg, `(max-width: ${domtools.breakpoints.notebook}px)`, this.getContainerNameFromClass(elementClass),
      ));
    }
    return unsafeCSS(domtools.breakpoints.cssForNotebook(contentArg));
  }

  public cssForTablet(contentArg: CSSResult, elementClass?: { is?: string; name: string }) {
    if (elementClass) {
      return unsafeCSS(domtools.breakpoints.cssForContainer(
        contentArg, `(max-width: ${domtools.breakpoints.tablet}px)`, this.getContainerNameFromClass(elementClass),
      ));
    }
    return unsafeCSS(domtools.breakpoints.cssForTablet(contentArg));
  }

  public cssForPhablet(contentArg: CSSResult, elementClass?: { is?: string; name: string }) {
    if (elementClass) {
      return unsafeCSS(domtools.breakpoints.cssForContainer(
        contentArg, `(max-width: ${domtools.breakpoints.phablet}px)`, this.getContainerNameFromClass(elementClass),
      ));
    }
    return unsafeCSS(domtools.breakpoints.cssForPhablet(contentArg));
  }

  public cssForPhone(contentArg: CSSResult, elementClass?: { is?: string; name: string }) {
    if (elementClass) {
      return unsafeCSS(domtools.breakpoints.cssForContainer(
        contentArg, `(max-width: ${domtools.breakpoints.phone}px)`, this.getContainerNameFromClass(elementClass),
      ));
    }
    return unsafeCSS(domtools.breakpoints.cssForPhone(contentArg));
  }

  public cssForConstraint(constraints: { maxWidth?: number; minWidth?: number }) {
    return (contentArg: CSSResult) =>
      unsafeCSS(domtools.breakpoints.cssForConstraint(constraints)(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);
  };
}