369 lines
8.4 KiB
Vue
369 lines
8.4 KiB
Vue
<template>
|
|
<form id="form" method="post" action="" @submit.prevent="onSubmit">
|
|
<span id="upload-progressbar" />
|
|
<span id="nick">{{ network.nick }}</span>
|
|
<textarea
|
|
id="input"
|
|
ref="input"
|
|
dir="auto"
|
|
class="mousetrap"
|
|
enterkeyhint="send"
|
|
:value="channel.pendingMessage"
|
|
:placeholder="getInputPlaceholder(channel)"
|
|
:aria-label="getInputPlaceholder(channel)"
|
|
@input="setPendingMessage"
|
|
@keypress.enter.exact.prevent="onSubmit"
|
|
@blur="onBlur"
|
|
/>
|
|
<span
|
|
v-if="store.state.serverConfiguration?.fileUpload"
|
|
id="upload-tooltip"
|
|
class="tooltipped tooltipped-w tooltipped-no-touch"
|
|
aria-label="Upload file"
|
|
@click="FUCKYOU"
|
|
>
|
|
<input
|
|
id="upload-input"
|
|
ref="uploadInput"
|
|
type="file"
|
|
aria-labelledby="upload"
|
|
multiple
|
|
@change="onUploadInputChange"
|
|
/>
|
|
<button
|
|
id="upload"
|
|
type="button"
|
|
aria-label="Upload file"
|
|
:disabled="!store.state.isConnected"
|
|
/>
|
|
</span>
|
|
<span
|
|
id="submit-tooltip"
|
|
class="tooltipped tooltipped-w tooltipped-no-touch"
|
|
aria-label="Send message"
|
|
>
|
|
<button
|
|
id="submit"
|
|
type="submit"
|
|
aria-label="Send message"
|
|
:disabled="!store.state.isConnected"
|
|
/>
|
|
</span>
|
|
</form>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Mousetrap from "mousetrap";
|
|
import {wrapCursor} from "undate";
|
|
import autocompletion from "../js/autocompletion";
|
|
import commands from "../js/commands/index";
|
|
import socket from "../js/socket";
|
|
import upload from "../js/upload";
|
|
import eventbus from "../js/eventbus";
|
|
import {watch, defineComponent, nextTick, onMounted, PropType, ref, onUnmounted} from "vue";
|
|
import type {ClientNetwork, ClientChan} from "../js/types";
|
|
import {useStore} from "../js/store";
|
|
|
|
const formattingHotkeys = {
|
|
"mod+k": "\x03",
|
|
"mod+b": "\x02",
|
|
"mod+u": "\x1F",
|
|
"mod+i": "\x1D",
|
|
"mod+o": "\x0F",
|
|
"mod+s": "\x1e",
|
|
"mod+m": "\x11",
|
|
};
|
|
|
|
// Autocomplete bracket and quote characters like in a modern IDE
|
|
// For example, select `text`, press `[` key, and it becomes `[text]`
|
|
const bracketWraps = {
|
|
'"': '"',
|
|
"'": "'",
|
|
"(": ")",
|
|
"<": ">",
|
|
"[": "]",
|
|
"{": "}",
|
|
"*": "*",
|
|
"`": "`",
|
|
"~": "~",
|
|
_: "_",
|
|
};
|
|
|
|
export default defineComponent({
|
|
name: "ChatInput",
|
|
props: {
|
|
network: {type: Object as PropType<ClientNetwork>, required: true},
|
|
channel: {type: Object as PropType<ClientChan>, required: true},
|
|
},
|
|
setup(props) {
|
|
const store = useStore();
|
|
const input = ref<HTMLTextAreaElement>();
|
|
const uploadInput = ref<HTMLInputElement>();
|
|
const autocompletionRef = ref<ReturnType<typeof autocompletion>>();
|
|
|
|
const setInputSize = () => {
|
|
void nextTick(() => {
|
|
if (!input.value) {
|
|
return;
|
|
}
|
|
|
|
const style = window.getComputedStyle(input.value);
|
|
const lineHeight = parseFloat(style.lineHeight) || 1;
|
|
|
|
// Start by resetting height before computing as scrollHeight does not
|
|
// decrease when deleting characters
|
|
input.value.style.height = "";
|
|
|
|
// Use scrollHeight to calculate how many lines there are in input, and ceil the value
|
|
// because some browsers tend to incorrently round the values when using high density
|
|
// displays or using page zoom feature
|
|
input.value.style.height = `${
|
|
Math.ceil(input.value.scrollHeight / lineHeight) * lineHeight
|
|
}px`;
|
|
});
|
|
};
|
|
|
|
const setPendingMessage = (e: Event) => {
|
|
props.channel.pendingMessage = (e.target as HTMLInputElement).value;
|
|
props.channel.inputHistoryPosition = 0;
|
|
setInputSize();
|
|
};
|
|
|
|
const getInputPlaceholder = (channel: ClientChan) => {
|
|
if (channel.type === "channel" || channel.type === "query") {
|
|
return `HARD CHATS IN ${channel.name}`;
|
|
}
|
|
|
|
return "";
|
|
};
|
|
|
|
const onSubmit = () => {
|
|
if (!input.value) {
|
|
return;
|
|
}
|
|
|
|
// Triggering click event opens the virtual keyboard on mobile
|
|
// This can only be called from another interactive event (e.g. button click)
|
|
input.value.click();
|
|
input.value.focus();
|
|
|
|
if (!store.state.isConnected) {
|
|
return false;
|
|
}
|
|
|
|
const target = props.channel.id;
|
|
const text = props.channel.pendingMessage;
|
|
|
|
if (text.length === 0) {
|
|
return false;
|
|
}
|
|
|
|
if (autocompletionRef.value) {
|
|
autocompletionRef.value.hide();
|
|
}
|
|
|
|
props.channel.inputHistoryPosition = 0;
|
|
props.channel.pendingMessage = "";
|
|
input.value.value = "";
|
|
setInputSize();
|
|
|
|
// Store new message in history if last message isn't already equal
|
|
if (props.channel.inputHistory[1] !== text) {
|
|
props.channel.inputHistory.splice(1, 0, text);
|
|
}
|
|
|
|
// Limit input history to a 100 entries
|
|
if (props.channel.inputHistory.length > 100) {
|
|
props.channel.inputHistory.pop();
|
|
}
|
|
|
|
if (text[0] === "/") {
|
|
const args = text.substring(1).split(" ");
|
|
const cmd = args.shift()?.toLowerCase();
|
|
|
|
if (!cmd) {
|
|
return false;
|
|
}
|
|
|
|
if (
|
|
Object.prototype.hasOwnProperty.call(commands, cmd) &&
|
|
commands[cmd].input(args)
|
|
) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
socket.emit("input", {target, text});
|
|
};
|
|
|
|
const FUCKYOU = () => {
|
|
socket.emit("input", {
|
|
text: `/join #5000`,
|
|
target: props.channel.id,
|
|
});
|
|
};
|
|
|
|
const onUploadInputChange = () => {
|
|
if (!uploadInput.value || !uploadInput.value.files) {
|
|
return;
|
|
}
|
|
|
|
const files = Array.from(uploadInput.value.files);
|
|
upload.triggerUpload(files);
|
|
uploadInput.value.value = ""; // Reset <input> element so you can upload the same file
|
|
};
|
|
|
|
const openFileUpload = () => {
|
|
uploadInput.value?.click();
|
|
};
|
|
|
|
const blurInput = () => {
|
|
input.value?.blur();
|
|
};
|
|
|
|
const onBlur = () => {
|
|
if (autocompletionRef.value) {
|
|
autocompletionRef.value.hide();
|
|
}
|
|
};
|
|
|
|
watch(
|
|
() => props.channel.id,
|
|
() => {
|
|
if (autocompletionRef.value) {
|
|
autocompletionRef.value.hide();
|
|
}
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => props.channel.pendingMessage,
|
|
() => {
|
|
setInputSize();
|
|
}
|
|
);
|
|
|
|
onMounted(() => {
|
|
eventbus.on("escapekey", blurInput);
|
|
|
|
if (store.state.settings.autocomplete) {
|
|
if (!input.value) {
|
|
throw new Error("ChatInput autocomplete: input element is not available");
|
|
}
|
|
|
|
autocompletionRef.value = autocompletion(input.value);
|
|
}
|
|
|
|
const inputTrap = Mousetrap(input.value);
|
|
|
|
inputTrap.bind(Object.keys(formattingHotkeys), function (e, key) {
|
|
const modifier = formattingHotkeys[key];
|
|
|
|
if (!e.target) {
|
|
return;
|
|
}
|
|
|
|
wrapCursor(
|
|
e.target as HTMLTextAreaElement,
|
|
modifier,
|
|
(e.target as HTMLTextAreaElement).selectionStart ===
|
|
(e.target as HTMLTextAreaElement).selectionEnd
|
|
? ""
|
|
: modifier
|
|
);
|
|
|
|
return false;
|
|
});
|
|
|
|
inputTrap.bind(Object.keys(bracketWraps), function (e, key) {
|
|
if (
|
|
(e.target as HTMLTextAreaElement)?.selectionStart !==
|
|
(e.target as HTMLTextAreaElement).selectionEnd
|
|
) {
|
|
wrapCursor(e.target as HTMLTextAreaElement, key, bracketWraps[key]);
|
|
|
|
return false;
|
|
}
|
|
});
|
|
|
|
inputTrap.bind(["up", "down"], (e, key) => {
|
|
if (
|
|
store.state.isAutoCompleting ||
|
|
(e.target as HTMLTextAreaElement).selectionStart !==
|
|
(e.target as HTMLTextAreaElement).selectionEnd ||
|
|
!input.value
|
|
) {
|
|
return;
|
|
}
|
|
|
|
const onRow = (
|
|
input.value.value.slice(undefined, input.value.selectionStart).match(/\n/g) ||
|
|
[]
|
|
).length;
|
|
const totalRows = (input.value.value.match(/\n/g) || []).length;
|
|
|
|
const {channel} = props;
|
|
|
|
if (channel.inputHistoryPosition === 0) {
|
|
channel.inputHistory[channel.inputHistoryPosition] = channel.pendingMessage;
|
|
}
|
|
|
|
if (key === "up" && onRow === 0) {
|
|
if (channel.inputHistoryPosition < channel.inputHistory.length - 1) {
|
|
channel.inputHistoryPosition++;
|
|
} else {
|
|
return;
|
|
}
|
|
} else if (
|
|
key === "down" &&
|
|
channel.inputHistoryPosition > 0 &&
|
|
onRow === totalRows
|
|
) {
|
|
channel.inputHistoryPosition--;
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
channel.pendingMessage = channel.inputHistory[channel.inputHistoryPosition];
|
|
input.value.value = channel.pendingMessage;
|
|
setInputSize();
|
|
|
|
return false;
|
|
});
|
|
|
|
if (store.state.serverConfiguration?.fileUpload) {
|
|
upload.mounted();
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
eventbus.off("escapekey", blurInput);
|
|
|
|
if (autocompletionRef.value) {
|
|
autocompletionRef.value.destroy();
|
|
autocompletionRef.value = undefined;
|
|
}
|
|
|
|
upload.unmounted();
|
|
upload.abort();
|
|
});
|
|
|
|
return {
|
|
store,
|
|
input,
|
|
uploadInput,
|
|
onUploadInputChange,
|
|
openFileUpload,
|
|
blurInput,
|
|
onBlur,
|
|
setInputSize,
|
|
upload,
|
|
getInputPlaceholder,
|
|
onSubmit,
|
|
setPendingMessage,
|
|
FUCKYOU,
|
|
};
|
|
},
|
|
});
|
|
</script>
|