[Styling Module, JS Module, JS] Sub-Button Toggle Switch

[0blivi0nis]

Module post template

Sub-button toggle switch

Version: v1.0
Creator: -> 0blivi0nis

Important

Supported cards:

• Button

Note: This is basically a copy of Toggle Switch but instead of toggling the main entity, this module toggles the entity of the first sub-button

---

🧩 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.

sub_toggle_switch:
    name: "Sub toggle switch"
    version: "1.0"
    creator: "0blivi0nis"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - button

    description: |
        Add a default Home Assistant toggle to your Bubble button switch card, 
        but this version toggles the first sub-button instead of the main entity.
        <br><br>
        <code-block><pre>
        sub_toggle_switch:
            # Your configuration here
        </pre></code-block>

    code: |
        .bubble-background {
          background-color: var(--bubble-button-background-color, var(--bubble-main-background-color, var(--secondary-background-color))) !important;
        }
        
        .bubble-wrapper { position: relative !important; }
        
        ${(() => {
          try {
            // --- Find entity to toggle ---
            let entityId = null;
        
            // Prefer a sub-entity if available
            const subEntityEl = card.querySelector('.bubble-sub-button[data-entity]');
            if (subEntityEl) {
              entityId = subEntityEl.dataset.entity;
            }
        
            // Fallback to main entity if no sub-entity found
            if (!entityId) {
              entityId =
                this.config?.entity ||
                card.querySelector('.bubble-background')?.dataset?.entity ||
                null;
            }
        
            if (!entityId) return '';
        
            const stateObj = hass.states[entityId];
            if (!stateObj) return '';
        
            const host = card.querySelector('.bubble-wrapper');
            if (!host) return '';
        
            // --- Create toggle slot ---
            let slot = host.querySelector('.real-toggle-slot');
            if (!slot) {
              slot = document.createElement('div');
              slot.className = 'real-toggle-slot';
              slot.style.position = 'absolute';
              slot.style.top = '50%';
              slot.style.right = '16px';
              slot.style.transform = 'translateY(-50%)';
              slot.style.transformOrigin = 'center right';
              slot.style.pointerEvents = 'auto';
              slot.style.display = 'flex';
              slot.style.alignItems = 'center';
              slot.style.justifyContent = 'center';
              const stop = (e) => e.stopPropagation();
              slot.addEventListener('pointerdown', stop);
              slot.addEventListener('pointerup', stop);
              slot.addEventListener('click', stop);
              slot.addEventListener('touchstart', stop, { passive: true });
              host.appendChild(slot);
            }
        
            // --- Create actual toggle element ---
            const hasEntityToggle = !!customElements.get('ha-entity-toggle');
            let toggleElement = slot.querySelector(hasEntityToggle ? 'ha-entity-toggle' : 'ha-switch');
            if (!toggleElement) {
              toggleElement = document.createElement(hasEntityToggle ? 'ha-entity-toggle' : 'ha-switch');
              toggleElement.className = 'real-entity-toggle';
              toggleElement.style.pointerEvents = 'auto';
              slot.appendChild(toggleElement);
            }
        
            // --- Link to hass state ---
            if (hasEntityToggle) {
              toggleElement.hass = hass;
              toggleElement.stateObj = stateObj;
              toggleElement.setAttribute('aria-label', entityId);
            } else {
              const isOn = stateObj.state === 'on';
              const isDisabled = stateObj.state === 'unavailable' || stateObj.state === 'unknown';
              toggleElement.checked = isOn;
              toggleElement.disabled = isDisabled;
              toggleElement.setAttribute('aria-label', entityId);
              if (!toggleElement.__changeBound) {
                toggleElement.addEventListener('change', (ev) => {
                  const turningOn = ev.currentTarget.checked;
                  const domain = (entityId.split('.')[0] || 'homeassistant');
                  const service = turningOn ? 'turn_on' : 'turn_off';
                  if (hass.services[domain]?.[service]) {
                    hass.callService(domain, service, { entity_id: entityId });
                  } else {
                    hass.callService('homeassistant', turningOn ? 'turn_on' : 'turn_off', { entity_id: entityId });
                  }
                });
                toggleElement.__changeBound = true;
              }
            }
        
            // --- Adjust sub-buttons layout ---
            function placeSubButtonsLeftOfToggle() {
              const sub = card.querySelector('.bubble-sub-button-container');
              if (!sub) return;
              const toggleWidth = slot.getBoundingClientRect().width || 48;
              const gap = 20;
              sub.style.right = (toggleWidth + gap) + 'px';
            }
        
            placeSubButtonsLeftOfToggle();
        
            if (!slot.__resizeObserver) {
              if (window.ResizeObserver) {
                slot.__resizeObserver = new ResizeObserver(placeSubButtonsLeftOfToggle);
                slot.__resizeObserver.observe(slot);
              } else {
                window.addEventListener('resize', placeSubButtonsLeftOfToggle, { passive: true });
              }
            }
        
            if (!card.__subButtonsObserver) {
              const mo = new MutationObserver(placeSubButtonsLeftOfToggle);
              mo.observe(card, { childList: true, subtree: true });
              card.__subButtonsObserver = mo;
            }
        
            slot.style.display = 'flex';
          } catch (error) {
            console.error('bubble toggle module error:', error);
          }
          return '';
        })()}
        

---

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 ❤️

[pos-ei-don]

Can u use it with "bottom sub-buttons"?
It is not displayed in the center then, is there a CSS where i can set something like the top margin?

[0blivi0nis]

I am not gonna lie I have no clue how this works. I just needed this certain feature for my dashboard and got ChatGPT to write this for me by tweaking an already made module and only shared since I figured other people might want it.