housekeeping

iantrich · Nov 3, 2019 · 0b662a3 · 0b662a3
1 parent 323ee75
commit 0b662a3
Show file tree

Hide file tree

Showing 9 changed files with 330 additions and 335 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 Custom cards for Home Assistant
+Copyright (c) 2019 Ian Richardson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@ This card is not to be used as a means to truly protect an instance. Someone wit
 
 [![GitHub Release][releases-shield]][releases]
 [![License][license-shield]](LICENSE.md)
+[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg?style=for-the-badge)](https://github.com/custom-components/hacs)
 
 ![Project Maintenance][maintenance-shield]
 [![GitHub Activity][commits-shield]][commits]
@@ -23,12 +24,11 @@ Hey dude! Help me out for a couple of :beers: or a :coffee:!
 
 ## Installation
 
-This card is available in the [HACS (Home Assistant Community Store)](https://hacs.netlify.com)
-
-In your `resources` section add
+Use [HACS](https://hacs.xyz) or follow this [guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
 
 ```yaml
-- url: /community_plugin/restriction-card/restriction-card.js
+resources:
+  url: /local/roku-card.js
   type: module
 ```
 

diff --git a/dist/restriction-card.js b/dist/restriction-card.js
diff --git a/hacs.json b/hacs.json
@@ -0,0 +1,4 @@
+{
+    "name": "Restriction Card",
+    "render_readme": true
+}
diff --git a/package.json b/package.json
@@ -1,46 +1,46 @@
 {
-    "name": "restriction-card",
-    "version": "1.0.0",
-    "description": "Lovelace restriction-card",
-    "keywords": [
-        "home-assistant",
-        "homeassistant",
-        "hass",
-        "automation",
-        "lovelace",
-        "custom-cards"
-    ],
-    "module": "restriction-card.js",
-    "repository": "[email protected]:custom_cards/restriction-card.git",
-    "author": "BoilerPlate <[email protected]>",
-    "license": "MIT",
-    "dependencies": {
-        "custom-card-helpers": "^1.3.0",
-        "home-assistant-js-websocket": "^4.3.1",
-        "lit-element": "^2.2.1"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.5.5",
-        "@babel/plugin-proposal-class-properties": "^7.5.5",
-        "@babel/plugin-proposal-decorators": "^7.4.0",
-        "@typescript-eslint/eslint-plugin": "^2.0.0",
-        "@typescript-eslint/parser": "^2.0.0",
-        "eslint": "^6.2.2",
-        "eslint-config-airbnb-base": "^14.0.0",
-        "eslint-plugin-import": "^2.18.2",
-        "prettier": "^1.18.2",
-        "rollup": "^1.20.2",
-        "rollup-plugin-babel": "^4.3.3",
-        "rollup-plugin-node-resolve": "^5.2.0",
-        "rollup-plugin-terser": "^5.1.1",
-        "rollup-plugin-typescript2": "^0.23.0",
-        "rollup-plugin-uglify": "^6.0.2",
-        "typescript": "^3.5.3"
-    },
-    "scripts": {
-        "start": "rollup -c --watch",
-        "build": "npm run lint && npm run rollup",
-        "lint": "eslint src/*.ts",
-        "rollup": "rollup -c"
-    }
+  "name": "restriction-card",
+  "version": "1.0.0",
+  "description": "Lovelace restriction-card",
+  "keywords": [
+    "home-assistant",
+    "homeassistant",
+    "hass",
+    "automation",
+    "lovelace",
+    "custom-cards"
+  ],
+  "module": "restriction-card.js",
+  "repository": "[email protected]:custom_cards/restriction-card.git",
+  "author": "BoilerPlate <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "custom-card-helpers": "^1.3.5",
+    "home-assistant-js-websocket": "^4.4.0",
+    "lit-element": "^2.2.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.4.0",
+    "@typescript-eslint/eslint-plugin": "^2.6.0",
+    "@typescript-eslint/parser": "^2.6.0",
+    "eslint": "^6.6.0",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-plugin-import": "^2.18.2",
+    "prettier": "^1.18.2",
+    "rollup": "^1.26.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^5.1.2",
+    "rollup-plugin-typescript2": "^0.24.3",
+    "rollup-plugin-uglify": "^6.0.3",
+    "typescript": "^3.6.4"
+  },
+  "scripts": {
+    "start": "rollup -c --watch",
+    "build": "npm run lint && npm run rollup",
+    "lint": "eslint src/*.ts",
+    "rollup": "rollup -c"
+  }
 }
diff --git a/src/long-press-directive.ts → src/action-handler-directive.ts b/src/long-press-directive.ts → src/action-handler-directive.ts
@@ -1,20 +1,20 @@
 import { directive, PropertyPart } from "lit-html";
-import { LongPressOptions } from "./types";
+import { fireEvent, ActionHandlerOptions } from "custom-card-helpers";
 
 const isTouch =
   "ontouchstart" in window ||
   navigator.maxTouchPoints > 0 ||
   navigator.msMaxTouchPoints > 0;
 
-interface LongPress extends HTMLElement {
+interface ActionHandler extends HTMLElement {
   holdTime: number;
   bind(element: Element, options): void;
 }
-interface LongPressElement extends Element {
-  longPress?: boolean;
+interface ActionHandlerElement extends Element {
+  actionHandler?: boolean;
 }
 
-class LongPress extends HTMLElement implements LongPress {
+class ActionHandler extends HTMLElement implements ActionHandler {
   public holdTime: number;
   public ripple: any;
   protected timer: number | undefined;
@@ -66,11 +66,11 @@ class LongPress extends HTMLElement implements LongPress {
     });
   }
 
-  public bind(element: LongPressElement, options) {
-    if (element.longPress) {
+  public bind(element: ActionHandlerElement, options) {
+    if (element.actionHandler) {
       return;
     }
-    element.longPress = true;
+    element.actionHandler = true;
 
     element.addEventListener("contextmenu", (ev: Event) => {
       const e = ev || window.event;
@@ -99,10 +99,13 @@ class LongPress extends HTMLElement implements LongPress {
         x = (ev as MouseEvent).pageX;
         y = (ev as MouseEvent).pageY;
       }
-      this.timer = window.setTimeout(() => {
-        this.startAnimation(x, y);
-        this.held = true;
-      }, this.holdTime);
+
+      if (options.hasHold) {
+        this.timer = window.setTimeout(() => {
+          this.startAnimation(x, y);
+          this.held = true;
+        }, this.holdTime);
+      }
 
       this.cooldownStart = true;
       window.setTimeout(() => (this.cooldownStart = false), 100);
@@ -120,18 +123,18 @@ class LongPress extends HTMLElement implements LongPress {
       this.stopAnimation();
       this.timer = undefined;
       if (this.held) {
-        element.dispatchEvent(new Event("ha-hold"));
-      } else if (options.hasDoubleClick) {
+        fireEvent(element as HTMLElement, "action", { action: "hold" });
+      } else if (options.hasDoubleTap) {
         if ((ev as MouseEvent).detail === 1) {
           this.dblClickTimeout = window.setTimeout(() => {
-            element.dispatchEvent(new Event("ha-click"));
+            fireEvent(element as HTMLElement, "action", { action: "tap" });
           }, 250);
         } else {
           clearTimeout(this.dblClickTimeout);
-          element.dispatchEvent(new Event("ha-dblclick"));
+          fireEvent(element as HTMLElement, "action", { action: "double_tap" });
         }
       } else {
-        element.dispatchEvent(new Event("ha-click"));
+        fireEvent(element as HTMLElement, "action", { action: "tap" });
       }
       this.cooldownEnd = true;
       window.setTimeout(() => (this.cooldownEnd = false), 100);
@@ -142,7 +145,7 @@ class LongPress extends HTMLElement implements LongPress {
     element.addEventListener("touchcancel", clickEnd);
 
     // 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 long-press work.
+    // 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 = window.navigator.userAgent.match(/iPhone OS 13_/);
@@ -170,33 +173,33 @@ class LongPress extends HTMLElement implements LongPress {
   }
 }
 
-customElements.define("long-press-restriction", LongPress);
+customElements.define("action-handler-restriction", ActionHandler);
 
-const getLongPress = (): LongPress => {
+const geActionHandler = (): ActionHandler => {
   const body = document.body;
-  if (body.querySelector("long-press-restriction")) {
-    return body.querySelector("long-press-restriction") as LongPress;
+  if (body.querySelector("action-handler-restriction")) {
+    return body.querySelector("action-handler-restriction") as ActionHandler;
   }
 
-  const longpress = document.createElement("long-press-restriction");
-  body.appendChild(longpress);
+  const actionhandler = document.createElement("action-handler-restriction");
+  body.appendChild(actionhandler);
 
-  return longpress as LongPress;
+  return actionhandler as ActionHandler;
 };
 
-export const longPressBind = (
-  element: LongPressElement,
-  options: LongPressOptions
+export const actionHandlerBind = (
+  element: ActionHandlerElement,
+  options: ActionHandlerOptions
 ) => {
-  const longpress: LongPress = getLongPress();
-  if (!longpress) {
+  const actionhandler: ActionHandler = geActionHandler();
+  if (!actionhandler) {
     return;
   }
-  longpress.bind(element, options);
+  actionhandler.bind(element, options);
 };
 
-export const longPress = directive(
-  (options: LongPressOptions = {}) => (part: PropertyPart) => {
-    longPressBind(part.committer.element, options);
+export const actionHandler = directive(
+  (options: ActionHandlerOptions = {}) => (part: PropertyPart) => {
+    actionHandlerBind(part.committer.element, options);
   }
-);
+);
diff --git a/src/const.ts b/src/const.ts
@@ -1 +1 @@
-export const CARD_VERSION = '1.1.1';
+export const CARD_VERSION = '1.1.2';
diff --git a/src/restriction-card.ts b/src/restriction-card.ts
@@ -19,14 +19,14 @@ import {
   LovelaceCardConfig,
   evaluateFilter
 } from "custom-card-helpers";
-import { longPress } from "./long-press-directive";
 import { CARD_VERSION } from "./const";
+import { actionHandler } from "./action-handler-directive";
 
 /* eslint no-console: 0 */
 console.info(
   `%c  RESTRICTION-CARD  \n%c Version ${CARD_VERSION}      `,
-  'color: orange; font-weight: bold; background: black',
-  'color: white; font-weight: bold; background: dimgray',
+  "color: orange; font-weight: bold; background: black",
+  "color: white; font-weight: bold; background: dimgray"
 );
 
 @customElement("restriction-card")
@@ -113,11 +113,10 @@ class RestrictionCard extends LitElement implements LovelaceCard {
           ? ""
           : html`
               <div
-                @ha-click=${this._handleClick}
-                @ha-hold=${this._handleHold}
-                @ha-dblclick=${this._handleDblClick}
-                .longPress=${longPress({
-                  hasDoubleClick: this._config!.action === "double_tap"
+                @action=${this._handleAction}
+                .actionHandler=${actionHandler({
+                  hasHold: this._config!.action === "hold",
+                  hasDoubleTap: this._config!.action === "double_tap"
                 })}
                 id="overlay"
                 class="${classMap({
@@ -166,20 +165,8 @@ class RestrictionCard extends LitElement implements LovelaceCard {
     );
   }
 
-  private _handleClick(): void {
-    if (this._config!.action === "tap") {
-      this._handleRestriction();
-    }
-  }
-
-  private _handleDblClick(): void {
-    if (this._config!.action === "double_tap") {
-      this._handleRestriction();
-    }
-  }
-
-  private _handleHold(): void {
-    if (this._config!.action === "hold") {
+  private _handleAction(ev): void {
+    if (this._config!.action === ev.detail.action) {
       this._handleRestriction();
     }
   }
@@ -265,8 +252,14 @@ class RestrictionCard extends LitElement implements LovelaceCard {
         );
         --lock-margin-left: var(--restriction-lock-margin-left, 0px);
         --lock-row-margin-left: var(--restriction-lock-row-margin-left, 24px);
-        --lock-icon-height: var(--restriction-lock-icon-height, var(--iron-icon-height, 24px));
-        --lock-icon-width: var(--restriction-lock-icon-width, var(--iron-icon-width, 24px));
+        --lock-icon-height: var(
+          --restriction-lock-icon-height,
+          var(--iron-icon-height, 24px)
+        );
+        --lock-icon-width: var(
+          --restriction-lock-icon-width,
+          var(--iron-icon-width, 24px)
+        );
       }
       ha-icon {
         --iron-icon-height: var(--lock-icon-height);
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const CARD_VERSION = '1.1.1';
		export const CARD_VERSION = '1.1.2';