Update dialog history handling

src/components/appRouter.js

@@ -11,7 +11,7 @@ import ServerConnections from './ServerConnections';
 import alert from './alert';
 import reactControllerFactory from './reactControllerFactory';
 
-const history = createHashHistory();
+export const history = createHashHistory();
 
 /**
  * Page types of "no return" (when "Go back" should behave differently, probably quitting the application).
@@ -20,14 +20,13 @@ const START_PAGE_TYPES = ['home', 'login', 'selectserver'];
 
 class AppRouter {
     allRoutes = new Map();
-    currentRouteInfo;
+    currentRouteInfo = { route: {} };
     currentViewLoadRequest;
     firstConnectionResult;
     forcedLogoutMsg;
     msgTimeout;
     promiseShow;
     resolveOnNextShow;
-    previousRoute = {};
 
     constructor() {
         document.addEventListener('viewshow', () => this.onViewShow());
@@ -482,9 +481,9 @@ class AppRouter {
 
     #getHandler(route) {
         return (ctx, next) => {
-            const ignore = route.dummyRoute === true || this.previousRoute.dummyRoute === true;
+            const ignore = ctx.path === this.currentRouteInfo.path;
-            this.previousRoute = route;
             if (ignore) {
+                console.debug('[appRouter] path did not change, ignoring route change');
                 // Resolve 'show' promise
                 this.onViewShow();
                 return;

src/components/dialogHelper/dialogHelper.js

@@ -1,4 +1,4 @@
-import { appRouter } from '../appRouter';
+import { history } from '../appRouter';
 import focusManager from '../focusManager';
 import browser from '../../scripts/browser';
 import layoutManager from '../layoutManager';
@@ -49,17 +49,19 @@ import '../../assets/css/scrollstyles.scss';
         self.originalUrl = window.location.href;
         const activeElement = document.activeElement;
         let removeScrollLockOnClose = false;
+        let unlisten;
 
-        function onHashChange() {
+        function onHashChange({ location }) {
-            const isBack = self.originalUrl === window.location.href;
+            const dialogs = location.state?.dialogs || [];
+            const shouldClose = !dialogs.includes(hash);
 
-            if (isBack || !isOpened(dlg)) {
+            if ((shouldClose || !isOpened(dlg)) && unlisten) {
-                window.removeEventListener('popstate', onHashChange);
+                unlisten();
             }
 
-            if (isBack) {
+            if (shouldClose) {
                 self.closedByBack = true;
-                closeDialog(dlg);
+                close(dlg);
             }
         }
 
@@ -68,7 +70,7 @@ import '../../assets/css/scrollstyles.scss';
                 self.closedByBack = true;
                 e.preventDefault();
                 e.stopPropagation();
-                closeDialog(dlg);
+                close(dlg);
             }
         }
 
@@ -77,7 +79,9 @@ import '../../assets/css/scrollstyles.scss';
                 inputManager.off(dlg, onBackCommand);
             }
 
-            window.removeEventListener('popstate', onHashChange);
+            if (unlisten) {
+                unlisten();
+            }
 
             removeBackdrop(dlg);
             dlg.classList.remove('opened');
@@ -86,10 +90,10 @@ import '../../assets/css/scrollstyles.scss';
                 document.body.classList.remove('noScroll');
             }
 
-            if (!self.closedByBack && isHistoryEnabled(dlg)) {
+            if (isHistoryEnabled(dlg)) {
-                const state = window.history.state || {};
+                const state = history.location.state || {};
-                if (state.dialogId === hash) {
+                if (state.dialogs?.length > 0 && state.dialogs[0] === hash) {
-                    appRouter.back();
+                    history.back();
                 }
             }
 
@@ -144,9 +148,19 @@ import '../../assets/css/scrollstyles.scss';
         animateDialogOpen(dlg);
 
         if (isHistoryEnabled(dlg)) {
-            appRouter.show(`/dialog?dlg=${hash}`, { dialogId: hash });
+            const state = history.location.state || {};
+            const dialogs = state.dialogs || [];
+            dialogs.push(hash);
 
-            window.addEventListener('popstate', onHashChange);
+            history.push(
+                `${history.location.pathname}${history.location.search}`,
+                {
+                    ...state,
+                    dialogs
+                }
+            );
+
+            unlisten = history.listen(onHashChange);
         } else {
             inputManager.on(dlg, onBackCommand);
         }
@@ -213,16 +227,6 @@ import '../../assets/css/scrollstyles.scss';
     }
 
     export function close(dlg) {
-        if (isOpened(dlg)) {
-            if (isHistoryEnabled(dlg)) {
-                appRouter.back();
-            } else {
-                closeDialog(dlg);
-            }
-        }
-    }
-
-    function closeDialog(dlg) {
         if (!dlg.classList.contains('hide')) {
             dlg.dispatchEvent(new CustomEvent('closing', {
                 bubbles: false,

src/scripts/routes.js

@@ -560,11 +560,6 @@ import { appRouter } from '../components/appRouter';
         serverRequest: true
     });
 
-    defineRoute({
-        path: '/dialog',
-        dummyRoute: true
-    });
-
     defineRoute({
         path: '/',
         autoFocus: false,