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

import { CSSResult } from 'lit-element';
import * as plugins from './dees-element.plugins';
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;
        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 bdTheme(brightValueArg: string, darkValueArg: string): CSSResult {
    let returnCssVar: string;
    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, this.goBright ? newTriplet.brightValue : newTriplet.darkValue);
      });
      returnCssVar = newTriplet.cssVarName;
    }
    return plugins.litElement.unsafeCSS(`var(${returnCssVar})`);
  }

  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.litElement.unsafeCSS(returnString);
  };
}