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) { onScroll (e) {
const target = (e && e.target) || this.$refs['emoji-groups'] const target = (e && e.target) || this.$refs['emoji-groups']
this.updateScrolledClass(target) 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) { highlight (key) {
const ref = this.$refs['group-' + key] const ref = this.$refs['group-' + key]
@ -134,6 +146,9 @@ const EmojiPicker = {
} }
}, },
mounted () { mounted () {
if (this.defaultGroup) {
this.highlight(this.defaultGroup)
}
this.initializeLazyLoad() this.initializeLazyLoad()
}, },
destroyed () { destroyed () {
@ -152,6 +167,9 @@ const EmojiPicker = {
allCustomGroups () { allCustomGroups () {
return this.$store.getters.groupedCustomEmojis return this.$store.getters.groupedCustomEmojis
}, },
defaultGroup () {
return Object.keys(this.allCustomGroups)[0]
},
allEmojiGroups () { allEmojiGroups () {
const standardEmojis = this.$store.state.instance.emoji || [] const standardEmojis = this.$store.state.instance.emoji || []
return Object.entries(this.allCustomGroups) return Object.entries(this.allCustomGroups)