feat(#95): add hold actions

src/controls/history-state-manager.ts

@@ -305,7 +305,7 @@ export class HueHistoryStateManager {
 
             // move to the current state
             moveResult = this._states.moveTo(state.hueId);
-        } else {
+        } else if (state != null) {
             moveResult = this._states.moveToExternal(state);
             if (!moveResult.found) {
                 // our stack is ruined, reset everything
@@ -314,6 +314,9 @@ export class HueHistoryStateManager {
                 // don't fire any functions
                 moveResult.found = false;
             }
+        } else {
+            // we're at the very beginning
+            moveResult = this._states.resetBeforeStart();
         }
 
         // execute the moveResult

src/core/action-handler.ts

@@ -27,23 +27,30 @@ export class ActionHandler {
 
         // resolve the default action
         if (action == ClickAction.Default) {
-            if (isOn) {
-                action = this.resolveDefaultWhenOn();
-            } else {
-                action = this.resolveDefaultWhenOff();
-            }
+            action = ClickAction.HueScreen;
         }
 
-        // executed resolved or config action
+        // execute resolved or config action
         this.executeClickAction(action, actionData);
     }
 
-    private resolveDefaultWhenOn(): ClickAction {
-        return ClickAction.HueScreen;
-    }
+    public handleCardHold(): void {
+        const isOn = this._ctrl.isOn();
+        let action = isOn ? this._config.onHoldAction : this._config.offHoldAction;
+        const actionData = isOn ? this._config.onHoldData : this._config.offHoldData;
 
-    private resolveDefaultWhenOff(): ClickAction {
-        return ClickAction.HueScreen;
+        // resolve the default action
+        if (action == ClickAction.Default) {
+            // more info if the card has only one light
+            if (this._ctrl.getLights().length == 1) {
+                action = ClickAction.MoreInfo;
+            } else {
+                action = ClickAction.NoAction;
+            }
+        }
+
+        // execute resolved or config action
+        this.executeClickAction(action, actionData);
     }
 
     private executeClickAction(action: ClickAction, actionData: ClickActionData) {

src/hue-like-light-card.ts

@@ -15,6 +15,7 @@ import { HueLikeLightCardConfigInterface, KnownIconSize } from './types/types-co
 import { ErrorInfo } from './core/error-info';
 import { Action } from './types/functions';
 import { VersionNotifier } from './version-notifier';
+import { Manager, Press, Tap } from '@egjs/hammerjs';
 
 // Show version info in console
 VersionNotifier.toConsole();
@@ -29,11 +30,12 @@ VersionNotifier.toConsole();
 
 @customElement(Consts.CardElementName)
 export class HueLikeLightCard extends LitElement implements LovelaceCard {
-    private _config: HueLikeLightCardConfig | undefined;
-    private _hass: HomeAssistant | undefined;
-    private _ctrl: LightController | undefined;
-    private _actionHandler: ActionHandler | undefined;
-    private _error: ErrorInfo | undefined;
+    private _config?: HueLikeLightCardConfig;
+    private _hass?: HomeAssistant;
+    private _ctrl?: LightController;
+    private _actionHandler?: ActionHandler;
+    private _error?: ErrorInfo;
+    private _mc?: HammerManager;
 
     /**
      * Off background color.
@@ -134,6 +136,16 @@ export class HueLikeLightCard extends LitElement implements LovelaceCard {
         this.updateStylesInner();
     }
 
+    private cardHolded(): void {
+        // handle the hold
+        if (this._actionHandler) {
+            this._actionHandler.handleCardHold();
+        }
+
+        // update styles
+        this.updateStylesInner();
+    }
+
     // #### UI:
 
     public static override styles = css`
@@ -348,7 +360,7 @@ export class HueLikeLightCard extends LitElement implements LovelaceCard {
         };
 
         return html`<ha-card class="${classMap(cardClass)}">
-            <div class="tap-area" @click="${(): void => this.cardClicked()}">
+            <div class="tap-area">
                 <ha-icon icon="${this._config.icon || this._ctrl.getIcon()}"></ha-icon>
                 <div class="${classMap(textClass)}">
                     <h2>${title}</h2>
@@ -361,13 +373,39 @@ export class HueLikeLightCard extends LitElement implements LovelaceCard {
         </ha-card>`;
     }
 
-    //#region updateStyles hooks
+    protected override firstUpdated(changedProperties: PropertyValues): void {
+        super.firstUpdated(changedProperties);
+        this.setupListeners();
+    }
 
     public override connectedCallback(): void {
         super.connectedCallback();
         // CSS
         this.updateStylesInner();
+        // Listeners
+        this.setupListeners();
     }
 
-    //#endregion
+    public override disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.destroyListeners();
+    }
+
+    private setupListeners() {
+        const tapArea = this.renderRoot.querySelector('.tap-area');
+        if (tapArea && !this._mc) {
+            this._mc = new Manager(tapArea);
+            this._mc.add(new Press());
+            this._mc.on('press', ():void => { this.cardHolded(); });
+            this._mc.add(new Tap());
+            this._mc.on('tap', ():void => { this.cardClicked(); });
+        }
+    }
+
+    private destroyListeners() {
+        if (this._mc) {
+            this._mc.destroy();
+            this._mc = undefined;
+        }
+    }
 }

src/types/config.ts

@@ -33,6 +33,10 @@ export class HueLikeLightCardConfig implements HueLikeLightCardConfigInterface {
         this.offClickData = new ClickActionData(plainConfig.offClickData);
         this.onClickAction = HueLikeLightCardConfig.getClickAction(plainConfig.onClickAction);
         this.onClickData = new ClickActionData(plainConfig.onClickData);
+        this.offHoldAction = HueLikeLightCardConfig.getClickAction(plainConfig.offHoldAction);
+        this.offHoldData = new ClickActionData(plainConfig.offHoldData);
+        this.onHoldAction = HueLikeLightCardConfig.getClickAction(plainConfig.onHoldAction);
+        this.onHoldData = new ClickActionData(plainConfig.onHoldData);
         this.allowZero = HueLikeLightCardConfig.getBoolean(plainConfig.allowZero, false);
         this.theme = plainConfig.theme || Consts.ThemeDefault;
         this.defaultColor = plainConfig.defaultColor || Consts.DefaultColor;
@@ -182,6 +186,10 @@ export class HueLikeLightCardConfig implements HueLikeLightCardConfigInterface {
     public readonly offClickData: ClickActionData;
     public readonly onClickAction: ClickAction;
     public readonly onClickData: ClickActionData;
+    public readonly offHoldAction: ClickAction;
+    public readonly offHoldData: ClickActionData;
+    public readonly onHoldAction: ClickAction;
+    public readonly onHoldData: ClickActionData;
     public readonly allowZero: boolean;
     public readonly theme: string;
     public readonly defaultColor: string;

src/types/types-config.ts

@@ -193,6 +193,10 @@ export interface HueLikeLightCardConfigInterface extends ConfigEntityInterface {
     readonly offClickData?: string | Record<string, string> | ClickActionData;
     readonly onClickAction?: ClickAction;
     readonly onClickData?: string | Record<string, string> | ClickActionData;
+    readonly offHoldAction?: ClickAction;
+    readonly offHoldData?: string | Record<string, string> | ClickActionData;
+    readonly onHoldAction?: ClickAction;
+    readonly onHoldData?: string | Record<string, string> | ClickActionData;
     readonly allowZero?: boolean;
     readonly theme?: string;
     readonly defaultColor?: string;