[JS+Editor Module] [JS+Editor Module] Foldout Subbuttons

[Anubit93]

Foldout Subbuttons

Version: v1.1
Creator: Anubit93

Important

Unsupported cards:

• Cover
• Climate
• Horizontal buttons stack
• Media player
• Pop-up
• Select
• Separator

This module allows you to hide bottom subbuttons if a given boolean-based entity is false.
Per 1.1 any entity type is supported, though will default to look for an "on" state, unless other string is defined.
Note: Unlike regular Bubble cards, this module requires the auto height parameter set to true under Layout

Configure this module via the editor or in YAML, for example:

foldout_subbuttons:
  active_entity: switch_dishwasher_power
  entity_on_state: "on"
  animate_foldout: true

---

🧩 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 a /www/bubble/modules/foldout_subbuttons.yaml file.

foldout_subbuttons:
    name: "Foldout Subbuttons"
    version: "1.1"
    creator: "Anubit93"
    link: "https://github.com/Clooos/Bubble-Card/discussions/2382"

    supported:
        - button

    description: |
        This module allows you to hide bottom subbuttons if a given boolean-based entity is false.
        Per 1.1 any entity type is supported, though will default to look for an "on" state, unless other string is defined.
        <br><br>
        <i>Note: Unlike regular Bubble cards, this module requires the auto height parameter set to true under Layout</i>
        <br><br>
        <code-block><pre>
        foldout_subbuttons:
            active_entity: switch_dishwasher_power
            entity_on_state: "on"
            animate_foldout: true
        </pre></code-block>

    code: |
        ${(() => {
            const config = this.config.foldout_subbuttons || {};
            const hass = this._hass;
            const card = this.shadowRoot;
            if (!hass) return "";
        
            const host = this?.elements?.cardWrapper || card;

            const entity_on_state = config.entity_on_state ?? 'on';

            const activeId = config.active_entity;
            const active = hass.states[activeId]?.state === entity_on_state;
        
            const animateFoldout = config.animate_foldout ?? false;
            const foldoutRowSize = this.config.rows || this.config.grid_options?.rows;
            if(!foldoutRowSize) return "";
        
            const bubbleContainer = host?.closest?.('.bubble-container');
            if(!bubbleContainer) return "";
        
            bubbleContainer.classList.toggle('animate', animateFoldout);
        
            const subBottomContainer = bubbleContainer.querySelector('.bubble-sub-button-bottom-container');
            if(!subBottomContainer) return "";
        
            subBottomContainer.classList.toggle('hidden', !active);
        
            const subGroups = subBottomContainer.childElementCount;
            const base = 56;
            const perRow = 44;
            const height = base + (active ? (subGroups * perRow) : 0);
            bubbleContainer.style.height = `${height}px`;
        
            return "";
        })()}
        
        .bubble-container.animate {
            transition: height 0.3s ease;
        }

    editor:
      - name: active_entity
        label: Active indication entity
        selector:
          entity: {}
      - name: entity_on_state
        label: Entity on state
        default: 'on'
        selector:
          text: {}
      - name: animate_foldout
        label: Animate foldout
        selector:
          boolean: {}
      

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️

[DerHerzog7]

This is cool. Definitely gonna test it with some of my cards.

[IGOLz]

Really cool, please make it work for other entities too!

[Anubit93]

@IGOLz Good shout. I removed the filter for the entity, and simply allow anything to be picked. If it's not using "on"/"off", you'll need to specify the entity's "on" state

[muktheo]

Hi sorry for my question, is it possible to change the blue color when active?

[Anubit93]

That's not something my module really changes. If I'm not mistaken, it's just the entity state (defaults to blue for on). You should be able to adjust that, either universally or for the given card.

[alka79]

Thanks for sharing this. Very clean and robust code.
i was trying to achieve this feature on my own and your code showed me the final steps I missed. So grateful.

[Anubit93]

Happy to hear it! Sometimes it's just those last few steps :)