Merge pull request #71 from Freegle/feature/v-observe-visibility-dire…

…ctive-improvement feat: custom v-observe-visibility directive
Freegle · Feb 22, 2024 · 0a84d95 · 0a84d95
2 parents 7d56be5 + e26d6e3
commit 0a84d95
Show file tree

Hide file tree

Showing 6 changed files with 11,848 additions and 6,062 deletions.
diff --git a/components/InfiniteLoading.vue b/components/InfiniteLoading.vue
@@ -5,7 +5,7 @@
       :key="bump"
       v-observe-visibility="{
         callback: visibilityChanged,
-        intersection: {
+        options: {
           rootMargin: '0px 0px ' + distance + 'px 0px',
         },
       }"

diff --git a/components/MessageSummary.vue b/components/MessageSummary.vue
@@ -1,5 +1,15 @@
 <template>
-  <div v-if="message" :id="'msg-' + id" class="position-relative">
+  <div
+    v-if="message"
+    :id="'msg-' + id"
+    v-observe-visibility="{
+      callback: view,
+      options: {
+        observeFullElement: true,
+      },
+    }"
+    class="position-relative"
+  >
     <template v-if="message.successful">
       <MessageFreegled :id="id" />
     </template>
@@ -52,7 +62,6 @@
         />
       </div>
     </div>
-    <div v-observe-visibility="view" />
   </div>
 </template>
 
@@ -125,8 +134,6 @@ export default {
       if (this.me && this.message.unseen) {
         await this.messageStore.view(this.id)
       }
-
-      this.$emit('view')
     },
     expand() {
       this.$emit('expand')

diff --git a/components/OurMessage.vue b/components/OurMessage.vue
@@ -55,7 +55,6 @@
         @hidden="expanded = false"
       />
     </div>
-    <div v-observe-visibility="visibilityChanged" />
   </div>
 </template>
 
@@ -278,11 +277,6 @@ export default {
         this.$emit('view')
       }
     },
-    visibilityChanged(vis) {
-      if (vis) {
-        this.$emit('visible', this.id)
-      }
-    },
   },
 }
 </script>