Section support + fixed probably everything 🤞

- [x] Pop-up header that shows Switch type but don’t show the light color (if no type defined) - [x] Fixed the pop-up close on click feature - [x] Show_name on sub-buttons needs to be toggled once to be shown - [x] Tap actions always set to more_info on name button - [x] Tap action not working for Service call? - [x] Button tap action on slider? - [x] `card_template:` with Regular and Large - [x] State disappear when show_name is false in a button - [x] Fixed a memory leak on the sub-buttons - [x] Sub-buttons icons not switching when in editor - [x] Warning: unable to determine the label for the provided `value`. Nothing to display in the text field. This usually happens when setting an initial `value` before any items are returned from the `dataProvider` callback. Consider setting `selectedItem` instead of `value` (error when switching sub-buttons position) - [x] Can’t hide name on state button (by @brunosabot) - [x] getWeeatherIcon function for custom states - [x] Sub-button icon template - [x] Pop-up blank space on section view
Clooos · May 11, 2024 · d83716f · d83716f
1 parent 39fceea
commit d83716f
Show file tree

Hide file tree

Showing 18 changed files with 732 additions and 561 deletions.
diff --git a/dist/bubble-card.js b/dist/bubble-card.js
diff --git a/src/cards/button/changes.ts b/src/cards/button/changes.ts
@@ -1,4 +1,5 @@
 import { getButtonType } from "./helpers.ts";
+import { initializesubButtonIcon } from '../../tools/global-changes.ts';
 import { 
   applyScrollingEffect,
   getIcon,
@@ -9,7 +10,8 @@ import {
   getAttribute,
   isStateOn,
   isEntityType,
-  getWeatherIcon
+  getWeatherIcon,
+  setLayout
 } from '../../tools/utils.ts';
 
 export function changeButton(context) {
@@ -114,98 +116,13 @@ export function changeStatus(context) {
       context.card.classList.remove('is-on');
   }
 }
-// export function changeStyle(context) {
-//   const state = getState(context);
-
-//   const customStyle = context.config.styles
-//       ? Function('hass', 'entityId', 'state', 'icon', 'return `' + context.config.styles + '`;')(context._hass, context.config.entity, state, context.elements.icon)
-//       : '';
-
-//   context.elements.customStyle.innerText = customStyle;
-// }
-
-// export function changeStyle(context) {
-//     // Utilisez subButton comme nécessaire dans cette fonction
-
-// // Initialisation d'un tableau pour stocker les références aux icônes
-// let subButtonIcon = [];
-
-// // Fonction pour initialiser les références aux icônes
-// export function initializesubButtonIcon(context) {
-//     const subButtons = context.config.sub_button;
-//     if (!subButtons) {
-//         return;
-//     }
-
-//     // Parcours des sous-boutons pour récupérer les icônes
-//     for (let i = 0; i < subButtons.length; i++) {
-//         const subButton = subButtons[i];
-//         if (!subButton) {
-//             continue;
-//         }
-
-//         // Sélection de l'élément icône en utilisant la classe CSS
-//         const iconElement = context.content.querySelector(`.bubble-sub-button-${i + 1} .bubble-sub-button-icon`);
-//         if (iconElement) {
-//             // Ajout de la référence de l'icône dans le tableau
-//             subButtonIcon.push(iconElement);
-//         }
-//     }
-// }
-
-// export function initializesubButtonIcon(context) {
-//     // Assurez-vous que context.subButtonIcon est initialisé
-//     if (!context.subButtonIcon) {
-//         context.subButtonIcon = {};
-//     }
-
-//     const iconElement = context.content.querySelector(`.bubble-sub-button-${index} .bubble-sub-button-icon`);
-//     if (iconElement) {
-//         // Stockez la référence de l'icône dans context.subButtonIcon avec l'identifiant comme clé
-//         context.subButtonIcon[subButtonId] = iconElement;
-//     }
-// }
-
-// export function changeStyle(context) {
-//     // Appel de la fonction pour initialiser les icônes
-//     initializesubButtonIcon(context);
-
-//     // Utilisez setTimeout ou une autre méthode pour attendre que le DOM soit prêt
-
-//     const state = getState(context);
-
-//     // Appliquez votre style personnalisé
-//     const customStyle = context.config.styles
-//         ? Function('hass', 'entityId', 'state', 'icon', 'subButtonIcon', 'return `' + context.config.styles + '`;')
-//           (context._hass, context.config.entity, state, context.elements.icon.icon, context.subButtonIcon)
-//         : '';
-
-//     context.elements.customStyle.innerText = customStyle;
-// }
-
-export function initializesubButtonIcon(context) {
-    // Assurez-vous que context.subButtonIcon est initialisé comme un tableau
-    if (!Array.isArray(context.subButtonIcon)) {
-        context.subButtonIcon = [];
-    }
-
-    // Trouvez tous les éléments d'icône et ajoutez-les au tableau
-    context.content.querySelectorAll('.bubble-sub-button-icon').forEach((iconElement, index) => {
-        // Stockez la référence de l'icône dans context.subButtonIcon à l'index correspondant
-        context.subButtonIcon[index] = iconElement;
-    });
-}
 
 export function changeStyle(context) {
-    // Appel de la fonction pour initialiser les icônes
     initializesubButtonIcon(context);
-
-    // Utilisez setTimeout ou une autre méthode pour attendre que le DOM soit prêt
-    // ...
+    setLayout(context);
 
     const state = getState(context);
 
-    // Appliquez votre style personnalisé
     const customStyle = context.config.styles
         ? Function('hass', 'entityId', 'state', 'icon', 'subButtonIcon', 'getWeatherIcon', `return \`${context.config.styles}\`;`)
           (context._hass, context.config.entity, state, context.elements.icon.icon, context.subButtonIcon, getWeatherIcon)

diff --git a/src/cards/button/create.ts b/src/cards/button/create.ts
@@ -70,10 +70,16 @@ export function createSwitchStructure(context) {
   addFeedback(context.elements.buttonBackground, context.elements.feedback);
 }
 export function createNameStructure(context) {
-  if (context.config.tap_action) {
-      addActions(context.elements.buttonCardContainer, context.config);
-      addFeedback(context.elements.buttonBackground, context.elements.feedback);
-  }
+    const nameDefaultActions = {
+        tap_action: { action: "none" },
+        double_tap_action: { action: "none" },
+        hold_action: { action: "none" }
+    };
+
+    context.elements.buttonCard.style.cursor = 'auto';
+
+    addActions(context.elements.iconContainer, context.config, context.config.entity, nameDefaultActions);
+    addFeedback(context.elements.buttonBackground, context.elements.feedback);
 }
 export function createStateStructure(context) {
   addActions(context.elements.buttonCardContainer, context.config);

diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts
@@ -163,4 +163,31 @@ export default `
         64% {transform: translateX(0); opacity: 0.1;}
         100% {transform: translateX(100%); opacity: 0;}
     }
+
+    .large .bubble-button-card-container {
+      height: 64px;
+      border-radius: 32px;
+    }
+
+    .large .bubble-icon-container {
+      --mdc-icon-size: 28px;
+      min-width: 48px !important;
+      min-height: 48px !important;
+      margin-left: 8px;
+    }
+
+    .rows-2 .bubble-sub-button-container {
+      flex-direction: column;
+      gap: 4px !important;
+      display: grid !important;
+      grid-template-columns: repeat(2, min-content);
+      grid-template-rows: repeat(2, 1fr);
+      grid-auto-flow: column;
+      width: auto;
+      padding-right: 14px;
+    }
+
+    .rows-2 .bubble-sub-button {
+      height: 20px !important;
+    }
 `;
diff --git a/src/cards/cover/changes.ts b/src/cards/cover/changes.ts
@@ -1,4 +1,13 @@
-import { getName, getState, getAttribute, getIcon, applyScrollingEffect } from "../../tools/utils.ts";
+import { 
+    getName, 
+    getState, 
+    getAttribute, 
+    getIcon, 
+    applyScrollingEffect,
+    getWeatherIcon,
+    setLayout
+} from "../../tools/utils.ts";
+import { initializesubButtonIcon } from '../../tools/global-changes.ts';
 
 export function changeIcon(context) {
   const iconOpen = context.config.icon_open;
@@ -21,13 +30,17 @@ export function changeName(context) {
   }
 }
 export function changeStyle(context) {
-  const state = getState(context);
+    initializesubButtonIcon(context);
+    setLayout(context);
 
-  const customStyle = context.config.styles
-      ? Function('hass', 'entityId', 'state', 'icon', 'return `' + context.config.styles + '`;')(context._hass, context.config.entity, state, context.elements.icon.icon)
-      : '';
+    const state = getState(context);
 
-  context.elements.customStyle.innerText = customStyle;
+    const customStyle = context.config.styles
+        ? Function('hass', 'entityId', 'state', 'icon', 'subButtonIcon', 'getWeatherIcon', `return \`${context.config.styles}\`;`)
+          (context._hass, context.config.entity, state, context.elements.icon.icon, context.subButtonIcon, getWeatherIcon)
+        : '';
+
+    context.elements.customStyle.innerText = customStyle;
 }
 
 

diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts
@@ -86,4 +86,58 @@ export default `
         cursor: pointer;
         border: none;
     }
+
+    .large .bubble-cover-card-container {
+      height: 64px;
+      display: flex;
+      background: var(--background-color-2, var(--secondary-background-color));
+      border-radius: 32px;
+    }
+
+    .large .bubble-header-container {
+        height: 64px;
+    }
+
+    .large .bubble-header {
+        width: 100%;
+    }
+
+    .large .bubble-icon-container {
+      --mdc-icon-size: 28px;
+      min-width: 48px !important;
+      min-height: 48px !important;
+      margin-left: 2px;
+      align-content: center;
+    }
+
+    .large .bubble-icon {
+      align-items: center;
+    }
+
+    .large .bubble-buttons {
+      display: flex;
+      position: relative;
+      right: 18px;
+      align-self: center;
+      grid-gap: 18px;
+    }
+
+    .large .bubble-sub-button-container {
+      margin-right: 14px;
+    }
+
+    .rows-2 .bubble-sub-button-container {
+      flex-direction: column;
+      gap: 4px !important;
+      display: grid !important;
+      grid-template-columns: repeat(2, min-content);
+      grid-template-rows: repeat(2, 1fr);
+      grid-auto-flow: column;
+      width: auto;
+      padding-right: 14px;
+    }
+
+    .rows-2 .bubble-sub-button {
+      height: 20px !important;
+    }
 `
diff --git a/src/cards/horizontal-buttons-stack/changes.ts b/src/cards/horizontal-buttons-stack/changes.ts
@@ -1,7 +1,7 @@
 import { isColorCloseToWhite } from "../../tools/style.ts";
 import { getState } from "../../tools/utils.ts";
 import { createButton } from './create.ts';
-
+import { initializesubButtonIcon } from '../../tools/global-changes.ts';
 
 const BUTTON_MARGIN = 12;
 

diff --git a/src/cards/media-player/changes.ts b/src/cards/media-player/changes.ts
@@ -1,3 +1,4 @@
+import { initializesubButtonIcon } from '../../tools/global-changes.ts';
 import { 
     applyScrollingEffect,
     getBrightness,
@@ -9,6 +10,8 @@ import {
     getAttribute,
     isEntityType,
     isStateOn,
+    getWeatherIcon,
+    setLayout
 } from '../../tools/utils.ts';
 
 export function changeIcon(context) {
@@ -138,10 +141,14 @@ export function changeMuteIcon(context) {
 }
 
 export function changeStyle(context) {
+    initializesubButtonIcon(context);
+    setLayout(context);
+
     const state = getState(context);
 
     const customStyle = context.config.styles
-        ? Function('hass', 'entityId', 'state', 'icon', 'return `' + context.config.styles + '`;')(context._hass, context.config.entity, state, context.elements.icon)
+        ? Function('hass', 'entityId', 'state', 'icon', 'subButtonIcon', 'getWeatherIcon', `return \`${context.config.styles}\`;`)
+          (context._hass, context.config.entity, state, context.elements.icon.icon, context.subButtonIcon, getWeatherIcon)
         : '';
 
     context.elements.customStyle.innerText = customStyle;

diff --git a/src/cards/media-player/create.ts b/src/cards/media-player/create.ts
@@ -136,7 +136,7 @@ export function createStructure(context) {
 
 function createSlider(context, sliderContainer) {
     let initialX = 0;
-    let volumeLevel = getAttribute(context, 'volume_level') * 100 + '%';
+    let volumeLevel = Math.round(getAttribute(context, 'volume_level') * 100) + '%';
 
     context.elements.rangeFill = createElement('div', 'bubble-range-fill range-fill');
     context.elements.rangeSlider = createElement('div', 'bubble-range-slider range-slider');

diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts
@@ -254,4 +254,56 @@ export default `
         64% {transform: translateX(0); opacity: 0.1;}
         100% {transform: translateX(100%); opacity: 0;}
     }
+
+    .large .bubble-media-player-container {
+      height: 64px;
+      border-radius: 34px;
+    }
+
+    .large .bubble-icon-container {
+      --mdc-icon-size: 28px;
+      min-width: 48px !important;
+      min-height: 48px !important;
+      margin-left: 8px;
+    }
+    
+    .large .bubble-play-pause-button {
+      display: flex;
+      height: 48px;
+      width: 48px;
+      padding: 0;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .large .bubble-volume-slider {
+      height: 48px !important;
+      border-radius: 24px;
+      left: 66px !important;
+      width: calc(100% - 190px) !important;
+    }
+
+    .large .bubble-range-value {
+      place-items: center;
+      height: 48px;
+    }
+
+    .large .bubble-button-container {
+      align-items: center;
+      gap: 14px;
+    }
+
+    .rows-2 .bubble-sub-button-container {
+      flex-direction: column;
+      gap: 4px !important;
+      display: grid !important;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(2, minmax(auto, max-content));
+      grid-auto-flow: column;
+      width: auto;
+    }
+
+    .rows-2 .bubble-sub-button {
+      height: 20px !important;
+    }
 `;