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

Resize input when typing

Browse Source
This commit is contained in:
Pavel Djundik 2018-07-13 13:24:05 +03:00 committed by Pavel Djundik
parent 8e130f0259
commit 9926157683
2 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/components/ChatInput.vue
View File

@ -66,6 +66,23 @@ export default {
network: Object, network: Object,
channel: Object, channel: Object,
}, },
watch: {
"channel.pendingMessage": {
handler: function() {
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
resetInputHeight(this);
// 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() {
if (this.$root.settings.autocomplete) { if (this.$root.settings.autocomplete) {
require("../js/autocompletion").enable(this.$refs.input); require("../js/autocompletion").enable(this.$refs.input);
@ -107,6 +124,9 @@ export default {
return ""; return "";
}, },
resetInputHeight() {
this.$refs.input.style.height = "";
},
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)
@ -120,7 +140,7 @@ export default {
} }
this.channel.pendingMessage = ""; this.channel.pendingMessage = "";
// resetInputHeight(input.get(0)); this.resetInputHeight();
if (text[0] === "/") { if (text[0] === "/") {
const args = text.substr(1).split(" "); const args = text.substr(1).split(" ");

21
client/js/lounge.js
View File

@ -75,25 +75,6 @@ window.vueMounted = () => {
return contextMenuFactory.createContextMenu($(this), e).show(); return contextMenuFactory.createContextMenu($(this), e).show();
}); });
function resetInputHeight(input) {
input.style.height = "";
}
const input = $("#input")
.on("input", function() {
const style = window.getComputedStyle(this);
const lineHeight = parseFloat(style.lineHeight, 10) || 1;
// Start by resetting height before computing as scrollHeight does not
// decrease when deleting characters
resetInputHeight(this);
// 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.style.height = Math.ceil(this.scrollHeight / lineHeight) * lineHeight + "px";
});
if (navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)) { if (navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)) {
$(document.body).addClass("is-apple"); $(document.body).addClass("is-apple");
} }
@ -194,7 +175,7 @@ window.vueMounted = () => {
// On touch devices unfocus (blur) the input to correctly close the virtual keyboard // On touch devices unfocus (blur) the input to correctly close the virtual keyboard
// An explicit blur is required, as the keyboard may open back up if the focus remains // An explicit blur is required, as the keyboard may open back up if the focus remains
// See https://github.com/thelounge/thelounge/issues/2257 // See https://github.com/thelounge/thelounge/issues/2257
input.trigger("ontouchstart" in window ? "blur" : "focus"); $("#input").trigger("ontouchstart" in window ? "blur" : "focus");
} }
if (channel && channel.channel.usersOutdated) { if (channel && channel.channel.usersOutdated) {