thomas/lovelace-card-mod
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix for non-chrome browsers. Add debug information

Browse Source
This commit is contained in:
Thomas Lovén 2019-07-23 21:20:54 +02:00
parent 5cf652bd7a
commit c45bcea191
3 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -109,6 +109,8 @@ In this case, you can make `style:` a dictionary instead of a string, where each
This is not for the faint of heart.
For some extra help, add `debug_cardMod: true` to the card config, and the steps taken to apply the styling will be printed in the browser console. It can be removed later.
**Example**:
Change some things in an `alarm-panel` card.
@ -116,6 +118,7 @@ Change some things in an `alarm-panel` card.
type: alarm-panel
card_icon: mdi:bell
name: Alarm Panel
debug_cardMod: true
style:
.: |
ha-card {

2
card-mod.js
View File

File diff suppressed because one or more lines are too long

46
src/main.js
View File

@ -19,28 +19,45 @@ customElements.whenDefined('ha-card').then(() => {
return null;
};
const applyStyle = function(root, style) {
const applyStyle = function(root, style, 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(typeof style === "string") {
// Remove old styles if we're updating
if(root.querySelector(":scope >.card-mod-style"))
root.removeChild(root.querySelector(":scope > .card-mod-style"));
if(root.querySelector(".card-mod-style"))
root.removeChild(root.querySelector(".card-mod-style"));
// Add new style tag to the root element
const styleEl = document.createElement('style');
styleEl.classList = "card-mod-style";
styleEl.innerHTML = parseTemplate(style);
root.appendChild(styleEl);
if(debug) {
debugPrint("Applied styles to:")
console.log(root);
}
} else {
Object.keys(style).forEach((k) => {
if(k === ".")
return applyStyle(root, style[k]);
else if(k === "$")
return applyStyle(root.shadowRoot, style[k]);
else {
root.querySelectorAll(`:scope > ${k}`).forEach((el) => {
applyStyle(el, style[k]);
if(k === ".") {
debugPrint(`Stepping into root of ${root.tagName}`)
return applyStyle(root, style[k], debug?debug+1:0);
} else if(k === "$") {
debugPrint(`Stepping into ShadowRoot of ${root.tagName}`)
return applyStyle(root.shadowRoot, style[k], 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], debug?debug+1:0);
});
return;
}
@ -51,8 +68,13 @@ customElements.whenDefined('ha-card').then(() => {
HaCard.prototype.updated = function(_) {
// Apply styles after updates, if specified
const config = findConfig(this);
if(config && config.style)
applyStyle(this, config.style);
if(config && config.style) {
if(config.debug_cardmod)
console.log("--- APPLYING STYLES START ---");
applyStyle(this, config.style, config.debug_cardmod ? 1 : 0);
if(config.debug_cardmod)
console.log("--- APPLYING STYLES END ---");
}
}
HaCard.prototype.firstUpdated = function() {