2021-04-25 11:51:00 +00:00
|
|
|
import { defineAsyncComponent } from 'vue'
|
2019-10-07 17:43:23 +00:00
|
|
|
import Checkbox from '../checkbox/checkbox.vue'
|
2023-02-04 21:10:06 +00:00
|
|
|
import EmojiGrid from '../emoji_grid/emoji_grid.vue'
|
2020-10-19 16:38:49 +00:00
|
|
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
|
|
import {
|
2020-10-28 20:52:20 +00:00
|
|
|
faBoxOpen,
|
2020-10-19 16:38:49 +00:00
|
|
|
faStickyNote,
|
|
|
|
faSmileBeam
|
|
|
|
} from '@fortawesome/free-solid-svg-icons'
|
2022-08-03 20:56:56 +00:00
|
|
|
import { trim, escapeRegExp, startCase } from 'lodash'
|
2020-10-19 16:38:49 +00:00
|
|
|
|
|
|
|
library.add(
|
2020-10-28 20:52:20 +00:00
|
|
|
faBoxOpen,
|
2020-10-19 16:38:49 +00:00
|
|
|
faStickyNote,
|
|
|
|
faSmileBeam
|
|
|
|
)
|
2019-08-12 17:01:38 +00:00
|
|
|
|
2019-07-28 10:56:08 +00:00
|
|
|
const EmojiPicker = {
|
2019-08-12 17:01:38 +00:00
|
|
|
props: {
|
2019-09-12 17:36:43 +00:00
|
|
|
enableStickerPicker: {
|
2019-08-12 17:01:38 +00:00
|
|
|
required: false,
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
2023-01-03 14:04:26 +00:00
|
|
|
},
|
|
|
|
showKeepOpen: {
|
|
|
|
required: false,
|
|
|
|
type: Boolean,
|
|
|
|
default: false
|
2019-08-12 17:01:38 +00:00
|
|
|
}
|
|
|
|
},
|
2019-03-29 15:49:32 +00:00
|
|
|
data () {
|
|
|
|
return {
|
2019-04-05 18:51:25 +00:00
|
|
|
keyword: '',
|
2022-08-03 20:56:56 +00:00
|
|
|
activeGroup: 'standard',
|
2019-09-08 12:51:17 +00:00
|
|
|
showingStickers: false,
|
2023-02-04 21:10:06 +00:00
|
|
|
keepOpen: false
|
2019-03-29 15:49:32 +00:00
|
|
|
}
|
|
|
|
},
|
2019-08-12 17:01:38 +00:00
|
|
|
components: {
|
2021-04-25 11:51:00 +00:00
|
|
|
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
|
2023-02-04 21:10:06 +00:00
|
|
|
Checkbox,
|
|
|
|
EmojiGrid
|
2019-08-12 17:01:38 +00:00
|
|
|
},
|
2019-03-29 15:49:32 +00:00
|
|
|
methods: {
|
2019-11-08 19:25:13 +00:00
|
|
|
onStickerUploaded (e) {
|
|
|
|
this.$emit('sticker-uploaded', e)
|
|
|
|
},
|
|
|
|
onStickerUploadFailed (e) {
|
|
|
|
this.$emit('sticker-upload-failed', e)
|
|
|
|
},
|
2019-03-29 19:56:50 +00:00
|
|
|
onEmoji (emoji) {
|
2019-07-28 13:07:01 +00:00
|
|
|
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
|
2019-09-23 17:29:01 +00:00
|
|
|
this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
|
2023-03-10 19:10:42 +00:00
|
|
|
this.$store.commit('emojiUsed', emoji)
|
2019-04-05 18:51:25 +00:00
|
|
|
},
|
2022-11-17 22:45:32 +00:00
|
|
|
onWheel (e) {
|
|
|
|
e.preventDefault()
|
|
|
|
this.$refs['emoji-tabs'].scrollBy(e.deltaY, 0)
|
|
|
|
},
|
2019-04-05 18:51:25 +00:00
|
|
|
highlight (key) {
|
2019-08-12 17:01:38 +00:00
|
|
|
this.setShowStickers(false)
|
2019-04-05 18:51:25 +00:00
|
|
|
this.activeGroup = key
|
2023-02-04 21:10:06 +00:00
|
|
|
if (this.keyword.length) {
|
|
|
|
this.$refs.emojiGrid.scrollToItem(key)
|
2019-09-14 22:16:54 +00:00
|
|
|
}
|
2019-11-08 19:25:13 +00:00
|
|
|
},
|
2023-02-04 21:10:06 +00:00
|
|
|
onActiveGroup (group) {
|
|
|
|
this.activeGroup = group
|
2019-10-03 17:16:01 +00:00
|
|
|
},
|
2019-08-12 17:01:38 +00:00
|
|
|
toggleStickers () {
|
|
|
|
this.showingStickers = !this.showingStickers
|
|
|
|
},
|
|
|
|
setShowStickers (value) {
|
|
|
|
this.showingStickers = value
|
2022-08-03 20:56:56 +00:00
|
|
|
},
|
|
|
|
filterByKeyword (list) {
|
|
|
|
if (this.keyword === '') return list
|
|
|
|
const regex = new RegExp(escapeRegExp(trim(this.keyword)), 'i')
|
|
|
|
return list.filter(emoji => {
|
2022-09-10 06:36:12 +00:00
|
|
|
return (regex.test(emoji.displayText) || (!emoji.imageUrl && emoji.replacement === this.keyword))
|
2022-08-03 20:56:56 +00:00
|
|
|
})
|
2019-08-12 17:01:38 +00:00
|
|
|
}
|
|
|
|
},
|
2019-03-29 15:49:32 +00:00
|
|
|
computed: {
|
2019-08-12 17:01:38 +00:00
|
|
|
activeGroupView () {
|
|
|
|
return this.showingStickers ? '' : this.activeGroup
|
|
|
|
},
|
|
|
|
stickersAvailable () {
|
|
|
|
if (this.$store.state.instance.stickers) {
|
|
|
|
return this.$store.state.instance.stickers.length > 0
|
|
|
|
}
|
|
|
|
return 0
|
|
|
|
},
|
2019-10-07 20:46:40 +00:00
|
|
|
filteredEmoji () {
|
2022-08-03 20:56:56 +00:00
|
|
|
return this.filterByKeyword(
|
|
|
|
this.$store.state.instance.customEmoji || []
|
2019-10-07 20:46:40 +00:00
|
|
|
)
|
|
|
|
},
|
2019-03-29 16:48:52 +00:00
|
|
|
emojis () {
|
2023-03-10 19:10:42 +00:00
|
|
|
const recentEmojis = this.$store.getters.recentEmojis
|
2019-03-29 16:48:52 +00:00
|
|
|
const standardEmojis = this.$store.state.instance.emoji || []
|
2022-08-03 20:56:56 +00:00
|
|
|
const customEmojis = this.sortedEmoji
|
|
|
|
const emojiPacks = []
|
|
|
|
customEmojis.forEach((pack, id) => {
|
|
|
|
emojiPacks.push({
|
|
|
|
id: id.replace(/^pack:/, ''),
|
|
|
|
text: startCase(id.replace(/^pack:/, '')),
|
|
|
|
first: pack[0],
|
|
|
|
emojis: this.filterByKeyword(pack)
|
|
|
|
})
|
|
|
|
})
|
2019-08-12 17:01:38 +00:00
|
|
|
return [
|
2023-03-10 19:10:42 +00:00
|
|
|
{
|
|
|
|
id: 'recent',
|
|
|
|
text: this.$t('emoji.recent'),
|
|
|
|
first: {
|
|
|
|
imageUrl: '',
|
|
|
|
replacement: '🕒',
|
|
|
|
},
|
|
|
|
emojis: this.filterByKeyword(recentEmojis)
|
|
|
|
},
|
2019-08-12 17:01:38 +00:00
|
|
|
{
|
|
|
|
id: 'standard',
|
|
|
|
text: this.$t('emoji.unicode'),
|
2022-08-03 20:56:56 +00:00
|
|
|
first: {
|
|
|
|
imageUrl: '',
|
|
|
|
replacement: '🥴'
|
|
|
|
},
|
|
|
|
emojis: this.filterByKeyword(standardEmojis)
|
|
|
|
}
|
|
|
|
].concat(emojiPacks)
|
|
|
|
},
|
|
|
|
sortedEmoji () {
|
|
|
|
const customEmojis = this.$store.state.instance.customEmoji || []
|
|
|
|
const sortedEmojiGroups = new Map()
|
|
|
|
customEmojis.forEach((emoji) => {
|
|
|
|
if (!sortedEmojiGroups.has(emoji.tags[0])) {
|
|
|
|
sortedEmojiGroups.set(emoji.tags[0], [emoji])
|
|
|
|
} else {
|
|
|
|
sortedEmojiGroups.get(emoji.tags[0]).push(emoji)
|
2019-03-29 16:48:52 +00:00
|
|
|
}
|
2022-08-03 20:56:56 +00:00
|
|
|
})
|
|
|
|
return new Map([...sortedEmojiGroups.entries()].sort())
|
2019-08-12 17:01:38 +00:00
|
|
|
},
|
|
|
|
emojisView () {
|
2022-08-03 20:56:56 +00:00
|
|
|
if (this.keyword === '') {
|
|
|
|
return this.emojis.filter(pack => {
|
|
|
|
return pack.id === this.activeGroup
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
return this.emojis.filter(pack => {
|
|
|
|
return pack.emojis.length > 0
|
|
|
|
})
|
|
|
|
}
|
2019-09-12 17:36:43 +00:00
|
|
|
},
|
|
|
|
stickerPickerEnabled () {
|
2022-08-04 21:11:19 +00:00
|
|
|
return (this.$store.state.instance.stickers || []).length !== 0 && this.enableStickerPicker
|
2019-03-29 15:49:32 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-07-28 10:56:08 +00:00
|
|
|
export default EmojiPicker
|