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

65 lines
2.2 KiB
TypeScript
Raw Normal View History

2021-03-27 16:52:06 +00:00
import { CSSResult } from 'lit-element';
import * as plugins from './dees-element.plugins';
2021-03-27 18:25:39 +00:00
import * as domtools from '@designestate/dees-domtools';
2021-03-27 16:52:06 +00:00
2021-03-28 20:10:51 +00:00
export interface IBdVarTriplet {
2021-03-27 16:52:06 +00:00
cssVarName: string;
darkValue: string;
brightValue: string;
}
export class CssManager {
2021-03-28 20:10:51 +00:00
public domtoolsPromise = domtools.DomTools.setupDomTools();
public goBright: boolean = false;
public bdVarTripletStore: IBdVarTriplet[] = [];
2021-03-27 16:52:06 +00:00
2021-03-28 20:10:51 +00:00
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 bdTheme(brightValueArg: string, darkValueArg: string): CSSResult {
2021-03-28 14:38:17 +00:00
let returnCssVar: string;
2021-03-28 20:10:51 +00:00
const existingTriplet = this.bdVarTripletStore.find(
(tripletArg) =>
tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg
);
2021-03-27 16:52:06 +00:00
if (existingTriplet) {
2021-03-28 14:38:17 +00:00
returnCssVar = existingTriplet.cssVarName;
2021-03-27 16:52:06 +00:00
} else {
2021-03-28 20:10:51 +00:00
const newTriplet: IBdVarTriplet = {
2021-03-27 16:52:06 +00:00
cssVarName: `--${plugins.isounique.uni()}`,
brightValue: brightValueArg,
2021-03-28 20:10:51 +00:00
darkValue: darkValueArg,
2021-03-28 14:38:17 +00:00
};
2021-03-28 20:10:51 +00:00
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);
2021-03-28 14:38:17 +00:00
});
returnCssVar = newTriplet.cssVarName;
2021-03-27 16:52:06 +00:00
}
2021-03-28 14:38:17 +00:00
return plugins.litElement.unsafeCSS(`var(${returnCssVar})`);
2021-03-27 16:52:06 +00:00
}
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);
};
2021-03-28 20:10:51 +00:00
}