Merge pull request #771 from dermotduffy/browser_mod

Allow custom action events (e.g. browser_mod)

README.md

@@ -1541,6 +1541,15 @@ elements:
       top: 300px
     tap_action:
       action: none
+  - type: icon
+    icon: mdi:numeric-7-box
+    title: Custom action
+    style:
+      left: 200px
+      top: 350px
+    tap_action:
+      action: fire-dom-event
+      key: value
 ```
 </details>
 
@@ -2787,7 +2796,7 @@ This could be for any number of reasons. Chromecast devices can be quite picky o
 
 **NOTE**: In particular, for Frigate to support casting of clips, the default ffmpeg settings for Frigate must be modified, i.e. Frigate does not encode clips in a Chromecast compatible format out of the box (specifically: audio must be enabled in the AAC codec, whether your camera supports audio or not). See the [Frigate Home Assistant documentation](https://docs.frigate.video/integrations/home-assistant) or [this issue](https://github.com/blakeblackshear/frigate/issues/3175) for more.
 
-### Javascript console shows `[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event`
+### Javascript console shows `[Violation] Added non-passive event listener to a scroll-blocking [...] event`
 
 This card heavily uses [Embla Carousel](https://www.embla-carousel.com/) -- a light-weight performant carousel library -- to show media. This carousel library uses non-passive event-listeners in a considered and performant way, but one that still causes occasional and unhelpful Chrome warnings. These warnings can be safely ignored in this instance, and cannot easily be fixed in the underlying library as it heavily relies on non-passive event listeners ([see this bug comment for explanation](https://github.com/davidjerleke/embla-carousel/issues/62#issuecomment-628569509)).
 

src/card.ts

@@ -331,22 +331,23 @@ export class FrigateCard extends LitElement {
       for (const action of actions) {
         // All frigate card actions will have action of 'fire-dom-event' and
         // styling only applies to those.
-        if (!action || action.action !== 'fire-dom-event') {
+        if (!action || action.action !== 'fire-dom-event' || !('frigate_card_action' in action)) {
           continue;
         }
+        const frigateCardAction = action as FrigateCardCustomAction;
         if (
           FRIGATE_CARD_VIEWS_USER_SPECIFIED.some(
             (view) =>
-              view === action?.frigate_card_action &&
-              this._view?.is(action.frigate_card_action),
+              view === frigateCardAction.frigate_card_action &&
+              this._view?.is(frigateCardAction.frigate_card_action),
           ) ||
-          (action?.frigate_card_action === 'default' &&
+          (frigateCardAction.frigate_card_action === 'default' &&
             this._view?.is(this._getConfig().view.default)) ||
-          (action?.frigate_card_action === 'fullscreen' &&
+          (frigateCardAction.frigate_card_action === 'fullscreen' &&
             screenfull.isEnabled &&
             screenfull.isFullscreen) ||
-          (action?.frigate_card_action === 'camera_select' &&
-            this._view?.camera === action.camera)
+          (frigateCardAction.frigate_card_action === 'camera_select' &&
+            this._view?.camera === frigateCardAction.camera)
         ) {
           return this._getEmphasizedStyle();
         }
@@ -1304,10 +1305,6 @@ export class FrigateCard extends LitElement {
    * @param ev The action requested.
    */
   protected _cardActionHandler(ev: CustomEvent<ActionType>): void {
-    // These interactions should only be handled by the card, as nothing
-    // upstream has the user-provided configuration.
-    ev.stopPropagation();
-
     const frigateCardAction = convertActionToFrigateCardCustomAction(ev.detail);
     if (!frigateCardAction) {
       return;

src/types.ts

@@ -167,7 +167,7 @@ const customActionSchema = schemaForType<
 >()(
   actionBaseSchema.extend({
     action: z.literal('fire-dom-event'),
-  }),
+  }).passthrough(),
 );
 const noActionSchema = schemaForType<
   NoActionConfig & ExtendedConfirmationRestrictionConfig
@@ -236,6 +236,7 @@ const actionSchema = z.union([
   urlActionSchema,
   moreInfoActionSchema,
   noActionSchema,
+  customActionSchema,
   frigateCardCustomActionSchema,
 ]);
 export type ActionType = z.infer<typeof actionSchema>;