Load visible emoji groups when scrolling

This commit is contained in:
Tusooa Zhu 2021-08-14 23:37:00 -04:00
parent 992d57ef69
commit ba1b006e05
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
2 changed files with 75 additions and 30 deletions

View File

@ -57,7 +57,8 @@ const EmojiPicker = {
keepOpen: false,
customEmojiBufferSlice: LOAD_EMOJI_BY,
customEmojiTimeout: null,
customEmojiLoadAllConfirmed: false
customEmojiLoadAllConfirmed: false,
groupLoadedCount: {}
}
},
components: {
@ -79,7 +80,9 @@ const EmojiPicker = {
const target = (e && e.target) || this.$refs['emoji-groups']
this.updateScrolledClass(target)
this.scrolledGroup(target)
this.$nextTick(() => {
this.triggerLoadMore(target)
})
},
highlight (key) {
const ref = this.$refs['group-' + key]
@ -88,6 +91,7 @@ const EmojiPicker = {
this.activeGroup = key
this.$nextTick(() => {
this.$refs['emoji-groups'].scrollTop = top + 1
this.loadEmoji(key)
})
},
updateScrolledClass (target) {
@ -100,10 +104,16 @@ const EmojiPicker = {
}
},
triggerLoadMore (target) {
const ref = this.$refs[`group-end-${this.lastNonUnicodeGroupId}`][0]
if (!ref) return
Object.keys(this.allCustomGroups)
.map(groupId => {
const ref = this.$refs[`group-end-${groupId}`][0]
if (!ref) return undefined
const bottom = ref.offsetTop + ref.offsetHeight
const group = this.$refs[`group-${groupId}`][0]
const top = group.offsetTop
const scrollerBottom = target.scrollTop + target.clientHeight
const scrollerTop = target.scrollTop
const scrollerMax = target.scrollHeight
@ -111,17 +121,23 @@ const EmojiPicker = {
// Loads more emoji when they come into view
const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
// Always load when at the very top in case there's no scroll space yet
const atTop = scrollerTop < 5
const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom
// Don't load when looking at unicode category or at the very bottom
const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
if (!bottomAboveViewport && (approachingBottom || atTop)) {
this.loadEmoji()
return groupId
}
return undefined
})
.filter(k => k)
.map(k => {
this.loadEmoji(k)
})
},
scrolledGroup (target) {
const top = target.scrollTop + 5
this.$nextTick(() => {
this.emojisView.forEach(group => {
this.allEmojiGroups.forEach(group => {
const ref = this.$refs['group-' + group.id]
if (ref.offsetTop <= top) {
this.activeGroup = group.id
@ -129,14 +145,21 @@ const EmojiPicker = {
})
})
},
loadEmoji () {
const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
loadEmoji (loadGroup) {
if (!this.allCustomGroups[loadGroup]) {
return
}
const allLoaded = this.loadedCount[loadGroup] >= this.allCustomGroups[loadGroup].emojis.length
if (allLoaded) {
return
}
this.customEmojiBufferSlice += LOAD_EMOJI_BY
this.groupLoadedCount = {
...this.groupLoadedCount,
[loadGroup]: this.loadedCount[loadGroup] + LOAD_EMOJI_BY
}
},
startEmojiLoad (forceUpdate = false) {
if (!forceUpdate) {
@ -157,6 +180,9 @@ const EmojiPicker = {
},
setShowStickers (value) {
this.showingStickers = value
},
limitedEmojis (list, groupId) {
return list.slice(0, this.loadedCount[groupId])
}
},
watch: {
@ -205,24 +231,36 @@ const EmojiPicker = {
return res
}, {})
},
allEmojiGroups () {
return this.allEmojis
allCustomGroups () {
return this.filteredEmoji
.reduce((res, emoji) => {
const packName = packOf(emoji)
const packId = `custom-${packName}`
if (res.filter(k => k.id === packId).length === 0) {
res.push({
if (!res[packId]) {
res[packId] = ({
id: packId,
text: packName,
image: emoji.imageUrl
image: emoji.imageUrl,
emojis: []
})
}
res[packId].emojis.push(emoji)
return res
}, [])
}, {})
},
sensibleInitialAmountForAGroup () {
const groupCount = Object.keys(this.allCustomGroups).length
return Math.max(Math.floor(LOAD_EMOJI_BY / Math.max(groupCount, 1)), 1)
},
allEmojiGroups () {
const standardEmojis = this.$store.state.instance.emoji || []
return Object.entries(this.allCustomGroups)
.map(([_, v]) => v)
.concat({
id: 'standard',
text: this.$t('emoji.unicode'),
icon: 'box-open'
icon: 'box-open',
emojis: filterByKeyword(standardEmojis, this.keyword)
})
},
emojis () {
@ -241,6 +279,13 @@ const EmojiPicker = {
}
]
},
loadedCount () {
return Object.keys(this.allCustomGroups)
.reduce((res, groupId) => {
res[groupId] = this.groupLoadedCount[groupId] || this.sensibleInitialAmountForAGroup
return res
}, {})
},
lastNonUnicodeGroupId () {
return this.emojis[this.emojis.length - 2].id
},

View File

@ -67,7 +67,7 @@
@scroll="onScroll"
>
<div
v-for="group in emojisView"
v-for="group in allEmojiGroups"
:key="group.id"
class="emoji-group"
>
@ -78,7 +78,7 @@
{{ group.text }}
</h6>
<span
v-for="emoji in group.emojis"
v-for="emoji in limitedEmojis(group.emojis, group.id)"
:key="group.id + emoji.displayText"
:title="emoji.displayText"
class="emoji-item"