beginnings of refactor

src/render/components/controllers/inputItem.control.text.ts

@@ -0,0 +1,134 @@
+import { Ref, ref, watch, onMounted, onUnmounted } from "vue";
+import { postMessage } from "@/ipc/session";
+import { newMessage, animateTextInput } from "./helpers";
+
+
+export default function useTextInputController(elementX: Ref) {
+    
+    let textInput: HTMLInputElement | null;
+
+    const { side, show, hide, switchSide } = animateTextInput();
+
+    let firstKey = true;
+    const typing = ref(false);
+
+    // Prep inputItem for typing.
+    const prepInput = () => {
+        show()
+        typing.value = true
+    }
+
+    // Clear and hide inputItem after done typing.
+    const clearInput = () => {
+
+        if (textInput) {
+            textInput.value = "";
+            textInput.blur();
+        }
+
+        hide()
+        firstKey = true;
+        typing.value = false;
+    }
+
+    // Send a message and clean up after.
+    const sendMessage = () => {
+        if (textInput) {
+
+            // Send it to the backend for processing.
+            const message = newMessage({
+                text: textInput.value
+            });
+
+            postMessage(message);
+
+            clearInput()
+        }
+    }
+
+    // Keys that are capable of opening the text input (numbers and letters).
+    const isHotKey = (key: number) => {
+        if (key >= 47 && key <= 91) { // a letter
+            return true
+        }
+    }
+
+    //---Callbacks-----------------------------------------------
+
+    const onKeyDown = (e: KeyboardEvent) => {
+        const key = e.keyCode;
+
+        if (textInput) {
+
+            // Only runs on firstKey.
+            if (firstKey) {
+
+                if (!isHotKey(key)) {
+                    return
+                }
+
+                prepInput()
+            }
+
+            textInput.focus();
+
+            // Close input when no text or on ESC.
+            if ((textInput.value == "") && (!firstKey) && (key === 8)) { // backspace
+                clearInput()
+                return
+            }
+
+            if (key === 27) { // escape
+                clearInput()
+                return
+            }
+
+            // Close and send on enter.
+            if (key === 13) {
+                if (textInput.value) {
+                    sendMessage()
+                    return
+                }
+            }
+
+            if (firstKey) firstKey = false
+        }
+    }
+
+    //-----------------------------------------------------------
+
+    // Watch parent position and update side.
+    watch(elementX, (elementX, _previous) => {
+        const winW = window.innerWidth
+
+        // Logic depends on the side we are on.
+        if (side.value === "right") {
+            if (winW - elementX < 230) {
+                switchSide()
+                side.value = "left"
+            }
+        }
+
+        else {
+            if (winW - elementX > 230) {
+                switchSide()
+                side.value = "right"
+            }
+        }
+
+    });
+
+    onMounted(() => {
+        textInput = document.getElementById("textInput") as HTMLInputElement;
+        window.addEventListener("keydown", onKeyDown);
+    })
+
+    onUnmounted(() => {
+        window.removeEventListener("keydown", onKeyDown);
+    });
+
+    return {
+        typing
+    }
+
+}