431 lines
11 KiB
JavaScript
431 lines
11 KiB
JavaScript
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
import {
|
|
faBasketballBall,
|
|
faBoxOpen,
|
|
faBus,
|
|
faCode,
|
|
faFlag,
|
|
faIceCream,
|
|
faLightbulb,
|
|
faPaw,
|
|
faSmile,
|
|
faSmileBeam,
|
|
faStickyNote,
|
|
faUser,
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
import { chunk, debounce, trim } from 'lodash'
|
|
import Popover from 'src/components/popover/popover.vue'
|
|
import { defineAsyncComponent } from 'vue'
|
|
import { ensureFinalFallback } from '../../i18n/languages.js'
|
|
import Checkbox from '../checkbox/checkbox.vue'
|
|
import StillImage from '../still-image/still-image.vue'
|
|
|
|
library.add(
|
|
faBoxOpen,
|
|
faStickyNote,
|
|
faSmileBeam,
|
|
faSmile,
|
|
faUser,
|
|
faPaw,
|
|
faIceCream,
|
|
faBus,
|
|
faBasketballBall,
|
|
faLightbulb,
|
|
faCode,
|
|
faFlag,
|
|
)
|
|
|
|
const UNICODE_EMOJI_GROUP_ICON = {
|
|
'smileys-and-emotion': 'smile',
|
|
'people-and-body': 'user',
|
|
'animals-and-nature': 'paw',
|
|
'food-and-drink': 'ice-cream',
|
|
'travel-and-places': 'bus',
|
|
activities: 'basketball-ball',
|
|
objects: 'lightbulb',
|
|
symbols: 'code',
|
|
flags: 'flag',
|
|
}
|
|
|
|
const maybeLocalizedKeywords = (emoji, languages, nameLocalizer) => {
|
|
const res = [emoji.displayText, nameLocalizer(emoji)]
|
|
if (emoji.annotations) {
|
|
languages.forEach((lang) => {
|
|
const keywords = emoji.annotations[lang]?.keywords || []
|
|
const name = emoji.annotations[lang]?.name
|
|
res.push(...keywords.concat([name]).filter((k) => k))
|
|
})
|
|
}
|
|
return res
|
|
}
|
|
|
|
const filterByKeyword = (list, keyword = '', languages, nameLocalizer) => {
|
|
if (keyword === '') return list
|
|
|
|
const keywordLowercase = keyword.toLowerCase()
|
|
const orderedEmojiList = []
|
|
for (const emoji of list) {
|
|
const indices = maybeLocalizedKeywords(emoji, languages, nameLocalizer)
|
|
.map((k) => k.toLowerCase().indexOf(keywordLowercase))
|
|
.filter((k) => k > -1)
|
|
|
|
const indexOfKeyword = indices.length ? Math.min(...indices) : -1
|
|
|
|
if (indexOfKeyword > -1) {
|
|
if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
|
|
orderedEmojiList[indexOfKeyword] = []
|
|
}
|
|
orderedEmojiList[indexOfKeyword].push(emoji)
|
|
}
|
|
}
|
|
return orderedEmojiList.flat()
|
|
}
|
|
|
|
const getOffset = (elem) => {
|
|
const style = elem.style.transform
|
|
const res = /translateY\((\d+)px\)/.exec(style)
|
|
if (!res) {
|
|
return 0
|
|
}
|
|
return res[1]
|
|
}
|
|
|
|
const toHeaderId = (id) => {
|
|
return id.replace(/^row-\d+-/, '')
|
|
}
|
|
|
|
const EmojiPicker = {
|
|
props: {
|
|
enableStickerPicker: {
|
|
required: false,
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
hideCustomEmoji: {
|
|
required: false,
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
inject: {
|
|
popoversZLayer: {
|
|
default: '',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
keyword: '',
|
|
activeGroup: 'custom',
|
|
showingStickers: false,
|
|
groupsScrolledClass: 'scrolled-top',
|
|
keepOpen: false,
|
|
customEmojiTimeout: null,
|
|
hideCustomEmojiInPicker: false,
|
|
// Lazy-load only after the first time `showing` becomes true.
|
|
contentLoaded: false,
|
|
groupRefs: {},
|
|
emojiRefs: {},
|
|
filteredEmojiGroups: [],
|
|
emojiSize: 0,
|
|
width: 0,
|
|
}
|
|
},
|
|
components: {
|
|
StickerPicker: defineAsyncComponent(
|
|
() => import('../sticker_picker/sticker_picker.vue'),
|
|
),
|
|
Checkbox,
|
|
StillImage,
|
|
Popover,
|
|
},
|
|
methods: {
|
|
groupScroll(e) {
|
|
e.currentTarget.scrollLeft += e.deltaY + e.deltaX
|
|
},
|
|
updateEmojiSize() {
|
|
const css = window.getComputedStyle(this.$refs.popover.$el)
|
|
const fontSize = css.getPropertyValue('font-size') || '1rem'
|
|
const emojiSize = css.getPropertyValue('--emojiSize') || '2.2rem'
|
|
|
|
const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '').trim()
|
|
const fontSizeValue = Number(fontSize.replace(/[^0-9,.]+/, ''))
|
|
|
|
const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '').trim()
|
|
const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))
|
|
|
|
let fontSizeMultiplier
|
|
if (fontSizeUnit.endsWith('em')) {
|
|
fontSizeMultiplier = fontSizeValue
|
|
} else {
|
|
fontSizeMultiplier = fontSizeValue / 14
|
|
}
|
|
|
|
let emojiSizeReal
|
|
if (emojiSizeUnit.endsWith('em')) {
|
|
emojiSizeReal = emojiSizeValue * fontSizeMultiplier * 14
|
|
} else {
|
|
emojiSizeReal = emojiSizeValue
|
|
}
|
|
|
|
const fullEmojiSize = emojiSizeReal + 2 * 0.2 * fontSizeMultiplier * 14
|
|
this.emojiSize = fullEmojiSize
|
|
},
|
|
showPicker() {
|
|
this.$refs.popover.showPopover()
|
|
this.$nextTick(() => {
|
|
this.onShowing()
|
|
})
|
|
},
|
|
hidePicker() {
|
|
this.$refs.popover.hidePopover()
|
|
},
|
|
setAnchorEl(el) {
|
|
this.$refs.popover.setAnchorEl(el)
|
|
},
|
|
setGroupRef(name) {
|
|
return (el) => {
|
|
this.groupRefs[name] = el
|
|
}
|
|
},
|
|
onPopoverShown() {
|
|
this.$emit('show')
|
|
},
|
|
onPopoverClosed() {
|
|
this.$emit('close')
|
|
},
|
|
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
|
|
if (!this.keepOpen) {
|
|
this.$refs.popover.hidePopover()
|
|
}
|
|
this.$emit('emoji', {
|
|
insertion: value,
|
|
insertionUrl: emoji.imageUrl,
|
|
keepOpen: this.keepOpen,
|
|
})
|
|
},
|
|
onScroll(startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
|
|
const target = this.$refs['emoji-groups'].$el
|
|
this.scrolledGroup(target, visibleStartIndex, visibleEndIndex)
|
|
},
|
|
scrolledGroup(target, start, end) {
|
|
const top = target.scrollTop + 5
|
|
this.$nextTick(() => {
|
|
this.emojiItems.slice(start, end + 1).forEach((group) => {
|
|
const headerId = toHeaderId(group.id)
|
|
const ref = this.groupRefs['group-' + group.id]
|
|
if (!ref) {
|
|
return
|
|
}
|
|
const elem = ref.$el.parentElement
|
|
if (!elem) {
|
|
return
|
|
}
|
|
if (elem && getOffset(elem) <= top) {
|
|
this.activeGroup = headerId
|
|
}
|
|
})
|
|
this.scrollHeader()
|
|
})
|
|
},
|
|
scrollHeader() {
|
|
// Scroll the active tab's header into view
|
|
const headerRef = this.groupRefs['group-header-' + this.activeGroup]
|
|
const left = headerRef.offsetLeft
|
|
const right = left + headerRef.offsetWidth
|
|
const headerCont = this.$refs.header
|
|
const currentScroll = headerCont.scrollLeft
|
|
const currentScrollRight = currentScroll + headerCont.clientWidth
|
|
const setScroll = (s) => {
|
|
headerCont.scrollLeft = s
|
|
}
|
|
|
|
const margin = 7 // .emoji-tabs-item: padding
|
|
if (left - margin < currentScroll) {
|
|
setScroll(left - margin)
|
|
} else if (right + margin > currentScrollRight) {
|
|
setScroll(right + margin - headerCont.clientWidth)
|
|
}
|
|
},
|
|
highlight(groupId) {
|
|
this.setShowStickers(false)
|
|
const indexInList = this.emojiItems.findIndex((k) => k.id === groupId)
|
|
this.$refs['emoji-groups'].scrollToItem(indexInList)
|
|
},
|
|
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'
|
|
}
|
|
},
|
|
toggleStickers() {
|
|
this.showingStickers = !this.showingStickers
|
|
},
|
|
setShowStickers(value) {
|
|
this.showingStickers = value
|
|
},
|
|
filterByKeyword(list, keyword) {
|
|
return filterByKeyword(
|
|
list,
|
|
keyword,
|
|
this.languages,
|
|
this.maybeLocalizedEmojiName,
|
|
)
|
|
},
|
|
onShowing() {
|
|
const oldContentLoaded = this.contentLoaded
|
|
this.updateEmojiSize()
|
|
this.recalculateItemPerRow()
|
|
this.$nextTick(() => {
|
|
this.$refs.search.focus()
|
|
})
|
|
this.contentLoaded = true
|
|
this.filteredEmojiGroups = this.getFilteredEmojiGroups()
|
|
if (!oldContentLoaded) {
|
|
this.$nextTick(() => {
|
|
if (this.defaultGroup) {
|
|
this.highlight(this.defaultGroup)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
getFilteredEmojiGroups() {
|
|
return this.allEmojiGroups
|
|
.map((group) => ({
|
|
...group,
|
|
emojis: this.filterByKeyword(group.emojis, trim(this.keyword)),
|
|
}))
|
|
.filter((group) => group.emojis.length > 0)
|
|
},
|
|
recalculateItemPerRow() {
|
|
this.$nextTick(() => {
|
|
if (!this.$refs['emoji-groups']) {
|
|
return
|
|
}
|
|
this.width = this.$refs['emoji-groups'].$el.clientWidth
|
|
})
|
|
},
|
|
},
|
|
watch: {
|
|
keyword() {
|
|
this.onScroll()
|
|
this.debouncedHandleKeywordChange()
|
|
},
|
|
allCustomGroups() {
|
|
this.filteredEmojiGroups = this.getFilteredEmojiGroups()
|
|
},
|
|
},
|
|
computed: {
|
|
minItemSize() {
|
|
return this.emojiSize
|
|
},
|
|
// used to watch it
|
|
fontSize() {
|
|
this.$nextTick(() => {
|
|
this.updateEmojiSize()
|
|
})
|
|
return this.$store.getters.mergedConfig.fontSize
|
|
},
|
|
emojiHeight() {
|
|
return this.emojiSize
|
|
},
|
|
itemPerRow() {
|
|
return this.width ? Math.floor(this.width / this.emojiSize) : 6
|
|
},
|
|
activeGroupView() {
|
|
return this.showingStickers ? '' : this.activeGroup
|
|
},
|
|
stickersAvailable() {
|
|
if (this.$store.state.instance.stickers) {
|
|
return this.$store.state.instance.stickers.length > 0
|
|
}
|
|
return 0
|
|
},
|
|
allCustomGroups() {
|
|
if (this.hideCustomEmoji || this.hideCustomEmojiInPicker) {
|
|
return {}
|
|
}
|
|
const emojis = this.$store.getters.groupedCustomEmojis
|
|
if (emojis.unpacked) {
|
|
emojis.unpacked.text = this.$t('emoji.unpacked')
|
|
}
|
|
return emojis
|
|
},
|
|
defaultGroup() {
|
|
return Object.keys(this.allCustomGroups)[0]
|
|
},
|
|
unicodeEmojiGroups() {
|
|
return this.$store.getters.standardEmojiGroupList.map((group) => ({
|
|
id: `standard-${group.id}`,
|
|
text: this.$t(`emoji.unicode_groups.${group.id}`),
|
|
icon: UNICODE_EMOJI_GROUP_ICON[group.id],
|
|
emojis: group.emojis,
|
|
}))
|
|
},
|
|
allEmojiGroups() {
|
|
return Object.entries(this.allCustomGroups)
|
|
.map(([, v]) => v)
|
|
.concat(this.unicodeEmojiGroups)
|
|
},
|
|
stickerPickerEnabled() {
|
|
return (this.$store.state.instance.stickers || []).length !== 0
|
|
},
|
|
debouncedHandleKeywordChange() {
|
|
return debounce(() => {
|
|
this.filteredEmojiGroups = this.getFilteredEmojiGroups()
|
|
}, 500)
|
|
},
|
|
emojiItems() {
|
|
return this.filteredEmojiGroups
|
|
.map((group) =>
|
|
chunk(group.emojis, this.itemPerRow).map((items, index) => ({
|
|
...group,
|
|
id: index === 0 ? group.id : `row-${index}-${group.id}`,
|
|
emojis: items,
|
|
isFirstRow: index === 0,
|
|
})),
|
|
)
|
|
.reduce((a, c) => a.concat(c), [])
|
|
},
|
|
languages() {
|
|
return ensureFinalFallback(
|
|
this.$store.getters.mergedConfig.interfaceLanguage,
|
|
)
|
|
},
|
|
maybeLocalizedEmojiName() {
|
|
return (emoji) => {
|
|
if (!emoji.annotations) {
|
|
return emoji.displayText
|
|
}
|
|
|
|
if (emoji.displayTextI18n) {
|
|
return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args)
|
|
}
|
|
|
|
for (const lang of this.languages) {
|
|
if (emoji.annotations[lang]?.name) {
|
|
return emoji.annotations[lang].name
|
|
}
|
|
}
|
|
|
|
return emoji.displayText
|
|
}
|
|
},
|
|
isInModal() {
|
|
return this.popoversZLayer === 'modals'
|
|
},
|
|
},
|
|
}
|
|
|
|
export default EmojiPicker
|