Possibility to disable the "close by clicking outside" pop-up feature

Clooos · Jun 2, 2024 · 00110af · 00110af
1 parent d105183
commit 00110af
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/dist/bubble-card.js b/dist/bubble-card.js
diff --git a/src/cards/pop-up/helpers.ts b/src/cards/pop-up/helpers.ts
@@ -45,7 +45,10 @@ export function closePopup(context) {
     clearTimeout(context.closeTimeout);
   }
   context.popUp.removeEventListener('touchstart', context.resetCloseTimeout);
-  window.removeEventListener('click', clickOutside);
+
+  if (context.config.close_by_clicking_outside ?? true) {
+    window.removeEventListener('click', clickOutside);
+  }
 
   const closeOnClick = context.config.close_on_click ?? false;
   if (closeOnClick) {
@@ -86,7 +89,9 @@ export function openPopup(context) {
 
   requestAnimationFrame(() => {
     context.popUp.classList.remove('is-popup-closed');
-    window.addEventListener('click', clickOutside, { passive: true });
+    if (context.config.close_by_clicking_outside ?? true) {
+      window.addEventListener('click', clickOutside, { passive: true });
+    }
   });
 
   if (context.config.auto_close > 0) {

diff --git a/src/editor/bubble-card-editor.ts b/src/editor/bubble-card-editor.ts
@@ -121,6 +121,10 @@ export function createBubbleCardEditor() {
             return this._config.close_on_click || false;
         }
 
+        get _close_by_clicking_outside() {
+            return this._config.close_by_clicking_outside ?? true;
+        }
+
         get _background_update() {
             return this._config.background_update || false;
         }
@@ -450,6 +454,17 @@ export function createBubbleCardEditor() {
                                     .configValue="${"auto_close"}"
                                     @input="${this._valueChanged}"
                                 ></ha-textfield>
+                                <ha-formfield .label="Optional - Close the pop-up by clicking outside of it (a refresh is needed)">
+                                    <ha-switch
+                                        aria-label="Optional - Close the pop-up by clicking outside of it (a refresh is needed)"
+                                        .checked=${this._close_by_clicking_outside}
+                                        .configValue="${"close_by_clicking_outside"}"
+                                        @change=${this._valueChanged}
+                                    ></ha-switch>
+                                    <div class="mdc-form-field">
+                                        <label class="mdc-label">Optional - Close the pop-up by clicking outside of it (a refresh is needed)</label> 
+                                    </div>
+                                </ha-formfield>
                                 <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"