73 lines
1.8 KiB
JavaScript
73 lines
1.8 KiB
JavaScript
const filterByKeyword = (list, keyword = '') => {
|
|
return list.filter(x => x.shortcode.indexOf(keyword) !== -1)
|
|
}
|
|
|
|
const EmojiPicker = {
|
|
mounted () {
|
|
document.body.addEventListener('click', this.outsideClicked)
|
|
},
|
|
destroyed () {
|
|
document.body.removeEventListener('click', this.outsideClicked)
|
|
},
|
|
data () {
|
|
return {
|
|
open: false,
|
|
keyword: '',
|
|
activeGroup: 'standard'
|
|
}
|
|
},
|
|
methods: {
|
|
togglePanel () {
|
|
this.open = !this.open
|
|
},
|
|
insideClicked (e) {
|
|
e.stopPropagation()
|
|
},
|
|
outsideClicked () {
|
|
this.open = false
|
|
},
|
|
onEmoji (emoji) {
|
|
const value = emoji.image_url ? `:${emoji.shortcode}:` : emoji.utf
|
|
this.$emit('emoji', ` ${value} `)
|
|
this.open = false
|
|
},
|
|
highlight (key) {
|
|
const ref = this.$refs['group-' + key]
|
|
const top = ref[0].offsetTop
|
|
this.$refs['emoji-groups'].scrollTop = top + 1
|
|
this.activeGroup = key
|
|
},
|
|
scrolledGroup (e) {
|
|
const top = e.target.scrollTop
|
|
Object.keys(this.emojis).forEach(key => {
|
|
if (this.$refs['group-' + key][0].offsetTop < top) {
|
|
this.activeGroup = key
|
|
}
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
emojis () {
|
|
const standardEmojis = this.$store.state.instance.emoji || []
|
|
const customEmojis = this.$store.state.instance.customEmoji || []
|
|
return {
|
|
standard: {
|
|
text: 'Standard',
|
|
icon: 'icon-star',
|
|
emojis: filterByKeyword(standardEmojis, this.keyword)
|
|
},
|
|
custom: {
|
|
text: 'Custom',
|
|
icon: 'icon-picture',
|
|
emojis: filterByKeyword(customEmojis, this.keyword)
|
|
}
|
|
}
|
|
},
|
|
serverUrl () {
|
|
return this.$store.state.instance.server
|
|
}
|
|
}
|
|
}
|
|
|
|
export default EmojiPicker
|