supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Fix input to behave better on Android

Browse Source
This commit is contained in:
Pavel Djundik 2018-08-29 10:34:21 +03:00 committed by Pavel Djundik
parent 140c14959c
commit a8cad55fda
1 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
client/components/ChatInput.vue
View File

@ -8,10 +8,11 @@
<textarea <textarea
id="input" id="input"
ref="input" ref="input"
v-model="channel.pendingMessage" :value="channel.pendingMessage"
:placeholder="getInputPlaceholder(channel)" :placeholder="getInputPlaceholder(channel)"
:aria-label="getInputPlaceholder(channel)" :aria-label="getInputPlaceholder(channel)"
class="mousetrap" class="mousetrap"
@input="setPendingMessage"
@keypress.enter.exact.prevent="onSubmit" /> @keypress.enter.exact.prevent="onSubmit" />
<span <span
id="submit-tooltip" id="submit-tooltip"
@ -26,7 +27,6 @@
</template> </template>
<script> <script>
const $ = require("jquery");
const commands = require("../js/commands/index"); const commands = require("../js/commands/index");
const socket = require("../js/socket"); const socket = require("../js/socket");
const Mousetrap = require("mousetrap"); const Mousetrap = require("mousetrap");
@ -65,19 +65,7 @@ export default {
}, },
watch: { watch: {
"channel.pendingMessage"() { "channel.pendingMessage"() {
this.$nextTick(() => { this.setInputSize();
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
this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
});
}, },
}, },
mounted() { mounted() {
@ -114,6 +102,25 @@ export default {
require("../js/autocompletion").disable(); require("../js/autocompletion").disable();
}, },
methods: { methods: {
setPendingMessage(e) {
this.channel.pendingMessage = e.target.value;
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
this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
});
},
getInputPlaceholder(channel) { getInputPlaceholder(channel) {
if (channel.type === "channel" || channel.type === "query") { if (channel.type === "channel" || channel.type === "query") {
return `Write to ${channel.name}`; return `Write to ${channel.name}`;
@ -124,7 +131,8 @@ export default {
onSubmit() { onSubmit() {
// Triggering click event opens the virtual keyboard on mobile // Triggering click event opens the virtual keyboard on mobile
// This can only be called from another interactive event (e.g. button click) // This can only be called from another interactive event (e.g. button click)
$(this.$refs.input).trigger("click").trigger("focus"); this.$refs.input.click();
this.$refs.input.focus();
if (!this.$root.connected) { if (!this.$root.connected) {
return false; return false;
@ -138,6 +146,8 @@ export default {
} }
this.channel.pendingMessage = ""; this.channel.pendingMessage = "";
this.$refs.input.value = "";
this.setInputSize();
if (text[0] === "/") { if (text[0] === "/") {
const args = text.substr(1).split(" "); const args = text.substr(1).split(" ");