dees-element/ts/dees-element.classes.cssmanager.ts
2021-03-27 16:52:06 +00:00

38 lines
1.3 KiB
TypeScript

import { CSSResult } from 'lit-element';
import * as plugins from './dees-element.plugins';
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)
document.body.style.setProperty(newTriplet.cssVarName, newTriplet.darkValue);
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);
};
}