Load emoji row by row
This commit is contained in:
parent
314a4474f6
commit
6cc3b239f6
2 changed files with 39 additions and 9 deletions
|
@ -18,7 +18,7 @@ import {
|
|||
faCode,
|
||||
faFlag
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { debounce, trim } from 'lodash'
|
||||
import { debounce, trim, chunk } from 'lodash'
|
||||
|
||||
library.add(
|
||||
faBoxOpen,
|
||||
|
@ -88,6 +88,10 @@ const getOffset = (elem) => {
|
|||
return res[1]
|
||||
}
|
||||
|
||||
const toHeaderId = id => {
|
||||
return id.replace(/^row-\d+-/, '')
|
||||
}
|
||||
|
||||
const EmojiPicker = {
|
||||
props: {
|
||||
enableStickerPicker: {
|
||||
|
@ -152,20 +156,20 @@ const EmojiPicker = {
|
|||
},
|
||||
onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
|
||||
console.log('onScroll', startIndex, endIndex, visibleStartIndex, visibleEndIndex)
|
||||
const current = this.filteredEmojiGroups[visibleStartIndex].id
|
||||
const target = this.$refs['emoji-groups'].$el
|
||||
this.scrolledGroup(target, current, visibleStartIndex, visibleEndIndex)
|
||||
this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
|
||||
},
|
||||
scrolledGroup (target, groupId, start, end) {
|
||||
scrolledGroup (target, start, end) {
|
||||
const top = target.scrollTop + 5
|
||||
this.$nextTick(() => {
|
||||
this.filteredEmojiGroups.slice(start, end + 1).forEach(group => {
|
||||
this.emojiItems.slice(start, end + 1).forEach(group => {
|
||||
const headerId = toHeaderId(group.id)
|
||||
const ref = this.groupRefs['group-' + group.id]
|
||||
if (!ref) { return }
|
||||
const elem = ref.$el.parentElement
|
||||
if (!elem) { return }
|
||||
if (elem && getOffset(elem) <= top) {
|
||||
this.activeGroup = group.id
|
||||
this.activeGroup = headerId
|
||||
}
|
||||
})
|
||||
this.scrollHeader()
|
||||
|
@ -190,7 +194,12 @@ const EmojiPicker = {
|
|||
},
|
||||
highlight (index) {
|
||||
this.setShowStickers(false)
|
||||
this.$refs['emoji-groups'].scrollToItem(index)
|
||||
const item = this.filteredEmojiGroups[index]
|
||||
if (!item) {
|
||||
return
|
||||
}
|
||||
const indexInList = this.emojiItems.findIndex(k => k.id === item.id)
|
||||
this.$refs['emoji-groups'].scrollToItem(indexInList)
|
||||
},
|
||||
updateScrolledClass (target) {
|
||||
if (target.scrollTop <= 5) {
|
||||
|
@ -245,7 +254,16 @@ const EmojiPicker = {
|
|||
},
|
||||
computed: {
|
||||
minItemSize () {
|
||||
return 32
|
||||
return this.emojiHeight
|
||||
},
|
||||
emojiHeight () {
|
||||
return 32 + 4
|
||||
},
|
||||
emojiWidth () {
|
||||
return 32 + 4
|
||||
},
|
||||
itemPerRow () {
|
||||
return 6
|
||||
},
|
||||
activeGroupView () {
|
||||
return this.showingStickers ? '' : this.activeGroup
|
||||
|
@ -287,6 +305,17 @@ const EmojiPicker = {
|
|||
this.filteredEmojiGroups = this.getFilteredEmojiGroups()
|
||||
}, 500)
|
||||
},
|
||||
emojiItems () {
|
||||
return this.filteredEmojiGroups.map(group =>
|
||||
chunk(group.emojis, this.itemPerRow)
|
||||
.map((items, index) => ({
|
||||
...group,
|
||||
id: index === 0 ? group.id : `row-${index}-${group.id}`,
|
||||
emojis: items,
|
||||
isFirstRow: index === 0
|
||||
})))
|
||||
.reduce((a, c) => a.concat(c), [])
|
||||
},
|
||||
languages () {
|
||||
return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)
|
||||
},
|
||||
|
|
|
@ -79,7 +79,7 @@
|
|||
class="emoji-groups"
|
||||
:class="groupsScrolledClass"
|
||||
:min-item-size="minItemSize"
|
||||
:items="filteredEmojiGroups"
|
||||
:items="emojiItems"
|
||||
:emit-update="true"
|
||||
@update="onScroll"
|
||||
>
|
||||
|
@ -95,6 +95,7 @@
|
|||
class="emoji-group"
|
||||
>
|
||||
<h6
|
||||
v-if="group.isFirstRow"
|
||||
class="emoji-group-title"
|
||||
>
|
||||
{{ group.text }}
|
||||
|
|
Loading…
Reference in a new issue