Decrease delays. Fix #184

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

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",

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%;
  }
  `;

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

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