design.estate/dees-element
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz
2021-03-28 20:10:51 +00:00
parent 07be13cf39
commit 06b7f7fd12
2 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
test/test.browser.ts
View File

@@ -8,7 +8,7 @@ tap.test('should create a static element', async () => {
public static styles = [
deesElement.css`
.buttonClass {
background: ${deesElement.cssManager.dbTheme('blue', 'black')};
background: ${deesElement.cssManager.bdTheme('blue', 'black')};
}
`
];

42
ts/dees-element.classes.cssmanager.ts
View File

@@ -2,30 +2,50 @@ import { CSSResult } from 'lit-element';
import * as plugins from './dees-element.plugins';
import * as domtools from '@designestate/dees-domtools';
export interface IDbVarTriplet {
export interface IBdVarTriplet {
cssVarName: string;
darkValue: string;
brightValue: string;
}
export class CssManager {
public dbVarTripletStore: IDbVarTriplet[] = [];
public domtoolsPromise = domtools.DomTools.setupDomTools();
public goBright: boolean = false;
public bdVarTripletStore: IBdVarTriplet[] = [];
public dbTheme(brightValueArg: string, darkValueArg: string): CSSResult {
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 {
let returnCssVar: string;
const existingTriplet = this.dbVarTripletStore.find(tripletArg => tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg);
const existingTriplet = this.bdVarTripletStore.find(
(tripletArg) =>
tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg
);
if (existingTriplet) {
returnCssVar = existingTriplet.cssVarName;
} else {
const newTriplet: IDbVarTriplet = {
const newTriplet: IBdVarTriplet = {
cssVarName: `--${plugins.isounique.uni()}`,
brightValue: brightValueArg,
darkValue: darkValueArg
darkValue: darkValueArg,
};
this.dbVarTripletStore.push(newTriplet);
domtools.DomTools.setupDomTools().then(async (domtools) => {
await domtools.domReady.promise;
document.body.style.setProperty(newTriplet.cssVarName, newTriplet.darkValue);
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;
}
@@ -41,4 +61,4 @@ export class CssManager {
}
return plugins.litElement.unsafeCSS(returnString);
};
}
}