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 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, /* Scroller is either `window` (replies in TL), sidebar (main post form,
* replies in notifs) or mobile post form. Note that getting and setting * replies in notifs) or mobile post form. Note that getting and setting
* scroll is different for `Window` and `Element`s * 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') || const scrollerRef = this.$el.closest('.sidebar-scroller') ||
this.$el.closest('.post-form-modal-view') || this.$el.closest('.post-form-modal-view') ||
window window
@ -312,7 +316,7 @@ const PostStatusForm = {
* SHRINK the textarea when there's extra space. To workaround that we set * SHRINK the textarea when there's extra space. To workaround that we set
* height to 'auto' which makes textarea tiny again, so that scrollHeight * height to 'auto' which makes textarea tiny again, so that scrollHeight
* will match text height again. HOWEVER, shrinking textarea can screw with * 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, * 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 * so we check current scroll position before shrinking and then restore it
* with needed delta. * with needed delta.
@ -333,21 +337,21 @@ const PostStatusForm = {
target.style.height = `${newHeight}px` target.style.height = `${newHeight}px`
// END content size update // 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) // 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 isBottomObstructed = scrollerBottomBorder < bottomBottomBorder
const isRootBiggerThanScroller = scrollerHeight < rootRef.offsetHeight const isFormBiggerThanScroller = scrollerHeight < formRef.offsetHeight
const rootChangeDelta = rootBottomBorder - scrollerBottomBorder const bottomChangeDelta = bottomBottomBorder - scrollerBottomBorder
// The intention is basically this; // The intention is basically this;
// Keep bottom side always visible so that submit button is in view EXCEPT // Keep form-bottom 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 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 // if you scroll up and edit middle of text you won't get scrolled back to bottom
const shouldScrollToBottom = isBottomObstructed && const shouldScrollToBottom = isBottomObstructed &&
!(isRootBiggerThanScroller && !(isFormBiggerThanScroller &&
this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length) this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
const totalDelta = shouldScrollToBottom ? rootChangeDelta : 0 const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
const targetScroll = currentScroll + totalDelta const targetScroll = currentScroll + totalDelta
if (scrollerRef === window) { if (scrollerRef === window) {

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

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