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. 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**: **Example**:
Change some things in an `alarm-panel` card. Change some things in an `alarm-panel` card.
@ -116,6 +118,7 @@ Change some things in an `alarm-panel` card.
type: alarm-panel type: alarm-panel
card_icon: mdi:bell card_icon: mdi:bell
name: Alarm Panel name: Alarm Panel
debug_cardMod: true
style: style:
.: | .: |
ha-card { 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; 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(!root || !style) return;
if(typeof style === "string") { if(typeof style === "string") {
// Remove old styles if we're updating // Remove old styles if we're updating
if(root.querySelector(":scope >.card-mod-style")) if(root.querySelector(".card-mod-style"))
root.removeChild(root.querySelector(":scope > .card-mod-style")); root.removeChild(root.querySelector(".card-mod-style"));
// Add new style tag to the root element // Add new style tag to the root element
const styleEl = document.createElement('style'); const styleEl = document.createElement('style');
styleEl.classList = "card-mod-style"; styleEl.classList = "card-mod-style";
styleEl.innerHTML = parseTemplate(style); styleEl.innerHTML = parseTemplate(style);
root.appendChild(styleEl); root.appendChild(styleEl);
if(debug) {
debugPrint("Applied styles to:")
console.log(root);
}
} else { } else {
Object.keys(style).forEach((k) => { Object.keys(style).forEach((k) => {
if(k === ".") if(k === ".") {
return applyStyle(root, style[k]); debugPrint(`Stepping into root of ${root.tagName}`)
else if(k === "$") return applyStyle(root, style[k], debug?debug+1:0);
return applyStyle(root.shadowRoot, style[k]); } else if(k === "$") {
else { debugPrint(`Stepping into ShadowRoot of ${root.tagName}`)
root.querySelectorAll(`:scope > ${k}`).forEach((el) => { return applyStyle(root.shadowRoot, style[k], debug?debug+1:0);
applyStyle(el, style[k]); } 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; return;
} }
@ -51,8 +68,13 @@ customElements.whenDefined('ha-card').then(() => {
HaCard.prototype.updated = function(_) { HaCard.prototype.updated = function(_) {
// Apply styles after updates, if specified // Apply styles after updates, if specified
const config = findConfig(this); const config = findConfig(this);
if(config && config.style) if(config && config.style) {
applyStyle(this, 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() { HaCard.prototype.firstUpdated = function() {