refactor(BootstrapBlazorModule): use registerBootstrapBlazorModule refactor component

src/BootstrapBlazor/Components/Button/DialButton.razor.js

@@ -17,24 +17,18 @@ export function init(id) {
         toggle(el, list)
     })
 
-    if (!window.bb_dial_button) {
-        window.bb_dial_button = true
-
-        EventHandler.on(document, 'click', e => closePopup(e));
-    }
-
     const module = registerBootstrapBlazorModule('DialButton', {
         hooked: false,
+        items: [],
         registerClosePopupHandler: function () {
             if (this.hooked === false) {
                 this.hooked = true;
-
-                EventHandler.on(document, 'click', e => closePopup(e));
+                EventHandler.on(document, 'click', closePopup);
             }
         }
     });
     module.registerClosePopupHandler();
-
+    module.items.push(id);
 }
 
 export function update(id) {
@@ -56,8 +50,15 @@ export function dispose(id) {
     Data.remove(id)
 
     if (dial) {
-        EventHandler.off(dial.button, 'click')
-        EventHandler.off(dial.list, 'animationend')
+        const { button, list } = dial;
+        EventHandler.off(button, 'click')
+        EventHandler.off(list, 'animationend')
+    }
+
+    const { DialButton } = window.BootstrapBlazor;
+    DialButton.items.pop(id)
+    if (DialButton.items.length === 0) {
+        EventHandler.off(document, 'click', closePopup)
     }
 }
 

src/BootstrapBlazor/Components/Button/PopConfirmButton.razor.js

@@ -1,4 +1,4 @@
-import { getDescribedElement, getDescribedOwner, hackTooltip, hackPopover, isDisabled } from "../../modules/utility.js"
+import { getDescribedElement, getDescribedOwner, hackTooltip, hackPopover, isDisabled, registerBootstrapBlazorModule } from "../../modules/utility.js"
 import { showTooltip, removeTooltip } from "./Button.razor.js"
 import Data from "../../modules/data.js"
 import EventHandler from "../../modules/event-handler.js"
@@ -87,17 +87,19 @@ export function init(id) {
         }
     }
 
-    if (!window.bb_confirm) {
-        window.bb_confirm = {
-            handle: false,
-            items: []
+    const module = registerBootstrapBlazorModule('PopConfirmButton', {
+        handle: false,
+        items: [],
+        registerClosePopupHandler: function () {
+            if (this.handle === false) {
+                this.handle = true;
+
+                EventHandler.on(document, 'click', confirm.closeConfirm);
+            }
         }
-    }
-    if (!window.bb_confirm.handle) {
-        window.bb_confirm.handle = true
-        EventHandler.on(document, 'click', confirm.closeConfirm);
-    }
-    window.bb_confirm.items.push(id)
+    });
+    module.registerClosePopupHandler();
+    module.items.push(id);
 }
 
 export function showConfirm(id) {
@@ -144,15 +146,15 @@ export function dispose(id) {
     const confirm = Data.get(id)
     Data.remove(id)
 
-    if (confirm) {
-        window.bb_confirm.items.pop(id)
-        if (window.bb_confirm.items.length === 0) {
-            delete window.bb_confirm
-            EventHandler.off(document, 'click', confirm.closeConfirm)
-        }
-        if (confirm.popover) {
-            confirm.popover.dispose();
-        }
+    const { popover } = confirm ?? {};
+    if (popover) {
+        popover.dispose();
+    }
+
+    const { PopConfirmButton } = window.BootstrapBlazor;
+    PopConfirmButton.items.pop(id)
+    if (PopConfirmButton.items.length === 0) {
+        EventHandler.off(document, 'click', confirm.closeConfirm)
     }
 }
 

src/BootstrapBlazor/Components/Button/SlideButton.razor.js

@@ -1,4 +1,5 @@
-import Data from "../../modules/data.js"
+import { registerBootstrapBlazorModule } from "../../modules/utility.js"
+import Data from "../../modules/data.js"
 import EventHandler from "../../modules/event-handler.js"
 
 export function init(id) {
@@ -23,11 +24,19 @@ export function init(id) {
         list.classList.remove('show')
     })
 
-    if (!window.bb_slide_button) {
-        window.bb_slide_button = true
+    const module = registerBootstrapBlazorModule('SlideButton', {
+        handle: false,
+        items: [],
+        registerClosePopupHandler: function () {
+            if (this.handle === false) {
+                this.handle = true;
 
-        EventHandler.on(document, 'click', e => closePopup(e));
-    }
+                EventHandler.on(document, 'click', closePopup);
+            }
+        }
+    });
+    module.registerClosePopupHandler();
+    module.items.push(id);
 }
 
 export function update(id) {
@@ -42,9 +51,15 @@ export function dispose(id) {
     Data.remove(id)
 
     if (slide) {
-        EventHandler.off(slide.button, 'click')
-        EventHandler.off(slide.list, 'click', '.btn-close')
-        EventHandler.off(slide.list, 'click', '.slide-item')
+        const { button, list } = slide ?? {};
+        EventHandler.off(button, 'click');
+        EventHandler.off(list, 'click');
+    }
+
+    const { SlideButton } = window.BootstrapBlazor;
+    SlideButton.items.pop(id)
+    if (SlideButton.items.length === 0) {
+        EventHandler.off(document, 'click', closePopup)
     }
 }
 

src/BootstrapBlazor/Components/Select/Select.razor.js

@@ -50,5 +50,8 @@ export function dispose(id) {
 
     if (select) {
         unregisterSelect(select);
+        if (select.popover) {
+            Popover.dispose(select.popover);
+        }
     }
 }

src/BootstrapBlazor/wwwroot/modules/base-popover.js

@@ -1,4 +1,4 @@
-import { getDescribedElement, getDescribedOwner, hackTooltip, hackPopover, isDisabled } from "./utility.js"
+import { getDescribedElement, getDescribedOwner, hackTooltip, hackPopover, isDisabled, registerBootstrapBlazorModule } from "./utility.js"
 import EventHandler from "./event-handler.js"
 
 const Popover = {
@@ -131,7 +131,7 @@ const Popover = {
                 }
             }
 
-            const closePopover = e => {
+            popover.closePopover = e => {
                 const selector = `.${popover.class}.show`;
                 const el = e.target;
                 if (el.closest(selector)) {
@@ -161,11 +161,20 @@ const Popover = {
                 }
             })
 
-            if (!window.bb_dropdown) {
-                window.bb_dropdown = true
+            const module = registerBootstrapBlazorModule('Popover', {
+                handle: false,
+                items: [],
+                registerClosePopupHandler: function () {
+                    if (this.handle === false) {
+                        this.handle = true;
+
+                        EventHandler.on(document, 'click', popover.closePopover);
+                    }
+                }
+            });
+            module.registerClosePopupHandler();
+            module.items.push(popover);
 
-                EventHandler.on(document, 'click', closePopover);
-            }
 
             // update handler
             if (popover.toggleMenu) {
@@ -207,6 +216,12 @@ const Popover = {
             EventHandler.off(popover.el, 'hide.bs.popover')
             EventHandler.off(popover.el, 'click', '.dropdown-toggle')
             EventHandler.off(popover.toggleMenu, 'click', '.dropdown-item')
+
+            const { Popover } = window.BootstrapBlazor;
+            Popover.items.pop(popover)
+            if (Popover.items.length === 0) {
+                EventHandler.off(document, 'click', popover.closePopover)
+            }
         }
         else {
             EventHandler.off(popover.el, 'show.bs.dropdown')