me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

minor improvements to inputItem component

Browse source
This commit is contained in:
riqo 2021-03-08 09:48:01 -06:00
commit 888651b4d7
4 changed files with 58 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/components/inputItem/inputController.ts
View file

@ -6,35 +6,76 @@
*/
import { ref, watch, onUnmounted, onMounted } from "vue";
import useKeyDownHandler from "@/modules/keyDownHandler/useKeyDownHandler";
import useMitt from "@/modules/mitt";
import { useIpc } from '@/modules/ipc';
import keyboardNameMap from "./keyBoardMaps/keyboardNameMap";
import keyboardCharMap from "./keyBoardMaps/keyboardCharMap";
let textInput: HTMLInputElement | null;
export default function useInputController() {
const isRecording = ref(false);
const isTyping = ref(false);
const { emitter } = useMitt();
const { post } = useIpc();
const isRecording = ref(false);
const isTyping = ref(false);
const input = ref("");
// send message on ENTER
const enterCallback = (input: string) => {
const onEnter = () => {
const message = {
audio: 0,
text: input
text: input.value
};
// trigger send animation
emitter.emit("animate-send");
// send message to backend
if (input) post('message', message);
if (input.value) post('message', message);
}
const { keyDownHandler, input } = useKeyDownHandler(enterCallback);
// update input on keydown event & listen for special commands.
const onKeyDown = (e: KeyboardEvent) => {
if (textInput) textInput.focus();
// stops stream recording on space key up
function keyupHandler(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" module for possible keys.
// 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" module for possible keys.
const cmd = keyboardNameMap[e.keyCode];
switch (cmd) {
case "ENTER":
onEnter();
if (textInput) textInput.value = ''
input.value = " ";
break;
case "BACK_SPACE":
input.value = input.value.slice(0, -1);
break;
case "ESCAPE":
if (textInput) textInput.value = ''
input.value = "";
break;
default:
input.value += ch;
}
}
// stops stream recording on space key up event.
const onKeyUp = (e: KeyboardEvent) => {
if (e.key === " " && isRecording.value) {
isRecording.value = false;
@ -43,18 +84,19 @@ export default function useInputController() {
}
}
onMounted(async () => {
onMounted(() => {
textInput = document.getElementById('textInput') as HTMLInputElement;
// add window event keyboard listeners
window.addEventListener("keydown", keyDownHandler);
window.addEventListener('keyup', keyupHandler);
window.addEventListener("keydown", onKeyDown);
window.addEventListener('keyup', onKeyUp);
})
onUnmounted(() => {
window.removeEventListener("keydown", keyDownHandler);
window.removeEventListener("keyup", keyupHandler);
window.removeEventListener("keydown", onKeyDown);
window.removeEventListener("keyup", onKeyUp);
});
// determine whether to render text or audio based one the keyboard input
// watch keyboard input & update current state.
watch(input, (input, prevInput) => {
if (prevInput !== "" || prevInput.length > 0) {
if (!isRecording.value) {

0
src/modules/keyDownHandler/keyBoardMaps/keyboardCharMap.ts → src/components/inputItem/keyBoardMaps/keyboardCharMap.ts
View file

0
src/modules/keyDownHandler/keyBoardMaps/keyboardNameMap.ts → src/components/inputItem/keyBoardMaps/keyboardNameMap.ts
View file

62
src/modules/keyDownHandler/useKeyDownHandler.ts
View file

@ -1,62 +0,0 @@
import { ref, onMounted } from "vue";
import keyboardNameMap from "./keyBoardMaps/keyboardNameMap";
import keyboardCharMap from "./keyBoardMaps/keyboardCharMap";
interface KeyDownEvent {
keyCode: number;
shiftKey: boolean;
}
// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a
// scanner attached via USB
export default function useKeyDownHandler(enterCallback?: (input: string) => void) {
const input = ref("");
let textInput: HTMLInputElement | null;
onMounted(() => {
textInput = document.getElementById('textInput') as HTMLInputElement;
})
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".
if (textInput) textInput.focus()
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":
if (enterCallback) enterCallback(input.value);
if (textInput) textInput.value = ''
input.value = " ";
break;
case "BACK_SPACE":
input.value = input.value.slice(0, -1);
break;
case "ESCAPE":
if (textInput) textInput.value = ''
input.value = "";
break;
default:
input.value += ch;
}
}
return {
keyDownHandler,
input
};
}