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

41 lines
1.5 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
export interface IDbVarTriplet {
cssVarName: string;
darkValue: string;
brightValue: string;
}
export class CssManager {
public dbVarTripletStore: IDbVarTriplet[] = [];
public dbTheme(darkValueArg: string, brightValueArg: string): CSSResult {
const existingTriplet = this.dbVarTripletStore.find(tripletArg => tripletArg.darkValue === darkValueArg && tripletArg.brightValue === brightValueArg);
if (existingTriplet) {
return plugins.litElement.unsafeCSS(existingTriplet.cssVarName)
} else {
const newTriplet: IDbVarTriplet = {
cssVarName: `--${plugins.isounique.uni()}`,
brightValue: brightValueArg,
darkValue: darkValueArg
}
this.dbVarTripletStore.push(newTriplet)
2021-03-27 18:21:38 +00:00
document.onreadystatechange = () => {
2021-03-27 18:25:39 +00:00
document.body?.style?.setProperty(newTriplet.cssVarName, newTriplet.darkValue);
2021-03-27 18:21:38 +00:00
}
2021-03-27 16:52:06 +00:00
return plugins.litElement.unsafeCSS(newTriplet.cssVarName);
}
}
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);
};
}