mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-06 05:59:45 +08:00
!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:
parent
2a1764a328
commit
4f495ab0db
@ -19,6 +19,8 @@ public partial class DialogDemo
|
||||
{
|
||||
Title = "Pop-up",
|
||||
IsDraggable = true,
|
||||
IsKeyboard = true,
|
||||
IsBackdrop = true,
|
||||
Component = BootstrapDynamicComponent.CreateComponent<DialogDemo>()
|
||||
});
|
||||
}
|
||||
|
@ -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",
|
||||
|
@ -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> 方法弹出线程阻塞模式的对话框",
|
||||
|
@ -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>
|
||||
|
@ -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>()
|
||||
});
|
||||
}
|
||||
|
@ -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
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user