@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
53 lines • 2.6 kB
JavaScript
import Color from "color";
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
import CssCustomProperties from "./CssCustomProperties.js";
var colorConfigurationMemo = new Map();
/**
* Read and returns color values provided by CSS custom properties.
* They are defined for special CSS classes.
* Currently color configurations for the react flow editors are supported.
**/
var getColorConfiguration = function (configId) {
if (!colorConfigurationMemo.has(configId)) {
var selectorClass_1 = "".concat(eccgui, "-configuration--colors__").concat(configId);
colorConfigurationMemo.set(configId, Object.fromEntries(new CssCustomProperties({
selectorText: ".".concat(selectorClass_1),
removeDashPrefix: true,
returnObject: false,
}).customProperties().map(function (setting) {
// check if the value could be a color
var testColorValue = setting[1];
// check if value itself is a reference to another css custom property
if (testColorValue.slice(0, 3) === "var") {
// we currently only extract the first part and ignore any fallbacks
var customPropertyName = /var\(\s*(--[a-zA-Z0-9_-]+)/g.exec(testColorValue);
if (customPropertyName && customPropertyName[1]) {
var selectorElement = document.getElementsByClassName(selectorClass_1)[0];
if (!selectorElement) {
// we need to add an empty element that the JS API can read the value of the custom prop
selectorElement = document.createElement("div");
selectorElement.classList.add(selectorClass_1);
selectorElement.setAttribute("style", "display: none");
document.body.appendChild(selectorElement);
}
// only check 1 time, not recursive
testColorValue = getComputedStyle(selectorElement).getPropertyValue(customPropertyName[1]);
}
}
try {
if (Color(testColorValue)) {
return [setting[0], testColorValue];
}
else {
return [setting[0], undefined];
}
}
catch (_a) {
return [setting[0], undefined];
}
})));
}
return colorConfigurationMemo.get(configId);
};
export default getColorConfiguration;
//# sourceMappingURL=getColorConfiguration.js.map