hardlounge/client/components/ChatInput.vue

244 lines
5.8 KiB
Vue
Raw Normal View History

2018-07-08 13:42:54 +00:00
<template>
2019-07-17 09:33:59 +00:00
<form id="form" method="post" action="" @submit.prevent="onSubmit">
2018-07-08 13:42:54 +00:00
<span id="nick">{{ network.nick }}</span>
<textarea
id="input"
2018-07-08 15:17:20 +00:00
ref="input"
dir="auto"
2018-08-29 07:34:21 +00:00
:value="channel.pendingMessage"
2018-07-08 13:42:54 +00:00
:placeholder="getInputPlaceholder(channel)"
:aria-label="getInputPlaceholder(channel)"
class="mousetrap"
2018-08-29 07:34:21 +00:00
@input="setPendingMessage"
@keypress.enter.exact.prevent="onSubmit"
/>
2018-09-03 07:58:33 +00:00
<span
2019-11-12 10:40:17 +00:00
v-if="$store.state.serverConfiguration.fileUpload"
2018-09-03 07:58:33 +00:00
id="upload-tooltip"
class="tooltipped tooltipped-w tooltipped-no-touch"
2019-02-18 07:19:44 +00:00
aria-label="Upload file"
@click="openFileUpload"
>
<input
id="upload-input"
ref="uploadInput"
type="file"
multiple
@change="onUploadInputChange"
/>
2018-09-03 07:58:33 +00:00
<button
id="upload"
type="button"
aria-label="Upload file"
:disabled="!$store.state.isConnected"
/>
2018-09-03 07:58:33 +00:00
</span>
2018-07-08 13:42:54 +00:00
<span
id="submit-tooltip"
class="tooltipped tooltipped-w tooltipped-no-touch"
aria-label="Send message"
>
2018-07-08 13:42:54 +00:00
<button
id="submit"
type="submit"
2018-09-12 19:54:20 +00:00
aria-label="Send message"
:disabled="!$store.state.isConnected"
/>
2018-07-08 13:42:54 +00:00
</span>
</form>
</template>
<script>
const commands = require("../js/commands/index");
2018-07-08 15:17:20 +00:00
const socket = require("../js/socket");
2018-09-03 07:58:33 +00:00
const upload = require("../js/upload");
2018-07-09 18:51:27 +00:00
const Mousetrap = require("mousetrap");
const {wrapCursor} = require("undate");
2018-10-13 10:11:38 +00:00
const formattingHotkeys = {
"mod+k": "\x03",
"mod+b": "\x02",
"mod+u": "\x1F",
"mod+i": "\x1D",
"mod+o": "\x0F",
"mod+s": "\x1e",
"mod+m": "\x11",
2018-07-09 18:51:27 +00:00
};
// Autocomplete bracket and quote characters like in a modern IDE
// For example, select `text`, press `[` key, and it becomes `[text]`
const bracketWraps = {
'"': '"',
"'": "'",
"(": ")",
"<": ">",
"[": "]",
"{": "}",
"*": "*",
"`": "`",
"~": "~",
2019-07-17 09:33:59 +00:00
_: "_",
2018-07-09 18:51:27 +00:00
};
2018-07-08 15:17:20 +00:00
2018-07-08 13:42:54 +00:00
export default {
name: "ChatInput",
props: {
network: Object,
channel: Object,
},
2018-07-13 10:24:05 +00:00
watch: {
"channel.pendingMessage"() {
2018-08-29 07:34:21 +00:00
this.setInputSize();
2018-07-13 10:24:05 +00:00
},
},
2018-07-08 14:57:02 +00:00
mounted() {
if (this.$store.state.settings.autocomplete) {
2018-07-09 18:53:49 +00:00
require("../js/autocompletion").enable(this.$refs.input);
2018-07-08 14:57:02 +00:00
}
2018-07-09 18:51:27 +00:00
const inputTrap = Mousetrap(this.$refs.input);
inputTrap.bind(Object.keys(formattingHotkeys), function(e, key) {
const modifier = formattingHotkeys[key];
2018-07-09 18:51:27 +00:00
wrapCursor(
e.target,
modifier,
e.target.selectionStart === e.target.selectionEnd ? "" : modifier
);
2018-07-09 18:51:27 +00:00
return false;
});
2018-07-09 18:51:27 +00:00
inputTrap.bind(Object.keys(bracketWraps), function(e, key) {
2018-07-09 18:51:27 +00:00
if (e.target.selectionStart !== e.target.selectionEnd) {
wrapCursor(e.target, key, bracketWraps[key]);
2018-07-09 18:51:27 +00:00
return false;
}
});
2018-09-03 07:58:33 +00:00
2018-09-09 12:23:12 +00:00
inputTrap.bind(["up", "down"], (e, key) => {
if (
this.$store.state.isAutoCompleting ||
e.target.selectionStart !== e.target.selectionEnd
) {
2018-09-09 12:23:12 +00:00
return;
}
2019-02-17 07:59:11 +00:00
const {channel} = this;
if (channel.inputHistoryPosition === 0) {
channel.inputHistory[channel.inputHistoryPosition] = channel.pendingMessage;
2018-09-09 12:23:12 +00:00
}
if (key === "up") {
2019-02-17 07:59:11 +00:00
if (channel.inputHistoryPosition < channel.inputHistory.length - 1) {
channel.inputHistoryPosition++;
2018-09-09 12:23:12 +00:00
}
2019-02-17 07:59:11 +00:00
} else if (channel.inputHistoryPosition > 0) {
channel.inputHistoryPosition--;
2018-09-09 12:23:12 +00:00
}
2019-02-17 07:59:11 +00:00
channel.pendingMessage = channel.inputHistory[channel.inputHistoryPosition];
this.$refs.input.value = channel.pendingMessage;
2018-09-09 12:23:12 +00:00
this.setInputSize();
return false;
});
2019-11-12 10:40:17 +00:00
if (this.$store.state.serverConfiguration.fileUpload) {
upload.mounted();
2018-09-03 07:58:33 +00:00
}
2018-07-08 14:57:02 +00:00
},
destroyed() {
require("../js/autocompletion").disable();
upload.abort();
2018-07-08 14:57:02 +00:00
},
2018-07-08 13:42:54 +00:00
methods: {
2018-08-29 07:34:21 +00:00
setPendingMessage(e) {
this.channel.pendingMessage = e.target.value;
2018-09-09 12:23:12 +00:00
this.channel.inputHistoryPosition = 0;
2018-08-29 07:34:21 +00:00
this.setInputSize();
},
setInputSize() {
this.$nextTick(() => {
const style = window.getComputedStyle(this.$refs.input);
const lineHeight = parseFloat(style.lineHeight, 10) || 1;
// Start by resetting height before computing as scrollHeight does not
// decrease when deleting characters
this.$refs.input.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
2019-07-17 09:33:59 +00:00
this.$refs.input.style.height =
Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
2018-08-29 07:34:21 +00:00
});
},
2018-07-08 13:42:54 +00:00
getInputPlaceholder(channel) {
if (channel.type === "channel" || channel.type === "query") {
return `Write to ${channel.name}`;
}
return "";
},
2018-07-08 15:17:20 +00:00
onSubmit() {
// Triggering click event opens the virtual keyboard on mobile
// This can only be called from another interactive event (e.g. button click)
2018-08-29 07:34:21 +00:00
this.$refs.input.click();
this.$refs.input.focus();
2018-07-08 15:17:20 +00:00
2019-02-27 14:15:34 +00:00
if (!this.$store.state.isConnected) {
2018-08-15 09:00:54 +00:00
return false;
}
2018-07-08 15:17:20 +00:00
const target = this.channel.id;
2018-07-08 18:21:24 +00:00
const text = this.channel.pendingMessage;
2018-07-08 15:17:20 +00:00
if (text.length === 0) {
return false;
}
2018-09-09 12:23:12 +00:00
this.channel.inputHistoryPosition = 0;
2018-07-08 18:21:24 +00:00
this.channel.pendingMessage = "";
2018-08-29 07:34:21 +00:00
this.$refs.input.value = "";
this.setInputSize();
2018-07-08 15:17:20 +00:00
2018-09-09 12:23:12 +00:00
// Store new message in history if last message isn't already equal
if (this.channel.inputHistory[1] !== text) {
this.channel.inputHistory.splice(1, 0, text);
}
2018-09-12 20:35:55 +00:00
// Limit input history to a 100 entries
if (this.channel.inputHistory.length > 100) {
this.channel.inputHistory.pop();
}
if (text[0] === "/") {
2018-07-08 15:17:20 +00:00
const args = text.substr(1).split(" ");
const cmd = args.shift().toLowerCase();
2019-07-17 09:33:59 +00:00
if (
Object.prototype.hasOwnProperty.call(commands, cmd) &&
commands[cmd].input(args)
) {
2018-07-08 15:17:20 +00:00
return false;
}
}
socket.emit("input", {target, text});
},
onUploadInputChange() {
const files = Array.from(this.$refs.uploadInput.files);
upload.triggerUpload(files);
this.$refs.uploadInput.value = ""; // Reset <input> element so you can upload the same file
},
2018-09-03 07:58:33 +00:00
openFileUpload() {
this.$refs.uploadInput.click();
},
2018-07-08 13:42:54 +00:00
},
};
</script>