WIP: fixed autoscroll, restructured Post Status Form's resize method "a bit"

This commit is contained in:
Henry Jameson 2019-09-25 00:17:04 +03:00
parent 2154152d08
commit ca92e29401
2 changed files with 62 additions and 19 deletions

View file

@ -4,6 +4,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
import EmojiInput from '../emoji_input/emoji_input.vue' import EmojiInput from '../emoji_input/emoji_input.vue'
import PollForm from '../poll/poll_form.vue' import PollForm from '../poll/poll_form.vue'
import fileTypeService from '../../services/file_type/file_type.service.js' import fileTypeService from '../../services/file_type/file_type.service.js'
import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
import { reject, map, uniqBy } from 'lodash' import { reject, map, uniqBy } from 'lodash'
import suggestor from '../emoji_input/suggestor.js' import suggestor from '../emoji_input/suggestor.js'
@ -276,29 +277,68 @@ const PostStatusForm = {
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 }
const topPaddingStr = window.getComputedStyle(target)['padding-top'] if (target.value === '') {
const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom'] target.style.height = null
// Remove "px" at the end of the values this.$refs['emoji-input'].resize()
const vertPadding = Number(topPaddingStr.substr(0, topPaddingStr.length - 2)) + return
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 const rootRef = this.$refs['root']
target.style.height = 'auto'
const newValue = target.scrollHeight - vertPadding
target.style.height = `${newValue}px`
const scroller = this.$el.closest('.sidebar-scroller') || const scroller = this.$el.closest('.sidebar-scroller') ||
this.$el.closest('.post-form-modal-view') || this.$el.closest('.post-form-modal-view') ||
window window
const delta = newValue - oldValue || 0
if (target.value === '') { const topPaddingStr = window.getComputedStyle(target)['padding-top']
target.style.height = null const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom']
// Remove "px" at the end of the values
const topPadding = Number(topPaddingStr.substring(0, topPaddingStr.length - 2))
const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2))
const vertPadding = topPadding + bottomPadding
const oldHeightStr = target.style.height || ''
const oldHeight = Number(oldHeightStr.substring(0, oldHeightStr.length - 2))
const tempScroll = scroller === window ? scroller.scrollY : scroller.scrollTop
// Auto is needed to make textbox shrink when removing lines
target.style.height = 'auto'
const newHeight = target.scrollHeight - vertPadding
target.style.height = `${oldHeight}px`
if (scroller === window) {
scroller.scroll(0, tempScroll)
} else { } else {
/* For some reason this doens't _exactly_ work on mobile post form when typing scroller.scrollTop = tempScroll
* 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)
} }
const currentScroll = scroller === window ? scroller.scrollY : scroller.scrollTop
const scrollerHeight = scroller === window ? scroller.innerHeight : scroller.offsetHeight
const scrollerBottomBorder = currentScroll + scrollerHeight
const rootBottomBorder = rootRef.offsetHeight +
findOffset(rootRef, scroller).top
const textareaSizeChangeDelta = newHeight - oldHeight || 0
const rootChangeDelta = rootBottomBorder - scrollerBottomBorder + textareaSizeChangeDelta
// console.log('CURRENT SCROLL', currentScroll)
console.log('BOTTOM BORDERS', rootBottomBorder, scrollerBottomBorder)
console.log('BOTTOM DELTA', rootBottomBorder - scrollerBottomBorder)
const targetScroll = scrollerBottomBorder < rootBottomBorder
? currentScroll + rootChangeDelta
: currentScroll + textareaSizeChangeDelta
if (scroller === window) {
scroller.scroll(0, targetScroll)
} else {
scroller.scrollTop = targetScroll
}
target.style.height = `${newHeight}px`
console.log(scroller, rootRef)
// console.log('SCROLL TO BUTTON', scrollerBottomBorder < rootBottomBorder)
// console.log('DELTA B', rootChangeDelta)
// console.log('DELTA D', textareaSizeChangeDelta)
// console.log('TARGET', targetScroll)
// console.log('ACTUAL', scroller.scrollTop || scroller.scrollY || 0)
this.$refs['emoji-input'].resize() this.$refs['emoji-input'].resize()
}, },
showEmojiPicker () { showEmojiPicker () {

View file

@ -1,5 +1,8 @@
<template> <template>
<div class="post-status-form"> <div
class="post-status-form"
ref="root"
>
<form <form
autocomplete="off" autocomplete="off"
@submit.prevent="postStatus(newStatus)" @submit.prevent="postStatus(newStatus)"