lovelace-card-mod/src/apply-style.js

52 lines
1.5 KiB
JavaScript

export const applyStyle = async function(root, style, params, debug) {
const debugPrint = function(str){
if(!debug) return;
if(typeof str === "string")
console.log(' '.repeat(2*(debug-1)) + str);
else
console.log(str);
}
if(!root || !style) return;
if(root.updateComplete)
await root.updateComplete;
if(typeof style === "string") {
const oldStyleEl = root.querySelector("card-mod");
if(oldStyleEl) {
oldStyleEl.update();
return;
}
// Add new style tag to the root element
const styleEl = document.createElement('card-mod');
styleEl.template = {
template: style,
variables: params.variables,
entity_ids: params.entity_ids,
};
root.appendChild(styleEl);
debugPrint("Applied styles to:");
debugPrint(root);
} else {
Object.keys(style).forEach((k) => {
if(k === ".") {
debugPrint(`Stepping into root of ${root.tagName}`)
return applyStyle(root, style[k], params, debug?debug+1:0);
} else if(k === "$") {
debugPrint(`Stepping into ShadowRoot of ${root.tagName}`)
return applyStyle(root.shadowRoot, style[k], params, debug?debug+1:0);
} else {
debugPrint(`Searching for: "${k}". ${root.querySelectorAll(k).length} matches.`);
root.querySelectorAll(`${k}`).forEach((el) => {
debugPrint(`Stepping into ${el.tagName}`)
applyStyle(el, style[k], params, debug?debug+1:0);
});
return;
}
});
}
}