@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
58 lines • 2.86 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const color_1 = __importDefault(require("color"));
const constants_1 = require("../../configuration/constants");
const CssCustomProperties_1 = __importDefault(require("./CssCustomProperties"));
const 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.
**/
const getColorConfiguration = (configId) => {
if (!colorConfigurationMemo.has(configId)) {
const selectorClass = `${constants_1.CLASSPREFIX}-configuration--colors__${configId}`;
colorConfigurationMemo.set(configId, Object.fromEntries(new CssCustomProperties_1.default({
selectorText: `.${selectorClass}`,
removeDashPrefix: true,
returnObject: false,
}).customProperties().map((setting) => {
// check if the value could be a color
let 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
const customPropertyName = /var\(\s*(--[a-zA-Z0-9_-]+)/g.exec(testColorValue);
if (customPropertyName && customPropertyName[1]) {
let selectorElement = document.getElementsByClassName(selectorClass)[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);
selectorElement.setAttribute("style", "display: none");
document.body.appendChild(selectorElement);
}
// only check 1 time, not recursive
testColorValue = getComputedStyle(selectorElement).getPropertyValue(customPropertyName[1]);
}
}
try {
if ((0, color_1.default)(testColorValue)) {
return [setting[0], testColorValue];
}
else {
return [setting[0], undefined];
}
}
catch (_a) {
return [setting[0], undefined];
}
})));
}
return colorConfigurationMemo.get(configId);
};
exports.default = getColorConfiguration;
//# sourceMappingURL=getColorConfiguration.js.map