Remove clickability hack

thomasloven · Jan 30, 2022 · 21b45a5 · 21b45a5
1 parent 96dd405
commit 21b45a5
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -149,10 +149,16 @@ entities:
 
 ![options](https://user-images.githubusercontent.com/1299821/59793730-8ba54980-92d7-11e9-894b-50d8a437638a.png)
 
-- Fold entity row will try to figure out if the header should be clickable to show and hide the fold or not. If it guesses wrong, you can help it with `clickable: true` or `cickable: false`. \
-  This should only be used in exceptions, though. If your row supports `tap_action` use the `fire-dom-event` method described below instead.
+- If the header or any row in the group has the following tap-, hold- or double-tap-action defined, it will toggle the fold open or closed:
 
-- If you want the head to be clickable (with `clickable: true`) but also want a `double_tap` action defined on it, you can add `slowclick: true` to make things work better.
+```yaml
+tap_action:
+  action: fire-dom-event
+  fold_row: true
+```
+
+- Fold entity row will try to figure out if the header should be clickable to show and hide the fold or not. If it guesses wrong, you can help it with `clickable: true` or `cickable: false`. \
+  This should only be used in exceptions, though. If your row supports `tap_action` use `fire-dom-event` instead.
 
 ## Advanced
 
@@ -209,14 +215,6 @@ filter:
 
 ![image](https://user-images.githubusercontent.com/1299821/62471886-e4ed0d80-b79d-11e9-97b4-7edb721338cc.png)
 
-- If the header or any row in the group has the following tap-, hold- or double-tap-action defined, it will toggle the fold open or closed.
-
-```yaml
-tap_action:
-  action: fire-dom-event
-  fold_row: true
-```
-
 - You can disable the smooth open and close animation with `no_animation: true`
 
 ## More examples
@@ -235,6 +233,14 @@ Or you could use the vscode devcontainer and run the task "`Run hass`".
 
 ## FAQ
 
+### Why isn't the card header toggle working with all the entities in my fold?
+
+This is a limitation in Home Assistant. The header toggle will look at each entry in the `entities` card, and if it has an `entity` option, it will toggle that. Nothing more.
+
+### Why is there a line above the section row?
+
+Because that's how the [Home Assistant Section Entities Row](https://www.home-assistant.io/lovelace/entities/#section) looks.
+
 ### Why all the passive aggressivenes?
 
 I'm just So Bloody Tired of this - that's why.
@@ -245,6 +251,10 @@ NOT EVERYTHING IN LOVELACE IS A CARD!
 
 No
 
+### Why doesn't this card have a background?
+
+Please leave
+
 ---
 
 <a href="https://www.buymeacoffee.com/uqD6KHCdJ" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
diff --git a/fold-entity-row.js b/fold-entity-row.js
@@ -210,7 +210,7 @@ class FoldEntityRow extends s {
     constructor() {
         super(...arguments);
         this.entitiesWarning = false;
-        this.slowclick = false;
+        this._toggleCooldown = false;
     }
     setConfig(config) {
         var _a, _b, _c, _d;
@@ -225,8 +225,6 @@ class FoldEntityRow extends s {
                 this._config.clickable = true;
             }
         }
-        if (this._config.slowclick)
-            this.slowclick = true;
         // Items are taken from the first available of the following
         // - config entities: (this allows auto-population of the list)
         // - config items: (for backwards compatibility - not recommended)
@@ -245,7 +243,7 @@ class FoldEntityRow extends s {
             this.head = await this._createRow(head, true);
             if (this._config.clickable) {
                 actionHandlerBind(this.head, {});
-                this.head.addEventListener("action", (ev) => this._handleClick(ev), {
+                this.head.addEventListener("action", (ev) => this.toggle(ev), {
                     capture: true,
                 });
                 this.head.tabIndex = 0;
@@ -302,6 +300,12 @@ class FoldEntityRow extends s {
         await this.updateComplete;
     }
     async toggle(ev) {
+        if (ev)
+            ev.stopPropagation();
+        if (this._toggleCooldown)
+            return;
+        this._toggleCooldown = true;
+        setTimeout(() => (this._toggleCooldown = false), TRANSITION_DELAY + 50);
         this.itemsContainer.classList.add("clip");
         if (this.open) {
             await this.snapHeight(this.measureContainer.scrollHeight);
@@ -370,37 +374,6 @@ class FoldEntityRow extends s {
             this.toggle(ev);
         }
     }
-    async _handleClick(ev) {
-        // If any other action than tap is received, that must have come from the head row
-        // It will be immediately followed
-        const hc = this._handleClick;
-        if (hc.coolDown) {
-            ev.stopPropagation();
-            return;
-        }
-        // If any action other than tap is received, it must have come from the head row
-        // It will be immediately followed or preceded by a tap action which
-        // we then want to ignore. This is handled through cooldowns.
-        if (ev.detail.action !== "tap") {
-            hc.coolDown = setTimeout(() => (hc.coolDown = undefined), 300);
-            if (ev.detail.action === "double_tap")
-                hc.doubleTapped = true;
-            return;
-        }
-        const path = ev.composedPath();
-        ev.stopPropagation();
-        hc.doubleTapped = false;
-        if (this.slowclick)
-            await new Promise((resolve) => setTimeout(resolve, 250));
-        if (hc.doubleTapped)
-            return;
-        // Check if the event came from the #head div
-        // Events from the head row itself are swallowed
-        if (path[0] != this.head) {
-            return;
-        }
-        this.toggle(ev);
-    }
     render() {
         var _a;
         return p `

diff --git a/src/main.ts b/src/main.ts
@@ -80,7 +80,7 @@ class FoldEntityRow extends LitElement {
   @property() entitiesWarning = false;
   _config: FoldEntityRowConfig;
   _hass: any;
-  slowclick = false;
+  _toggleCooldown = false;
 
   @query("#items") itemsContainer;
   @query("#measure") measureContainer;
@@ -98,7 +98,6 @@ class FoldEntityRow extends LitElement {
         this._config.clickable = true;
       }
     }
-    if (this._config.slowclick) this.slowclick = true;
 
     // Items are taken from the first available of the following
     // - config entities: (this allows auto-population of the list)
@@ -122,7 +121,7 @@ class FoldEntityRow extends LitElement {
         actionHandlerBind(this.head, {});
         this.head.addEventListener(
           "action",
-          (ev: CustomEvent) => this._handleClick(ev),
+          (ev: CustomEvent) => this.toggle(ev),
           {
             capture: true,
           }
@@ -198,7 +197,11 @@ class FoldEntityRow extends LitElement {
     await this.updateComplete;
   }
 
-  async toggle(ev: Event) {
+  async toggle(ev: CustomEvent) {
+    if (ev) ev.stopPropagation();
+    if (this._toggleCooldown) return;
+    this._toggleCooldown = true;
+    setTimeout(() => (this._toggleCooldown = false), TRANSITION_DELAY + 50);
     this.itemsContainer.classList.add("clip");
     if (this.open) {
       await this.snapHeight(this.measureContainer.scrollHeight);
@@ -279,37 +282,6 @@ class FoldEntityRow extends LitElement {
     }
   }
 
-  async _handleClick(ev: CustomEvent) {
-    // If any other action than tap is received, that must have come from the head row
-    // It will be immediately followed
-    const hc = this._handleClick as any;
-    if (hc.coolDown) {
-      ev.stopPropagation();
-      return;
-    }
-    // If any action other than tap is received, it must have come from the head row
-    // It will be immediately followed or preceded by a tap action which
-    // we then want to ignore. This is handled through cooldowns.
-    if (ev.detail.action !== "tap") {
-      hc.coolDown = setTimeout(() => (hc.coolDown = undefined), 300);
-      if (ev.detail.action === "double_tap") hc.doubleTapped = true;
-      return;
-    }
-    const path = ev.composedPath();
-    ev.stopPropagation();
-    hc.doubleTapped = false;
-    if (this.slowclick)
-      await new Promise((resolve) => setTimeout(resolve, 250));
-    if (hc.doubleTapped) return;
-
-    // Check if the event came from the #head div
-    // Events from the head row itself are swallowed
-    if (path[0] != this.head) {
-      return;
-    }
-    this.toggle(ev);
-  }
-
   render() {
     return html`
       <div id="head" @ll-custom=${this._customEvent} ?open=${this.open}>

diff --git a/test/views/1_standard.yaml b/test/views/1_standard.yaml
@@ -272,20 +272,16 @@ cards:
                 fold_row: true
               hold_action:
                 action: toggle
-              double_tap_action:
-                action: toggle
             entities:
               - light.bed_light
           - type: custom:fold-entity-row
             head:
               entity: light.bed_light
               name: Double clickable
-              hold_action:
+              tap_action:
                 action: toggle
               double_tap_action:
                 action: toggle
-            clickable: true
-            slowclick: true
             entities:
               - light.bed_light
           - type: custom:fold-entity-row