!3542 feat(#I61V2C): multiple pop-up dialog support esc keyboard and IsBackdrop parameter

* chore: bump version 7.0.3 * chore: 更新打包文件 * doc: 更新说明文档 * doc: 更新示例多级弹窗支持键盘与点击取消 * fix: 修复获取弹窗 left 不准确问题 * feat: 增加多弹窗支持 Escape 与 Backdrop 功能 * refactor: 精简代码逻辑格式化代码 * refactor: 精简代码逻辑 * doc: 多级弹窗示例开启可拖动
2024-12-06 05:59:45 +08:00 · 2022-11-18 05:33:20 +00:00 · 2022-11-18 05:33:20 +00:00 · 4f495ab0db
commit 4f495ab0db
parent 2a1764a328
9 changed files with 82 additions and 40 deletions
--- a/src/BootstrapBlazor.Shared/Components/DialogDemo.razor.cs
+++ b/src/BootstrapBlazor.Shared/Components/DialogDemo.razor.cs
@ -19,6 +19,8 @@ public partial class DialogDemo
    {
        Title = "Pop-up",
        IsDraggable = true,
+        IsKeyboard = true,
+        IsBackdrop = true,
        Component = BootstrapDynamicComponent.CreateComponent<DialogDemo>()
    });
 }
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@ -735,6 +735,7 @@
    "P40": "Switch the third tab of the <code>Tab</code> component in the pop-up window <b>role management</b>",
    "P41": "Click the popup in the tab to continue the popup dialog",
    "P42": "<b>Keep state</b> of previously opened dialogs after closing the current dialog",
+    "MultipleDialogDesc": "At present, multi-level pop-up windows have been implemented. Each <code>ModalDialog</code> can independently set the <code>IsBackdrop</code> <code>IsKeyboard</code> parameters. This fixes the problem of pressing <kbd>ESC</kbd> in the previous version to remove all pop-up windows",
    "P43": "Pop-ups",
    "P44": "Modal dialog",
    "P45": "Pop up a dialog box in thread blocking mode through the <code>ShowModal</code> method",
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@ -736,6 +736,7 @@
    "P40": "切换弹窗内 <code>Tab</code> 组件的第三个标签页 <b>角色管理</b>",
    "P41": "点击标签页中的弹窗继续弹出对话框",
    "P42": "关闭当前对话框后之前打开的对话框 <b>保持状态</b>",
+    "MultipleDialogDesc": "目前多级弹窗已经实现，每个 <code>ModalDialog</code> 均可以独立设置 <code>IsBackdrop</code> <code>IsKeyboard</code> 参数，修复了上一个版本按下 <kbd>ESC</kbd> 弹窗全部消失问题",
    "P43": "弹窗",
    "P44": "模态对话框",
    "P45": "通过 <code>ShowModal</code> 方法弹出线程阻塞模式的对话框",
--- a/src/BootstrapBlazor.Shared/Samples/Dialogs.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Dialogs.razor
@ -45,7 +45,7 @@ await DialogService.Show(op);</Pre>
 </DemoBlock>

 <DemoBlock Title="@Localizer["P13"]" Introduction="@Localizer["P14"]" Name="Component">
-    <p>@((MarkupString)Localizer["P15"].Value)</p>
+    <div class="mb-2">@((MarkupString)Localizer["P15"].Value)</div>
    <Button @onclick="@OnClickCounter">@Localizer["P16"]</Button>
 </DemoBlock>

@ -79,7 +79,7 @@ await DialogService.Show(op);</Pre>
 </DemoBlock>

 <DemoBlock Title="@Localizer["P25"]" Introduction="@Localizer["P26"]" Name="CloseDialogByCode">
-    <p>@((MarkupString)Localizer["P27"].Value)</p>
+    <div class="mb-2">@((MarkupString)Localizer["P27"].Value)</div>
    <Button @onclick="@Show">Dialog</Button>
 </DemoBlock>

@ -89,20 +89,21 @@ await DialogService.Show(op);</Pre>
 </DemoBlock>

 <DemoBlock Title="@Localizer["P36"]" Introduction="@Localizer["P37"]" Name="MultipleDialog">
-    <p>@Localizer["P38"]</p>
-    <ul class="ul-demo mb-3">
+    <div class="mb-2">@Localizer["P38"]</div>
+    <ul class="ul-demo mb-2">
        <li>@Localizer["P39"]</li>
        <li>@((MarkupString)Localizer["P40"].Value)</li>
        <li>@Localizer["P41"]</li>
        <li>@((MarkupString)Localizer["P42"].Value)</li>
    </ul>
+    <div class="mb-2">@((MarkupString)Localizer["MultipleDialogDesc"].Value)</div>

    <Button OnClick="@ShowDialogLoop">@Localizer["P43"]</Button>
 </DemoBlock>

 <DemoBlock Title="@Localizer["P44"]" Introduction="@Localizer["P45"]" Name="ModalDialog">
-    <p>@Localizer["P46"]</p>
-    <ul class="ul-demo mb-3">
+    <div class="mb-2">@Localizer["P46"]</div>
+    <ul class="ul-demo mb-2">
        <li>@Localizer["P47"]</li>
        <li>@((MarkupString)Localizer["P48"].Value)</li>
        <li>@((MarkupString)Localizer["P49"].Value)</li>
@ -113,8 +114,8 @@ await DialogService.Show(op);</Pre>
 </DemoBlock>

 <DemoBlock Title="@Localizer["P52"]" Introduction="@Localizer["P53"]" Name="EditDialog">
-    <p>@Localizer["P54"]</p>
-    <ul class="ul-demo mb-3">
+    <div class="mb-2">@Localizer["P54"]</div>
+    <ul class="ul-demo mb-2">
        <li>@Localizer["P55"]</li>
        <li>@((MarkupString)Localizer["P56"].Value)</li>
        <li>@((MarkupString)Localizer["P57"].Value)</li>
@ -123,8 +124,8 @@ await DialogService.Show(op);</Pre>
 </DemoBlock>

 <DemoBlock Title="@Localizer["P59"]" Introduction="@Localizer["P60"]" Name="SearchDialog">
-    <p>@Localizer["P61"]</p>
-    <ul class="ul-demo mb-3">
+    <div class="mb-2">@Localizer["P61"]</div>
+    <ul class="ul-demo mb-2">
        <li>@Localizer["P62"]</li>
        <li>@((MarkupString)Localizer["P63"].Value)</li>
        <li>@((MarkupString)Localizer["P64"].Value)</li>
@ -133,8 +134,8 @@ await DialogService.Show(op);</Pre>
 </DemoBlock>

 <DemoBlock Title="@Localizer["P66"]" Introduction="@Localizer["P67"]" Name="SaveDialog">
-    <p>@Localizer["P68"]</p>
-    <ul class="ul-demo mb-3">
+    <div class="mb-2">@Localizer["P68"]</div>
+    <ul class="ul-demo mb-2">
        <li>@Localizer["P69"]</li>
        <li>@((MarkupString)Localizer["P70"].Value)</li>
    </ul>
@ -146,7 +147,7 @@ await DialogService.Show(op);</Pre>
 </DemoBlock>

 <DemoBlock Title="@Localizer["P75"]" Introduction="@Localizer["P76"]" Name="PrintDialog">
-    <p>@((MarkupString)Localizer["P77"].Value)</p>
+        <div class="mb-2">@((MarkupString)Localizer["P77"].Value)</div>
    <Button OnClick="@OnPrintDialogClick">@Localizer["P79"]</Button>
 </DemoBlock>

@ -159,8 +160,8 @@ await DialogService.Show(op);</Pre>
 </DemoBlock>

 <DemoBlock Title="@Localizer["P86"]" Introduction="@Localizer["P87"]" Name="Email">
-    <p>@Localizer["P88"]</p>
-    <ul class="ul-demo mb-3">
+    <div class="mb-2">@Localizer["P88"]</div>
+    <ul class="ul-demo mb-2">
        <li>@((MarkupString)Localizer["P89"].Value)</li>
        <li>@((MarkupString)Localizer["P90"].Value)</li>
        <li>@((MarkupString)Localizer["P91"].Value)</li>
--- a/src/BootstrapBlazor.Shared/Samples/Dialogs.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/Dialogs.razor.cs
@ -270,6 +270,9 @@ public sealed partial class Dialogs
        await DialogService.Show(new DialogOption()
        {
            Title = $"Multiple Pop-up",
+            IsDraggable= true,
+            IsKeyboard = true,
+            IsBackdrop = true,
            Component = BootstrapDynamicComponent.CreateComponent<DialogDemo>()
        });
    }
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
-    <Version>7.0.3-beta02</Version>
+    <Version>7.0.3</Version>
  </PropertyGroup>

  <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">
--- a/src/BootstrapBlazor/wwwroot/bundle/bootstrap.blazor.min.js
+++ b/src/BootstrapBlazor/wwwroot/bundle/bootstrap.blazor.min.js
--- a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js
+++ b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js
--- a/src/BootstrapBlazor/wwwroot/modules/modal.js
+++ b/src/BootstrapBlazor/wwwroot/modules/modal.js
@ -17,10 +17,7 @@ export class Modal extends BlazorComponent {
        EventHandler.on(this._element, 'hide.bs.modal', () => {
            if (this._draggable) {
                this._dialog.style.width = ''
-                this._dialog.style.marginLeft = ''
-                this._dialog.style.marginTop = ''
-                this._dialog.style.marginBottom = ''
-                this._dialog.style.marginRight = ''
+                this._dialog.style.margin = ''

                EventHandler.off(this._dialog, 'mousedown')
                EventHandler.off(this._dialog, 'touchstart')
@ -34,7 +31,6 @@ export class Modal extends BlazorComponent {
                this._modal.dispose()
                this._modal = null
                document.body.classList.remove('modal-open');
-                document.body.style.paddingLeft = '';
                document.body.style.paddingRight = '';
                document.body.style.overflow = '';
            }
@ -56,19 +52,30 @@ export class Modal extends BlazorComponent {
    _show() {
        const dialogs = this._element.querySelectorAll('.modal-dialog')
        if (dialogs.length === 1) {
-            const keyboard = this._element.getAttribute('data-bs-keyboard') === 'true'
-            let backdrop = this._element.getAttribute('data-bs-backdrop')
-            if (backdrop === null) {
-                backdrop = true
+            let backdrop = this._element.getAttribute('data-bs-backdrop') !== 'static'
+            if (!backdrop) {
+                backdrop = 'static'
            }
            if (!this._modal) {
                this._modal = bootstrap.Modal.getOrCreateInstance(this._element)
            }
-            this._modal._config.keyboard = keyboard
+            this._modal._config.keyboard = this._element.getAttribute('data-bs-keyboard') === 'true'
            this._modal._config.backdrop = backdrop
            this._modal.show()
        } else {
+            if (!this._state) {
+                this._state = []
+            }
+            this._state.push({
+                keyboard: this._element.getAttribute('data-bs-keyboard') === 'true',
+                backdrop: this._element.getAttribute('data-bs-backdrop') !== 'static'
+            })
            this._invoker.invokeMethodAsync(this._invokerShownMethod)
+
+            this._modal._config.keyboard = false
+            this._modal._config.backdrop = 'static'
+
+            this._handlerKeyboardAndBackdrop()
        }

        this._dialog = dialogs[dialogs.length - 1]
@ -87,19 +94,14 @@ export class Modal extends BlazorComponent {
                e => {
                    this._originX = e.clientX || e.touches[0].clientX;
                    this._originY = e.clientY || e.touches[0].clientY;
-                    this._dialogWidth = getWidth(this._dialog);
-                    this._dialogHeight = getHeight(this._dialog);

-                    const style = getComputedStyle(this._dialog)
-
-                    this._pt.top = parseInt(style.marginTop) || 0
-                    this._pt.left = parseInt(style.marginLeft) || 0
-
-                    this._dialog.style.marginLeft = `${this._pt.left}px`
-                    this._dialog.style.marginTop = `${this._pt.top}px`
-                    this._dialog.style.marginBottom = '0'
-                    this._dialog.style.marginRight = '0'
+                    const rect = this._dialog.getBoundingClientRect()
+                    this._dialogWidth = rect.width
+                    this._dialogHeight = rect.height
+                    this._pt.top = rect.top
+                    this._pt.left = rect.left

+                    this._dialog.style.margin = `${this._pt.top}px 0 0 ${this._pt.left}px`
                    this._dialog.style.width = `${this._dialogWidth}px`
                    this._dialog.classList.add('is-drag')
                },
@ -128,6 +130,33 @@ export class Modal extends BlazorComponent {
        }
    }

+    _handlerKeyboardAndBackdrop() {
+        if (!this._hook_keyboard_backdrop) {
+            this._hook_keyboard_backdrop = true;
+
+            this._handlerEscape = e => {
+                if (e.key === 'Escape') {
+                    const state = this._state[this._state.length - 1]
+                    if (state.keyboard) {
+                        this._hide()
+                        this._state.pop()
+                    }
+                }
+            }
+
+            EventHandler.on(document, 'keyup', this._handlerEscape)
+            EventHandler.on(this._element, 'click', e => {
+                if (e.target.closest('.modal-dialog') === null) {
+                    const state = this._state[this._state.length - 1]
+                    if (state.backdrop !== 'static') {
+                        this._hide()
+                        this._state.pop()
+                    }
+                }
+            })
+        }
+    }
+
    _hide() {
        const dialogs = this._element.querySelectorAll('.modal-dialog')
        if (dialogs.length === 1) {
@ -154,12 +183,17 @@ export class Modal extends BlazorComponent {
    }

    _dispose() {
-        if(this._draggable) {
+        if (this._draggable) {
            this._disposeDrag()
        }

        EventHandler.off(this._element, 'shown.bs.modal')
        EventHandler.off(this._element, 'hide.bs.modal')
+        EventHandler.off(this._element, 'click')
+
+        if (this._hook_keyboard_backdrop) {
+            EventHandler.off(document, 'keyup', this._handlerEscape)
+        }

        EventHandler.off(window, 'popstate', this._pop)
        if (this._modal) {