]> Repos - mime-chat/commitdiff
refactor keydownHandler composable
authorriqo <hernandeze2@xavier.edu>
Sun, 25 Oct 2020 15:57:04 +0000 (10:57 -0500)
committerriqo <hernandeze2@xavier.edu>
Sun, 25 Oct 2020 16:02:32 +0000 (11:02 -0500)
.gitignore
src/components/UI/UIDetails/inputItem.vue
src/composables/keyDownHandler/keyboardMaps/keyboardCharMap.ts [new file with mode: 0644]
src/composables/keyDownHandler/keyboardMaps/keyboardNameMap.ts [new file with mode: 0644]
src/composables/keyDownHandler/useKeyDownHandler.ts [new file with mode: 0644]
src/composables/useKeyDownHandler.ts [deleted file]

index 48ef5190902e38869624e96039c43eb1dca911bd..ce4969521342ac498e52877a1f250b58ce9076d6 100644 (file)
@@ -2,7 +2,7 @@
 node_modules
 /dist
 /crate/target/*
-
+/.log
 
 # local env files
 .env.local
index 3a36fb4ce792aa0228e950cb06415f583d2d6282..83eb68ac868559446ed95b8ba55d46dc43438072 100644 (file)
@@ -1,30 +1,17 @@
 <template>
-  <div class="inputContainer">
-      <!-- <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>
-  </div>
+  <foreignObject x="10" y="10" width="100%" height="100%">
+    <div xmlns="http://www.w3.org/1999/xhtml">
+      <div contenteditable
+        v-if="input.length > 0"
+      >
+        {{ input }}
+      </div>
+    </div>
+  </foreignObject>
 </template>
 
 <script>
-import useKeyDownHandler from "@/composables/useKeyDownHandler";
+import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
 import { defineComponent, onUnmounted } from "vue";
 export default defineComponent({
   name: "InputItem",
@@ -46,14 +33,17 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
- .inputItem {
-     /* width: 100%; */
-   color: #fff;
-   padding-top: 5px;
-   padding-bottom: 5px;
-   border: 0;
-   text-align: center;
-   background-color: #61b4f4;
-   border-radius: 25px;
- }
+div[contenteditable] {
+  width: auto;
+  max-width: 200px;
+  display: table;
+  padding: 7px 15px 7px 15px;
+  border: 0;
+  border-radius: 25px;
+  color: #fff;
+  background-color: #61b4f4;
+  font-size: 14;
+  text-align: left;
+}
+
 </style>
diff --git a/src/composables/keyDownHandler/keyboardMaps/keyboardCharMap.ts b/src/composables/keyDownHandler/keyboardMaps/keyboardCharMap.ts
new file mode 100644 (file)
index 0000000..102e9c3
--- /dev/null
@@ -0,0 +1,263 @@
+// This has the UnShifted and Shifted characters that each key maps to
+// Ones that are to be ignored for character input are empty.
+const 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]
+];
+export default keyboardCharMap;
diff --git a/src/composables/keyDownHandler/keyboardMaps/keyboardNameMap.ts b/src/composables/keyDownHandler/keyboardMaps/keyboardNameMap.ts
new file mode 100644 (file)
index 0000000..8f385ae
--- /dev/null
@@ -0,0 +1,261 @@
+// names of known key codes (0-255)
+const 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]
+];
+
+export default keyboardNameMap;
diff --git a/src/composables/keyDownHandler/useKeyDownHandler.ts b/src/composables/keyDownHandler/useKeyDownHandler.ts
new file mode 100644 (file)
index 0000000..f3c8b05
--- /dev/null
@@ -0,0 +1,69 @@
+import { ref, inject } from "vue";
+import keyboardNameMap from "./keyboardMaps/keyboardNameMap";
+import keyboardCharMap from "./keyboardMaps/keyboardCharMap";
+// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a
+// scanner attached via USB
+export default function useKeyDownHandler() {
+  interface KeyDownEvent {
+    keyCode: number;
+    shiftKey: boolean;
+  }
+
+  const emitter: any = inject("mitt");
+  const input = ref("");
+
+  // submits newSelfMessage event
+  function handleEnterKey() {
+    // does nothing if input value is empty
+    if (input.value === "") {
+      return;
+    }
+    const message = {
+      content: input.value,
+      signature: "EnriqueH",
+      outgoing: true,
+      modifier: "sf",
+      imgURL: "/test/path",
+      id: null
+    };
+    // fire event with message payload
+    emitter.emit("newSelfMessage", message);
+  }
+
+  function keyDownHandler(e: KeyDownEvent) {
+    // 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;
+    }
+    console.log(e.shiftKey);
+    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];
+    switch (cmd) {
+      case "ENTER":
+        handleEnterKey();
+        break;
+      case "BACK_SPACE":
+        input.value = input.value.slice(0, -1);
+        break;
+      case "ESCAPE":
+        input.value = "";
+        break;
+      default:
+        input.value += ch;
+    }
+  }
+
+  return {
+    keyDownHandler,
+    input
+  };
+}
diff --git a/src/composables/useKeyDownHandler.ts b/src/composables/useKeyDownHandler.ts
deleted file mode 100644 (file)
index 13f6f89..0000000
+++ /dev/null
@@ -1,584 +0,0 @@
-import { ref, inject } 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() {
-  const emitter: any = inject("mitt");
-  const input = ref("");
-  function keyDownHandler(e: any) {
-    // 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];
-    switch (cmd) {
-      case "ENTER":
-        handleEnterKey();
-        console.log("Enter was hit");
-        break;
-      case "BACK_SPACE":
-        input.value = input.value.slice(0, -1);
-        break;
-      case "ESCAPE":
-        console.log("escape was clicked");
-        break;
-      default:
-        input.value += ch;
-      // ...and so on...
-    }
-  }
-
-  // submits newSelfMessage event
-  function handleEnterKey() {
-    // does nothing if input value is empty
-    if (input.value === "") {
-      return;
-    }
-    const message = {
-      content: input.value,
-      signature: "EnriqueH",
-      outgoing: true,
-      modifier: "sf",
-      imgURL: "/test/path",
-      id: null
-    };
-    // fire event with message payload
-    emitter.emit("newSelfMessage", message);
-  }
-  return {
-    keyDownHandler,
-    input
-  };
-}
-
-// 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]
-];