Skip to content

Commit 98115a9

Browse files
ArgoZhangArgoZhang
authored
refactor(BootstrapBlazorModule): use registerBootstrapBlazorModule refactor component (#5497)
* refactor: 重构全局脚本 * refactor: 增加销毁逻辑 * refactor: 重构脚本精简代码 * refactor: base-popover 重构代码 * refactor: registerBootstrapBlazorModule 重构精简外面代码 * refactor: 精简代码 * refactor: 精简代码 * refactor: 精简代码 * refactor: 精简代码 * refactor: 精简代码 * refactor: 精简代码 * refactor: 增加参数检查 * refactor: 精简代码
1 parent d3f3b37 commit 98115a9

File tree

7 files changed

+113
-115
lines changed

7 files changed

+113
-115
lines changed

‎src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -72,29 +72,22 @@ export function init(id, invoke) {
7272
filterCallback(v);
7373
});
7474

75-
const module = registerBootstrapBlazorModule('AutoComplete', {
76-
hooked: false,
77-
registerCloseDropdownHandler: function () {
78-
if (this.hooked === false) {
79-
this.hooked = true;
80-
81-
EventHandler.on(document, 'click', e => {
82-
[...document.querySelectorAll('.auto-complete.show')].forEach(a => {
83-
const ac = e.target.closest('.auto-complete');
84-
if (ac === a) {
85-
return;
86-
}
87-
88-
const el = a.querySelector('[data-bs-toggle="bb.dropdown"]');
89-
if (el === null) {
90-
a.classList.remove('show');
91-
}
92-
});
93-
});
75+
ac.closePopover = e => {
76+
[...document.querySelectorAll('.auto-complete.show')].forEach(a => {
77+
const ac = e.target.closest('.auto-complete');
78+
if (ac === a) {
79+
return;
9480
}
95-
}
81+
82+
const el = a.querySelector('[data-bs-toggle="bb.dropdown"]');
83+
if (el === null) {
84+
a.classList.remove('show');
85+
}
86+
});
87+
}
88+
registerBootstrapBlazorModule('AutoComplete', id, () => {
89+
EventHandler.on(document, 'click', ac.closePopover);
9690
});
97-
module.registerCloseDropdownHandler();
9891
}
9992

10093
const handlerKeyup = (ac, e) => {
@@ -168,6 +161,11 @@ export function dispose(id) {
168161
EventHandler.off(input, 'blur');
169162
Input.dispose(input);
170163
}
164+
165+
const { AutoComplete } = window.BootstrapBlazor;
166+
AutoComplete.dispose(id, () => {
167+
EventHandler.off(document, 'click', ac.closePopover);
168+
});
171169
}
172170

173171
const scrollIntoView = (el, item) => {

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

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,9 @@ export function init(id) {
1616
EventHandler.on(button, 'click', () => {
1717
toggle(el, list)
1818
})
19-
20-
if (!window.bb_dial_button) {
21-
window.bb_dial_button = true
22-
23-
EventHandler.on(document, 'click', e => closePopup(e));
24-
}
25-
26-
const module = registerBootstrapBlazorModule('DialButton', {
27-
hooked: false,
28-
registerClosePopupHandler: function () {
29-
if (this.hooked === false) {
30-
this.hooked = true;
31-
32-
EventHandler.on(document, 'click', e => closePopup(e));
33-
}
34-
}
19+
registerBootstrapBlazorModule('DialButton', id, () => {
20+
EventHandler.on(document, 'click', closePopup);
3521
});
36-
module.registerClosePopupHandler();
37-
3822
}
3923

4024
export function update(id) {
@@ -56,9 +40,15 @@ export function dispose(id) {
5640
Data.remove(id)
5741

5842
if (dial) {
59-
EventHandler.off(dial.button, 'click')
60-
EventHandler.off(dial.list, 'animationend')
43+
const { button, list } = dial;
44+
EventHandler.off(button, 'click')
45+
EventHandler.off(list, 'animationend')
6146
}
47+
48+
const { DialButton } = window.BootstrapBlazor;
49+
DialButton.dispose(id, () => {
50+
EventHandler.off(document, 'click', closePopup)
51+
});
6252
}
6353

6454
const toggle = (el, list) => {

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

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { getDescribedElement, getDescribedOwner, hackTooltip, hackPopover, isDisabled } from "../../modules/utility.js"
2-
import { showTooltip, removeTooltip } from "./Button.razor.js"
1+
import { getDescribedElement, getDescribedOwner, hackTooltip, hackPopover, isDisabled, registerBootstrapBlazorModule } from "../../modules/utility.js"
32
import Data from "../../modules/data.js"
43
import EventHandler from "../../modules/event-handler.js"
4+
export { showTooltip, removeTooltip } from "./Button.razor.js"
55

66
const config = {
77
class: 'popover-confirm',
@@ -62,7 +62,7 @@ export function init(id) {
6262
EventHandler.on(el, 'inserted.bs.popover', confirm.inserted)
6363
EventHandler.on(el, 'hide.bs.popover', confirm.hide)
6464

65-
confirm.checkCancel = el => {
65+
const checkCancel = el => {
6666
// check button
6767
let self = el === confirm.el || el.closest('.dropdown-toggle') === confirm.el
6868
self = self && confirm.popover && confirm.popover._isShown()
@@ -74,7 +74,7 @@ export function init(id) {
7474

7575
confirm.closeConfirm = e => {
7676
const el = e.target
77-
if (!confirm.checkCancel(el)) {
77+
if (!checkCancel(el)) {
7878
document.querySelectorAll(config.popoverSelector).forEach(function (ele) {
7979
const element = getDescribedOwner(ele)
8080
if (element) {
@@ -87,17 +87,9 @@ export function init(id) {
8787
}
8888
}
8989

90-
if (!window.bb_confirm) {
91-
window.bb_confirm = {
92-
handle: false,
93-
items: []
94-
}
95-
}
96-
if (!window.bb_confirm.handle) {
97-
window.bb_confirm.handle = true
90+
registerBootstrapBlazorModule('PopConfirmButton', id, () => {
9891
EventHandler.on(document, 'click', confirm.closeConfirm);
99-
}
100-
window.bb_confirm.items.push(id)
92+
});
10193
}
10294

10395
export function showConfirm(id) {
@@ -144,19 +136,13 @@ export function dispose(id) {
144136
const confirm = Data.get(id)
145137
Data.remove(id)
146138

147-
if (confirm) {
148-
window.bb_confirm.items.pop(id)
149-
if (window.bb_confirm.items.length === 0) {
150-
delete window.bb_confirm
151-
EventHandler.off(document, 'click', confirm.closeConfirm)
152-
}
153-
if (confirm.popover) {
154-
confirm.popover.dispose();
155-
}
139+
const { popover } = confirm ?? {};
140+
if (popover) {
141+
popover.dispose();
156142
}
157-
}
158143

159-
export {
160-
showTooltip,
161-
removeTooltip
144+
const { PopConfirmButton } = window.BootstrapBlazor;
145+
PopConfirmButton.dispose(id, () => {
146+
EventHandler.off(document, 'click', confirm.closeConfirm)
147+
});
162148
}

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

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import Data from "../../modules/data.js"
1+
import { registerBootstrapBlazorModule } from "../../modules/utility.js"
2+
import Data from "../../modules/data.js"
23
import EventHandler from "../../modules/event-handler.js"
34

45
export function init(id) {
@@ -22,12 +23,9 @@ export function init(id) {
2223
EventHandler.on(list, 'click', '.slide-item', e => {
2324
list.classList.remove('show')
2425
})
25-
26-
if (!window.bb_slide_button) {
27-
window.bb_slide_button = true
28-
29-
EventHandler.on(document, 'click', e => closePopup(e));
30-
}
26+
registerBootstrapBlazorModule('SlideButton', id, () => {
27+
EventHandler.on(document, 'click', closePopup)
28+
});
3129
}
3230

3331
export function update(id) {
@@ -42,10 +40,15 @@ export function dispose(id) {
4240
Data.remove(id)
4341

4442
if (slide) {
45-
EventHandler.off(slide.button, 'click')
46-
EventHandler.off(slide.list, 'click', '.btn-close')
47-
EventHandler.off(slide.list, 'click', '.slide-item')
43+
const { button, list } = slide ?? {};
44+
EventHandler.off(button, 'click');
45+
EventHandler.off(list, 'click');
4846
}
47+
48+
const { SlideButton } = window.BootstrapBlazor;
49+
SlideButton.dispose(id, () => {
50+
EventHandler.off(document, 'click', closePopup)
51+
});
4952
}
5053

5154
const reset = slide => {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,5 +50,8 @@ export function dispose(id) {
5050

5151
if (select) {
5252
unregisterSelect(select);
53+
if (select.popover) {
54+
Popover.dispose(select.popover);
55+
}
5356
}
5457
}

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

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getDescribedElement, getDescribedOwner, hackTooltip, hackPopover, isDisabled } from "./utility.js"
1+
import { getDescribedElement, getDescribedOwner, hackTooltip, hackPopover, isDisabled, registerBootstrapBlazorModule } from "./utility.js"
22
import EventHandler from "./event-handler.js"
33

44
const Popover = {
@@ -131,7 +131,18 @@ const Popover = {
131131
}
132132
}
133133

134-
const closePopover = e => {
134+
135+
EventHandler.on(el, 'show.bs.popover', showPopover)
136+
EventHandler.on(el, 'inserted.bs.popover', insertedPopover)
137+
EventHandler.on(el, 'hide.bs.popover', hidePopover)
138+
EventHandler.on(el, 'click', popover.toggleClass, active)
139+
EventHandler.on(popover.toggleMenu, 'click', '.dropdown-item', e => {
140+
if (popover.popover._config.autoClose !== 'outside') {
141+
popover.hide()
142+
}
143+
})
144+
145+
popover.closePopover = e => {
135146
const selector = `.${popover.class}.show`;
136147
const el = e.target;
137148
if (el.closest(selector)) {
@@ -150,22 +161,9 @@ const Popover = {
150161
}
151162
});
152163
}
153-
154-
EventHandler.on(el, 'show.bs.popover', showPopover)
155-
EventHandler.on(el, 'inserted.bs.popover', insertedPopover)
156-
EventHandler.on(el, 'hide.bs.popover', hidePopover)
157-
EventHandler.on(el, 'click', popover.toggleClass, active)
158-
EventHandler.on(popover.toggleMenu, 'click', '.dropdown-item', e => {
159-
if (popover.popover._config.autoClose !== 'outside') {
160-
popover.hide()
161-
}
162-
})
163-
164-
if (!window.bb_dropdown) {
165-
window.bb_dropdown = true
166-
167-
EventHandler.on(document, 'click', closePopover);
168-
}
164+
registerBootstrapBlazorModule('Popover', el, () => {
165+
EventHandler.on(document, 'click', popover.closePopover);
166+
});
169167

170168
// update handler
171169
if (popover.toggleMenu) {
@@ -207,6 +205,11 @@ const Popover = {
207205
EventHandler.off(popover.el, 'hide.bs.popover')
208206
EventHandler.off(popover.el, 'click', '.dropdown-toggle')
209207
EventHandler.off(popover.toggleMenu, 'click', '.dropdown-item')
208+
209+
const { Popover } = window.BootstrapBlazor;
210+
Popover.dispose(popover, () => {
211+
EventHandler.off(document, 'click', popover.closePopover);
212+
});
210213
}
211214
else {
212215
EventHandler.off(popover.el, 'show.bs.dropdown')

‎src/BootstrapBlazor/wwwroot/modules/utility.js‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -571,23 +571,16 @@ const hackPopover = (popover, css) => {
571571
}
572572

573573
const hackTooltip = function () {
574-
const tooltip = registerBootstrapBlazorModule('Tooltip', {
575-
hooked: false,
576-
hackDispose: function () {
577-
if (this.hooked === false) {
578-
this.hooked = true;
579-
580-
const originalDispose = bootstrap.Tooltip.prototype.dispose;
581-
bootstrap.Tooltip.prototype.dispose = function () {
582-
originalDispose.call(this);
583-
// fix https://github.com/twbs/bootstrap/issues/37474
584-
this._activeTrigger = {};
585-
this._element = document.createElement('noscript'); // placeholder with no behavior
586-
}
587-
}
574+
const mock = () => {
575+
const originalDispose = bootstrap.Tooltip.prototype.dispose;
576+
bootstrap.Tooltip.prototype.dispose = function () {
577+
originalDispose.call(this);
578+
// fix https://github.com/twbs/bootstrap/issues/37474
579+
this._activeTrigger = {};
580+
this._element = document.createElement('noscript'); // placeholder with no behavior
588581
}
589-
});
590-
tooltip.hackDispose();
582+
}
583+
registerBootstrapBlazorModule('Tooltip', null, mock);
591584
}
592585

593586
const setIndeterminate = (object, state) => {
@@ -815,10 +808,32 @@ const deepMerge = (obj1, obj2, skipNull = true) => {
815808
return obj1;
816809
}
817810

818-
export function registerBootstrapBlazorModule(name, module) {
811+
export function registerBootstrapBlazorModule(name, identifier, callback) {
819812
window.BootstrapBlazor ??= {};
820-
window.BootstrapBlazor[name] ??= deepMerge(window.BootstrapBlazor[name] ?? {}, module);
821-
return window.BootstrapBlazor[name];
813+
window.BootstrapBlazor[name] ??= {
814+
_init: false,
815+
_items: [],
816+
register: function (id, cb) {
817+
if (id) {
818+
this._items.push(id);
819+
}
820+
if (this._init === false) {
821+
this._init = true;
822+
cb();
823+
}
824+
return this;
825+
},
826+
dispose: function (id, cb) {
827+
if (id) {
828+
this._items = this._items.filter(item => item !== id);
829+
}
830+
if (this._items.length === 0 && cb) {
831+
cb();
832+
}
833+
}
834+
};
835+
836+
return window.BootstrapBlazor[name].register(identifier, callback);
822837
}
823838

824839
export function setTitle(title) {

0 commit comments

Comments
 (0)