moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make emoji picker work with vue3

This commit is contained in:
Tusooa Zhu 2022-04-06 21:29:50 -04:00
parent 96564609f8
commit e01c76c7e9
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/emoji_picker/emoji_picker.js
View File

@ -84,7 +84,9 @@ const EmojiPicker = {
keepOpen: false, keepOpen: false,
customEmojiTimeout: null, customEmojiTimeout: null,
// Lazy-load only after the first time `showing` becomes true. // Lazy-load only after the first time `showing` becomes true.
contentLoaded: false contentLoaded: false,
groupRefs: {},
emojiRefs: {}
} }
}, },
components: { components: {
@ -93,6 +95,12 @@ const EmojiPicker = {
StillImage StillImage
}, },
methods: { methods: {
setGroupRef (name) {
return el => { this.groupRefs[name] = el }
},
setEmojiRef (name) {
return el => { this.emojiRefs[name] = el }
},
onStickerUploaded (e) { onStickerUploaded (e) {
this.$emit('sticker-uploaded', e) this.$emit('sticker-uploaded', e)
}, },
@ -112,8 +120,8 @@ const EmojiPicker = {
const top = target.scrollTop + 5 const top = target.scrollTop + 5
this.$nextTick(() => { this.$nextTick(() => {
this.allEmojiGroups.forEach(group => { this.allEmojiGroups.forEach(group => {
const ref = this.$refs['group-' + group.id] const ref = this.groupRefs['group-' + group.id]
if (ref[0].offsetTop <= top) { if (ref && ref.offsetTop <= top) {
this.activeGroup = group.id this.activeGroup = group.id
} }
}) })
@ -122,7 +130,7 @@ const EmojiPicker = {
}, },
scrollHeader () { scrollHeader () {
// Scroll the active tab's header into view // Scroll the active tab's header into view
const headerRef = this.$refs['group-header-' + this.activeGroup][0] const headerRef = this.groupRefs['group-header-' + this.activeGroup]
const left = headerRef.offsetLeft const left = headerRef.offsetLeft
const right = left + headerRef.offsetWidth const right = left + headerRef.offsetWidth
const headerCont = this.$refs.header const headerCont = this.$refs.header
@ -138,7 +146,7 @@ const EmojiPicker = {
} }
}, },
highlight (key) { highlight (key) {
const ref = this.$refs['group-' + key] const ref = this.groupRefs['group-' + key]
const top = ref.offsetTop const top = ref.offsetTop
this.setShowStickers(false) this.setShowStickers(false)
this.activeGroup = key this.activeGroup = key
@ -169,7 +177,8 @@ const EmojiPicker = {
this.$nextTick(() => { this.$nextTick(() => {
this.$lozad = lozad('.still-image.emoji-picker-emoji', { this.$lozad = lozad('.still-image.emoji-picker-emoji', {
load: el => { load: el => {
const vn = el.__vue__ const name = el.getAttribute('data-emoji-name')
const vn = this.emojiRefs[name]
if (!vn) { if (!vn) {
return return
} }

8
src/components/emoji_picker/emoji_picker.vue
View File

@ -9,7 +9,7 @@
> >
<span <span
v-for="group in filteredEmojiGroups" v-for="group in filteredEmojiGroups"
:ref="'group-header-' + group.id" :ref="setGroupRef('group-header-' + group.id)"
:key="group.id" :key="group.id"
class="emoji-tabs-item" class="emoji-tabs-item"
:class="{ :class="{
@ -80,7 +80,7 @@
class="emoji-group" class="emoji-group"
> >
<h6 <h6
:ref="'group-' + group.id" :ref="setGroupRef('group-' + group.id)"
class="emoji-group-title" class="emoji-group-title"
> >
{{ group.text }} {{ group.text }}
@ -96,10 +96,12 @@
<still-image <still-image
v-else v-else
class="emoji-picker-emoji" class="emoji-picker-emoji"
:ref="setEmojiRef(group.id + emoji.displayText)"
:data-src="emoji.imageUrl" :data-src="emoji.imageUrl"
:data-emoji-name="group.id + emoji.displayText"
/> />
</span> </span>
<span :ref="'group-end-' + group.id" /> <span :ref="setGroupRef('group-end-' + group.id)" />
</div> </div>
</div> </div>
<div class="keep-open"> <div class="keep-open">