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

101 lines
3.2 KiB
TypeScript
Raw Permalink Normal View History

2021-12-13 22:29:16 +00:00
import { CSSResult, unsafeCSS } from 'lit';
2022-03-16 13:46:51 +00:00
import * as plugins from './dees-element.plugins.js';
2023-08-07 07:19:53 +00:00
import * as domtools from '@design.estate/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;
2021-03-28 22:14:25 +00:00
await domtoolsArg.domReady.promise;
2021-03-28 20:10:51 +00:00
for (const bdTripletArg of this.bdVarTripletStore) {
document.body.style.setProperty(
bdTripletArg.cssVarName,
this.goBright ? bdTripletArg.brightValue : bdTripletArg.darkValue
);
}
});
});
}
2022-03-16 14:00:10 +00:00
public get defaultStyles() {
2021-03-28 22:02:19 +00:00
return domtools.elementBasic.staticStyles;
}
2022-04-19 16:49:12 +00:00
public cssForDesktop(contentArg: CSSResult) {
return unsafeCSS(domtools.breakpoints.cssForDesktop(contentArg));
}
public cssForNotebook(contentArg: CSSResult) {
return unsafeCSS(domtools.breakpoints.cssForNotebook(contentArg));
}
2022-03-16 13:46:51 +00:00
public cssForTablet(contentArg: CSSResult) {
2021-03-28 22:20:16 +00:00
return unsafeCSS(domtools.breakpoints.cssForTablet(contentArg));
2022-03-16 14:00:10 +00:00
}
2022-03-16 13:46:51 +00:00
public cssForPhablet(contentArg: CSSResult) {
2021-03-28 22:20:16 +00:00
return unsafeCSS(domtools.breakpoints.cssForPhablet(contentArg));
}
2022-03-16 14:00:10 +00:00
2022-03-16 13:46:51 +00:00
public cssForPhone(contentArg: CSSResult) {
2021-03-28 22:20:16 +00:00
return unsafeCSS(domtools.breakpoints.cssForPhone(contentArg));
2022-03-16 14:00:10 +00:00
}
2021-03-28 22:20:16 +00:00
2021-03-28 20:10:51 +00:00
public bdTheme(brightValueArg: string, darkValueArg: string): CSSResult {
2021-03-28 14:38:17 +00:00
let returnCssVar: string;
2022-04-19 08:50:31 +00:00
// lets determine the default value for quick page rendering.
let defaultValue: string;
if (domtools.DomTools.getGlobalDomToolsSync()) {
2022-12-31 10:52:58 +00:00
defaultValue = domtools.DomTools.getGlobalDomToolsSync().themeManager.goBrightBoolean
? brightValueArg
: darkValueArg;
2022-04-19 08:50:31 +00:00
} else {
2022-12-31 10:52:58 +00:00
defaultValue = darkValueArg;
2022-04-19 08:50:31 +00:00
}
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);
2022-12-31 10:52:58 +00:00
2021-03-28 20:10:51 +00:00
this.domtoolsPromise.then(async (domtoolsArg) => {
await domtoolsArg.domReady.promise;
2022-12-31 10:52:58 +00:00
document.body.style.setProperty(newTriplet.cssVarName, defaultValue);
2021-03-28 14:38:17 +00:00
});
returnCssVar = newTriplet.cssVarName;
2021-03-27 16:52:06 +00:00
}
2022-04-19 08:50:31 +00:00
return plugins.lit.unsafeCSS(`var(${returnCssVar}, ${defaultValue})`);
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}))`;
}
2021-11-27 16:07:33 +00:00
return plugins.lit.unsafeCSS(returnString);
2021-03-27 16:52:06 +00:00
};
2021-03-28 20:10:51 +00:00
}