1.1.0

Update action-handler

Author: iantrich

package.json

@@ -1,6 +1,6 @@
 {
   "name": "roku-card",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "Lovelace Roku Card",
   "keywords": [
     "home-assistant",
@@ -16,7 +16,7 @@
   "author": "Ian Richardson <iantrich@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "custom-card-helpers": "^1.3.9",
+    "custom-card-helpers": "^1.6.3",
     "home-assistant-js-websocket": "^4.4.0",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.2"

src/action-handler-directive.ts

@@ -1,34 +1,38 @@
 import { directive, PropertyPart } from 'lit-html';
-import { fireEvent, ActionHandlerOptions } from 'custom-card-helpers';
+
+import { fireEvent, ActionHandlerDetail, 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;
+
   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 +42,7 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       height: isTouch ? '100px' : '50px',
       transform: 'translate(-50%, -50%)',
       pointerEvents: 'none',
+      zIndex: '999',
     });
 
     this.appendChild(this.ripple);
@@ -72,13 +77,10 @@ class ActionHandler extends HTMLElement implements ActionHandler {
       }
       e.cancelBubble = true;
       e.returnValue = false;
-      return;
+      return false;
     });
 
-    const clickStart = (ev: Event): void => {
-      if (this.cooldownStart) {
-        return;
-      }
+    const start = (ev: Event): void => {
       this.held = false;
       let x;
       let y;
@@ -94,56 +96,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 {
@@ -164,15 +160,15 @@ class ActionHandler extends HTMLElement implements ActionHandler {
   }
 }
 
-customElements.define('action-handler-roku', ActionHandler);
+customElements.define('action-handler-roku-card', ActionHandler);
 
 const getActionHandler = (): ActionHandler => {
   const body = document.body;
-  if (body.querySelector('action-handler-roku')) {
-    return body.querySelector('action-handler-roku') as ActionHandler;
+  if (body.querySelector('action-handler-roku-card')) {
+    return body.querySelector('action-handler-roku-card') as ActionHandler;
   }
 
-  const actionhandler = document.createElement('action-handler-roku');
+  const actionhandler = document.createElement('action-handler-roku-card');
   body.appendChild(actionhandler);
 
   return actionhandler as ActionHandler;
@@ -187,5 +183,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/roku-card.ts

@@ -162,8 +162,7 @@ export class RokuCard extends LitElement {
             @action=${this._handleAction}
             .actionHandler=${actionHandler({
               hasHold: hasAction(this._config.apps[index].hold_action),
-              hasDoubleTap: hasAction(this._config.apps[index].double_tap_action),
-              repeat: this._config.apps[index].hold_action ? this._config.apps[index].hold_action!.repeat : undefined,
+              hasDoubleClick: hasAction(this._config.apps[index].double_tap_action),
             })}
           />
         `
@@ -187,8 +186,7 @@ export class RokuCard extends LitElement {
               @action=${this._handleAction}
               .actionHandler=${actionHandler({
                 hasHold: config && hasAction(config.hold_action),
-                hasDoubleTap: config && hasAction(config.double_tap_action),
-                repeat: config && config.hold_action ? config.hold_action.repeat : undefined,
+                hasDoubleClick: config && hasAction(config.double_tap_action),
               })}
             ></paper-icon-button>
           `;