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

175 lines
4.7 KiB
JavaScript
Raw Normal View History

2019-10-03 17:16:01 +00:00
import { set } from 'vue'
const LOAD_EMOJI_BY = 50
const LOAD_EMOJI_INTERVAL = 100
const LOAD_EMOJI_SANE_AMOUNT = 500
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: {
2019-09-12 17:36:43 +00:00
enableStickerPicker: {
required: false,
type: Boolean,
default: false
}
},
2019-03-29 15:49:32 +00:00
data () {
return {
labelKey: String(Math.random() * 100000),
keyword: '',
activeGroup: 'custom',
showingStickers: false,
groupsScrolledClass: 'scrolled-top',
2019-10-03 17:16:01 +00:00
keepOpen: false,
customEmojiBuffer: [],
customEmojiTimeout: null,
customEmojiCounter: 0,
customEmojiLoadAllConfirmed: 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', { insertion: value, keepOpen: this.keepOpen })
},
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
if (target.scrollTop <= 5) {
this.groupsScrolledClass = 'scrolled-top'
} else if (target.scrollTop >= target.scrollTopMax - 5) {
this.groupsScrolledClass = 'scrolled-bottom'
} else {
this.groupsScrolledClass = 'scrolled-middle'
}
this.$nextTick(() => {
this.emojisView.forEach(group => {
const ref = this.$refs['group-' + group.id]
if (ref[0].offsetTop <= top) {
this.activeGroup = group.id
}
})
})
},
loadEmojiInsane () {
this.customEmojiLoadAllConfirmed = true
this.continueEmojiLoad()
},
loadEmoji () {
const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
const saneLoaded = this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT &&
!this.customEmojiLoadAllConfirmed
2019-10-03 17:16:01 +00:00
if (allLoaded || saneLoaded) {
return
2019-10-03 17:16:01 +00:00
}
this.customEmojiBuffer.push(
...this.filteredEmoji.slice(
this.customEmojiCounter,
this.customEmojiCounter + LOAD_EMOJI_BY
)
2019-10-03 17:16:01 +00:00
)
this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL)
this.customEmojiCounter += LOAD_EMOJI_BY
},
startEmojiLoad () {
if (this.customEmojiTimeout) {
window.clearTimeout(this.customEmojiTimeout)
}
2019-10-03 17:16:01 +00:00
set(this, 'customEmojiBuffer', [])
this.customEmojiCounter = 0
this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL)
},
continueEmojiLoad () {
this.customEmojiTimeout = window.setTimeout(this.loadEmoji, LOAD_EMOJI_INTERVAL)
2019-10-03 17:16:01 +00:00
},
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()
this.startEmojiLoad()
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
},
saneAmount () {
// for UI
return LOAD_EMOJI_SANE_AMOUNT
},
filteredEmoji () {
return filterByKeyword(
this.$store.state.instance.customEmoji || [],
this.keyword
)
},
askForSanity () {
return this.customEmojiBuffer.length >= LOAD_EMOJI_SANE_AMOUNT &&
!this.customEmojiLoadAllConfirmed
},
2019-03-29 16:48:52 +00:00
emojis () {
const standardEmojis = this.$store.state.instance.emoji || []
2019-10-03 17:16:01 +00:00
const customEmojis = this.customEmojiBuffer
return [
{
id: 'custom',
text: this.$t('emoji.custom'),
icon: 'icon-smile',
2019-10-03 17:16:01 +00:00
emojis: customEmojis
},
{
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-09-12 17:36:43 +00:00
},
stickerPickerEnabled () {
return (this.$store.state.instance.stickers || []).length !== 0
2019-03-29 15:49:32 +00:00
}
}
}
2019-07-28 10:56:08 +00:00
export default EmojiPicker