Spaces:
Paused
Paused
File size: 1,933 Bytes
31226fd | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | "use strict";
/**
* Data-attribute → CSS property bridge.
*
* After refactoring inline styles out of HTML/JS templates, some elements
* carry their dynamic values in data-* attributes instead. This module
* translates them into CSS custom properties so stylesheets can consume
* them without any inline style= attribute.
*
* Call applyDataStyles(root) after any innerHTML replacement.
*/
const MAP = [
{ attr: "data-left", prop: "left", unit: "%", selector: ".development-scale-tick, .development-scale-marker" },
{ attr: "data-marker-position", prop: "--marker-position", unit: "%", selector: ".development-marker" },
{ attr: "data-conf", prop: "--conf", unit: "%", selector: ".proposal-conf" },
{ attr: "data-empirical-fill", prop: "--empirical-fill", unit: "%", selector: ".wesen-empirical-row" },
{ attr: "data-opacity", prop: "opacity", unit: "", selector: ".wesen-self-body" },
{ attr: "data-width", prop: "width", unit: "%", selector: ".population-bar-fill" },
{ attr: "data-color", prop: "background", unit: "", selector: ".population-bar-fill" },
];
export function applyDataStyles(root = document) {
for (const { attr, prop, unit, selector } of MAP) {
root.querySelectorAll(`${selector}[${attr}]`).forEach((el) => {
const value = el.getAttribute(attr);
if (value !== null) el.style.setProperty(prop, value + unit);
});
}
}
/** MutationObserver that auto-applies data styles on DOM changes. */
let observer = null;
export function startDataStyleObserver() {
if (observer) return;
observer = new MutationObserver(() => applyDataStyles());
observer.observe(document.body, { childList: true, subtree: true });
// Initial pass
applyDataStyles();
}
export function stopDataStyleObserver() {
if (observer) { observer.disconnect(); observer = null; }
}
|