[JS+Editor Module] Conditional Subbutton Colors

[HenryJIII]

Module post template

Conditional Subbutton Colors

Version: v1.0
Creator: HenryJIII

Important

Unsupported cards:

• Horizontal buttons stack
• Pop-up

Add conditional subbutton coloring to up to 6 subbuttons. Chose a color from the dropdown menu and optionally a condition for when it should be active.
Configure this module via the editor or in YAML, for example:

subbutton_colors:
  subbutton1:
    color: red
    condition:
      - condition: state
        entity_id: sensor.your_entity
        state: "your_state"
  subbutton2:
    color: green

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

subbutton_colors:
  name: Subbutton Colors
  version: "v1.0"
  creator: "HenryJIII"
  link: "https://github.com/Clooos/Bubble-Card/discussions/1311"
  description: This module adds the ability to customize background colors for subbuttons conditionally.

  unsupported:
    - horizontal-buttons-stack
    - pop-up
    - empty-column

  editor:
    - type: expandable
      name: subbutton1
      title: "Subbutton 1"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton2
      title: "Subbutton 2"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton3
      title: "Subbutton 3"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton4
      title: "Subbutton 4"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton5
      title: "Subbutton 5"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

    - type: expandable
      name: subbutton6
      title: "Subbutton 6"
      icon: "mdi:list-box-outline"
      schema:
        - name: color
          label: "Background Color"
          selector:
            ui_color:
              include_none: true
        - name: condition
          label: "Color is always applied if no condition is defined. Otherwise, it will be shown when ALL below conditions are fulfilled."
          selector:
            condition: {}

  code: |
    ${(() => {
        const config = this.config.subbutton_colors || {};

        const hasColor = (subbuttonConfig) => {
            return !!subbuttonConfig?.color;
        };

        const applyColor = (containerSelector, subbuttonConfig) => {
          if (!hasColor(subbuttonConfig)) {
            return;
          }

          const subbutton = card.querySelector(containerSelector);
          if (!subbutton) return;

          if (!subbuttonConfig?.condition || (subbuttonConfig?.condition && checkConditionsMet([].concat(subbuttonConfig.condition), hass))) {
            subbutton.style.backgroundColor = `var(--${subbuttonConfig.color}-color)`;
          } else {
            subbutton.style.backgroundColor = "";
          }
        };

        Object.values(config).forEach((c, index) => {
          let subbuttonNumber = Number(Object.keys(config)[index].replace("subbutton", ""));
          applyColor(`.bubble-sub-button-${subbuttonNumber}`, c);
        });
        })()}

---

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

[ossebol]

Just what I needed! I can't get this working for some reason. The module won't appear between all the other added modules.

[HenryJIII]

Nice to hear that, I would like to help you get this working but its hard to tell without knowing your config. Have you checked your indentations maybe?