Fix double_tap action

Fixes #38

.devcontainer/ui-lovelace.yaml

@@ -3,6 +3,19 @@ resources:
     type: module
 views:
   - cards:
+      - entities:
+          - action: double_tap
+            card:
+              entity: light.kitchen_lights
+            restrictions:
+              confirm:
+                text: Are you sure you want to restart HA?
+            row: true
+            type: 'custom:restriction-card'
+        show_header_toggle: false
+        state_color: true
+        title: System Utils
+        type: entities
       - type: custom:restriction-card
         unlocked_icon: mdi:lock-open-outline
         locked_icon: mdi:update

package.json

@@ -1,6 +1,6 @@
 {
   "name": "restriction-card",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "Lovelace restriction-card",
   "keywords": [
     "home-assistant",

src/action-handler-directive.ts

@@ -1,34 +1,37 @@
 import { directive, PropertyPart } from 'lit-html';
-import { fireEvent, ActionHandlerOptions } from 'custom-card-helpers';
+import { ActionHandlerDetail, fireEvent, ActionHandlerOptions } from 'custom-card-helpers';
 
 const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
 
 interface ActionHandler extends HTMLElement {
   holdTime: number;
   bind(element: Element, options): void;
 }
-interface ActionHandlerElement extends Element {
+interface ActionHandlerElement extends HTMLElement {
   actionHandler?: boolean;
 }
 
+declare global {
+  interface HASSDomEvents {
+    action: ActionHandlerDetail;
+  }
+}
+
 class ActionHandler extends HTMLElement implements ActionHandler {
-  public holdTime: number;
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  public holdTime = 500;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public ripple: any;
-  protected timer: number | undefined;
-  protected held: boolean;
-  protected cooldownStart: boolean;
-  protected cooldownEnd: boolean;
-  private dblClickTimeout: number | undefined;
+
+  protected timer?: number;
+
+  protected held = false;
+
+  private dblClickTimeout?: number;
 
   constructor() {
     super();
-    this.holdTime = 500;
     this.ripple = document.createElement('mwc-ripple');
-    this.timer = undefined;
-    this.held = false;
-    this.cooldownStart = false;
-    this.cooldownEnd = false;
   }
 
   public connectedCallback(): void {
@@ -38,6 +41,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       height: isTouch ? '100px' : '50px',
       transform: 'translate(-50%, -50%)',
       pointerEvents: 'none',
+      zIndex: '999',
     });
 
     this.appendChild(this.ripple);
@@ -75,10 +79,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       return;
     });
 
-    const clickStart = (ev: Event): void => {
-      if (this.cooldownStart) {
-        return;
-      }
+    const start = (ev: Event): void => {
       this.held = false;
       let x;
       let y;
@@ -94,56 +95,50 @@ class ActionHandler extends HTMLElement implements ActionHandler {
         this.startAnimation(x, y);
         this.held = true;
       }, this.holdTime);
-
-      this.cooldownStart = true;
-      window.setTimeout(() => (this.cooldownStart = false), 100);
     };
 
-    const clickEnd = (ev: Event): void => {
-      if (this.cooldownEnd || (['touchend', 'touchcancel'].includes(ev.type) && this.timer === undefined)) {
+    const end = (ev: Event): void => {
+      // Prevent mouse event if touch event
+      ev.preventDefault();
+      if (['touchend', 'touchcancel'].includes(ev.type) && this.timer === undefined) {
         return;
       }
       clearTimeout(this.timer);
       this.stopAnimation();
       this.timer = undefined;
       if (this.held) {
-        fireEvent(element as HTMLElement, 'action', { action: 'hold' });
-      } else if (options.hasDoubleTap) {
-        if ((ev as MouseEvent).detail === 1 || ev.type === 'keyup') {
+        fireEvent(element, 'action', { action: 'hold' });
+      } else if (options.hasDoubleClick) {
+        if ((ev.type === 'click' && (ev as MouseEvent).detail < 2) || !this.dblClickTimeout) {
           this.dblClickTimeout = window.setTimeout(() => {
-            fireEvent(element as HTMLElement, 'action', { action: 'tap' });
+            this.dblClickTimeout = undefined;
+            fireEvent(element, 'action', { action: 'tap' });
           }, 250);
         } else {
           clearTimeout(this.dblClickTimeout);
-          fireEvent(element as HTMLElement, 'action', { action: 'double_tap' });
+          this.dblClickTimeout = undefined;
+          fireEvent(element, 'action', { action: 'double_tap' });
         }
       } else {
-        fireEvent(element as HTMLElement, 'action', { action: 'tap' });
+        fireEvent(element, 'action', { action: 'tap' });
       }
-      this.cooldownEnd = true;
-      window.setTimeout(() => (this.cooldownEnd = false), 100);
     };
 
-    const handleEnter = (ev: Event): void => {
-      if ((ev as KeyboardEvent).keyCode === 13) {
-        return clickEnd(ev);
+    const handleEnter = (ev: KeyboardEvent): void => {
+      if (ev.keyCode !== 13) {
+        return;
       }
+      end(ev);
     };
 
-    element.addEventListener('touchstart', clickStart, { passive: true });
-    element.addEventListener('touchend', clickEnd);
-    element.addEventListener('touchcancel', clickEnd);
-    element.addEventListener('keyup', handleEnter);
+    element.addEventListener('touchstart', start, { passive: true });
+    element.addEventListener('touchend', end);
+    element.addEventListener('touchcancel', end);
 
-    // iOS 13 sends a complete normal touchstart-touchend series of events followed by a mousedown-click series.
-    // That might be a bug, but until it's fixed, this should make action-handler work.
-    // If it's not a bug that is fixed, this might need updating with the next iOS version.
-    // Note that all events (both touch and mouse) must be listened for in order to work on computers with both mouse and touchscreen.
-    const isIOS13 = /iPhone OS 13_/.test(window.navigator.userAgent);
-    if (!isIOS13) {
-      element.addEventListener('mousedown', clickStart, { passive: true });
-      element.addEventListener('click', clickEnd);
-    }
+    element.addEventListener('mousedown', start, { passive: true });
+    element.addEventListener('click', end);
+
+    element.addEventListener('keyup', handleEnter);
   }
 
   private startAnimation(x: number, y: number): void {
@@ -153,12 +148,12 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       display: null,
     });
     this.ripple.disabled = false;
-    this.ripple.active = true;
+    this.ripple.startPress();
     this.ripple.unbounded = true;
   }
 
   private stopAnimation(): void {
-    this.ripple.active = false;
+    this.ripple.endPress();
     this.ripple.disabled = true;
     this.style.display = 'none';
   }
@@ -187,5 +182,5 @@ export const actionHandlerBind = (element: ActionHandlerElement, options: Action
 };
 
 export const actionHandler = directive((options: ActionHandlerOptions = {}) => (part: PropertyPart): void => {
-  actionHandlerBind(part.committer.element, options);
+  actionHandlerBind(part.committer.element as ActionHandlerElement, options);
 });

src/const.ts

@@ -1 +1 @@
-export const CARD_VERSION = '1.2.5';
+export const CARD_VERSION = '1.2.6';