v1.6.3

Clooos · Jan 7, 2024 · 7666723 · 7666723
1 parent d527824
commit 7666723
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 106 deletions.
diff --git a/dist/bubble-card.js b/dist/bubble-card.js
diff --git a/dist/bubble-pop-up.js b/dist/bubble-pop-up.js
diff --git a/hacs.json b/hacs.json
@@ -3,5 +3,5 @@
   "content_in_root": false,
   "render_readme": true,
   "filename": "bubble-card.js",
-  "homeassistant": "2023.9.0"
+  "homeassistant": "2023.9.0",
 }
diff --git a/src/bubble-card.ts b/src/bubble-card.ts
@@ -10,6 +10,8 @@ import { handleEmptyColumn } from './cards/empty-column.ts';
 import BubbleCardEditor from './editor/bubble-card-editor.ts';
 
 let editor;
+let cardSize;
+
 addUrlListener();
 
 class BubbleCard extends HTMLElement {
@@ -56,6 +58,10 @@ class BubbleCard extends HTMLElement {
                 handleEmptyColumn(this);
                 break;
         }
+
+        if (!window.columnFix) {
+            window.columnFix = this.config.column_fix
+        }
     }
 
     setConfig(config) {
@@ -97,7 +103,7 @@ class BubbleCard extends HTMLElement {
 
     getCardSize() {
         // Fix the empty columns caused by the pop-ups on the dashboard
-        return -10000;
+        return window.columnFix ? 0 : -1;
     }
 
     static getConfigElement() {

diff --git a/src/bubble-pop-up.ts b/src/bubble-pop-up.ts
@@ -20,6 +20,10 @@ class BubblePopUp extends HTMLElement {
 
         // Initialize pop-up card
         handlePopUp(this);
+
+        if (!window.columnFix) {
+            window.columnFix = this.config.column_fix
+        }
     }
 
     setConfig(config) {
@@ -31,7 +35,7 @@ class BubblePopUp extends HTMLElement {
 
     getCardSize() {
         // Fix the empty columns caused by the pop-ups on the dashboard
-        return -10000;
+        return window.columnFix ? 0 : -1;
     }
 
     static getConfigElement() {

diff --git a/src/cards/button.ts b/src/cards/button.ts
@@ -50,8 +50,8 @@ export function handleButton(context) {
     } = getVariables(context, context.config, hass, editor);
 
     formatedState = entityId && (stateChanged || editor) ? hass.formatEntityState(hass.states[entityId]) : '';
-    const buttonType = context.config.button_type || 'switch';
-    const showState = !context.config.show_state ? false : context.config.show_state;
+    let buttonType = context.config.button_type || 'switch';
+    let showState = !context.config.show_state ? false : context.config.show_state;
     let currentBrightness = !entityId ? '' : hass.states[entityId].attributes.brightness || 0;
     let currentVolume = !entityId ? '' : hass.states[entityId].attributes.volume_level || 0;
     let isDragging = false;
@@ -62,6 +62,8 @@ export function handleButton(context) {
     let startValue = 0;
     let movingVertically = false;
     let timeoutId = null;
+    let serviceOn = context.config.service_on || 'homeassistant.toggle';
+    let serviceOff = context.config.service_off || 'homeassistant.toggle';
 
     if (!context.buttonAdded) {
         const buttonContainer = document.createElement("div");

diff --git a/src/cards/horizontal-buttons-stack.ts b/src/cards/horizontal-buttons-stack.ts
@@ -94,7 +94,7 @@ export function handleHorizontalButtonsStack(context) {
         }
 
         function highlightButton() {
-            if (context.config.highlightCurrentview) {
+            if (context.config.highlight_current_view) {
                 const isShown = location.pathname === link || location.hash === link;
                 if (isShown) {
                     buttonElement.classList.add("highlight");

diff --git a/src/cards/pop-up.ts b/src/cards/pop-up.ts
@@ -69,6 +69,7 @@ export function handlePopUp(context) {
     let displayPowerButton = config.entity ? 'flex' : 'none';
     let text = config.text || '';
     let stateEntityId = config.state;
+    let closeOnClick = config.close_on_click || false;
     let marginTopMobile = config.margin_top_mobile 
         ? (config.margin_top_mobile !== '0' ? config.margin_top_mobile : '0px')
         : '0px';
@@ -123,8 +124,7 @@ export function handlePopUp(context) {
 	        context.button = document.createElement("button");
 	        context.button.setAttribute("class", "close-pop-up");
 	        context.button.onclick = function() { 
-	            history.replaceState(null, null, location.href.split('#')[0]);
-	            fireEvent(window, "location-changed", true);
+	        	removeHash();
 	            localStorage.setItem('isManuallyClosed_' + popUpHash, true);
 	        }; 
 	        context.headerContainer.appendChild(context.button);
@@ -169,38 +169,36 @@ export function handlePopUp(context) {
 	                // Vérifiez si le clic a été effectué sur le corps de la page
 	                if (document.body.contains(e.target)) {
 	                    popUpOpen = popUpHash + false;
-	                    history.replaceState(null, null, location.href.split('#')[0]);
-	                    fireEvent(window, "location-changed", true);
+						removeHash();
 	                    localStorage.setItem('isManuallyClosed_' + popUpHash, true);
 	                }
 	            } 
 	        }, 0);
 	    }
 	}
 
+	function removeHash() {
+	    history.replaceState(null, null, location.href.split('#')[0]);
+        fireEvent(window, "location-changed", true);
+	}
+
     function resetAutoClose() {
         // Clear any existing timeout
         clearTimeout(closeTimeout);
         // Start autoclose if enabled
         if (autoClose > 0) {
-            closeTimeout = setTimeout(autoClosePopUp, autoClose);
+            closeTimeout = setTimeout(removeHash, autoClose);
         }
     }
 
-    function autoClosePopUp(){
-        history.replaceState(null, null, location.href.split('#')[0]);
-        fireEvent(window, "location-changed", true);
-    }
-
     function powerButtonClickHandler() {
         toggleEntity(hass, entityId);
     }
 
     function windowKeydownHandler(e) {
         if (e.key === 'Escape') {
             popUpOpen = popUpHash + false;
-            history.replaceState(null, null, location.href.split('#')[0]);
-            fireEvent(window, "location-changed", true);
+			removeHash();
             localStorage.setItem('isManuallyClosed_' + popUpHash, true)
         }
     }
@@ -223,8 +221,7 @@ export function handlePopUp(context) {
         // If the distance is positive (i.e., the finger is moving downward) and exceeds a certain threshold, close the pop-up
         if (touchMoveDistance > 300 && event.touches[0].clientY > lastTouchY) {
             popUpOpen = popUpHash + false;
-            history.replaceState(null, null, location.href.split('#')[0]);
-            fireEvent(window, "location-changed", true);
+            removeHash();
             localStorage.setItem('isManuallyClosed_' + popUpHash, true)
         }
 
@@ -293,41 +290,45 @@ export function handlePopUp(context) {
         }
     }
 
-    function openPopUp() {    
-	    window.removeEventListener('click', closePopUpByClickingOutside);
-        context.popUp.classList.remove('close-pop-up');
-        context.popUp.classList.add('open-pop-up');
-        context.content.querySelector('.power-button').addEventListener('click', powerButtonClickHandler, { passive: true });
-        window.addEventListener('keydown', windowKeydownHandler, { passive: true });
-        context.popUp.addEventListener('touchstart', popUpTouchstartHandler, { passive: true });
-        context.popUp.addEventListener('touchmove', popUpTouchmoveHandler, { passive: true });
-        popUpOpen = popUpHash + true;
-        document.body.style.overflow = 'hidden'; // Fix scroll inside pop-ups only
-        setTimeout(() => { window.justOpened = true; }, 10);
-        pauseVideos(context.popUp, false);
-        resetAutoClose();
+	function openPopUp() {    
+	    context.popUp.classList.remove('close-pop-up');
+	    context.popUp.classList.add('open-pop-up');
+	    context.content.querySelector('.power-button').addEventListener('click', powerButtonClickHandler, { passive: true });
+	    window.addEventListener('keydown', windowKeydownHandler, { passive: true });
+	    context.popUp.addEventListener('touchstart', popUpTouchstartHandler, { passive: true });
+	    context.popUp.addEventListener('touchmove', popUpTouchmoveHandler, { passive: true });
+	    popUpOpen = popUpHash + true;
+	    document.body.style.overflow = 'hidden'; // Fix scroll inside pop-ups only
+	    setTimeout(() => { window.justOpened = true; }, 10);
+	    pauseVideos(context.popUp, false);
+	    resetAutoClose();
 	    setTimeout(function() {
-	        window.addEventListener('click', closePopUpByClickingOutside, { passive: true });
+	        if (closeOnClick) {
+	            window.addEventListener('mouseup', removeHash, { passive: true });
+	            window.addEventListener('touchend', removeHash, { passive: true });
+	        } else {
+	        	window.addEventListener('click', closePopUpByClickingOutside, { passive: true });
+	        }
 	    }, 10);  
-    }
-
-    function closePopUp() {
-        context.popUp.classList.remove('open-pop-up');
-        context.popUp.classList.add('close-pop-up');
-        context.content.querySelector('.power-button').removeEventListener('click', powerButtonClickHandler);
-        window.removeEventListener('keydown', windowKeydownHandler);
-        context.popUp.removeEventListener('touchstart', popUpTouchstartHandler);
-        context.popUp.removeEventListener('touchmove', popUpTouchmoveHandler);
-        popUpOpen = popUpHash + false;
-        document.body.style.overflow = '';
-        window.justOpened = false;
-        clearTimeout(closeTimeout);
-        setTimeout(function() {
-            pauseVideos(context.popUp, true);
-        }, 320);
-    }
+	}
 
-    // This function can be optimized by 
+	function closePopUp() {
+	    context.popUp.classList.remove('open-pop-up');
+	    context.popUp.classList.add('close-pop-up');
+	    context.content.querySelector('.power-button').removeEventListener('click', powerButtonClickHandler);
+	    window.removeEventListener('keydown', windowKeydownHandler);
+	    context.popUp.removeEventListener('touchstart', popUpTouchstartHandler);
+	    context.popUp.removeEventListener('touchmove', popUpTouchmoveHandler);
+	    popUpOpen = popUpHash + false;
+	    document.body.style.overflow = '';
+	    window.justOpened = false;
+	    clearTimeout(closeTimeout);
+	    setTimeout(function() {
+	        window.removeEventListener('mouseup', removeHash);
+	        window.removeEventListener('touchend', removeHash);
+	        pauseVideos(context.popUp, true);
+	    }, 320);
+	}
 
     function createPopUp() {   
         let popUp = context.popUp;
@@ -339,8 +340,6 @@ export function handlePopUp(context) {
         if (!context.eventAdded && !editor) {
             window['checkHashRef_' + popUpHash] = checkHash;
             window.addEventListener('urlChanged', window['checkHashRef_' + popUpHash], { passive: true });
-            window.addEventListener('click', closePopUpByClickingOutside, { passive: true });
-
             context.eventAdded = true;
         }
 
@@ -575,8 +574,7 @@ export function handlePopUp(context) {
             isTriggered = true;
             localStorage.setItem('isTriggered_' + popUpHash, isTriggered);
         } else if (hass.states[triggerEntity].state !== triggerState && triggerClose && context.popUp.classList.contains('open-pop-up') && isTriggered && !isManuallyClosed) {
-            history.replaceState(null, null, location.href.split('#')[0]);
-            fireEvent(window, "location-changed", true);
+        	removeHash();
             popUpOpen = popUpHash + false;
             isTriggered = false;
             isManuallyClosed = true;

diff --git a/src/editor/bubble-card-editor.ts b/src/editor/bubble-card-editor.ts
@@ -108,8 +108,8 @@ export default class BubbleCardEditor extends LitElement {
         return this._config.auto_close || '';
     }
 
-    get _back_open() {
-        return this._config.back_open || false;
+    get _close_on_click() {
+        return this._config.close_on_click || false;
     }
 
     get _icon_open() {
@@ -137,7 +137,7 @@ export default class BubbleCardEditor extends LitElement {
     }
 
     get _highlightCurrentview() {
-        return this._config.highlightCurrentview || false;
+        return this._config.highlight_current_view || false;
     }
 
     get _show_state() {
@@ -270,6 +270,17 @@ export default class BubbleCardEditor extends LitElement {
                         @input="${this._valueChanged}"
                         style="width: 100%;"
                     ></ha-textfield>
+                    <ha-formfield .label="Optional - Close the pop-up after any click or tap">
+                        <ha-switch
+                            aria-label="Optional - Close the pop-up after any click or tap"
+                            .checked=${this._close_on_click}
+                            .configValue="${"close_on_click"}"
+                            @change=${this._valueChanged}
+                        ></ha-switch>
+                        <div class="mdc-form-field">
+                            <label class="mdc-label">Optional - Close the pop-up after any click or tap</label> 
+                        </div>
+                    </ha-formfield>
                     <h3>Pop-up trigger</h3>
                     <ha-alert alert-type="info">This allows you to open this pop-up based on the state of any entity, for example you can open a "Security" pop-up with a camera when a person is in front of your house. You can also create a toggle helper (input_boolean) and trigger its opening/closing in an automation.</ha-alert>
                     ${this.makeDropdown("Optional - Entity to open the pop-up based on its state", "trigger_entity", allEntitiesList)}
@@ -510,7 +521,7 @@ export default class BubbleCardEditor extends LitElement {
                         <ha-switch
                             aria-label="Toggle "Highlight current view"
                             .checked=${this._highlightCurrentview}
-                            .configValue="${"highlightCurrentview"}"
+                            .configValue="${"highlight_current_view"}"
                             @change=${this._valueChanged}
                         ></ha-switch>
                         <div class="mdc-form-field">

diff --git a/src/tools/init.ts b/src/tools/init.ts
@@ -47,16 +47,6 @@ export async function checkResources(hass) {
         window.resourcesChecked = true;
 
         try {
-            // Reload the cache after every updates
-
-            let currentVersion = version;
-            const storedVersion = localStorage.getItem('version');
-
-            if (storedVersion !== currentVersion) {
-                localStorage.setItem('version', currentVersion);
-                location.reload();
-            }
-
             // Check if bubble-pop-up.js is installed as a resource and remove it (fix for the previous 1.5.0/1 users)
 
             let resources = await hass.callWS({ type: "lovelace/resources" });

diff --git a/src/var/version.ts b/src/var/version.ts
@@ -1 +1 @@
-export let version = 'v1.6.1';
+export let version = 'v1.6.3';
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export let version = 'v1.6.1';
		export let version = 'v1.6.3';