itepechi/akkoma-fe
1
0
Fork 0
Code Issues Pull requests Releases 1 Activity

fixed emoji picker showing up beyond viewport

Browse source
This commit is contained in:
Henry Jameson 2019-10-08 21:30:27 +03:00
parent bed109ae46
commit 81d86a39fe
1 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/emoji_input/emoji_input.js
View file

@ -308,6 +308,17 @@ const EmojiInput = {
} else {
scrollerRef.scrollTop = targetScroll
}
this.$nextTick(() => {
const { offsetHeight } = this.input.elm
const { picker } = this.$refs
console.log(picker)
const pickerBottom = picker.$el.getBoundingClientRect().bottom
if (pickerBottom > window.innerHeight) {
picker.$el.style.top = 'auto'
picker.$el.style.bottom = offsetHeight + 'px'
}
})
},
onTransition (e) {
this.resize()
@ -421,11 +432,14 @@ const EmojiInput = {
this.caret = selectionStart
},
resize () {
const { panel } = this.$refs
const { panel, picker } = this.$refs
if (!panel) return
const { offsetHeight, offsetTop } = this.input.elm
this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px'
this.$refs.picker.$el.style.top = (offsetTop + offsetHeight) + 'px'
const offsetBottom = offsetTop + offsetHeight
panel.style.top = offsetBottom + 'px'
picker.$el.style.top = offsetBottom + 'px'
picker.$el.style.bottom = 'auto'
}
}
}