Merge pull request #2 from luixal/1-request-add-tap_action

Adds support for none, toggle and call-service on click action

README.md

@@ -50,9 +50,34 @@ This card is quite simple so there are only a few options:
 | Name | Type | Default | Description |
 | ---- | ---- | ------- | ----------- |
 | type | string | `custom:media-source-image-card` | **REQUIRED** |
-| image | string | | **REQUIRED** The path to the image in media source format. i.e: media-source://media_source/local/my_image.jpg | |
+| image | string | | **REQUIRED** The path to the image in media source format. i.e: media-source://media_source/local/my_image.jpg |
 | entity_id | string | | The entity you want to toggle when card is clicked |
 | apply_grayscale | boolean | | If `true` applies a grayscale on the image when entity is `off` |
+| tap_action | string | `toggle` | Action to perform on click. One of `none`, `toggle` or `call-service`. See actions below |
+
+## Actions
+By default, when the card is clicked, it would toggle the entity. You can customize these action to be one of this:
+
+- `none`: nothing happens
+- `toggle`: the entity is toggled (default behaviour)
+- `call-service`: a service is called with a custom configuration
+
+### Call Service
+This is a simple call service example:
+
+```yaml
+type: custom:media-source-image-card
+image: media-source://media_source/local/banana.png
+entity_id: input_boolean.boolean_test
+apply_grayscale: true
+tap_action:
+  action: call-service
+  service: input_boolean.turn_on
+  target:
+    entity_id: input_boolean.boolean_test
+```
+
+If no `target` is provided, the `entity_id` field is used.
 
 ## Examples
 
@@ -85,4 +110,18 @@ entity_id: switch.light_switch
 apply_grayscale: true
 ```
 
-![basic_control_on](./images/basic_control_on.png) ![basic_control_of](./images/basic_control_off.png)
+![basic_control_on](./images/basic_control_on.png) ![basic_control_of](./images/basic_control_off.png)
+
+### Image with switching a boolean input helper using a service call
+
+```yaml
+type: custom:media-source-image-card
+image: media-source://media_source/local/banana.png
+entity_id: input_boolean.boolean_test
+apply_grayscale: true
+tap_action:
+  action: call-service
+  service: input_boolean.turn_on
+  target:
+    entity_id: input_boolean.boolean_test
+```

media-source-image-card.js

@@ -89,13 +89,24 @@ class MediaSourceImageCard extends HTMLElement {
   }
 
   handleClick() {
-    if (this.config.entity_id) this._hass.callService(
-      'homeassistant',
-      'toggle',
-      {
-        entity_id: this.config.entity_id
-      }
-    );
+    // actions: toggle, call-service, none, (unsupported -->) more-info, navigate, url
+    // handle none case:
+    if (this.config.tap_action == 'none') return;
+    // default values for toggle case:
+    let domain = 'homeassistant';
+    let service = 'toggle';
+    let target = { entity_id: this.config.entity_id };
+    let data = {};
+    // handle call-service case:
+    if (this.config.tap_action?.action == 'call-service') {
+      let _data = this.config.tap_action;
+      domain = _data.service.split('.')[0];
+      service = _data.service.split('.')[1];
+      if (_data.target) target = _data.target;
+      if (_data.data) data = _data.data;
+    }
+    // call service:
+    this._hass.callService(domain, service, target, data);
   }
 
   getCardSize() {