design.estate/dees-element
2
0
Fork 0
Code Issues Pull Requests 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
Show Stats 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 = [ public static styles = [
deesElement.css` deesElement.css`
.buttonClass { .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 plugins from './dees-element.plugins';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
export interface IDbVarTriplet { export interface IBdVarTriplet {
cssVarName: string; cssVarName: string;
darkValue: string; darkValue: string;
brightValue: string; brightValue: string;
} }
export class CssManager { 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; 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) { if (existingTriplet) {
returnCssVar = existingTriplet.cssVarName; returnCssVar = existingTriplet.cssVarName;
} else { } else {
const newTriplet: IDbVarTriplet = { const newTriplet: IBdVarTriplet = {
cssVarName: `--${plugins.isounique.uni()}`, cssVarName: `--${plugins.isounique.uni()}`,
brightValue: brightValueArg, brightValue: brightValueArg,
darkValue: darkValueArg darkValue: darkValueArg,
}; };
this.dbVarTripletStore.push(newTriplet); this.bdVarTripletStore.push(newTriplet);
domtools.DomTools.setupDomTools().then(async (domtools) => { this.domtoolsPromise.then(async (domtoolsArg) => {
await domtools.domReady.promise; await domtoolsArg.domReady.promise;
document.body.style.setProperty(newTriplet.cssVarName, newTriplet.darkValue); document.body.style.setProperty(newTriplet.cssVarName, this.goBright ? newTriplet.brightValue : newTriplet.darkValue);
}); });
returnCssVar = newTriplet.cssVarName; returnCssVar = newTriplet.cssVarName;
} }
@ -41,4 +61,4 @@ export class CssManager {
} }
return plugins.litElement.unsafeCSS(returnString); return plugins.litElement.unsafeCSS(returnString);
}; };
} }