Merge pull request #706 from dcapslock/expander-on-dom-event

feat: Set expander card state from another card action

Author: MelleD

README.md

@@ -76,6 +76,7 @@ Yaml Options:
 | show-button-users         | object[] | **optional**  | *                      | Choose the users that button is visible to them       |
 | start-expanded-users      | object[] | **optional**  | *                      | Choose the users that card will be start expanded for them|
 | animation                 | boolean   | _true_       | true\|false            | Should the opening/closing of expander be animated? |
+| expander-card-id          | string    | **optional** | *                      | An id to use with [Set state via action](#set-state-via-action)        |
 
 
 ### Deprecation Warning
@@ -190,6 +191,47 @@ Example with title that is clickable and has 2 nested cards with are automatical
             show_wind: speed
 ```
 
+## Set state via action
+
+You can set the state of expander card(s) using the `fire-dom-event` action on any card that supports actions.
+
+1. Set expander card(s) to have `expander-card-id`. Multiple expander cards can shared the same id if you wish to set their state together.
+2. Set action on another card using the `fire-dom-event` action.
+
+ ```yaml
+  tap_action:
+    action: fire-dom-event
+    expander-card:
+      data:
+        expander-card-id: <expander-card-id>
+        action: < open | close | toggle >
+ ```
+
+Example
+
+### Expander card config
+
+```yaml
+    - type: custom:expander-card
+      expander-card-id: my-expander-card
+```
+
+### Action on another card
+
+```yaml
+show_name: true
+show_icon: true
+type: button
+name: Expand my-expander-card
+icon: mdi:chevron-down
+tap_action:
+  action: fire-dom-event
+  expander-card:
+    data:
+      expander-card-id: my-expander-card
+      action: open
+```
+
 ## Card Mod
 
 With the help of the integration [card mod](https://github.com/thomasloven/lovelace-card-mod), the card can be flexibly adapted. This is also possible based on the card status. A CSS class “open” or “close” is always set.

src/ExpanderCard.svelte

@@ -37,7 +37,7 @@
 }}/>
 
 <script lang="ts">
-    import type { HomeAssistant } from './types';
+    import type { ExpanderCardDomEventDetail, HomeAssistant } from './types';
     import Card from './Card.svelte';
     import { onMount } from 'svelte';
     import type { ExpanderConfig } from './configtype';
@@ -59,15 +59,15 @@
     const showButtonUsers = (config['show-button-users'] === undefined || config['show-button-users']?.includes(hass?.user.name));
 
 
-    function toggleOpen() {
+    function toggleOpen(openState?: boolean) {
         if (animationTimeout) {
             clearTimeout(animationTimeout);
             animationTimeout  = null;
         }
-        const openState = !open;
+        const newOpenState = openState !== undefined ? openState : !open;
         if (config.animation) {
-            animationState = openState ? 'opening' : 'closing';
-            if (openState) {
+            animationState = newOpenState ? 'opening' : 'closing';
+            if (newOpenState) {
                 setOpenState(true);
                 animationTimeout = setTimeout(() => {
                     animationState = 'idle';
@@ -81,7 +81,7 @@
                 }, 350);
             }
         } else {
-            setOpenState(openState);
+            setOpenState(newOpenState);
             // animation state is always 'idle' if no animation
         }
     }
@@ -98,6 +98,23 @@
         }
     }
 
+    function handleDomEvent(event: Event) {
+        const data: ExpanderCardDomEventDetail = (event as CustomEvent).detail?.['expander-card']?.data;
+        if (data?.['expander-card-id'] === config['expander-card-id']) {
+            if (data.action === 'open' && !open) {
+                toggleOpen(true);
+            } else if (data.action === 'close' && open) {
+                toggleOpen(false);
+            } else if (data.action === 'toggle') {
+                toggleOpen();
+            }
+        }
+    };
+
+    function cleanup() {
+        document.body.removeEventListener('ll-custom', handleDomEvent);
+    };
+
     onMount(() => {
         const minWidthExpanded = config['min-width-expanded'];
         const maxWidthExpanded = config['max-width-expanded'];
@@ -135,6 +152,10 @@
                 setOpenState(config.expanded);
             }
         }
+
+        document.body.addEventListener('ll-custom', handleDomEvent);
+
+        return cleanup;
     });
 
     const buttonClick = (event: MouseEvent) => {

src/configtype.ts

@@ -43,4 +43,5 @@ export interface ExpanderConfig {
     'show-button-users'?: { type: string }[];
     'start-expanded-users'?: { type: string }[];
     animation?: boolean;
+    'expander-card-id'?: string;
 }

src/types.ts

@@ -24,3 +24,8 @@ export interface HuiCard extends LovelaceCard {
     load(): void;
     _element?: LovelaceCard;
 }
+
+export interface ExpanderCardDomEventDetail {
+    'expander-card-id'?: string;
+    action?: 'open' | 'close' | 'toggle';
+}