From: Enrique Hernandez <hernandeze2@xavier.edu>
Date: Sun, 25 Oct 2020 00:34:20 +0000 (-0500)
Subject: add keydownHandler
X-Git-Tag: v0.9~143^2~1^2~11
X-Git-Url: https://andrewgundersen.net/repos?a=commitdiff_plain;h=dc88d5b706780723595b85b341d89d106c92a6be;p=mime-chat

add keydownHandler
---

diff --git a/src/components/UI/UIDetails/inputItem.vue b/src/components/UI/UIDetails/inputItem.vue
index 87c9380..82c7472 100644
--- a/src/components/UI/UIDetails/inputItem.vue
+++ b/src/components/UI/UIDetails/inputItem.vue
@@ -1,19 +1,50 @@
 <template>
   <div class="inputContainer">
-    <input
-      v-model="input"
-      type="text"
-    >
+      <!-- <input
+           class="inputItem"
+           v-model="input"
+           :size="input.length"
+           v-if="input.length > 0"
+           type="text"
+           autofocus
+           > -->
+
+      <foreignObject x="10" y="10" width="100%" height="100%">
+        <div xmlns="http://www.w3.org/1999/xhtml">
+          <input
+            class="inputItem"
+            v-model="input"
+            :size="input.length"
+            v-if="input.length > 0"
+            type="text"
+          >
+        </div>
+      </foreignObject>
+      <svg width="100%" xmlns="http://www.w3.org/2000/svg">
+        <foreignObject x="10" y="10" width="100%" height="100%">
+          <div xmlns="http://www.w3.org/1999/xhtml">
+            <input
+              class="inputItem"
+              v-model="input"
+              :size="input.length"
+              v-if="input.length > 0"
+              type="text"
+            >
+          </div>
+        </foreignObject>
+      </svg>
   </div>
 </template>
 
 <script>
+import useKeyDownHandler from "@/composables/useKeyDownHandler";
 import { defineComponent, ref, onUnmounted, inject } from "vue";
 export default defineComponent({
   name: "InputItem",
   setup() {
+    const emitter = inject('mitt');
     const input = ref("");
-    const emitter = inject('mitt')
+    const {keyDownHandler} = useKeyDownHandler();
 
     // submits newSelfMessage event
     function handleEnterKey() {
@@ -21,7 +52,6 @@ export default defineComponent({
         if (input.value === "") {
             return;
         }
-
         const message = {
             content: input.value,
             signature: 'EnriqueH',
@@ -34,25 +64,32 @@ export default defineComponent({
         emitter.emit('newSelfMessage', message);
     }
 
+    // handles window keydown event
     function handleInput(e) {
+      // gets char keyCode and char value
       const inputCode = e.keyCode;
       const cmd = String.fromCharCode(inputCode).toLowerCase();
-        switch(inputCode) {
-          case 13:
-            handleEnterKey();
-            break;
-          case 8:
-            input.value = input.value.slice(0, -1);
-            break;
-          default:
-            input.value += cmd;
-        }
-    }
 
-    window.addEventListener("keydown", handleInput);
+      // handles input cases
+      switch(inputCode) {
+        // handles Enter press: 13
+        case 13:
+          handleEnterKey();
+          break;
+        // handles Delete press: 8
+        case 8:
+          input.value = input.value.slice(0, -1);
+          break;
+        default:
+          input.value += cmd;
+      }
+    }
 
+    // add window event listener
+    window.addEventListener("keydown", keyDownHandler);
+    // remove Event Listener on component unMount
     onUnmounted(() => {
-      window.removeEventListener("keydown", handleInput);
+      window.removeEventListener("keydown", keyDownHandler);
     });
 
     return {
@@ -63,8 +100,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
- .inputContainer {
-
-    
+ .inputItem {
+     /* width: 100%; */
+   color: #fff;
+   padding-top: 5px;
+   padding-bottom: 5px;
+   border: 0;
+   text-align: center;
+   background-color: #61b4f4;
+   border-radius: 25px;
  }
 </style>
diff --git a/src/composables/useKeyDownHandler.ts b/src/composables/useKeyDownHandler.ts
new file mode 100644
index 0000000..d37034c
--- /dev/null
+++ b/src/composables/useKeyDownHandler.ts
@@ -0,0 +1,565 @@
+import { ref } from "vue";
+// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a
+// scanner attached via USB
+export default function useKeyDownHandler() {
+  function keyDownHandler(e: any) {
+    const input = ref("");
+    // keyboardCharMap is an array of arrays, with each inner
+    // array having 2 columns - un-shifted, and shifted values.
+    // iCol = 0 is the un-shifted value, while iCol=1 is the shifted value.
+    // See the "keyboardCharMap", below, for printable characters.
+    // MODIFY keyboardCharMap to suit your needs if you want
+    //    more/less/different characters to be considered "printable".
+    let iCol = 0;
+    if (e.shiftKey) {
+      iCol = 1;
+    }
+    const ch = keyboardCharMap[e.keyCode][iCol];
+    // Optionally do things with non-printables,
+    // like CR, ESC, Backspace, LF, Tab, Arrows, F1-F24, etc.
+    // See the arrary "keyboardNameMap", below, for possible keys.
+    const cmd = keyboardNameMap[e.keyCode];
+    console.log("cmd: '" + cmd + "'");
+    switch (cmd) {
+      case "ENTER":
+        console.log("Enter was hit");
+        break;
+      case "DELETE":
+        console.log("DELETE WAS HIT");
+        break;
+      case "ESCAPE":
+        console.log("escape was clicked");
+        break;
+      default:
+        input.value += cmd;
+        console.log(cmd);
+      // ...and so on...
+    }
+  }
+  return {
+    keyDownHandler
+  };
+}
+
+// names of known key codes (0-255)
+var keyboardNameMap = [
+  "", // [0]
+  "", // [1]
+  "", // [2]
+  "CANCEL", // [3]
+  "", // [4]
+  "", // [5]
+  "HELP", // [6]
+  "", // [7]
+  "BACK_SPACE", // [8]
+  "TAB", // [9]
+  "", // [10]
+  "", // [11]
+  "CLEAR", // [12]
+  "ENTER", // [13]
+  "ENTER_SPECIAL", // [14]
+  "", // [15]
+  "SHIFT", // [16]
+  "CONTROL", // [17]
+  "ALT", // [18]
+  "PAUSE", // [19]
+  "CAPS_LOCK", // [20]
+  "KANA", // [21]
+  "EISU", // [22]
+  "JUNJA", // [23]
+  "FINAL", // [24]
+  "HANJA", // [25]
+  "", // [26]
+  "ESCAPE", // [27]
+  "CONVERT", // [28]
+  "NONCONVERT", // [29]
+  "ACCEPT", // [30]
+  "MODECHANGE", // [31]
+  "SPACE", // [32]
+  "PAGE_UP", // [33]
+  "PAGE_DOWN", // [34]
+  "END", // [35]
+  "HOME", // [36]
+  "LEFT", // [37]
+  "UP", // [38]
+  "RIGHT", // [39]
+  "DOWN", // [40]
+  "SELECT", // [41]
+  "PRINT", // [42]
+  "EXECUTE", // [43]
+  "PRINTSCREEN", // [44]
+  "INSERT", // [45]
+  "DELETE", // [46]
+  "", // [47]
+  "0", // [48]
+  "1", // [49]
+  "2", // [50]
+  "3", // [51]
+  "4", // [52]
+  "5", // [53]
+  "6", // [54]
+  "7", // [55]
+  "8", // [56]
+  "9", // [57]
+  "COLON", // [58]
+  "SEMICOLON", // [59]
+  "LESS_THAN", // [60]
+  "EQUALS", // [61]
+  "GREATER_THAN", // [62]
+  "QUESTION_MARK", // [63]
+  "AT", // [64]
+  "A", // [65]
+  "B", // [66]
+  "C", // [67]
+  "D", // [68]
+  "E", // [69]
+  "F", // [70]
+  "G", // [71]
+  "H", // [72]
+  "I", // [73]
+  "J", // [74]
+  "K", // [75]
+  "L", // [76]
+  "M", // [77]
+  "N", // [78]
+  "O", // [79]
+  "P", // [80]
+  "Q", // [81]
+  "R", // [82]
+  "S", // [83]
+  "T", // [84]
+  "U", // [85]
+  "V", // [86]
+  "W", // [87]
+  "X", // [88]
+  "Y", // [89]
+  "Z", // [90]
+  "OS_KEY", // [91] Windows Key (Windows) or Command Key (Mac)
+  "", // [92]
+  "CONTEXT_MENU", // [93]
+  "", // [94]
+  "SLEEP", // [95]
+  "NUMPAD0", // [96]
+  "NUMPAD1", // [97]
+  "NUMPAD2", // [98]
+  "NUMPAD3", // [99]
+  "NUMPAD4", // [100]
+  "NUMPAD5", // [101]
+  "NUMPAD6", // [102]
+  "NUMPAD7", // [103]
+  "NUMPAD8", // [104]
+  "NUMPAD9", // [105]
+  "MULTIPLY", // [106]
+  "ADD", // [107]
+  "SEPARATOR", // [108]
+  "SUBTRACT", // [109]
+  "DECIMAL", // [110]
+  "DIVIDE", // [111]
+  "F1", // [112]
+  "F2", // [113]
+  "F3", // [114]
+  "F4", // [115]
+  "F5", // [116]
+  "F6", // [117]
+  "F7", // [118]
+  "F8", // [119]
+  "F9", // [120]
+  "F10", // [121]
+  "F11", // [122]
+  "F12", // [123]
+  "F13", // [124]
+  "F14", // [125]
+  "F15", // [126]
+  "F16", // [127]
+  "F17", // [128]
+  "F18", // [129]
+  "F19", // [130]
+  "F20", // [131]
+  "F21", // [132]
+  "F22", // [133]
+  "F23", // [134]
+  "F24", // [135]
+  "", // [136]
+  "", // [137]
+  "", // [138]
+  "", // [139]
+  "", // [140]
+  "", // [141]
+  "", // [142]
+  "", // [143]
+  "NUM_LOCK", // [144]
+  "SCROLL_LOCK", // [145]
+  "WIN_OEM_FJ_JISHO", // [146]
+  "WIN_OEM_FJ_MASSHOU", // [147]
+  "WIN_OEM_FJ_TOUROKU", // [148]
+  "WIN_OEM_FJ_LOYA", // [149]
+  "WIN_OEM_FJ_ROYA", // [150]
+  "", // [151]
+  "", // [152]
+  "", // [153]
+  "", // [154]
+  "", // [155]
+  "", // [156]
+  "", // [157]
+  "", // [158]
+  "", // [159]
+  "CIRCUMFLEX", // [160]
+  "EXCLAMATION", // [161]
+  "DOUBLE_QUOTE", // [162]
+  "HASH", // [163]
+  "DOLLAR", // [164]
+  "PERCENT", // [165]
+  "AMPERSAND", // [166]
+  "UNDERSCORE", // [167]
+  "OPEN_PAREN", // [168]
+  "CLOSE_PAREN", // [169]
+  "ASTERISK", // [170]
+  "PLUS", // [171]
+  "PIPE", // [172]
+  "HYPHEN_MINUS", // [173]
+  "OPEN_CURLY_BRACKET", // [174]
+  "CLOSE_CURLY_BRACKET", // [175]
+  "TILDE", // [176]
+  "", // [177]
+  "", // [178]
+  "", // [179]
+  "", // [180]
+  "VOLUME_MUTE", // [181]
+  "VOLUME_DOWN", // [182]
+  "VOLUME_UP", // [183]
+  "", // [184]
+  "", // [185]
+  "SEMICOLON", // [186]
+  "EQUALS", // [187]
+  "COMMA", // [188]
+  "MINUS", // [189]
+  "PERIOD", // [190]
+  "SLASH", // [191]
+  "BACK_QUOTE", // [192]
+  "", // [193]
+  "", // [194]
+  "", // [195]
+  "", // [196]
+  "", // [197]
+  "", // [198]
+  "", // [199]
+  "", // [200]
+  "", // [201]
+  "", // [202]
+  "", // [203]
+  "", // [204]
+  "", // [205]
+  "", // [206]
+  "", // [207]
+  "", // [208]
+  "", // [209]
+  "", // [210]
+  "", // [211]
+  "", // [212]
+  "", // [213]
+  "", // [214]
+  "", // [215]
+  "", // [216]
+  "", // [217]
+  "", // [218]
+  "OPEN_BRACKET", // [219]
+  "BACK_SLASH", // [220]
+  "CLOSE_BRACKET", // [221]
+  "QUOTE", // [222]
+  "", // [223]
+  "META", // [224]
+  "ALTGR", // [225]
+  "", // [226]
+  "WIN_ICO_HELP", // [227]
+  "WIN_ICO_00", // [228]
+  "", // [229]
+  "WIN_ICO_CLEAR", // [230]
+  "", // [231]
+  "", // [232]
+  "WIN_OEM_RESET", // [233]
+  "WIN_OEM_JUMP", // [234]
+  "WIN_OEM_PA1", // [235]
+  "WIN_OEM_PA2", // [236]
+  "WIN_OEM_PA3", // [237]
+  "WIN_OEM_WSCTRL", // [238]
+  "WIN_OEM_CUSEL", // [239]
+  "WIN_OEM_ATTN", // [240]
+  "WIN_OEM_FINISH", // [241]
+  "WIN_OEM_COPY", // [242]
+  "WIN_OEM_AUTO", // [243]
+  "WIN_OEM_ENLW", // [244]
+  "WIN_OEM_BACKTAB", // [245]
+  "ATTN", // [246]
+  "CRSEL", // [247]
+  "EXSEL", // [248]
+  "EREOF", // [249]
+  "PLAY", // [250]
+  "ZOOM", // [251]
+  "", // [252]
+  "PA1", // [253]
+  "WIN_OEM_CLEAR", // [254]
+  "" // [255]
+];
+
+// This has the UnShifted and Shifted characters that each key maps to
+// Ones that are to be ignored for character input are empty.
+var keyboardCharMap = [
+  ["", ""], // [0]
+  ["", ""], // [1]
+  ["", ""], // [2]
+  ["", ""], // [3]
+  ["", ""], // [4]
+  ["", ""], // [5]
+  ["", ""], // [6]
+  ["", ""], // [7]
+  ["", ""], // [8]
+  ["", ""], // [9]
+  ["", ""], // [10]
+  ["", ""], // [11]
+  ["", ""], // [12]
+  ["\r", "\r"], // [13]	- MOST control characters are ignored.  This one (Carriage Return, or "Enter") is significant!
+  ["", ""], // [14]
+  ["", ""], // [15]
+  ["", ""], // [16]
+  ["", ""], // [17]
+  ["", ""], // [18]
+  ["", ""], // [19]
+  ["", ""], // [20]
+  ["", ""], // [21]
+  ["", ""], // [22]
+  ["", ""], // [23]
+  ["", ""], // [24]
+  ["", ""], // [25]
+  ["", ""], // [26]
+  ["", ""], // [27]
+  ["", ""], // [28]
+  ["", ""], // [29]
+  ["", ""], // [30]
+  ["", ""], // [31]
+  [" ", " "], // [32]	// SPACE!  Don't "clean it up" and remove the space!
+  ["", ""], // [33]
+  ["", ""], // [34]
+  ["", ""], // [35]
+  ["", ""], // [36]
+  ["", ""], // [37]
+  ["", ""], // [38]
+  ["", ""], // [39]
+  ["", ""], // [40]
+  ["", ""], // [41]
+  ["", ""], // [42]
+  ["", ""], // [43]
+  ["", ""], // [44]
+  ["", ""], // [45]
+  ["", ""], // [46]
+  ["", ""], // [47]
+  ["0", ")"], // [48]
+  ["1", "!"], // [49]
+  ["2", "@"], // [50]
+  ["3", "#"], // [51]
+  ["4", "$"], // [52]
+  ["5", "%"], // [53]
+  ["6", "^"], // [54]
+  ["7", "&"], // [55]
+  ["8", "*"], // [56]
+  ["9", "("], // [57]
+  ["", ""], // [58]
+  [";", ":"], // [59]
+  ["<", ""], // [60]
+  ["=", ""], // [61]
+  [">", ""], // [62]
+  ["?", ""], // [63]	shifted;  else "/"
+  ["", ""], // [64]
+  ["a", "A"], // [65]
+  ["b", "B"], // [66]
+  ["c", "C"], // [67]
+  ["d", "D"], // [68]
+  ["e", "E"], // [69]
+  ["f", "F"], // [70]
+  ["g", "G"], // [71]
+  ["h", "H"], // [72]
+  ["i", "I"], // [73]
+  ["j", "J"], // [74]
+  ["k", "K"], // [75]
+  ["l", "L"], // [76]
+  ["m", "M"], // [77]
+  ["n", "N"], // [78]
+  ["o", "O"], // [79]
+  ["p", "P"], // [80]
+  ["q", "Q"], // [81]
+  ["r", "R"], // [82]
+  ["s", "S"], // [83]
+  ["t", "T"], // [84]
+  ["u", "U"], // [85]
+  ["v", "V"], // [86]
+  ["w", "W"], // [87]
+  ["x", "X"], // [88]
+  ["y", "Y"], // [89]
+  ["z", "Z"], // [90]
+  ["", ""], // [91] Windows Key (Windows) or Command Key (Mac)
+  ["", ""], // [92]
+  ["", ""], // [93]
+  ["", ""], // [94]
+  ["", ""], // [95]
+  // Number Keypad Entries...
+  ["0", ""], // [96]
+  ["1", ""], // [97]
+  ["2", ""], // [98]
+  ["3", ""], // [99]
+  ["4", ""], // [100]
+  ["5", ""], // [101]
+  ["6", ""], // [102]
+  ["7", ""], // [103]
+  ["8", ""], // [104]
+  ["9", ""], // [105]
+  ["*", ""], // [106]
+  ["+", ""], // [107]
+  ["", ""], // [108]
+  ["-", ""], // [109]
+  [".", ""], // [110]
+  ["/", ""], // [111]
+
+  ["", ""], // [112]
+  ["", ""], // [113]
+  ["", ""], // [114]
+  ["", ""], // [115]
+  ["", ""], // [116]
+  ["", ""], // [117]
+  ["", ""], // [118]
+  ["", ""], // [119]
+  ["", ""], // [120]
+  ["", ""], // [121]
+  ["", ""], // [122]
+  ["", ""], // [123]
+  ["", ""], // [124]
+  ["", ""], // [125]
+  ["", ""], // [126]
+  ["", ""], // [127]
+  ["", ""], // [128]
+  ["", ""], // [129]
+  ["", ""], // [130]
+  ["", ""], // [131]
+  ["", ""], // [132]
+  ["", ""], // [133]
+  ["", ""], // [134]
+  ["", ""], // [135]
+  ["", ""], // [136]
+  ["", ""], // [137]
+  ["", ""], // [138]
+  ["", ""], // [139]
+  ["", ""], // [140]
+  ["", ""], // [141]
+  ["", ""], // [142]
+  ["", ""], // [143]
+  ["", ""], // [144]
+  ["", ""], // [145]
+  ["", ""], // [146]
+  ["", ""], // [147]
+  ["", ""], // [148]
+  ["", ""], // [149]
+  ["", ""], // [150]
+  ["", ""], // [151]
+  ["", ""], // [152]
+  ["", ""], // [153]
+  ["", ""], // [154]
+  ["", ""], // [155]
+  ["", ""], // [156]
+  ["", ""], // [157]
+  ["", ""], // [158]
+  ["", ""], // [159]
+  ["", ""], // [160]
+  ["", ""], // [161]
+  ["", ""], // [162]
+  ["", ""], // [163]
+  ["", ""], // [164]
+  ["", ""], // [165]
+  ["", ""], // [166]
+  ["", ""], // [167]
+  ["", ""], // [168]
+  ["", ""], // [169]
+  ["", ""], // [170]
+  ["", ""], // [171]
+  ["", ""], // [172]
+  ["", ""], // [173]
+  ["", ""], // [174]
+  ["", ""], // [175]
+  ["", ""], // [176]
+  ["", ""], // [177]
+  ["", ""], // [178]
+  ["", ""], // [179]
+  ["", ""], // [180]
+  ["", ""], // [181]
+  ["", ""], // [182]
+  ["", ""], // [183]
+  ["", ""], // [184]
+  ["", ""], // [185]
+  ["", ""], // [186]
+  ["=", "+"], // [187]
+  [",", "<"], // [188]
+  ["-", "_"], // [189]
+  [".", ">"], // [190]
+  ["/", "?"], // [191]
+  ["`", "~"], // [192]
+  ["", ""], // [193]
+  ["", ""], // [194]
+  ["", ""], // [195]
+  ["", ""], // [196]
+  ["", ""], // [197]
+  ["", ""], // [198]
+  ["", ""], // [199]
+  ["", ""], // [200]
+  ["", ""], // [201]
+  ["", ""], // [202]
+  ["", ""], // [203]
+  ["", ""], // [204]
+  ["", ""], // [205]
+  ["", ""], // [206]
+  ["", ""], // [207]
+  ["", ""], // [208]
+  ["", ""], // [209]
+  ["", ""], // [210]
+  ["", ""], // [211]
+  ["", ""], // [212]
+  ["", ""], // [213]
+  ["", ""], // [214]
+  ["", ""], // [215]
+  ["", ""], // [216]
+  ["", ""], // [217]
+  ["", ""], // [218]
+  ["[", "{"], // [219]
+  ["\\", "|"], // [220]
+  ["]", "}"], // [221]
+  ["'", '"'], // [222]
+  ["", ""], // [223]
+  ["", ""], // [224]
+  ["", ""], // [225]
+  ["", ""], // [226]
+  ["", ""], // [227]
+  ["", ""], // [228]
+  ["", ""], // [229]
+  ["", ""], // [230]
+  ["", ""], // [231]
+  ["", ""], // [232]
+  ["", ""], // [233]
+  ["", ""], // [234]
+  ["", ""], // [235]
+  ["", ""], // [236]
+  ["", ""], // [237]
+  ["", ""], // [238]
+  ["", ""], // [239]
+  ["", ""], // [240]
+  ["", ""], // [241]
+  ["", ""], // [242]
+  ["", ""], // [243]
+  ["", ""], // [244]
+  ["", ""], // [245]
+  ["", ""], // [246]
+  ["", ""], // [247]
+  ["", ""], // [248]
+  ["", ""], // [249]
+  ["", ""], // [250]
+  ["", ""], // [251]
+  ["", ""], // [252]
+  ["", ""], // [253]
+  ["", ""], // [254]
+  ["", ""] // [255]
+];