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

inputItem v1

Browse source
This commit is contained in:
Enrique Hernandez 2021-03-07 18:41:22 -06:00
commit f2a240d803
18 changed files with 249 additions and 1072 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
import { ref } from "vue";
import { ref, onMounted } from "vue";
import keyboardNameMap from "./keyBoardMaps/keyboardNameMap";
import keyboardCharMap from "./keyBoardMaps/keyboardCharMap";
interface KeyDownEvent {
keyCode: number;
shiftKey: boolean;
keyCode: number;
shiftKey: boolean;
}
// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a
@ -13,6 +13,12 @@ export default function useKeyDownHandler(enterCallback?: (input: string) => voi
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.
@ -20,6 +26,8 @@ export default function useKeyDownHandler(enterCallback?: (input: string) => voi
// 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;
@ -32,11 +40,14 @@ export default function useKeyDownHandler(enterCallback?: (input: string) => voi
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:

13
src/modules/mediaStream.ts
View file

@ -1,13 +0,0 @@
export default async function useMediaStream(constraints: {
audio: boolean;
video?: boolean;
}): Promise<MediaStream> {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
return stream;
} catch (e) {
return e;
}
// var audioTack = stream.getAudioTracks()[0];
// console.log(audioTrack.getSettings())
}

78
src/modules/queue.ts
View file

@ -1,78 +0,0 @@
export interface DataNode<T> {
data: T;
next: DataNode<T> | null;
}
export interface QueueI<T> {
enqueue(data: T): void;
dequeue(): T | null;
peek(): T | null;
size(): number;
}
export class Queue<T> implements QueueI<T> {
private _size: number;
private head: DataNode<T> | null;
private tail: DataNode<T> | null;
constructor() {
this._size = 0;
this.head = this.tail = null;
}
enqueue(data: T) {
const node: DataNode<T> = {
data,
next: null
}
if (this.head === null) {
this.head = this.tail = node;
} else {
if (this.tail) {
this.tail.next = node;
this.tail = this.tail.next;
}
}
++this._size;
}
dequeue(): T | null {
let item: T | null = null;
if (this._size === 0) {
return null;
}
if (this.head) {
item = this.head.data;
this.head = this.head.next;
--this._size;
if (!this._size) {
this.tail = null;
}
}
return item;
}
peek(): T | null {
let item: T | null = null;
if (this._size === 0) {
return null;
}
if (this.head) {
item = this.head.data;
}
return item;
}
size(): number {
return this._size;
}
}

86
src/modules/scrollView.ts
View file

@ -1,86 +0,0 @@
import { ref, computed, onMounted, onUnmounted } from "vue";
/**
* handles visualization of view messages through
* vue transition callbacks and anime-js animations
*/
export default function useScrollView({ targetId }: { targetId: string }) {
const scroll = ref(0);
let scrollTarget: HTMLElement | SVGElement | null;
const targetHeight = ref(0);
let topBound: number;
const scrollStartHeight = 445;
const scrollView = computed(() => {
if (clampedScroll.value === 0) {
scroll.value = 0;
} else if (clampedScroll.value === topBound) {
scroll.value = topBound;
}
// x, y, width, height
// width and height should be dynamic
return `0 ${clampedScroll.value} 350 500`;
});
const clampedScroll = computed(() => {
if (targetHeight.value === 0) { return 0; }
topBound = -targetHeight.value + 450;
return Math.max(topBound, Math.min(scroll.value, 0)) as number;
})
const getHeight = () => {
if (scrollTarget) {
return scrollTarget.getBoundingClientRect().height as number;
}
}
const getWidth = () => {
if (scrollTarget) {
return scrollTarget.getBoundingClientRect().width as number;
}
}
const updateView = (verticalScroll: number) => {
if (scrollTarget) {
const heightResult = getHeight();
const widthResult = getWidth();
console.log(heightResult);
console.log(widthResult);
if (heightResult) {
// only scroll if renderer scrollStart
if (heightResult > scrollStartHeight) {
targetHeight.value = heightResult;
scroll.value += verticalScroll;
}
}
}
}
const scrollUpdate = (e: any): void => {
const verticalScroll = e.deltaY * 0.25;
updateView(verticalScroll);
}
onMounted(() => {
scrollTarget = document.getElementById("targetId");
if (scrollTarget) {
window.addEventListener("wheel", scrollUpdate);
}
});
onUnmounted(() => {
window.removeEventListener("wheel", scrollUpdate);
})
return {
scrollView
}
}

17
src/modules/textWrap.ts
View file

@ -1,17 +0,0 @@
export default function useTextWrap() {
// text wraps a string to a given width
function textWrap({ s, w }: { s: string; w: number }): string[] {
// return tspan elements for text with correct size
const wrap = (s: string, w: number) =>
s.replace(
new RegExp(`(?![^\\n]{1,${w}}$)([^\\n]{1,${w}})\\s`, "g"),
"$1\n"
);
const result = wrap(s, w).split("\n");
return result;
}
return {
textWrap
};
}