moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix scrolling to attachments bottom

This commit is contained in:
Henry Jameson 2019-10-22 23:53:23 +03:00
parent 6266148745
commit da3094eab7
2 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/post_status_form/post_status_form.js
View File

@ -285,11 +285,15 @@ const PostStatusForm = {
return
}
const rootRef = this.$refs['root']
const formRef = this.$refs['form']
const bottomRef = this.$refs['bottom']
/* Scroller is either `window` (replies in TL), sidebar (main post form,
* replies in notifs) or mobile post form. Note that getting and setting
* scroll is different for `Window` and `Element`s
*/
const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
const bottomBottomPadding = Number(bottomBottomPaddingStr.substring(0, bottomBottomPaddingStr.length - 2))
const scrollerRef = this.$el.closest('.sidebar-scroller') ||
this.$el.closest('.post-form-modal-view') ||
window
@ -312,7 +316,7 @@ const PostStatusForm = {
* SHRINK the textarea when there's extra space. To workaround that we set
* height to 'auto' which makes textarea tiny again, so that scrollHeight
* will match text height again. HOWEVER, shrinking textarea can screw with
* the scroll since there might be not enough padding around root to even
* the scroll since there might be not enough padding around form-bottom to even
* warrant a scroll, so it will jump to 0 and refuse to move anywhere,
* so we check current scroll position before shrinking and then restore it
* with needed delta.
@ -333,21 +337,21 @@ const PostStatusForm = {
target.style.height = `${newHeight}px`
// END content size update
// We check where the bottom border of root element is, this uses findOffset
// We check where the bottom border of form-bottom element is, this uses findOffset
// to find offset relative to scrollable container (scroller)
const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top
const bottomBottomBorder = bottomRef.offsetHeight + findOffset(bottomRef, scrollerRef).top + bottomBottomPadding
const isBottomObstructed = scrollerBottomBorder < rootBottomBorder
const isRootBiggerThanScroller = scrollerHeight < rootRef.offsetHeight
const rootChangeDelta = rootBottomBorder - scrollerBottomBorder
const isBottomObstructed = scrollerBottomBorder < bottomBottomBorder
const isFormBiggerThanScroller = scrollerHeight < formRef.offsetHeight
const bottomChangeDelta = bottomBottomBorder - scrollerBottomBorder
// The intention is basically this;
// 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
// Keep form-bottom always visible so that submit button is in view EXCEPT
// if form 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 &&
!(isFormBiggerThanScroller &&
this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
const totalDelta = shouldScrollToBottom ? rootChangeDelta : 0
const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
const targetScroll = currentScroll + totalDelta
if (scrollerRef === window) {

7
src/components/post_status_form/post_status_form.vue
View File

@ -1,6 +1,6 @@
<template>
<div
ref="root"
ref="form"
class="post-status-form"
>
<form
@ -160,7 +160,10 @@
:visible="pollFormVisible"
@update-poll="setPoll"
/>
<div class="form-bottom">
<div
ref="bottom"
class="form-bottom"
>
<div class="form-bottom-left">
<media-upload
ref="mediaUpload"