[Styling Module+JS+Editor Module] Collapsible Sub Button Groups

[Alefriedo]

Collapsible Sub Button Groups

Version: 1.2.2
Creator: Alefriedo

Important

Supported cards:

• Button
• Calendar
• Climate
• Cover
• Media Player
• Select
• Sub Buttons

Breaking change in 1.2.0: Default action type is set to tap, action type is now choosable.

Turns a sub-button group into a collapsible menu. All buttons except the main button are hidden by default and reveald with a double tap. The menu can be closed by the automatically inserted close button.

Configure which group to collapse via its index (0 = first group, 1 = second, etc.), and choose the main button by position (first or last) or by a custom CSS class name (e.g. "bubble-sub-button-1" or the automatically generated class by giving the button a custom name). Multiple groups can be configured as collapsible menu.

If a double-tap action is set to the main button, it will be removed while using this module.

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

collapsible_sub_button_groups:
  groupsConfig:
    - groupIndex: <int> (required)
      actionType: < tap | double_tap | hold > (defaults to tap)
      mainButtonType: <first | last | custom> (defaults to first)
      mainButtonCustomClass: <string> (only required if mainButtonType is set to custom)
  styling: (optional)
    backgroundColor: < color name | hex code | rgba >
    allowOverflow: < true | false > (defaults to false)

---

🧩 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/collapsible_sub_button_groups.yaml file.

collapsible_sub_button_groups:
  name: Collapsible Sub Button Groups
  version: 1.2.1
  creator: Alefriedo
  supported:
    - button
    - calendar
    - climate
    - cover
    - media-player
    - select
    - sub-buttons
  description: |-
    <h2>Collapsible Sub Button Menu</h2>
    <h3>Breaking Change in 1.2.0: Default action type is set to tap, action type is now choosable.</h3>
    <p>
      Turns a sub-button group into a collapsible menu. All buttons except the main button are hidden by default and reveald with a double tap. The menu can be closed by the automatically inserted close button. 
    </p> <br>
    <p>
      Configure which group to collapse via its index (0 = first group, 1 = second, etc.), and choose the main button by position (first or last) or by a custom CSS class name (e.g. "bubble-sub-button-1" or the automatically generated class by giving the button a custom name). Multiple groups can be configured as collapsible menu.
    </p> <br>
    <p>
      If a double-tap action is set to the main button, it will be removed while using this module.
    </p> <br><br>

    <p>
    Configure this module via the editor or in YAML, for example:
    </p>
    <code-block><pre>
    collapsible_sub_button_groups:
      groupsConfig:
        - groupIndex: &lt; int &gt; (required)
          actionType: &lt; tap | double_tap | hold &gt; (defaults to tap)
          mainButtonType: &lt; first | last | custom &gt; (defaults to first)
          mainButtonCustomClass: &lt; string &gt; (only required if mainButtonType is set to class name)
      styling:
        backgroundColor: &lt; color | hexcode | rgba &gt;
        allowOverflow: &lt; true | false &gt; (defaults to false)
    </pre></code-block>
  code: |-
    .bubble-button-card:has(.collapsible).collapsible-allow-overflow {
      overflow: visible !important;
    }

    .bubble-container:has(.collapsible).collapsible-allow-overflow {
      overflow: visible !important;
    }
        
    .bubble-container:has(.collapsible) .bubble-sub-button-group {
      display: flex !important;
      min-height: auto !important;
    }

    .bubble-sub-button-group.collapsible.expanded {
      min-height: var(--bubble-sub-button-height, 36px) !important;
    }


    .bubble-container:has(.collapsible) .bubble-sub-button-group.collapsible .collapsible-floating-group {
      position: relative !important;
      
      display: flex !important;
      flex-wrap: nowrap !important;
      flex-direction: row !important;
      justify-content: flex-end !important;
      align-items: space-around !important;

      min-height: var(--bubble-sub-button-height, 36px) !important;

      background-color: none !important;
      border-radius: 9999px !important;

      z-index: 97 !important;
    }

    .bubble-container:has(.collapsible) .bubble-sub-button-group.collapsible.expanded .collapsible-floating-group{
      position: absolute !important;
      background-color: var(--collapsible-background-color, #1c1c1c) !important;  width: max-content !important;
      
    }

    .bubble-container:has(.collapsible) .bubble-sub-button-group.collapsible .collapsible-floating-group .collapsible-button-container {
      position: relative !important;
      display: flex !important;
      flex-direction: row !important;
      gap: 8px !important;
    }

    .bubble-container:has(.collapsible) .bubble-sub-button-group.collapsible .collapsible-floating-group .collapsible-button-container .bubble-sub-button:not(.collapsible-main-btn) {
      position: absolute !important;
      opacity: 0 !important;
      flex-shrink: 1 !important;
      transition: none !important;
      pointer-events: none !important;
    }

    .bubble-container:has(.collapsible) .bubble-sub-button-group.collapsible.expanded .collapsible-floating-group .collapsible-button-container .bubble-sub-button {
      padding: 0 !important;
    }

    .bubble-container:has(.collapsible) .bubble-sub-button-group.collapsible.expanded .collapsible-floating-group .collapsible-button-container .bubble-sub-button:not(.collapsible-main-btn) {
      position: relative !important;
      opacity: 1 !important;
      flex-shrink: 0 !important;
      pointer-events: auto !important;
    }

    .bubble-container:has(.collapsible) .bubble-sub-button-group.collapsible .collapsible-floating-group .collapsible-button-container .collapsible-close-btn {
      cursor: pointer !important;
      pointer-events: auto !important;
    }

    .bubble-container:has(.collapsible) .bubble-sub-button-group.collapsible .collapsible-floating-group.sliderContainer {
      overflow: hidden !important;
    }


    ${(() => {
      const groupsConfig = this.config.collapsible_sub_button_groups?.groupsConfig ?? [];
      if (!groupsConfig.length) return '';

      groupsConfig.forEach(groupConfig => {
        const groupIndex = groupConfig.groupIndex;
        if (groupIndex === undefined) return '';
        const groups = card.querySelectorAll('.bubble-sub-button-group');
        const group = groups[groupIndex];
        if (!group) return;

        // set custom background color globally
        const menuBackground = this.config.collapsible_sub_button_groups?.styling?.backgroundColor || null;
        if (menuBackground) {
          group.style.setProperty('--collapsible-background-color', menuBackground);
        } else {
          group.style.removeProperty('--collapsible-background-color');
        }

        // set allowence of overflow of the menu
        const allowOverflow = this.config.collapsible_sub_button_groups?.styling?.allowOverflow || null;
        if (allowOverflow) {
          card.querySelector('.bubble-container').classList.add('collapsible-allow-overflow');
          card.querySelector('.bubble-button-card').classList.add('collapsible-allow-overflow');
        }

        const actionType = groupConfig.actionType ?? 'tap';
        const mainButtonType = groupConfig.mainButtonType ?? 'first';
        const mainButtonCustomClass = (groupConfig.mainButtonCustomClass ?? '').replace(/^\./, '');
        const buttons = group.querySelectorAll('.bubble-sub-button:not(.collapsible-close-btn)');
      
        if (mainButtonType == 'first') {
          buttons[0].classList.add('collapsible-main-btn');
        } else if (mainButtonType == 'last') {
          buttons[buttons.length - 1].classList.add('collapsible-main-btn');
        } else if (mainButtonType == 'custom' && mainButtonCustomClass != '') {
          group.querySelector(`.bubble-sub-button.${mainButtonCustomClass}`)?.classList.add('collapsible-main-btn');
        } else {
          buttons[0].classList.add('collapsible-main-btn');
        }

        const mainButton = group.querySelector('.collapsible-main-btn');
        if(!mainButton) return;

        if (!card._collapsibleOriginalActions) {
          card._collapsibleOriginalActions = {};
        }

        // store default actions of main button
        if (!card._collapsibleOriginalActions[groupIndex]) {
          card._collapsibleOriginalActions[groupIndex] = {
            tap: mainButton.getAttribute('data-tap-action'),
            double_tap: mainButton.getAttribute('data-double-tap-action'),
            hold: mainButton.getAttribute('data-hold-action')
          };
        }

        // unset default actions of main button
        mainButton.setAttribute('data-tap-action', '{"action":"none"}');
        mainButton.setAttribute('data-double-tap-action', '{"action":"none"}');
        mainButton.setAttribute('data-hold-action', '{"action":"none"}');

        // setup collapsible menu
        if (!group.querySelector('.collapsible-close-btn')) {
          group.classList.add('collapsible');
          group.classList.replace('display-column', 'display-inline');

          // add floating group preventing interference with other buttons/groups
          const floatingGroup = document.createElement('div');
          floatingGroup.classList.add('collapsible-floating-group');
          group.appendChild(floatingGroup);
          const buttonContainer = document.createElement('div');
          buttonContainer.classList.add('collapsible-button-container');
          buttons.forEach(b => buttonContainer.appendChild(b));

          // insert close button
          const closeButtonElement = document.createElement('div');
          closeButtonElement.className = 'bubble-sub-button collapsible-close-btn';
          closeButtonElement.innerHTML = '<ha-icon class="bubble-sub-button-icon show-icon icon-without-state" icon="mdi:chevron-right"></ha-icon>';
          buttonContainer.insertBefore(closeButtonElement, buttonContainer.firstChild);

          floatingGroup.appendChild(buttonContainer);
        }

        if (!mainButton._collapsibleBound) {
          mainButton._collapsibleBound = true;
          
          mainButton.addEventListener('pointerdown', e => {
            const group = e.target.closest('.bubble-sub-button-group');
            group._holdTimer = setTimeout(() => {
              if(actionType == 'hold' && !group.classList.contains('expanded')) {
                group.classList.add('expanded');
              } else {
                mainButton.dispatchEvent(new CustomEvent('hass-action', {
                  detail: { config: { entity: mainButton.dataset.entity, hold_action: JSON.parse(card._collapsibleOriginalActions[groupIndex].hold) }, action: 'hold' },
                  bubbles: true, composed: true
                }));
              }

              group._holdTimer = null;
            }, 500);
          }, true);

          mainButton.addEventListener('click', e => {
              const group = e.target.closest('.bubble-sub-button-group');
              // reset hold timer, if button not held long enough
              if(group._holdTimer) {
                clearTimeout(group._holdTimer);
                group._holdTimer = null;
              }

              // passthrough for synthetic click opening the slider or dropdown menu of a main sub button
              if (mainButton._timeoutClick) {
                mainButton._timeoutClick = false;
                return;
              }

              // if the sub button group is expanded, use default tap action
              // if (group.classList.contains('expanded')) return;

              // timeout waiting for double click to prevent the tap action firing when its actually a double click
              if (mainButton._clickTimer) {
                clearTimeout(mainButton._clickTimer);
                mainButton._clickTimer = null;
                e.stopPropagation();
                return;
              }
              
              e.stopPropagation();
              
              mainButton._clickTimer = setTimeout(() => {
                mainButton._clickTimer = null;
                
                const mainButtonIndex = [...mainButton.classList].find(c => /^bubble-sub-button-\d+$/.test(c))?.match(/\d+/)?.[0];
                const mainButtonIsSlider = mainButtonIndex && !!card.querySelector(`.bubble-sub-button-slider-${mainButtonIndex}`);
                const mainButtonHasDropdown = !!mainButton.querySelector('.bubble-dropdown-container');
                // fire synthetic click if main sub button has a slider or a dropdown menu to open them else use default tap action
                if (actionType == 'tap' && !group.classList.contains('expanded')) {
                  group.classList.add('expanded');
                } else if(mainButtonIsSlider || mainButtonHasDropdown) {
                  mainButton._timeoutClick = true;
                  mainButton.click();
                } else {
                  mainButton.dispatchEvent(new CustomEvent('hass-action', {
                    detail: { config: { entity: mainButton.dataset.entity, tap_action: JSON.parse(card._collapsibleOriginalActions[groupIndex].tap) }, action: 'tap' },
                    bubbles: true, composed: true
                  }));
                }
              }, 250);              
            }, true);
          
          mainButton.addEventListener('dblclick', (e) => {
            e.stopPropagation();
            
            // reset click timer if running
            if(mainButton._clickTimer) {
              clearTimeout(mainButton._clickTimer);
              mainButton._clickTimer = null;
            }

            // fire initial double tap event if group is expanded
            const group = mainButton.closest('.bubble-sub-button-group');
            if (actionType == 'double_tap' && !group.classList.contains('expanded')) {
              group.classList.add('expanded');
            } else {
              mainButton.dispatchEvent(new CustomEvent('hass-action', {
                detail: { config: { entity: mainButton.dataset.entity, double_tap_action: JSON.parse(card._collapsibleOriginalActions[groupIndex].double_tap) }, action: 'double_tap' },
                bubbles: true, composed: true
              }));
              return;
            }
          }, true);

          // setup event listener of close button
          group.addEventListener('click', (e) => {
            const closeButton = e.target.closest('.collapsible-close-btn');
            if (!closeButton) return;
            e.preventDefault();
            group.classList.remove('expanded');
          });
        }
      });

      return ''
    })()}
  editor:
    - name: groupsConfig
      label: Collapsible Groups
      selector:
        object:
          fields:
            groupIndex:
              label: Group index
              selector:
                number:
                  min: 0
                  max: 100
                  step: 1
                  mode: box
            actionType:
              label: Action Type
              selector:
                select:
                  options:
                    - label: Tap
                      value: tap
                    - label: Double Tap
                      value: double_tap
                    - label: Hold
                      value: hold
            mainButtonType:
              label: Main Button
              selector:
                select:
                  options:
                    - label: First Button
                      value: first
                    - label: Last Button
                      value: last
                    - label: Identified by class name
                      value: custom
            mainButtonCustomClass:
              label: Class name of main button
              selector:
                text: null
          label_field: groupIndex
          description_field: mainButtonType
          multiple: true
    - type: expandable
      name: styling
      title: Styling
      icon: mdi:palette
      expanded: false
      schema:
        - name: backgroundColor
          label: color name, hex code or rgba
          selector:
            text: {}
        - name: allowOverflow
          label: Allow overflow of sub button menu outside of card
          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 ❤️

[Alefriedo]

Its the first time I am sharing something like this. Feedback is very appreciated.

[DerHerzog7]

Ok this is awesome. I have been looking for something like this. Does it work with room card?

[DerHerzog7]

So just tried to add it to a room card I was working on. Works well for a standard Button card ie/ on/off. But I tried to make the main button a standard bubble card slider, and the slider doesnt appear on tap. It does if this module isn't applied.

Also, can you clarify what main button custom class is?

[Alefriedo]

I've made some changes, I think it's working now with the drawer. Only limitation right now is that the group can't overlap the card.

[DerHerzog7]

I've made some changes, I think it's working now with the drawer. Only limitation right now is that the group can't overlap the card.

Amazing. I'll give it a shot.

[DerHerzog7]

I've made some changes, I think it's working now with the drawer. Only limitation right now is that the group can't overlap the card.

Holy crap you did it. It works great. It even fixes some of the formatting issues that room card plus has by default with the drawer!

What did you do?

[Alefriedo]

That's funny. I minimalzied the CSS and introduced an injected container to prevent interfering with other button groups if the groups layout is set to inline.

The majority of the styling is limited to the injected container. The only thing I changed, which could affect the room card, is the change of the sub button group to be flexbox and not grid.

[DerHerzog7]

That's funny. I minimalzied the CSS and introduced an injected container to prevent interfering with other button groups if the groups layout is set to inline.

The majority of the styling is limited to the injected container. The only thing I changed, which could affect the room card, is the change of the sub button group to be flexbox and not grid.

I thank you good sir/madam.

[githoss]

Hi @Alefriedo . Thanks for this! I think this is one of the better approaches for packing more sub-buttons into limited space.

I'm wondering if you can make an option to trigger expansion with a single tap instead of double tap?

I'll give this a shot myself in the code, but I'm a novice, so we'll see.. Thanks again!

[Alefriedo]

Can you check out the update and let me know if it works for you?

[githoss]

Nice! Thanks for getting to this so quickly! The single-tap option is great 🎉

I could definitely work with it as-is, but some quick findings in case you wanted it :)

Here's the card I'm using it with. The collapsible button is the top-left one (light bulbs). I nested 3 sub-buttons using your module:

So when the expansion happens:

1. Should the original/parent sub-button revert to its original action or do nothing? E.g., the original tap action was to open "More Info", but once expanded, the parent button no longer does any action.
2. The expansion only displays as far as the borders of the card and then gets cut off, so you can't see all the buttons and can't re-collapse it. Not sure if this is a Bubble Card limitation (although the Wheel module extends beyond the borders, so I think it's possible 🤷‍♂️ ).

Anyway, I can work around these, but thought I'd let you know. Thanks again for your work on this! I appreciate it.

[Alefriedo]

Yes, restoring the default action in the expanded state is the expected behavior. There was a bug preventing this with the tap action which should now be fixed.
I also implemented a toggle in the styling section to allow overflow out of the card. I didn't implement this yet, since it would mess with my card layout and didn't find a clean solution yet. But I think this should do it for the moment, so one can decide to let it overflow or not.

[githoss]

Ah, thanks!

• Original tap-action is now restored 👍
• Overflow works! There's a weird quirk where sometimes the card to the left obscures the overflow, but that probably has something to do with conflicting modules (the card to the left has the Room Card Plus mod). Not really an issue with your mod.

Thanks again!

[Alefriedo]

I've added z-index to the menu, maybe that will help with this. It is not happening with my roomcards, so I couldn't find the reason for this behavior. If it keeps happening, you can share your dashboards yaml, if you want, and I can have a look at it.