[JS Module] Change default card/icon actions

[Clooos]

Change default card/icon actions

Version: v1.0
Creator: Clooos

Important

Supported cards:

• Button
• Climate
• Cover
• Media Player
• Pop Up
• Select

This module allows you to customize the default tap, hold, and double-tap actions for all Bubble Cards at once ("All cards" must be enabled), including both the card and the icon.

To edit the actions, follow these steps carefully:

1. Click on the pencil icon to edit the module.
2. Expand the section labeled "Code (CSS/JS template)".
3. At the top of the code, you'll find a CONFIGURATION block written in JavaScript.
4. Modify the values inside that block to set your desired actions.
5. Don't forget to save the module after making your changes.

Even though the configuration looks similar to YAML, it follows JavaScript syntax:

• Keys and strings must be in quotes (e.g. 'navigate').
• Commas (,) are required between each item.

Example:

tap_action: {
  action: 'navigate',
  navigation_path: '/lovelace/myview'
}

You can copy existing Home Assistant YAML actions and adapt the formatting to JavaScript by adjusting quotes and adding commas where needed.

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

change_default_actions:
    name: "Change default button/icon actions"
    version: "v1.0"
    creator: "Clooos"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1714"

    supported:
        - button
        - climate
        - cover
        - media-player
        - pop-up
        - select

    description: |
        <p>
          This module allows you to customize the default <code>tap</code>, <code>hold</code>, and <code>double-tap</code> actions for all Bubble Cards at once ("All cards" must be enabled), including both the card and the icon.
        </p>
        <br>
        <p>
          To edit the actions, follow these steps carefully:
        </p>
        
        <ol>
          <li>
            Click on the
            <ha-icon icon="mdi:pencil" style="vertical-align: middle;"></ha-icon>
            pencil icon to edit the module.
          </li>
          <li>
            Expand the section labeled <strong>"Code (CSS/JS template)"</strong>.
          </li>
          <li>
            At the top of the code, you'll find a <strong>CONFIGURATION</strong> block written in JavaScript.
          </li>
          <li>
            Modify the values inside that block to set your desired actions.
          </li>
          <li>
            <strong>Don't forget to save the module</strong> after making your changes.
          </li>
        </ol>
        
        <p>
          Even though the configuration looks similar to YAML, it follows JavaScript syntax:
        </p>
        <br>
        <ul>
          <li>Keys and strings must be in quotes (e.g. <code>'navigate'</code>).</li>
          <li>Commas (<code>,</code>) are required between each item.</li>
        </ul>
        <br>
        <p>Example:</p>
        <br>
        <code-block><pre>
        tap_action: {
          action: 'navigate',
          navigation_path: '/lovelace/myview'
        }
        </pre></code-block>
        <br>
        <p>
          You can copy existing Home Assistant YAML actions and adapt the formatting to JavaScript by adjusting quotes and adding commas where needed.
        </p>
        
        <br><br>
        <code-block><pre>
        change_default_actions: 
            # Your configuration here
        </pre></code-block>

    code: |
        ${(() => {
          // === CONFIGURATION START ===
          const actions = {
            button: {
              tap_action: {
                action: 'navigate',
                navigation_path: '#test'
              },
              hold_action: {
                action: 'none'
              },
              double_tap_action: {
                action: 'none'
              }
            },
            icon: {
              tap_action: {
                action: 'navigate',
                navigation_path: '#test'
              },
              hold_action: {
                action: 'none'
              },
              double_tap_action: {
                action: 'none'
              }
            }
          };
          // === CONFIGURATION END ===
        
          const button = card.querySelector('.bubble-button-background');
          if (button) {
            if (actions.button.tap_action)
              button.setAttribute('data-tap-action', JSON.stringify(actions.button.tap_action));
            if (actions.button.hold_action)
              button.setAttribute('data-hold-action', JSON.stringify(actions.button.hold_action));
            if (actions.button.double_tap_action)
              button.setAttribute('data-double-tap-action', JSON.stringify(actions.button.double_tap_action));
          }
          
          const icon = card.querySelector('.bubble-main-icon-container');
          if (icon) {
            if (actions.icon.tap_action)
              icon.setAttribute('data-tap-action', JSON.stringify(actions.icon.tap_action));
            if (actions.icon.hold_action)
              icon.setAttribute('data-hold-action', JSON.stringify(actions.icon.hold_action));
            if (actions.icon.double_tap_action)
              icon.setAttribute('data-double-tap-action', JSON.stringify(actions.icon.double_tap_action));
          }
        })()}

---

Screenshot:

[efaden]

Trying to use this to change the default for both the button and icon to toggle and the hold to more-info. Setting the default seems to work, but overriding it for a single button seems to make no difference. .... it always seems to do the default action vs the locally defined one. Is there trick? I assumed it would do the default unless I had a local one.

[Clooos]

Hi! Sorry for the late answer, you can disable the module per card while keeping it enabled on "All cards", this is the only way.