103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
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);
|
|
};
|
|
}
|