3vis-fe/src/components/emoji_picker/emoji_picker.js

104 lines
2.5 KiB
JavaScript
Raw Normal View History

2019-03-29 16:48:52 +00:00
const filterByKeyword = (list, keyword = '') => {
return list.filter(x => x.displayText.includes(keyword))
2019-03-29 16:48:52 +00:00
}
2019-07-28 10:56:08 +00:00
const EmojiPicker = {
props: {
stickerPicker: {
required: false,
type: Boolean,
default: false
}
},
2019-03-29 15:49:32 +00:00
data () {
return {
keyword: '',
activeGroup: 'custom',
showingStickers: false
2019-03-29 15:49:32 +00:00
}
},
components: {
StickerPicker: () => import('../sticker_picker/sticker_picker.vue')
},
2019-03-29 15:49:32 +00:00
methods: {
onEmoji (emoji) {
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
this.$emit('emoji', ` ${value} `)
this.open = false
},
highlight (key) {
const ref = this.$refs['group-' + key]
const top = ref[0].offsetTop
this.setShowStickers(false)
this.activeGroup = key
this.$nextTick(() => {
this.$refs['emoji-groups'].scrollTop = top + 1
})
},
scrolledGroup (e) {
const target = (e && e.target) || this.$refs['emoji-groups']
const top = target.scrollTop + 5
this.$nextTick(() => {
this.emojisView.forEach(group => {
const ref = this.$refs['group-' + group.id]
if (ref[0].offsetTop <= top) {
this.activeGroup = group.id
}
})
})
},
toggleStickers () {
this.showingStickers = !this.showingStickers
},
setShowStickers (value) {
this.showingStickers = value
},
onStickerUploaded (e) {
this.$emit('sticker-uploaded', e)
},
onStickerUploadFailed (e) {
this.$emit('sticker-upload-failed', e)
}
},
watch: {
keyword () {
this.scrolledGroup()
2019-03-29 15:49:32 +00:00
}
},
computed: {
activeGroupView () {
return this.showingStickers ? '' : this.activeGroup
},
stickersAvailable () {
if (this.$store.state.instance.stickers) {
return this.$store.state.instance.stickers.length > 0
}
return 0
},
2019-03-29 16:48:52 +00:00
emojis () {
const standardEmojis = this.$store.state.instance.emoji || []
const customEmojis = this.$store.state.instance.customEmoji || []
return [
{
id: 'custom',
text: this.$t('emoji.custom'),
icon: 'icon-smile',
2019-03-29 16:48:52 +00:00
emojis: filterByKeyword(customEmojis, this.keyword)
},
{
id: 'standard',
text: this.$t('emoji.unicode'),
icon: 'icon-picture',
emojis: filterByKeyword(standardEmojis, this.keyword)
2019-03-29 16:48:52 +00:00
}
]
},
emojisView () {
return this.emojis.filter(value => value.emojis.length > 0)
2019-03-29 15:49:32 +00:00
}
}
}
2019-07-28 10:56:08 +00:00
export default EmojiPicker