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

215 lines
6 KiB
JavaScript
Raw Normal View History

2021-04-25 11:51:00 +00:00
import { defineAsyncComponent } from 'vue'
import Checkbox from '../checkbox/checkbox.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
2020-10-28 20:52:20 +00:00
faBoxOpen,
faStickyNote,
faSmileBeam
} from '@fortawesome/free-solid-svg-icons'
import { trim } from 'lodash'
library.add(
2020-10-28 20:52:20 +00:00
faBoxOpen,
faStickyNote,
faSmileBeam
)
// At widest, approximately 20 emoji are visible in a row,
// loading 3 rows, could be overkill for narrow picker
const LOAD_EMOJI_BY = 60
// When to start loading new batch emoji, in pixels
const LOAD_EMOJI_MARGIN = 64
2019-03-29 16:48:52 +00:00
const filterByKeyword = (list, keyword = '') => {
if (keyword === '') return list
2020-09-18 09:07:38 +00:00
const keywordLowercase = keyword.toLowerCase()
2020-09-21 16:10:55 +00:00
let orderedEmojiList = []
for (const emoji of list) {
2020-09-21 15:42:17 +00:00
const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
if (indexOfKeyword > -1) {
2020-09-21 16:13:31 +00:00
if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
orderedEmojiList[indexOfKeyword] = []
2020-09-21 16:10:55 +00:00
}
2020-09-21 16:13:31 +00:00
orderedEmojiList[indexOfKeyword].push(emoji)
}
}
2020-09-21 16:10:55 +00:00
return orderedEmojiList.flat()
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 {
keyword: '',
activeGroup: 'custom',
showingStickers: false,
groupsScrolledClass: 'scrolled-top',
2019-10-03 17:16:01 +00:00
keepOpen: false,
customEmojiBufferSlice: LOAD_EMOJI_BY,
customEmojiTimeout: null,
customEmojiLoadAllConfirmed: false
2019-03-29 15:49:32 +00:00
}
},
components: {
2021-04-25 11:51:00 +00:00
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
Checkbox
},
2019-03-29 15:49:32 +00:00
methods: {
onStickerUploaded (e) {
this.$emit('sticker-uploaded', e)
},
onStickerUploadFailed (e) {
this.$emit('sticker-upload-failed', e)
},
onEmoji (emoji) {
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
},
onScroll (e) {
const target = (e && e.target) || this.$refs['emoji-groups']
this.updateScrolledClass(target)
this.scrolledGroup(target)
this.triggerLoadMore(target)
},
highlight (key) {
const ref = this.$refs['group-' + key]
2021-04-25 11:51:00 +00:00
const top = ref.offsetTop
this.setShowStickers(false)
this.activeGroup = key
this.$nextTick(() => {
this.$refs['emoji-groups'].scrollTop = top + 1
})
},
updateScrolledClass (target) {
if (target.scrollTop <= 5) {
this.groupsScrolledClass = 'scrolled-top'
} else if (target.scrollTop >= target.scrollTopMax - 5) {
this.groupsScrolledClass = 'scrolled-bottom'
} else {
this.groupsScrolledClass = 'scrolled-middle'
}
},
triggerLoadMore (target) {
2021-04-25 11:51:00 +00:00
const ref = this.$refs['group-end-custom']
if (!ref) return
const bottom = ref.offsetTop + ref.offsetHeight
const scrollerBottom = target.scrollTop + target.clientHeight
const scrollerTop = target.scrollTop
const scrollerMax = target.scrollHeight
// Loads more emoji when they come into view
const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN
// Always load when at the very top in case there's no scroll space yet
const atTop = scrollerTop < 5
// Don't load when looking at unicode category or at the very bottom
const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax
if (!bottomAboveViewport && (approachingBottom || atTop)) {
this.loadEmoji()
}
},
scrolledGroup (target) {
const top = target.scrollTop + 5
this.$nextTick(() => {
this.emojisView.forEach(group => {
const ref = this.$refs['group-' + group.id]
2021-04-25 11:51:00 +00:00
if (ref.offsetTop <= top) {
this.activeGroup = group.id
}
})
})
},
loadEmoji () {
const allLoaded = this.customEmojiBuffer.length === this.filteredEmoji.length
2019-10-03 17:16:01 +00:00
if (allLoaded) {
return
2019-10-03 17:16:01 +00:00
}
this.customEmojiBufferSlice += LOAD_EMOJI_BY
},
startEmojiLoad (forceUpdate = false) {
if (!forceUpdate) {
this.keyword = ''
}
this.$nextTick(() => {
this.$refs['emoji-groups'].scrollTop = 0
})
const bufferSize = this.customEmojiBuffer.length
const bufferPrefilledAll = bufferSize === this.filteredEmoji.length
if (bufferPrefilledAll && !forceUpdate) {
return
}
this.customEmojiBufferSlice = LOAD_EMOJI_BY
2019-10-03 17:16:01 +00:00
},
toggleStickers () {
this.showingStickers = !this.showingStickers
},
setShowStickers (value) {
this.showingStickers = value
}
},
watch: {
keyword () {
this.customEmojiLoadAllConfirmed = false
this.onScroll()
this.startEmojiLoad(true)
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
},
filteredEmoji () {
return filterByKeyword(
this.$store.state.instance.customEmoji || [],
trim(this.keyword)
)
},
customEmojiBuffer () {
return this.filteredEmoji.slice(0, this.customEmojiBufferSlice)
},
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: 'smile-beam',
2019-10-03 17:16:01 +00:00
emojis: customEmojis
},
{
id: 'standard',
text: this.$t('emoji.unicode'),
2020-10-28 20:52:20 +00:00
icon: 'box-open',
emojis: filterByKeyword(standardEmojis, trim(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