integrate context with window.history API

src/ViewModel/Global/coreViewModel.ts

@@ -14,6 +14,7 @@ export default class CoreViewModel {
 
     // CONTEXT
     private contextStack = new Map<string, Context>();
+
     get contexts(): Context[] {
         return [...this.contextStack.values()];
     }
@@ -23,16 +24,20 @@ export default class CoreViewModel {
     set context(context: Context) {
         if (this.contextStack.has(context.contextId)) return;
         this.contextStack.set(context.contextId, context);
+        history.pushState({ id: context.contextId }, "");
     }
-    closeContext = (contextId: string): void => {
+
+    closeContext = (contextId: string, fromHistoryEvent: boolean = false): void => {
         if (
             !this.contexts
                 .map((context) => context.contextId)
                 .includes(contextId)
         )
             return;
+
         while (this.contexts.length > 0) {
             const currentContext: Context = this.context;
+            currentContext.handleContextClose(fromHistoryEvent);
             this.contextStack.delete(currentContext.contextId);
             if (currentContext.contextId == contextId) break;
         }
@@ -73,6 +78,10 @@ export default class CoreViewModel {
             allTranslations[settingsModel.language] || allTranslations.en;
 
         document.body.addEventListener("keydown", this.handleKeyDown);
+
+        window.onpopstate = () => {
+            this.closeContext(this.context.contextId, true);
+        }
     }
 
     // util
@@ -94,13 +103,14 @@ export class Context {
         return true;
     };
 
-    close: () => void;
+    close = (): void => {};
+    handleContextClose = (fromHistoryEvent: boolean): void => {};
 
     registerKeyStroke = (key: string, fn: () => void): void => {
         this.keystrokes.set(key, fn);
     };
 
-    constructor(public contextDebugDescription: string) {}
+    constructor(public contextDebugDescription: string) { }
 }
 
 export class ContextHost<T> extends Context {
@@ -119,7 +129,7 @@ export class ContextHost<T> extends Context {
         this.contexts.set(key, context);
     };
 
-    closeContext = (): void => {
+    closeCurrentContext = (): void => {
         if (this.currentContext.value) {
             this.coreViewModel.closeContext(
                 this.currentContext.value.contextId,
@@ -136,7 +146,7 @@ export class ContextHost<T> extends Context {
         );
         if (!selectedContext) return;
         if (selectedContext != this.currentContext.value) {
-            this.closeContext();
+            this.closeCurrentContext();
         }
 
         this.coreViewModel.context = selectedContext;

src/ViewModel/Global/fileTransferViewModel.ts

@@ -164,11 +164,15 @@ export default class FileTransferViewModel extends Context {
         this.coreViewModel.fileTransferModel.prepareToReceive(transferData);
     };
 
-    hideModal = (): void => {
+    // exit
+    close = (): void => {
         this.coreViewModel.closeContext(this.contextId);
-        this.presentedModal.value = undefined;
     };
 
+    handleContextClose = (): void => {
+        this.presentedModal.value = undefined;
+    }
+
     // init
     constructor(public readonly coreViewModel: CoreViewModel) {
         super("file-transfer");
@@ -184,7 +188,7 @@ export default class FileTransferViewModel extends Context {
         );
 
         // keystrokes
-        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideModal);
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
     }
 }
 

src/ViewModel/Global/settingsViewModel.ts

@@ -48,14 +48,6 @@ export default class SettingsViewModel extends Context {
         this.isShowingSettingsModal.value = true;
     };
 
-    hideSettingsModal = (): void => {
-        this.coreViewModel.closeContext(this.contextId);
-        this.isShowingSettingsModal.value = false;
-        if (this.requiresReload.value == true) {
-            window.location.reload();
-        }
-    };
-
     showModalPage = (page: SettingsModalPages): void => {
         this.selectedModalPage.value = page;
     };
@@ -69,6 +61,18 @@ export default class SettingsViewModel extends Context {
         document.body.setAttribute("theme", theme);
     };
 
+    // exit
+    close = (): void => {
+        this.coreViewModel.closeContext(this.contextId);
+    };
+
+    handleContextClose = (): void => {
+        this.isShowingSettingsModal.value = false;
+        if (this.requiresReload.value == true) {
+            window.location.reload();
+        }
+    }
+
     // init
     constructor(public readonly coreViewModel: CoreViewModel) {
         super("settings");
@@ -100,7 +104,7 @@ export default class SettingsViewModel extends Context {
         // keystrokes
         this.registerKeyStroke(
             CommonKeys.CloseOrCancel,
-            this.hideSettingsModal,
+            this.close,
         );
     }
 

src/ViewModel/Global/storageViewModel.ts

@@ -54,14 +54,18 @@ export default class StorageViewModel extends Context {
         this.isShowingStorageModal.value = true;
     };
 
-    hideStorageModal = (): void => {
+    // exit
+    close = (): void => {
         this.coreViewModel.closeContext(this.contextId);
+    };
+
+    handleContextClose = (): void => {
         if (this.didMakeChanges.value == true) {
             window.location.reload();
             return;
         }
         this.isShowingStorageModal.value = false;
-    };
+    }
 
     // init
     constructor(public readonly coreViewModel: CoreViewModel) {
@@ -77,6 +81,6 @@ export default class StorageViewModel extends Context {
         );
 
         // keystrokes
-        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideStorageModal);
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.close);
     }
 }