tap actions entities

Author: unbekannt3

src/room-card-minimalist-editor.js

@@ -189,16 +189,32 @@ class RoomCardEditor extends LitElement {
 				type: 'grid',
 				name: '',
 				schema: [
-					{
-						name: 'use_light_color',
-						label: 'Use Light Color',
-						selector: { boolean: {} },
-					},
 					{
 						name: 'tap_action',
 						label: 'Tap Action',
 						selector: { 'ui-action': {} },
 					},
+					{
+						name: 'hold_action',
+						label: 'Hold Action',
+						selector: { 'ui-action': {} },
+					},
+				],
+			},
+			{
+				type: 'grid',
+				name: '',
+				schema: [
+					{
+						name: 'double_tap_action',
+						label: 'Double Tap Action',
+						selector: { 'ui-action': {} },
+					},
+					{
+						name: 'use_light_color',
+						label: 'Use Light Color',
+						selector: { boolean: {} },
+					},
 				],
 			},
 		];

src/room-card-minimalist.js

@@ -225,7 +225,14 @@ class RoomCard extends LitElement {
 				@pointerdown=${this._handleHoldAction}
 			>
 				<div class="container">
-					<div class="content-left">
+					<div class="content-main">
+						<div class="text-content">
+							<span class="primary">${this._config.name}</span>
+							${secondary
+								? html`<span class="secondary">${secondary}</span>`
+								: ''}
+						</div>
+
 						<div class="icon-container">
 							${this._config.show_background_circle !== false
 								? html`
@@ -246,13 +253,6 @@ class RoomCard extends LitElement {
 								<ha-icon .icon=${this._config.icon} />
 							</div>
 						</div>
-
-						<div class="text-content">
-							<span class="primary">${this._config.name}</span>
-							${secondary
-								? html`<span class="secondary">${secondary}</span>`
-								: ''}
-						</div>
 					</div>
 
 					<div class="content-right">
@@ -343,6 +343,7 @@ class RoomCard extends LitElement {
 				class="state-item"
 				style="background-color: ${background_color}"
 				@click=${(e) => this._handleEntityClick(e, item)}
+				@pointerdown=${(e) => this._handleEntityHoldAction(e, item)}
 			>
 				<ha-icon
 					class="state-icon ${iconClass}"
@@ -357,6 +358,81 @@ class RoomCard extends LitElement {
 	_handleEntityClick(e, item) {
 		e.stopPropagation(); // Prevent triggering the card's main action
 
+		if (item._entityHoldFired) {
+			item._entityHoldFired = false;
+			return;
+		}
+
+		// Handle double tap
+		if (!item.double_tap_action) {
+			this._executeEntityAction(item, 'tap');
+			return;
+		}
+
+		if (item._entityClickTimer == null) {
+			item._entityClickTimer = setTimeout(() => {
+				this._executeEntityAction(item, 'tap');
+				item._entityClickTimer = null;
+			}, 200);
+		} else {
+			clearTimeout(item._entityClickTimer);
+			this._executeEntityAction(item, 'double_tap');
+			item._entityClickTimer = null;
+		}
+	}
+
+	// Handle entity hold action
+	_handleEntityHoldAction(e, item) {
+		e.preventDefault();
+		e.stopPropagation();
+
+		item._entityHoldFired = false;
+
+		const holdTimeout = setTimeout(() => {
+			item._entityHoldFired = true;
+			if (item.hold_action) {
+				this._executeEntityAction(item, 'hold');
+			}
+		}, 300);
+
+		const cleanup = () => {
+			clearTimeout(holdTimeout);
+			item._entityHoldFired = false;
+
+			e.target.removeEventListener('pointerup', endHandler);
+			e.target.removeEventListener('pointercancel', endHandler);
+			document.removeEventListener('pointerup', endHandler);
+		};
+
+		const endHandler = (e) => {
+			e.preventDefault();
+			cleanup();
+		};
+
+		e.target.addEventListener('pointerup', endHandler, { once: true });
+		e.target.addEventListener('pointercancel', endHandler, { once: true });
+		document.addEventListener('pointerup', endHandler, { once: true });
+	}
+
+	// Execute entity action based on type
+	_executeEntityAction(item, actionType) {
+		let action = this._getDefaultEntityAction(item);
+
+		// Override with custom action if provided
+		if (actionType === 'tap' && item.tap_action) {
+			action = item.tap_action;
+		} else if (actionType === 'hold' && item.hold_action) {
+			action = item.hold_action;
+		} else if (actionType === 'double_tap' && item.double_tap_action) {
+			action = item.double_tap_action;
+		}
+
+		// Execute the action
+		this._executeAction(action, item.entity);
+	}
+
+	// Get default action for entity
+	_getDefaultEntityAction(item) {
 		// Default action based on entity type
 		let action = {
 			action: 'more-info',
@@ -388,13 +464,7 @@ class RoomCard extends LitElement {
 			}
 		}
 
-		// Override with custom tap_action if provided
-		if (item.tap_action) {
-			action = item.tap_action;
-		}
-
-		// Execute the action
-		this._executeAction(action, item.entity);
+		return action;
 	}
 
 	// Execute an action
@@ -655,8 +725,8 @@ class RoomCard extends LitElement {
 				--main-color: rgb(var(--rgb-grey));
 				--icon-size: 2.5rem;
 				--icon-background-size: 3.5rem;
-				--state-icon-size: 1.2rem;
-				--state-item-size: 2rem;
+				--state-icon-size: 1.8rem;
+				--state-item-size: 45px;
 				--card-primary-font-size: 16px;
 				--card-primary-font-weight: 600;
 				--card-primary-line-height: 1.3;
@@ -686,28 +756,37 @@ class RoomCard extends LitElement {
 
 			.container {
 				display: flex;
-				align-items: center;
+				align-items: stretch;
 				justify-content: space-between;
 				padding: 16px;
-				min-height: 72px;
+				min-height: 90px;
 				position: relative;
 				z-index: 2;
 			}
 
-			.content-left {
+			.content-main {
 				display: flex;
-				align-items: center;
-				gap: 12px;
+				flex-direction: column;
+				justify-content: space-between;
 				flex: 1;
 				min-width: 0;
 			}
 
+			.text-content {
+				display: flex;
+				flex-direction: column;
+				justify-content: flex-start;
+				min-width: 0;
+				margin-bottom: 8px;
+			}
+
 			.icon-container {
 				position: relative;
 				display: flex;
 				align-items: center;
-				justify-content: center;
+				justify-content: flex-start;
 				flex-shrink: 0;
+				align-self: flex-end;
 			}
 
 			.icon-background {
@@ -735,14 +814,6 @@ class RoomCard extends LitElement {
 				filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
 			}
 
-			.text-content {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				min-width: 0;
-				flex: 1;
-			}
-
 			.primary {
 				font-weight: var(--card-primary-font-weight);
 				font-size: var(--card-primary-font-size);
@@ -831,14 +902,14 @@ class RoomCard extends LitElement {
 			@media (max-width: 768px) {
 				.container {
 					padding: 12px;
-					min-height: 64px;
+					min-height: 76px;
 				}
 
 				:host {
 					--icon-size: 2rem;
 					--icon-background-size: 3rem;
-					--state-item-size: 1.8rem;
-					--state-icon-size: 1rem;
+					--state-item-size: 38px;
+					--state-icon-size: 1.4rem;
 				}
 			}
 		`;