fix(user): align badge modals with reference theme

assets/js/core/modal-runtime.js

@@ -12,6 +12,7 @@
 
   var ROOT_ID = "aksrt-modal-runtime-root";
   var active = null;
+  var sessions = [];
   var sequence = 0;
   var loaders = Object.create(null);
 
@@ -78,6 +79,9 @@
   }
 
   function skeleton(options) {
+    if (options && options.loading === "spinner") {
+      return '<div class="aksrt-modal-runtime__loading flex jc"><div class="em2x opacity5"><svg class="loading-circle" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20"></circle></svg></div></div>';
+    }
     return (options && options.skeleton) ||
       '<div class="aksrt-modal-runtime__skeleton" aria-live="polite" aria-busy="true">' +
       '<span class="aksrt-modal-runtime__skeleton-line is-wide"></span>' +
@@ -97,6 +101,10 @@
     window.AksrtModalTelemetry.mark(session.telemetryId, event);
   }
 
+  function isLive(session) {
+    return !!session && !session.closed && sessions.indexOf(session) !== -1;
+  }
+
   function setState(session, status, error) {
     session.state.status = status;
     session.state.error = error || null;
@@ -118,6 +126,7 @@
   function bindChrome(session) {
     var shell = session.shell;
     shell.addEventListener("click", function (event) {
+      if (active !== session) return;
       var closeButton = event.target.closest(closeSelector());
       if (closeButton) {
         event.preventDefault();
@@ -136,6 +145,7 @@
     });
 
     shell.addEventListener("keydown", function (event) {
+      if (active !== session) return;
       if (event.key === "Escape") {
         event.preventDefault();
         close("escape");
@@ -167,6 +177,7 @@
     var bottom = options.bottom === true || (options.mobileBottom !== false && isMobile());
     var heightStyle = options.height ? "min-height:" + parseInt(options.height, 10) + "px;" : "";
     var initialHtml = options.html !== undefined ? options.html : skeleton(options);
+    var swipeHandle = bottom && options.swipeClose ? '<div class="touch-close" aria-hidden="true"></div>' : "";
     var titleId = "aksrt-modal-title-" + String(sequence + 1);
     var titleHtml = options.title
       ? '<header class="aksrt-modal-runtime__header"><h3 class="aksrt-modal-runtime__title" id="' + titleId + '">' + escapeHtml(options.title) + '</h3><button type="button" class="aksrt-modal-runtime__close" data-aksrt-modal-close aria-label="关闭">&times;</button></header>'
@@ -174,6 +185,7 @@
 
     shell.className =
       "aksrt-modal-runtime" +
+      (active ? " aksrt-modal-runtime--child" : "") +
       (bottom ? " aksrt-modal-runtime--bottom" : "") +
       (options.className ? " " + options.className : "");
     shell.setAttribute("role", "dialog");
@@ -184,7 +196,7 @@
       '<div class="aksrt-modal-runtime__overlay" data-aksrt-modal-close></div>' +
       '<div class="aksrt-modal-runtime__dialog" style="' + heightStyle + '">' +
       titleHtml +
-      '<div class="aksrt-modal-runtime__content">' + initialHtml + "</div></div>";
+      '<div class="aksrt-modal-runtime__content">' + initialHtml + "</div>" + swipeHandle + "</div>";
 
     var session = {
       id: String(++sequence),
@@ -192,15 +204,34 @@
       content: shell.querySelector(".aksrt-modal-runtime__content"),
       options: options,
       state: window.AksrtModalState.create(options.kind || "generic"),
-      focusReturn: document.activeElement,
+      focusReturn: options.focusReturn !== undefined ? options.focusReturn : document.activeElement,
       controller: null,
       flight: null,
       closed: false,
       telemetryId: telemetryStart(options.telemetry === false ? false : options.kind),
     };
 
+    if (active) {
+      active.shell.classList.add("aksrt-modal-runtime--parent");
+      active.shell.setAttribute("aria-modal", "false");
+      active.shell.setAttribute("aria-hidden", "true");
+      active.shell.setAttribute("inert", "");
+    }
     root.appendChild(shell);
     bindChrome(session);
+    if (bottom && options.swipeClose && window.jQuery && window.jQuery.fn && typeof window.jQuery.fn.minitouch === "function") {
+      window.jQuery(shell).minitouch({
+        direction: "bottom",
+        selector: ".aksrt-modal-runtime__dialog",
+        start_selector: ".modal-colorful-header,.touch-close,.touch",
+        depreciation: 50,
+        stop: function () { return active !== session; },
+        onEnd: function () {
+          if (active === session) close("swipe");
+        },
+      });
+    }
+    sessions.push(session);
     active = session;
     lockScroll(true);
     void shell.offsetWidth;
@@ -244,26 +275,52 @@
     session.controller = null;
   }
 
-  function close(reason, preserveRequest) {
+  function removeActive(reason, preserveRequest, resumeParent) {
     if (!active) return;
     var session = active;
-    active = null;
+    if (sessions[sessions.length - 1] !== session) return;
+    sessions.pop();
+    active = sessions[sessions.length - 1] || null;
     session.closed = true;
     if (!preserveRequest) abortSessionRequest(session);
     session.shell.classList.remove("is-open");
-    if (!preserveRequest) lockScroll(false);
+    if (active && resumeParent) {
+      active.shell.classList.remove("aksrt-modal-runtime--parent");
+      active.shell.setAttribute("aria-modal", "true");
+      active.shell.removeAttribute("aria-hidden");
+      active.shell.removeAttribute("inert");
+    }
+    if (!active && !preserveRequest) lockScroll(false);
     document.dispatchEvent(new CustomEvent("aksrt:modal:close", {
       detail: { shell: session.shell, reason: reason || "close", session: session },
     }));
 
     var node = session.shell;
+    var exitDelay = 220;
+    var dialog = node.querySelector(".aksrt-modal-runtime__dialog");
+    if (dialog) {
+      var durations = window.getComputedStyle(dialog).transitionDuration || "";
+      durations.split(",").forEach(function (duration) {
+        var milliseconds = parseFloat(duration) * (duration.trim().slice(-2) === "ms" ? 1 : 1000);
+        if (milliseconds > exitDelay) exitDelay = milliseconds;
+      });
+    }
     window.setTimeout(function () {
       if (node && node.parentNode) node.parentNode.removeChild(node);
       var target = session.focusReturn;
-      if (!preserveRequest && !active && target && target !== node && document.contains(target) && typeof target.focus === "function") {
+      if (!preserveRequest && resumeParent && active) {
+        var canRestoreTarget = target && target !== node && active.shell.contains(target) && typeof target.focus === "function";
+        var fallbackNodes = canRestoreTarget ? [] : focusable(active.shell);
+        var fallback = fallbackNodes.length ? fallbackNodes[0] : active.shell;
+        try { (canRestoreTarget ? target : fallback).focus(); } catch (error) {}
+      } else if (!preserveRequest && resumeParent && !active && target && target !== node && document.contains(target) && typeof target.focus === "function") {
         try { target.focus(); } catch (error) {}
       }
-    }, 220);
+    }, exitDelay);
+  }
+
+  function close(reason, preserveRequest) {
+    removeActive(reason, preserveRequest, true);
   }
 
   function responseData(result) {
@@ -286,7 +343,7 @@
   }
 
   function renderError(session, error) {
-    if (!session || session.closed || active !== session) return;
+    if (!isLive(session)) return;
     var unauthorized = error && error.code === "unauthorized";
     setState(session, unauthorized ? "unauthorized" : "error", error);
     telemetryMark(session, unauthorized ? "unauthorized" : "error");
@@ -301,7 +358,7 @@
   }
 
   function renderResult(session, result) {
-    if (!session || session.closed || active !== session) return;
+    if (!isLive(session)) return;
 
     if (session.options.responseType === "json" || typeof session.options.renderData === "function") {
       var data = responseData(result);
@@ -384,11 +441,11 @@
     session.flight = flight;
 
     return flight.promise.then(function (result) {
-      if (!session.closed && active === session) renderResult(session, result);
+      if (isLive(session)) renderResult(session, result);
       return session.shell;
     }).catch(function (error) {
       var aborted = error && (error.name === "AbortError" || error.code === "ABORT_ERR");
-      if (!aborted && !session.closed && active === session) renderError(session, error);
+      if (!aborted && isLive(session)) renderError(session, error);
       return session.shell;
     }).then(function (shell) {
       // A refresh/replacement may have installed a newer flight on this session.
@@ -403,7 +460,10 @@
 
   function open(options) {
     options = options || {};
-    close("replace");
+    if (!options.newModal || !active) {
+      if (active && !options.newModal) options.focusReturn = active.focusReturn;
+      removeActive("replace", false, false);
+    }
     var session = createSession(options);
     return session.shell;
   }
@@ -419,7 +479,10 @@
     options = Object.assign({}, options || {});
     if (!options.url) return Promise.reject(new Error("missing url"));
     var sameRequest = active && active.flight && sessionKey(active.options) === sessionKey(options);
-    close("replace", !!sameRequest);
+    if (!options.newModal || !active) {
+      if (active && !options.newModal) options.focusReturn = active.focusReturn;
+      removeActive("replace", !!sameRequest, false);
+    }
     var session = createSession(options);
     return load(session).then(function () { return session.shell; });
   }

assets/js/core/modal-triggers.js

@@ -26,6 +26,9 @@
       className: element.getAttribute("data-aksrt-modal-class") || "modal-mini full-sm",
       height: parseInt(element.getAttribute("data-aksrt-modal-height") || "0", 10) || 0,
       mobileBottom: element.getAttribute("data-aksrt-modal-mobile-bottom") === "true",
+      newModal: element.getAttribute("data-aksrt-modal-new") === "true",
+      loading: element.getAttribute("data-aksrt-modal-loading") || "",
+      swipeClose: element.getAttribute("data-aksrt-modal-swipe-close") === "true",
       bottom: element.getAttribute("data-aksrt-modal-bottom") === "true",
       kind: element.getAttribute("data-aksrt-modal-kind") || "generic",
       cacheKey: element.getAttribute("data-aksrt-modal-cache-key") || "",