Decrease delays. Fix #184

thomasloven · Nov 7, 2021 · 6ada2d3 · 6ada2d3
1 parent 42d0202
commit 6ada2d3
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -151,6 +151,8 @@ entities:
 
 - 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`.
 
+- 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.
+
 ## Advanced
 
 - Folds can be nested

diff --git a/fold-entity-row.js b/fold-entity-row.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "fold-entity-row",
   "private": true,
-  "version": "20.0.8",
+  "version": "20.0.9",
   "description": "",
   "scripts": {
     "build": "rollup -c",

diff --git a/src/main.ts b/src/main.ts
@@ -21,6 +21,7 @@ interface FoldEntityRowConfig {
   clickable?: boolean;
   mute?: boolean;
   state_color?: boolean;
+  slowclick?: boolean;
 }
 
 const DEFAULT_CONFIG = {
@@ -79,6 +80,7 @@ class FoldEntityRow extends LitElement {
   _config: FoldEntityRowConfig;
   _hass: any;
   observer;
+  slowclick = false;
 
   setConfig(config: FoldEntityRowConfig) {
     this._config = config = Object.assign({}, DEFAULT_CONFIG, config);
@@ -90,9 +92,11 @@ class FoldEntityRow extends LitElement {
       throw new Error("No fold head specified");
     }
     if (this._config.clickable === undefined) {
-      if (head.entity === undefined && head.tap_action === undefined)
+      if (head.entity === undefined && head.tap_action === undefined) {
         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)
@@ -182,7 +186,7 @@ class FoldEntityRow extends LitElement {
   toggle(ev: Event) {
     if (this.open) {
       this.open = false;
-      setTimeout(() => (this.renderRows = false), 350);
+      setTimeout(() => (this.renderRows = false), 250);
     } else {
       this.open = true;
       this.renderRows = true;
@@ -270,7 +274,8 @@ class FoldEntityRow extends LitElement {
     const path = ev.composedPath();
     ev.stopPropagation();
     hc.doubleTapped = false;
-    await new Promise((resolve) => setTimeout(resolve, 250));
+    if (this.slowclick)
+      await new Promise((resolve) => setTimeout(resolve, 250));
     if (hc.doubleTapped) return;
 
     // Check if the event came from the #head div
@@ -305,7 +310,7 @@ class FoldEntityRow extends LitElement {
         ?open=${this.open}
         aria-hidden="${String(!this.open)}"
         aria-expanded="${String(this.open)}"
-        style=${`padding-left: ${this._config.padding}px; height: ${this.height}px;`}
+        style=${`padding-left: ${this._config.padding}px; max-height: ${this.height}px;`}
       >
         <div id="measure">${this.renderRows ? this.rows : ""}</div>
       </div>
@@ -348,7 +353,7 @@ class FoldEntityRow extends LitElement {
         padding: 0;
         margin: 0;
         overflow: hidden;
-        transition: height 0.3s ease-in-out;
+        transition: max-height 0.2s ease-in-out;
         height: 100%;
       }
     `;

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

diff --git a/test/views/2_cooperation.yaml b/test/views/2_cooperation.yaml
@@ -235,3 +235,59 @@ cards:
                   :host {
                     color: green;
                   }
+  - type: vertical-stack
+    cards:
+      - <<: *desc
+        content: |
+          ## 6: No transition
+
+          ```
+          - type: custom:fold-entity-row
+            card_mod:
+              style: |
+                #items {
+                  transition: none;
+                }
+            head: light.bed_light
+            entities:
+
+          ```
+      - type: entities
+        entities:
+          - type: custom:fold-entity-row
+            head:
+              entity: light.bed_light
+              name: Default
+            entities:
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+          - type: custom:fold-entity-row
+            card_mod:
+              style: |
+                #items {
+                  transition: none!important;
+                }
+            head:
+              entity: light.bed_light
+              name: None
+            entities:
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light
+              - light.bed_light