add extra sanity stuff to make input boxes more stable
This commit is contained in:
parent
297a0c1f7f
commit
d85904f42f
1 changed files with 17 additions and 5 deletions
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue