flisk/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

remove the "textbox grows the 'wrong' way" behavior, replace it with more

Browse source 
conditions to scroll to bottom
This commit is contained in:
Henry Jameson 2019-10-08 20:53:55 +03:00
parent 6511a744a2
commit 37b8490c01
1 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/post_status_form/post_status_form.js
View file

@ -301,9 +301,6 @@ const PostStatusForm = {
const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2)) const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2))
const vertPadding = topPadding + bottomPadding const vertPadding = topPadding + bottomPadding
const oldHeightStr = target.style.height || ''
const oldHeight = Number(oldHeightStr.substring(0, oldHeightStr.length - 2))
/* Explanation: /* Explanation:
* *
* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
@ -340,12 +337,17 @@ const PostStatusForm = {
// to find offset relative to scrollable container (scroller) // to find offset relative to scrollable container (scroller)
const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
const textareaSizeChangeDelta = newHeight - oldHeight || 0
const isBottomObstructed = scrollerBottomBorder < rootBottomBorder const isBottomObstructed = scrollerBottomBorder < rootBottomBorder
const isRootBiggerThanScroller = scrollerHeight < rootRef.offsetHeight
const rootChangeDelta = rootBottomBorder - scrollerBottomBorder const rootChangeDelta = rootBottomBorder - scrollerBottomBorder
const totalDelta = textareaSizeChangeDelta + // The intention is basically this;
(isBottomObstructed ? rootChangeDelta : 0) // Keep bottom side always visible so that submit button is in view EXCEPT
// if root element bigger than scroller and caret isn't at the end, so that
// if you scroll up and edit middle of text you won't get scrolled back to bottom
const shouldScrollToBottom = isBottomObstructed &&
!(isRootBiggerThanScroller &&
this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
const totalDelta = shouldScrollToBottom ? rootChangeDelta : 0
const targetScroll = currentScroll + totalDelta const targetScroll = currentScroll + totalDelta
if (scrollerRef === window) { if (scrollerRef === window) {