!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: 多级弹窗示例开启可拖动
This commit is contained in:
Argo 2022-11-18 05:33:20 +00:00
parent 2a1764a328
commit 4f495ab0db
9 changed files with 82 additions and 40 deletions

View File

@ -19,6 +19,8 @@ public partial class DialogDemo
{
Title = "Pop-up",
IsDraggable = true,
IsKeyboard = true,
IsBackdrop = true,
Component = BootstrapDynamicComponent.CreateComponent<DialogDemo>()
});
}

View File

@ -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",

View File

@ -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> 方法弹出线程阻塞模式的对话框",

View File

@ -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>

View File

@ -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>()
});
}

View File

@ -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'">

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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) {