Fix scrol->highlight behaviour

Ref: grouped-emoji-picker
This commit is contained in:
Tusooa Zhu 2021-10-08 01:11:32 -04:00
parent 8777b6eadd
commit 23edc4f7e2
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224

View file

@ -78,6 +78,18 @@ const EmojiPicker = {
onScroll (e) {
const target = (e && e.target) || this.$refs['emoji-groups']
this.updateScrolledClass(target)
this.scrolledGroup(target)
},
scrolledGroup (target) {
const top = target.scrollTop + 5
this.$nextTick(() => {
this.allEmojiGroups.forEach(group => {
const ref = this.$refs['group-' + group.id]
if (ref[0].offsetTop <= top) {
this.activeGroup = group.id
}
})
})
},
highlight (key) {
const ref = this.$refs['group-' + key]
@ -134,6 +146,9 @@ const EmojiPicker = {
}
},
mounted () {
if (this.defaultGroup) {
this.highlight(this.defaultGroup)
}
this.initializeLazyLoad()
},
destroyed () {
@ -152,6 +167,9 @@ const EmojiPicker = {
allCustomGroups () {
return this.$store.getters.groupedCustomEmojis
},
defaultGroup () {
return Object.keys(this.allCustomGroups)[0]
},
allEmojiGroups () {
const standardEmojis = this.$store.state.instance.emoji || []
return Object.entries(this.allCustomGroups)