Update sub_button_wheel to v1.2.0

Author: lsmarsden

modules/sub_button_wheel/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+### v1.2.0
+
+<details><summary>See Changes</summary>
+
+- Added support for using main button as the wheel opener. Use `wheel_opener: "main"` to enable this feature.
+- Existing tap actions will automatically be removed from the wheel opener button without manual configuration.
+
+</details>
 ### v1.1.0
 
 <details><summary>See Changes</summary>

modules/sub_button_wheel/__tests__/integration.test.js

@@ -129,11 +129,47 @@ describe("sub_button_wheel - Integration Tests", () => {
 
       // Verify wheel menu size matches button size
       expect(wheelMenu.style.width).toBe("36px");
+      expect(wheelMenu.style.height).toBe("36px");
 
       // Verify overlay is positioned correctly (before wheel menu in DOM)
       const overlay = document.querySelector(".wheel-overlay");
       expect(overlay.nextElementSibling).toBe(wheelMenu);
     });
+    it("should remove default tap action on the wheel opener button", () => {
+      // Setup - Basic configuration
+      const originalButtonSelectors = [
+        ".bubble-sub-button-1",
+        ".bubble-sub-button-2",
+        ".bubble-sub-button-3",
+        ".bubble-sub-button-4",
+      ];
+      mockThis.config.sub_button_wheel = {
+        wheel_opener: "main",
+        wheel_buttons: [{ sub_button: "1" }, { sub_button: "2" }, { sub_button: "3" }, { sub_button: "4" }],
+      };
+
+      // Set up main button with initial tap action to verify it gets overridden
+      const mainButton = mockCard.querySelector(".bubble-icon-container");
+      mainButton.dataset.tapAction = JSON.stringify({ action: "toggle", entity: "light.main" });
+
+      // Verify initial DOM state
+      originalButtonSelectors.forEach((selector) => {
+        expect(mockCard.querySelector(selector)).toBeTruthy();
+      });
+      expect(document.querySelector(".wheel-menu")).toBeNull();
+
+      // Verify main button initially has the tap action we set
+      expect(mainButton.getAttribute("data-tap-action")).toBe('{"action":"toggle","entity":"light.main"}');
+
+      // Exercise
+      sub_button_wheel.call(mockThis, mockCard, mockHass);
+
+      // Verify
+      const wheelMenu = document.querySelector(".wheel-menu");
+      const openerButton = wheelMenu.querySelector(".wheel-open-button");
+
+      expect(openerButton.getAttribute("data-tap-action")).toBe('{"action":"none"}');
+    });
 
     it("should not create wheel when no buttons are configured", () => {
       // Setup - Empty configuration
@@ -753,6 +789,7 @@ describe("sub_button_wheel - Integration Tests", () => {
       // Verify - Sub-button-1 becomes opener, others become wheel buttons
       const wheelMenu = document.querySelector(".wheel-menu");
       expect(wheelMenu).toBeTruthy();
+      expect(wheelMenu.classList).not.toContain("main-opener");
 
       const openerButton = wheelMenu.querySelector(".wheel-open-button");
       expect(openerButton).toBeTruthy();
@@ -782,6 +819,7 @@ describe("sub_button_wheel - Integration Tests", () => {
       const wheelButtons = wheelMenu.querySelectorAll(".wheel-button");
 
       expect(wheelMenu).toBeTruthy();
+      expect(wheelMenu.classList).toContain("main-opener");
       expect(wheelButtons.length).toBe(2);
 
       // Should use default even-circle layout with precise positioning
@@ -814,7 +852,7 @@ describe("sub_button_wheel - Integration Tests", () => {
     it("should handle partial configuration gracefully", () => {
       // Setup - Only layout specified, no animation config
       mockThis.config.sub_button_wheel = {
-        wheel_opener: "main",
+        wheel_opener: "main-button",
         layout_options: {
           wheel_layout: "progressive-arc",
           // No double_ring_inner_count specified
@@ -844,7 +882,7 @@ describe("sub_button_wheel - Integration Tests", () => {
     it("should handle single button configuration", () => {
       // Setup - Only one wheel button
       mockThis.config.sub_button_wheel = {
-        wheel_opener: "main",
+        wheel_opener: "main-button",
         wheel_buttons: [{ sub_button: "1" }],
       };
 
@@ -863,7 +901,8 @@ describe("sub_button_wheel - Integration Tests", () => {
       const openerButton = wheelMenu.querySelector(".wheel-open-button");
 
       openerButton.click();
-      expect(wheelMenu.classList.contains("active")).toBe(true);
+      expect(wheelMenu.classList).toContain("active");
+      expect(wheelMenu.classList).toContain("main-opener");
     });
 
     it("should handle maximum supported buttons for arc layouts", () => {

modules/sub_button_wheel/code.js

@@ -3,6 +3,7 @@ import { toArray } from "../helpers/utils/arrays.js";
 export function sub_button_wheel(card, hass) {
   // this allows IDEs to parse the file normally - will be removed automatically during build.
   const { sub_button_wheel: config } = this.config;
+  const mainButtonSelector = ".bubble-icon-container";
 
   function shouldCloseOnClick(buttonConfig, globalConfig) {
     // Individual button setting takes precedence
@@ -20,9 +21,12 @@ export function sub_button_wheel(card, hass) {
       return;
     }
 
+    const isMainButtonOpener = isMainButton(config.wheel_opener);
     const wheelMenu = document.createElement("div");
     wheelMenu.className = "wheel-menu";
-
+    if (isMainButtonOpener) {
+      wheelMenu.classList.add("main-opener");
+    }
     const overlay = document.createElement("div");
     overlay.className = "wheel-overlay";
 
@@ -33,6 +37,8 @@ export function sub_button_wheel(card, hass) {
 
     const orderedButtonConfigs = processButtonPositions([...wheelButtonsConfig]);
     // assume 36px as there are no variables in buttons until reported otherwise
+    // if main button it will cause 6px difference in sizing due to the main icon
+    // being 42px, but it will be centered anyway
     const buttonSize = 36;
     const wheelButtons = [];
 
@@ -49,10 +55,15 @@ export function sub_button_wheel(card, hass) {
     });
 
     wheelMenu.style.width = `${buttonSize}px`;
+    wheelMenu.style.height = `${buttonSize}px`;
     wheelOpenerButton.replaceWith(wheelMenu);
     wheelMenu.before(overlay);
     wheelMenu.appendChild(wheelOpenerButton);
 
+    // remove existing default tap action from wheel opener button
+    // https://github.com/Clooos/Bubble-Card/discussions/1714
+    wheelOpenerButton.setAttribute("data-tap-action", JSON.stringify({ action: "none" }));
+
     // Apply layout positioning directly to buttons
     const layoutManager = new WheelLayoutManager(buttonSize, config);
     const glassRingRadius = layoutManager.applyLayout(layout, orderedButtonConfigs, wheelButtons);
@@ -366,15 +377,19 @@ export function sub_button_wheel(card, hass) {
   }
 
   function getElementSelector(button) {
-    if (button === "main-button" || button === "main") {
-      return ".bubble-icon-container";
+    if (isMainButton(button)) {
+      return mainButtonSelector;
     } else {
       return typeof button === "string" && button.startsWith("sub-button-")
         ? `.bubble-${button}`
         : `.bubble-sub-button-${button}`;
     }
   }
 
+  function isMainButton(button) {
+    return button === "main-button" || button === "main";
+  }
+
   const wheelOpener = config.wheel_opener;
   if (!wheelOpener) {
     return;

modules/sub_button_wheel/editor.yaml

@@ -1,6 +1,6 @@
 editor:
   - name: wheel_opener
-    label: "Button to open the wheel (e.g. 'sub-button-1'). Must have no tap action."
+    label: "Button to open the wheel ('main', or '1' for 'sub-button-1' etc.)"
     selector:
       text:
   - name: close_on_sub_button_click

modules/sub_button_wheel/module.yaml

@@ -1,7 +1,7 @@
 module_info:
   id: sub_button_wheel
   name: Sub Button Wheel
-  version: 1.1.0
+  version: 1.2.0
   creator: lsmarsden
   link: https://github.com/lsmarsden/bubble-card-modules/tree/main/sub_button_wheel
   supported:

modules/sub_button_wheel/styles.css

@@ -5,6 +5,17 @@
     align-items: center;
 }
 
+.wheel-menu.main-opener {
+    margin: 6px 9px 6px 11px;
+}
+
+.wheel-menu .bubble-icon-container {
+    /* When using main icon as the wheel opener, the margins interfere
+     with styling, so reset and use the wheel-menu.main-opener margins instead for alignment
+    */
+    margin: 0 !important;
+}
+
 .glass-ring {
     --c-light: #fff;
     --c-dark: #000;