From e01c76c7e90f354436e726456532f51288a7ab99 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 6 Apr 2022 21:29:50 -0400
Subject: [PATCH] Make emoji picker work with vue3
---
src/components/emoji_picker/emoji_picker.js | 21 ++++++++++++++------
src/components/emoji_picker/emoji_picker.vue | 8 +++++---
2 files changed, 20 insertions(+), 9 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 07f4b00537..677ef5e471 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -84,7 +84,9 @@ const EmojiPicker = {
keepOpen: false,
customEmojiTimeout: null,
// Lazy-load only after the first time `showing` becomes true.
- contentLoaded: false
+ contentLoaded: false,
+ groupRefs: {},
+ emojiRefs: {}
}
},
components: {
@@ -93,6 +95,12 @@ const EmojiPicker = {
StillImage
},
methods: {
+ setGroupRef (name) {
+ return el => { this.groupRefs[name] = el }
+ },
+ setEmojiRef (name) {
+ return el => { this.emojiRefs[name] = el }
+ },
onStickerUploaded (e) {
this.$emit('sticker-uploaded', e)
},
@@ -112,8 +120,8 @@ const EmojiPicker = {
const top = target.scrollTop + 5
this.$nextTick(() => {
this.allEmojiGroups.forEach(group => {
- const ref = this.$refs['group-' + group.id]
- if (ref[0].offsetTop <= top) {
+ const ref = this.groupRefs['group-' + group.id]
+ if (ref && ref.offsetTop <= top) {
this.activeGroup = group.id
}
})
@@ -122,7 +130,7 @@ const EmojiPicker = {
},
scrollHeader () {
// 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 right = left + headerRef.offsetWidth
const headerCont = this.$refs.header
@@ -138,7 +146,7 @@ const EmojiPicker = {
}
},
highlight (key) {
- const ref = this.$refs['group-' + key]
+ const ref = this.groupRefs['group-' + key]
const top = ref.offsetTop
this.setShowStickers(false)
this.activeGroup = key
@@ -169,7 +177,8 @@ const EmojiPicker = {
this.$nextTick(() => {
this.$lozad = lozad('.still-image.emoji-picker-emoji', {
load: el => {
- const vn = el.__vue__
+ const name = el.getAttribute('data-emoji-name')
+ const vn = this.emojiRefs[name]
if (!vn) {
return
}
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index e8d42c2438..a6a634110e 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -9,7 +9,7 @@
>
<span
v-for="group in filteredEmojiGroups"
- :ref="'group-header-' + group.id"
+ :ref="setGroupRef('group-header-' + group.id)"
:key="group.id"
class="emoji-tabs-item"
:class="{
@@ -80,7 +80,7 @@
class="emoji-group"
>
<h6
- :ref="'group-' + group.id"
+ :ref="setGroupRef('group-' + group.id)"
class="emoji-group-title"
>
{{ group.text }}
@@ -96,10 +96,12 @@
<still-image
v-else
class="emoji-picker-emoji"
+ :ref="setEmojiRef(group.id + emoji.displayText)"
:data-src="emoji.imageUrl"
+ :data-emoji-name="group.id + emoji.displayText"
/>
</span>
- <span :ref="'group-end-' + group.id" />
+ <span :ref="setGroupRef('group-end-' + group.id)" />
</div>
</div>
<div class="keep-open">
--
GitLab