|
|
|
@ -112,7 +112,8 @@ const EmojiPicker = {
|
|
|
|
|
contentLoaded: false,
|
|
|
|
|
groupRefs: {},
|
|
|
|
|
emojiRefs: {},
|
|
|
|
|
filteredEmojiGroups: []
|
|
|
|
|
filteredEmojiGroups: [],
|
|
|
|
|
width: 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
@ -155,7 +156,6 @@ const EmojiPicker = {
|
|
|
|
|
this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
|
|
|
|
|
},
|
|
|
|
|
onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
|
|
|
|
|
console.log('onScroll', startIndex, endIndex, visibleStartIndex, visibleEndIndex)
|
|
|
|
|
const target = this.$refs['emoji-groups'].$el
|
|
|
|
|
this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
|
|
|
|
|
},
|
|
|
|
@ -221,6 +221,7 @@ const EmojiPicker = {
|
|
|
|
|
},
|
|
|
|
|
onShowing () {
|
|
|
|
|
const oldContentLoaded = this.contentLoaded
|
|
|
|
|
this.recalculateItemPerRow()
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.$refs.search.focus()
|
|
|
|
|
})
|
|
|
|
@ -241,6 +242,14 @@ const EmojiPicker = {
|
|
|
|
|
emojis: this.filterByKeyword(group.emojis, trim(this.keyword))
|
|
|
|
|
}))
|
|
|
|
|
.filter(group => group.emojis.length > 0)
|
|
|
|
|
},
|
|
|
|
|
recalculateItemPerRow () {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
if (!this.$refs['emoji-groups']) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
this.width = this.$refs['emoji-groups'].$el.offsetWidth
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
@ -252,6 +261,9 @@ const EmojiPicker = {
|
|
|
|
|
this.filteredEmojiGroups = this.getFilteredEmojiGroups()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted () {
|
|
|
|
|
this.recalculateItemPerRow()
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
minItemSize () {
|
|
|
|
|
return this.emojiHeight
|
|
|
|
@ -263,7 +275,7 @@ const EmojiPicker = {
|
|
|
|
|
return 32 + 4
|
|
|
|
|
},
|
|
|
|
|
itemPerRow () {
|
|
|
|
|
return 6
|
|
|
|
|
return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
|
|
|
|
|
},
|
|
|
|
|
activeGroupView () {
|
|
|
|
|
return this.showingStickers ? '' : this.activeGroup
|
|
|
|
|