pleroma-fe

commit: 23edc4f7e253cdca022290f877a0fd8f43a4f993
parent 8777b6eadd7deadf010dc36bb90514f75fc0da16
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Fri,  8 Oct 2021 01:11:32 -0400

Fix scrol->highlight behaviour

Ref: grouped-emoji-picker

Diffstat:
M
src/components/emoji_picker/emoji_picker.js
18
++++++++++++++++++

1 file changed, 18 insertions(+), 0 deletions(-)
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
@@ -78,6 +78,18 @@ const EmojiPicker = {
     onScroll (e) {
       const target = (e && e.target) || this.$refs['emoji-groups']
       this.updateScrolledClass(target)
+      this.scrolledGroup(target)
+    },
+    scrolledGroup (target) {
+      const top = target.scrollTop + 5
+      this.$nextTick(() => {
+        this.allEmojiGroups.forEach(group => {
+          const ref = this.$refs['group-' + group.id]
+          if (ref[0].offsetTop <= top) {
+            this.activeGroup = group.id
+          }
+        })
+      })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]
@@ -134,6 +146,9 @@ const EmojiPicker = {
     }
   },
   mounted () {
+    if (this.defaultGroup) {
+      this.highlight(this.defaultGroup)
+    }
     this.initializeLazyLoad()
   },
   destroyed () {
@@ -152,6 +167,9 @@ const EmojiPicker = {
     allCustomGroups () {
       return this.$store.getters.groupedCustomEmojis
     },
+    defaultGroup () {
+      return Object.keys(this.allCustomGroups)[0]
+    },
     allEmojiGroups () {
       const standardEmojis = this.$store.state.instance.emoji || []
       return Object.entries(this.allCustomGroups)