autoscroll post form on typing + some minor improvements

This commit is contained in:
Henry Jameson 2019-09-23 22:12:25 +03:00
parent 7b4cb38734
commit 6f0257cd7d
3 changed files with 26 additions and 7 deletions

View file

@ -211,10 +211,12 @@ const EmojiInput = {
this.keepOpen = keepOpen this.keepOpen = keepOpen
this.$emit('input', newValue) this.$emit('input', newValue)
const position = this.caret + (insertion + spaceAfter + spaceBefore).length const position = this.caret + (insertion + spaceAfter + spaceBefore).length
if (!keepOpen) {
this.input.elm.focus()
}
this.$nextTick(function () { this.$nextTick(function () {
// Re-focus inputbox after clicking suggestion // Re-focus inputbox after clicking suggestion
this.input.elm.focus()
// Set selection right after the replacement instead of the very end // Set selection right after the replacement instead of the very end
this.input.elm.setSelectionRange(position, position) this.input.elm.setSelectionRange(position, position)
this.caret = position this.caret = position

View file

@ -249,6 +249,7 @@ const PostStatusForm = {
return fileTypeService.fileType(fileInfo.mimetype) return fileTypeService.fileType(fileInfo.mimetype)
}, },
paste (e) { paste (e) {
this.resize()
if (e.clipboardData.files.length > 0) { if (e.clipboardData.files.length > 0) {
// prevent pasting of file as text // prevent pasting of file as text
e.preventDefault() e.preventDefault()
@ -267,6 +268,11 @@ const PostStatusForm = {
fileDrag (e) { fileDrag (e) {
e.dataTransfer.dropEffect = 'copy' e.dataTransfer.dropEffect = 'copy'
}, },
onEmojiInputInput (e) {
this.$nextTick(() => {
this.resize(this.$refs['textarea'])
})
},
resize (e) { resize (e) {
const target = e.target || e const target = e.target || e
if (!(target instanceof window.Element)) { return } if (!(target instanceof window.Element)) { return }
@ -275,12 +281,25 @@ const PostStatusForm = {
// Remove "px" at the end of the values // Remove "px" at the end of the values
const vertPadding = Number(topPaddingStr.substr(0, topPaddingStr.length - 2)) + const vertPadding = Number(topPaddingStr.substr(0, topPaddingStr.length - 2)) +
Number(bottomPaddingStr.substr(0, bottomPaddingStr.length - 2)) Number(bottomPaddingStr.substr(0, bottomPaddingStr.length - 2))
const oldValue = Number((/([0-9.]+)px/.exec(target.style.height || '') || [])[1])
// Auto is needed to make textbox shrink when removing lines // Auto is needed to make textbox shrink when removing lines
target.style.height = 'auto' target.style.height = 'auto'
target.style.height = `${target.scrollHeight - vertPadding}px` const newValue = target.scrollHeight - vertPadding
target.style.height = `${newValue}px`
const scroller = this.$el.closest('.sidebar-scroller') ||
this.$el.closest('.post-form-modal-view') ||
window
const delta = newValue - oldValue || 0
if (target.value === '') { if (target.value === '') {
target.style.height = null target.style.height = null
} else {
/* For some reason this doens't _exactly_ work on mobile post form when typing
* but it works when adding emojis. Supposedly, removing the "height = auto"
* line helps with that but it obviously breaks the autoheight.
*/
scroller.scrollBy(0, delta)
} }
this.$refs['emoji-input'].resize()
}, },
showEmojiPicker () { showEmojiPicker () {
this.$refs['textarea'].focus() this.$refs['textarea'].focus()

View file

@ -81,6 +81,7 @@
enable-emoji-picker enable-emoji-picker
hide-emoji-button hide-emoji-button
enable-sticker-picker enable-sticker-picker
@input="onEmojiInputInput"
@sticker-uploaded="addMediaFile" @sticker-uploaded="addMediaFile"
@sticker-upload-failed="uploadFailed" @sticker-upload-failed="uploadFailed"
> >
@ -95,7 +96,8 @@
@keyup.ctrl.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)"
@drop="fileDrop" @drop="fileDrop"
@dragover.prevent="fileDrag" @dragover.prevent="fileDrag"
@input="resize" @keydown.exact="resize"
@compositionupdate="resize"
@paste="paste" @paste="paste"
/> />
<p <p
@ -475,10 +477,6 @@
box-sizing: content-box; box-sizing: content-box;
} }
.form-post-body:focus {
min-height: 48px;
}
.main-input { .main-input {
position: relative; position: relative;
} }