Merge pull request #766 from dcapslock/haptic

feat: Use haptic feedback 'light' on expander click

Author: MelleD

src/ExpanderCard.svelte

@@ -56,6 +56,7 @@
     import { onMount } from 'svelte';
     import type { ExpanderConfig } from './configtype';
     import type { AnimationState } from './types';
+    import { forwardHaptic } from './helpers/forward-haptic';
 
     const {
         hass,
@@ -219,6 +220,7 @@
             }
             return false;
         }
+        forwardHaptic(event.currentTarget as HTMLElement, 'light');
         toggleOpen();
     };
 
@@ -250,6 +252,7 @@
 
     const touchEnd = (event: TouchEvent) => {
         if (!isScrolling && touchElement === event.target && config['title-card-clickable']) {
+            forwardHaptic(touchElement, 'light');
             toggleOpen();
             touchPreventClick = true;
             // A touch event may not always be followed by a click event so we set a timeout to reset

src/helpers/forward-haptic.ts

@@ -0,0 +1,19 @@
+// Allowed types are from iOS HIG.
+// https://developer.apple.com/design/human-interface-guidelines/ios/user-interaction/feedback/#haptics
+// Implementors on platforms other than iOS should attempt to match the patterns (shown in HIG) as closely as possible.
+export type HapticType = 'success' | 'warning' | 'failure' | 'light' | 'medium' | 'heavy' | 'selection' | 'none';
+
+declare global {
+    // for fire event
+    interface HASSDomEvents {
+        haptic: HapticType;
+    }
+}
+
+export const forwardHaptic = (node: HTMLElement, hapticType: HapticType) => {
+    node.dispatchEvent?.(
+        new CustomEvent('haptic',
+            { detail: hapticType, bubbles: true, composed: true }
+        )
+    );
+};