Moved dialog box implementation out of the views stack.

src/mami.css/controls/msgbox.css

@@ -13,6 +13,7 @@
     justify-content: center;
     align-items: center;
     grid-template-columns: 340px;
+    z-index: 88888888;
 }
 
 .msgbox-dialog {

src/mami.js/controls/msgbox.jsx

@@ -4,12 +4,52 @@
 
 const MamiMessageBoxContainer = function() {
     const container = <div class="msgbox-container"/>;
+    let raised = false;
+    let currAnim;
 
     return {
-        set pointerEvents(value) {
+        raise: async parent => {
-            container.style.pointerEvents = value ? null : 'none';
+            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;
+        container.raise(parent);
-
-        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; },
-            }));
 
         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 {

src/mami.js/main.js

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