add context, rewrite keystrokes

src/ViewModel/Global/coreViewModel.ts

@@ -5,12 +5,55 @@ import StorageModel from "../../Model/Global/storageModel";
 import ConnectionModel from "../../Model/Global/connectionModel";
 import ChatListModel from "../../Model/Chat/chatListModel";
 import FileTransferModel from "../../Model/Global/fileTransferModel";
+import { v4 } from "uuid";
 
 export default class CoreViewModel {
     readonly BUILD = "Build 26.04.12.A";
 
     translations: Translations;
 
+    // CONTEXT
+    private contextStack = new Map<string, Context>();
+    get contexts(): Context[] {
+        return [...this.contextStack.values()];
+    }
+    get context(): Context | undefined {
+        return this.contexts.pop();
+    }
+    logContexts = (): void => {
+        console.log(
+            "context",
+            this.contexts.map(
+                (x) => x.contextDebugDescription + "-" + x.contextId,
+            ),
+        );
+    };
+    set context(context: Context) {
+        if (this.contextStack.has(context.contextId)) return;
+        this.contextStack.set(context.contextId, context);
+        this.logContexts();
+    }
+    closeContext = (contextId: string): void => {
+        if (!this.contexts.map(context=>context.contextId).includes(contextId)) return;
+        while (this.contexts.length > 0) {
+            const currentContext = this.context;
+            this.contextStack.delete(currentContext.contextId);
+            if (currentContext.contextId == contextId) break;
+        }
+        this.logContexts();
+    };
+
+    handleKeyDown = (e: KeyboardEvent): void => {
+        if (!CoreViewModel.checkIsKeystroke(e)) return;
+        const contexts = this.contexts;
+        while (contexts.length > 0) {
+            const currentContext = contexts.pop();
+            if (!currentContext) contexts;
+            const isHandled: boolean = currentContext.handleKeystroke(e);
+            if (isHandled == true) break;
+        }
+    };
+
     // DRAG & DROP
     draggedObject: React.State<any> = new React.State<any>(undefined);
 
@@ -32,5 +75,71 @@ export default class CoreViewModel {
     ) {
         this.translations =
             allTranslations[settingsModel.language] || allTranslations.en;
+
+        document.body.addEventListener("keydown", this.handleKeyDown);
+    }
+
+    // util
+    static checkIsKeystroke(e: KeyboardEvent): boolean {
+        return (e.metaKey || e.ctrlKey) && e.shiftKey;
     }
 }
+
+export class Context {
+    contextId = v4();
+    contextDebugDescription: string;
+    keystrokes = new Map<string, () => void>();
+
+    handleKeystroke = (e: KeyboardEvent): boolean => {
+        const fn = this.keystrokes.get(e.key.toLowerCase());
+        if (!fn) return false;
+        e.preventDefault();
+        fn();
+        return true;
+    };
+
+    close: () => void;
+
+    registerKeyStroke = (key: string, fn: () => void): void => {
+        this.keystrokes.set(key, fn);
+    };
+}
+
+export class ContextHost<T> extends Context {
+    coreViewModel: CoreViewModel;
+    contexts = new Map<T, Context>();
+    currentContext = new React.State<Context | undefined>(undefined);
+
+    get isOpen(): boolean {
+        return false;
+    }
+    get contextSelection(): T | undefined {
+        return undefined;
+    }
+
+    registerContext = (key: T, context: Context): void => {
+        this.contexts.set(key, context);
+    };
+
+    closeContext = (): void => {
+        if (this.currentContext.value) {
+            this.coreViewModel.closeContext(this.currentContext.value.contextId);
+        }
+        this.currentContext.value = undefined;
+    };
+
+    updateContexts = (): void => {
+        if (this.isOpen == false) return;
+
+        const selectedContext = this.contexts.get(this.contextSelection);
+        if (!selectedContext) return;
+        if (selectedContext != this.currentContext.value) {
+            this.closeContext();
+        };
+
+        this.coreViewModel.logContexts();
+
+        this.coreViewModel.context = selectedContext;
+        this.currentContext.value = selectedContext;
+    };
+}

src/ViewModel/Global/fileTransferViewModel.ts

@@ -9,9 +9,12 @@ import StorageModel, {
 } from "../../Model/Global/storageModel";
 
 import ChatModel from "../../Model/Chat/chatModel";
-import CoreViewModel from "./coreViewModel";
+import CoreViewModel, { Context } from "./coreViewModel";
+import { CommonKeys } from "../../View/keystrokes";
+
+export default class FileTransferViewModel extends Context {
+    contextDebugDescription = "transfer";
 
-export default class FileTransferViewModel {
     // state
     presentedModal: React.State<FileTransferModals | undefined> =
         new React.State<any>(undefined);
@@ -116,6 +119,7 @@ export default class FileTransferViewModel {
 
     // view
     showDirectionSelectionModal = (): void => {
+        this.coreViewModel.context = this;
         this.presentedModal.value = FileTransferModals.DirectionSelection;
         this.getOptions();
     };
@@ -162,11 +166,14 @@ export default class FileTransferViewModel {
     };
 
     hideModal = (): void => {
+        this.coreViewModel.closeContext(this.contextId);
         this.presentedModal.value = undefined;
     };
 
     // init
     constructor(public coreViewModel: CoreViewModel) {
+        super();
+
         this.coreViewModel.fileTransferModel.fileHandlerManager.addHandler(
             this.handleReceivedFile,
         );
@@ -174,6 +181,9 @@ export default class FileTransferViewModel {
         this.coreViewModel.fileTransferModel.readyToSendHandlerManager.addHandler(
             () => this.initiateTransfer(),
         );
+
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideModal);
     }
 }
 

src/ViewModel/Global/settingsViewModel.ts

@@ -1,9 +1,12 @@
 import * as React from "bloatless-react";
 
-import CoreViewModel from "./coreViewModel";
+import CoreViewModel, { Context } from "./coreViewModel";
 import { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
+import { CommonKeys } from "../../View/keystrokes";
+
+export default class SettingsViewModel extends Context {
+    contextDebugDescription = "settings";
 
-export default class SettingsViewModel {
     // state
     username: React.State<string> = new React.State("");
     usernameInput: React.State<string> = new React.State("");
@@ -43,10 +46,12 @@ export default class SettingsViewModel {
     };
 
     showSettingsModal = (): void => {
+        this.coreViewModel.context = this;
         this.isShowingSettingsModal.value = true;
     };
 
     hideSettingsModal = (): void => {
+        this.coreViewModel.closeContext(this.contextId);
         this.isShowingSettingsModal.value = false;
         if (this.requiresReload.value == true) {
             window.location.reload();
@@ -68,6 +73,8 @@ export default class SettingsViewModel {
 
     // init
     constructor(public coreViewModel: CoreViewModel) {
+        super();
+
         this.username.value = coreViewModel.settingsModel.username;
         this.usernameInput.value = coreViewModel.settingsModel.username;
         this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
@@ -91,6 +98,9 @@ export default class SettingsViewModel {
         SettingsViewModel.generateThemeMedia().addEventListener("change", () =>
             this.applyTheme(),
         );
+
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideSettingsModal);
     }
 
     static generateThemeMedia(): MediaQueryList {

src/ViewModel/Global/storageViewModel.ts

@@ -4,9 +4,12 @@ import StorageModel, {
     PATH_COMPONENT_SEPARATOR,
 } from "../../Model/Global/storageModel";
 
-import CoreViewModel from "./coreViewModel";
+import CoreViewModel, { Context } from "./coreViewModel";
+import { CommonKeys } from "../../View/keystrokes";
+
+export default class StorageViewModel extends Context {
+    contextDebugDescription = "storage";
 
-export default class StorageViewModel {
     // state
     isShowingStorageModal: React.State<boolean> = new React.State(false);
     selectedPath: React.State<string> = new React.State(
@@ -48,10 +51,12 @@ export default class StorageViewModel {
 
     // view
     showStorageModal = (): void => {
+        this.coreViewModel.context = this;
         this.isShowingStorageModal.value = true;
     };
 
     hideStorageModal = (): void => {
+        this.coreViewModel.closeContext(this.contextId);
         if (this.didMakeChanges.value == true) {
             window.location.reload();
             return;
@@ -61,6 +66,8 @@ export default class StorageViewModel {
 
     // init
     constructor(public coreViewModel: CoreViewModel) {
+        super();
+
         this.selectedFileName = React.createProxyState(
             [this.selectedPath],
             () => StorageModel.getFileNameFromString(this.selectedPath.value),
@@ -69,5 +76,8 @@ export default class StorageViewModel {
             [this.selectedPath],
             () => this.getSelectedItemContent(),
         );
+
+        // keystrokes
+        this.registerKeyStroke(CommonKeys.CloseOrCancel, this.hideStorageModal);
     }
 }