Moved dialog box implementation out of the views stack.
This commit is contained in:
parent
20fc663bcb
commit
852d64776b
3 changed files with 49 additions and 27 deletions
|
@ -13,6 +13,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-template-columns: 340px;
|
||||
z-index: 88888888;
|
||||
}
|
||||
|
||||
.msgbox-dialog {
|
||||
|
|
|
@ -4,12 +4,52 @@
|
|||
|
||||
const MamiMessageBoxContainer = function() {
|
||||
const container = <div class="msgbox-container"/>;
|
||||
let raised = false;
|
||||
let currAnim;
|
||||
|
||||
return {
|
||||
set pointerEvents(value) {
|
||||
container.style.pointerEvents = value ? null : 'none';
|
||||
raise: async parent => {
|
||||
if(raised) return;
|
||||
raised = true;
|
||||
container.style.pointerEvents = null;
|
||||
|
||||
if(!parent.contains(container))
|
||||
parent.appendChild(container);
|
||||
|
||||
currAnim?.cancel();
|
||||
|
||||
currAnim = MamiAnimate({
|
||||
async: true,
|
||||
delayed: true,
|
||||
duration: 300,
|
||||
easing: 'outExpo',
|
||||
start: () => { container.style.opacity = '0'; },
|
||||
update: t => { container.style.opacity = t; },
|
||||
end: () => { container.style.opacity = null; },
|
||||
});
|
||||
try {
|
||||
await currAnim.start();
|
||||
} catch(ex) {}
|
||||
},
|
||||
dismiss: async parent => {
|
||||
if(!raised) return;
|
||||
raised = false;
|
||||
container.style.pointerEvents = 'none';
|
||||
|
||||
currAnim?.cancel();
|
||||
|
||||
currAnim = MamiAnimate({
|
||||
async: true,
|
||||
delayed: true,
|
||||
duration: 300,
|
||||
easing: 'outExpo',
|
||||
update: t => { container.style.opacity = 1 - t; },
|
||||
end: t => { parent.removeChild(container); },
|
||||
});
|
||||
try {
|
||||
await currAnim.start();
|
||||
} catch(ex) {}
|
||||
},
|
||||
getElement: () => container,
|
||||
show: async dialog => {
|
||||
if(typeof dialog !== 'object' || dialog === null)
|
||||
throw 'dialog must be a non-null object';
|
||||
|
@ -129,8 +169,6 @@ const MamiMessageBoxDialog = function(info) {
|
|||
buttons.classList.add('msgbox-dialog-buttons-many');
|
||||
|
||||
return {
|
||||
getElement: () => dialog,
|
||||
|
||||
get buttonCount() {
|
||||
return buttons.childElementCount;
|
||||
},
|
||||
|
@ -201,10 +239,10 @@ const MamiMessageBoxDialog = function(info) {
|
|||
|
||||
const MamiMessageBoxControl = function(options) {
|
||||
options = MamiArguments.verify(options, [
|
||||
MamiArguments.type('views', 'object', undefined, true),
|
||||
MamiArguments.check('parent', undefined, value => value instanceof Element, true),
|
||||
]);
|
||||
|
||||
const views = options.views;
|
||||
const parent = options.parent;
|
||||
const container = new MamiMessageBoxContainer;
|
||||
const queue = [];
|
||||
let currentDialog;
|
||||
|
@ -237,16 +275,7 @@ const MamiMessageBoxControl = function(options) {
|
|||
};
|
||||
|
||||
const raise = async () => {
|
||||
container.pointerEvents = true;
|
||||
|
||||
if(!views.isCurrent(container))
|
||||
views.raise(container, ctx => MamiAnimate({
|
||||
async: true,
|
||||
duration: 300,
|
||||
easing: 'outExpo',
|
||||
update: t => { ctx.toElem.style.opacity = t; },
|
||||
end: () => { ctx.toElem.style.opacity = null; },
|
||||
}));
|
||||
container.raise(parent);
|
||||
|
||||
if(!processingQueue)
|
||||
await processQueue();
|
||||
|
@ -254,16 +283,8 @@ const MamiMessageBoxControl = function(options) {
|
|||
|
||||
const dismiss = async () => {
|
||||
processingQueue = false;
|
||||
container.dismiss(parent);
|
||||
currentDialog?.cancel();
|
||||
|
||||
if(views.isCurrent(container))
|
||||
await views.pop(ctx => MamiAnimate({
|
||||
async: true,
|
||||
duration: 300,
|
||||
easing: 'outExpo',
|
||||
update: t => { ctx.fromElem.style.opacity = 1 - t; },
|
||||
end: t => { ctx.fromElem.style.opacity = '0'; },
|
||||
}));
|
||||
};
|
||||
|
||||
return {
|
||||
|
|
|
@ -42,7 +42,7 @@ window.Umi = { UI: {} };
|
|||
Object.defineProperty(window, 'mami', { enumerable: true, value: ctx });
|
||||
|
||||
ctx.views = new MamiViewsControl({ body: document.body });
|
||||
ctx.msgbox = new MamiMessageBoxControl({ views: ctx.views });
|
||||
ctx.msgbox = new MamiMessageBoxControl({ parent: document.body });
|
||||
|
||||
const loadingOverlay = new Umi.UI.LoadingOverlay('spinner', 'Loading...');
|
||||
await ctx.views.push(loadingOverlay);
|
||||
|
|
Loading…
Reference in a new issue