From ca92e294013e0773460516e5831c28e2ccf3d760 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 25 Sep 2019 00:17:04 +0300 Subject: [PATCH] WIP: fixed autoscroll, restructured Post Status Form's resize method "a bit" --- .../post_status_form/post_status_form.js | 76 ++++++++++++++----- .../post_status_form/post_status_form.vue | 5 +- 2 files changed, 62 insertions(+), 19 deletions(-) diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 10e75144..aaecf088 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -4,6 +4,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue' import EmojiInput from '../emoji_input/emoji_input.vue' import PollForm from '../poll/poll_form.vue' 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 suggestor from '../emoji_input/suggestor.js' @@ -276,29 +277,68 @@ const PostStatusForm = { resize (e) { const target = e.target || e if (!(target instanceof window.Element)) { return } - const topPaddingStr = window.getComputedStyle(target)['padding-top'] - const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom'] - // Remove "px" at the end of the values - const vertPadding = Number(topPaddingStr.substr(0, topPaddingStr.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 - target.style.height = 'auto' - const newValue = target.scrollHeight - vertPadding - target.style.height = `${newValue}px` + if (target.value === '') { + target.style.height = null + this.$refs['emoji-input'].resize() + return + } + + const rootRef = this.$refs['root'] const scroller = this.$el.closest('.sidebar-scroller') || this.$el.closest('.post-form-modal-view') || window - const delta = newValue - oldValue || 0 - if (target.value === '') { - target.style.height = null + + const topPaddingStr = window.getComputedStyle(target)['padding-top'] + 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 { - /* 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) + scroller.scrollTop = tempScroll } + + 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() }, showEmojiPicker () { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index d24f1981..5f9e21ae 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -1,5 +1,8 @@