Add entities card tap_action

README.md

@@ -183,6 +183,43 @@ entity: alarm_control_panel.alarm
 
 ![advanced](https://user-images.githubusercontent.com/1299821/59151780-59732c80-8a39-11e9-9f19-34d3e0dbd8e9.png)
 
+# Bonus function - entities card tap\_action
+With card-mod installed, you will be able to use `tap_action` with rows in your entities cards:
+
+Example:
+```yaml
+type: entities
+entities:
+  - entity: light.bed_light
+    name: default
+  - entity: light.bed_light
+    name: toggle
+    tap_action:
+      action: toggle
+  - entity: light.bed_light
+    name: navigate
+    tap_action:
+      action: navigate
+      navigation_path: /lovelace/1
+  - entity: light.bed_light
+    name: url
+    tap_action:
+      action: url
+      url_path: https://google.com
+  - entity: light.bed_light
+    name: call-service
+    tap_action:
+      action: call-service
+      service: browser_mod.popup
+      service_data:
+        deviceID: this
+        title: Popup
+        card:
+          type: entities
+          entities:
+            - light.bed_light
+```
+
 # FAQ
 
 ### How do I convert my old card-modder configuration to card-mod?

src/apply-style.js

@@ -0,0 +1,51 @@
+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;
+      }
+    });
+  }
+}

src/card-mod.js

@@ -0,0 +1,66 @@
+import {subscribeRenderTemplate} from "/card-tools/templates.js";
+
+class CardMod extends HTMLElement {
+
+  disconnectedCallback() {
+    this._disconnect();
+  }
+  connectedCallback() {
+    this._connect();
+  }
+
+  _has_template(data) {
+    if(data.template.includes("{%")) return true;
+    if(data.template.includes("{{")) return true;
+    return false;
+  }
+
+  set template(data) {
+    this._data = data;
+    if(!this._has_template(data)) return;
+
+    if(!this._data.entity_ids && this._data.template.includes("config.entity")) {
+      if(this._data.variables.config && this._data.variables.config.entity) {
+        this._data.entity_ids = [this._data.variables.config.entity];
+      }
+    }
+  }
+
+  update() {
+    this._disconnect().then(() => this._connect());
+  }
+
+  async _connect() {
+    if(!this._data) return;
+
+    if(!this._has_template(this._data)) {
+      this.innerHTML = `<style>${this._data.template}</style>`;
+    }
+
+    if(this._unsubRenderTemplate) return;
+    this._unsubRenderTemplate = subscribeRenderTemplate(null,
+      (result) => this.innerHTML = `<style>${result}</style>`,
+      this._data);
+
+    this._unsubRenderTemplate.catch(() => {
+      this.innerHTML = `<style>${this._data.template}</style>`;
+      this._unsubRenderTemplate = undefined;
+    });
+  }
+
+  async _disconnect() {
+    if(this._unsubRenderTemplate) {
+      try {
+        const unsub = await this._unsubRenderTemplate;
+        this._unsubRenderTemplate = undefined;
+        await unsub();
+      } catch (e) {
+        if(e.code !== "not_found")
+          throw e;
+      }
+    }
+  }
+
+}
+
+customElements.define("card-mod", CardMod);

src/ha-card.js

@@ -0,0 +1,48 @@
+import {fireEvent} from "/card-tools/event.js";
+import {applyStyle} from "./apply-style.js";
+
+customElements.whenDefined('ha-card').then(() => {
+  const HaCard = customElements.get('ha-card');
+
+  const findConfig = function(node) {
+    if(node.config)
+      return node.config;
+    if(node._config)
+      return node._config;
+    if(node.host)
+      return findConfig(node.host);
+    if(node.parentElement)
+      return findConfig(node.parentElement);
+    if(node.parentNode)
+      return findConfig(node.parentNode);
+    return null;
+  };
+
+
+  HaCard.prototype.firstUpdated = function() {
+    // Move the header inside the slot instead of in the shadowDOM
+    // makes it easier to style it consistently
+    const header = this.shadowRoot.querySelector(".card-header");
+    if(header)
+    {
+      this.insertBefore(header, this.children[0]);
+    }
+
+    const config = findConfig(this);
+    if(!config || !config.style) return;
+
+    let entity_ids = config.entity_ids;
+
+    const apply = () => {
+      applyStyle(this, config.style, {
+          variables: {config},
+          entity_ids
+        }, !!config.debug_cardmod);
+    }
+
+    apply();
+    window.addEventListener("location-changed", () => apply());
+  }
+
+  fireEvent('ll-rebuild', {});
+});