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

Merge branch 'fix/stabilize-input-bux' into 'develop' 

fix: stabilize post status form input box

See merge request pleroma/pleroma-fe!1191
This commit is contained in:
HJ 2020-07-15 13:49:21 +00:00
parent 297a0c1f7f d85904f42f
commit fd94dba6d0
1 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,6 +27,11 @@ const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
return mentions.length > 0 ? mentions.join(' ') + ' ' : '' return mentions.length > 0 ? mentions.join(' ') + ' ' : ''
} }
// Converts a string with px to a number like '2px' -> 2
const pxStringToNumber = (str) => {
return Number(str.substring(0, str.length - 2))
}
const PostStatusForm = { const PostStatusForm = {
props: [ props: [
'replyTo', 'replyTo',
@ -423,7 +428,7 @@ const PostStatusForm = {
* scroll is different for `Window` and `Element`s * scroll is different for `Window` and `Element`s
*/ */
const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom'] const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
const bottomBottomPadding = Number(bottomBottomPaddingStr.substring(0, bottomBottomPaddingStr.length - 2)) const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)
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') ||
@ -432,10 +437,12 @@ const PostStatusForm = {
// Getting info about padding we have to account for, removing 'px' part // Getting info about padding we have to account for, removing 'px' part
const topPaddingStr = window.getComputedStyle(target)['padding-top'] const topPaddingStr = window.getComputedStyle(target)['padding-top']
const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom'] const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom']
const topPadding = Number(topPaddingStr.substring(0, topPaddingStr.length - 2)) const topPadding = pxStringToNumber(topPaddingStr)
const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2)) const bottomPadding = pxStringToNumber(bottomPaddingStr)
const vertPadding = topPadding + bottomPadding const vertPadding = topPadding + bottomPadding
const oldHeight = pxStringToNumber(target.style.height)
/* Explanation: /* Explanation:
* *
* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
@ -464,8 +471,13 @@ const PostStatusForm = {
// BEGIN content size update // BEGIN content size update
target.style.height = 'auto' target.style.height = 'auto'
const heightWithoutPadding = target.scrollHeight - vertPadding const heightWithoutPadding = Math.floor(target.scrollHeight - vertPadding)
const newHeight = this.maxHeight ? Math.min(heightWithoutPadding, this.maxHeight) : heightWithoutPadding let newHeight = this.maxHeight ? Math.min(heightWithoutPadding, this.maxHeight) : heightWithoutPadding
// This is a bit of a hack to combat target.scrollHeight being different on every other input
// on some browsers for whatever reason. Don't change the height if difference is 1px or less.
if (Math.abs(newHeight - oldHeight) <= 1) {
newHeight = oldHeight
}
target.style.height = `${newHeight}px` target.style.height = `${newHeight}px`
this.$emit('resize', newHeight) this.$emit('resize', newHeight)
// END content size update // END content size update