input item enhancements

src/components/inputItem/controllers/textCtrl.ts

@@ -1,18 +1,13 @@
 import anime from "animejs";
 import useMitt from "@/modules/mitt";
 import { useIpc } from '@/modules/ipc';
-import { Ref, watch, onMounted } from "vue";
+import { Ref, ref, watch, onMounted, onUnmounted } from "vue";
 import keyboardNameMap from "../keyBoardMaps/keyboardNameMap";
 import { clientMessage, renderMessage } from '@/modules/message';
 
-// Post a message to the backend.
-const { post } = useIpc();
-
-
 //---Animations-----------------------------------------------
 
 let side = "right"; // Side of parent we are on.
-let visible = false; // Whether textInput is visible.
 
 function showTextInput () {
     const t1 = (side === "right") ? 50 : -70;
@@ -27,7 +22,6 @@ function showTextInput () {
         easing: 'easeOutExpo', 
     })
 
-    visible = true
 }
 
 function hideTextInput() {
@@ -35,14 +29,13 @@ function hideTextInput() {
 
     anime({
         targets: '#textInput',
-        opacity: 0,
+        opacity: [1, 0],
         translateX: t,
         scale: 0.3,
         duration: 500,
         easing: 'easeOutExpo', 
     })
 
-    visible = false
 }
 
 function switchSide(currentSide: string) {
@@ -63,27 +56,29 @@ function switchSide(currentSide: string) {
 export default function useTextInputController(elementX: Ref) {
     let textInput: HTMLInputElement | null;
 
-    let length: number;
-
-    // For sending messages.
     const { post } = useIpc();
     const { emitter } = useMitt();
 
-    // Keep track of first key press.
     let firstKey = true;
+    const typing = ref(false);
 
-    // Clear text input.
-    const clearInput = () => {
-        if (textInput) textInput.value = "";
-        hideTextInput()
-        firstKey = true;
+    // Prep inputItem for typing.
+    const prepInput = () => {
+        showTextInput()
+        typing.value = true
     }
 
-    // Utility function to render message.
-    const render = (text: string, audio: boolean | string, context: string, modifier: string): string => {
-        const m = renderMessage({ text, audio, context, modifier });
-        emitter.emit("self-message", m);
-        return m.uid;
+    // Clear and hide inputItem after done typing.
+    const clearInput = () => {
+
+        if (textInput) {
+            textInput.value = "";
+            textInput.blur();
+        }
+        
+        hideTextInput()
+        firstKey = true;
+        typing.value = false;
     }
 
     // Send a message and clean up after.
@@ -91,50 +86,53 @@ export default function useTextInputController(elementX: Ref) {
         if (textInput) {
 
             // Render message
-            const uid = render(textInput.value, false, "", "sf");
+            const message = renderMessage(textInput.value, false, "", "sf")
+            emitter.emit("self-message", message);
 
             // Send it to the backend for processing.
-            const clientM = clientMessage(textInput.value, false, uid);
+            const clientM = clientMessage(textInput.value, false, message.uid);
             post('client-message', clientM);
+
+            clearInput()
         }
     }
 
     //---Callbacks-----------------------------------------------
 
     const onKeyDown = (e: KeyboardEvent) => {
+        const key = keyboardNameMap[e.keyCode]
+        console.log(key)
         
         if (textInput) {
-            const key = keyboardNameMap[e.keyCode]
-
-            // Reveal textInput on first key press.
+           
+            // First-key handler.
             if (firstKey) {
-
-                // Handle for space bar
-                if (key == "SPACE") {
-                    return
-                }
-
-                showTextInput()
-                firstKey = false
+                if (key == "SPACE") return
+                prepInput()
             }
 
             textInput.focus();
 
+            // Close input when no text or on ESC.
             if (textInput.value == "" && !firstKey) {
                 clearInput()
+                return
             }
 
-            if (key == "ENTER") {
+            if (key === "ESCAPE") {
+                clearInput()
+                return
+            }
+
+            // Close and send on enter.
+            if (key === "ENTER") {
                 if (textInput.value) {
                     sendMessage()
-                    clearInput()
+                    return
                 }
             }
 
-            if (key == "ESCAPE") {
-                clearInput()
-
-            }
+            if (firstKey) firstKey = false
         }
     }
 
@@ -166,8 +164,12 @@ export default function useTextInputController(elementX: Ref) {
         window.addEventListener("keydown", onKeyDown);
     })
 
-    return {
+    onUnmounted(() => {
+        window.removeEventListener("keydown", onKeyDown);
+    });
 
+    return {
+        typing
     }
 
 }