From ae61baadfbce3cae95fe196799a0c22c0e622962 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 24 Feb 2021 14:46:21 +0100
Subject: [PATCH] add plugin vue-observe-visibility

---
 webapp/components/PostTeaser/PostTeaser.vue | 164 ++++++++++----------
 webapp/nuxt.config.js                       |   1 +
 webapp/package.json                         |   1 +
 webapp/plugins/vue-observe-visibility.js    |   4 +
 webapp/yarn.lock                            |   5 +
 5 files changed, 95 insertions(+), 80 deletions(-)
 create mode 100644 webapp/plugins/vue-observe-visibility.js

diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 554215651..2c475c15a 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -6,10 +6,11 @@
     <base-card
       :lang="post.language"
       :class="{
-        'disabled-content': post.disabled,
-        '--blur-image': post.image && post.image.sensitive,
-      }"
+             'disabled-content': post.disabled,
+             '--blur-image': post.image && post.image.sensitive,
+             }"
       :highlight="isPinned"
+      v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, post.id)"
     >
       <template v-if="post.image" #heroImage>
         <img :src="post.image | proxyApiUrl" class="image" />
@@ -59,84 +60,87 @@
 </template>
 
 <script>
-import UserTeaser from '~/components/UserTeaser/UserTeaser'
-import ContentMenu from '~/components/ContentMenu/ContentMenu'
-import HcRibbon from '~/components/Ribbon'
-import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
-import { mapGetters } from 'vuex'
-import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
+ import UserTeaser from '~/components/UserTeaser/UserTeaser'
+ import ContentMenu from '~/components/ContentMenu/ContentMenu'
+ import HcRibbon from '~/components/Ribbon'
+ import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+ import { mapGetters } from 'vuex'
+ import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
 
-export default {
-  name: 'PostTeaser',
-  components: {
-    UserTeaser,
-    HcRibbon,
-    ContentMenu,
-    CounterIcon,
-  },
-  props: {
-    post: {
-      type: Object,
-      required: true,
-    },
-    width: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  mounted() {
-    const { image } = this.post
-    if (!image) return
-    const width = this.$el.offsetWidth
-    const height = Math.min(width / image.aspectRatio, 2000)
-    const imageElement = this.$el.querySelector('.hero-image')
-    if (imageElement) {
-      imageElement.style.height = `${height}px`
-    }
-  },
-  computed: {
-    ...mapGetters({
-      user: 'auth/user',
-    }),
-    excerpt() {
-      return this.$filters.removeLinks(this.post.contentExcerpt)
-    },
-    isAuthor() {
-      const { author } = this.post
-      if (!author) return false
-      return this.user.id === this.post.author.id
-    },
-    menuModalsData() {
-      return postMenuModalsData(
-        // "this.post" may not always be defined at the beginning …
-        this.post ? this.$filters.truncate(this.post.title, 30) : '',
-        this.deletePostCallback,
-      )
-    },
-    isPinned() {
-      return this.post && this.post.pinned
-    },
-  },
-  methods: {
-    async deletePostCallback() {
-      try {
-        const {
-          data: { DeletePost },
-        } = await this.$apollo.mutate(deletePostMutation(this.post.id))
-        this.$toast.success(this.$t('delete.contribution.success'))
-        this.$emit('removePostFromList', DeletePost)
-      } catch (err) {
-        this.$toast.error(err.message)
-      }
-    },
-    pinPost(post) {
-      this.$emit('pinPost', post)
-    },
-    unpinPost(post) {
-      this.$emit('unpinPost', post)
-    },
-  },
-}
+ export default {
+   name: 'PostTeaser',
+   components: {
+     UserTeaser,
+     HcRibbon,
+     ContentMenu,
+     CounterIcon,
+   },
+   props: {
+     post: {
+       type: Object,
+       required: true,
+     },
+     width: {
+       type: Object,
+       default: () => {},
+     },
+   },
+   mounted() {
+     const { image } = this.post
+     if (!image) return
+     const width = this.$el.offsetWidth
+     const height = Math.min(width / image.aspectRatio, 2000)
+     const imageElement = this.$el.querySelector('.hero-image')
+     if (imageElement) {
+       imageElement.style.height = `${height}px`
+     }
+   },
+   computed: {
+     ...mapGetters({
+       user: 'auth/user',
+     }),
+     excerpt() {
+       return this.$filters.removeLinks(this.post.contentExcerpt)
+     },
+     isAuthor() {
+       const { author } = this.post
+       if (!author) return false
+       return this.user.id === this.post.author.id
+     },
+     menuModalsData() {
+       return postMenuModalsData(
+         // "this.post" may not always be defined at the beginning …
+         this.post ? this.$filters.truncate(this.post.title, 30) : '',
+         this.deletePostCallback,
+       )
+     },
+     isPinned() {
+       return this.post && this.post.pinned
+     },
+   },
+   methods: {
+     async deletePostCallback() {
+       try {
+         const {
+           data: { DeletePost },
+         } = await this.$apollo.mutate(deletePostMutation(this.post.id))
+         this.$toast.success(this.$t('delete.contribution.success'))
+         this.$emit('removePostFromList', DeletePost)
+       } catch (err) {
+         this.$toast.error(err.message)
+       }
+     },
+     pinPost(post) {
+       this.$emit('pinPost', post)
+     },
+     unpinPost(post) {
+       this.$emit('unpinPost', post)
+     },
+     visibilityChanged(isVisible, entry, id) {
+       console.log('--', isVisible, id)
+     },
+   },
+ }
 </script>
 <style lang="scss">
 .post-teaser,
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 36152eb4a..9f992ee5e 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -115,6 +115,7 @@ export default {
     { src: '~/plugins/izi-toast.js', ssr: false },
     { src: '~/plugins/vue-filters.js' },
     { src: '~/plugins/vue-infinite-loading.js', ssr: false },
+    { src: '~/plugins/vue-observe-visibility.js', ssr: false },
   ],
 
   router: {
diff --git a/webapp/package.json b/webapp/package.json
index ca4295891..6aa53682f 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -88,6 +88,7 @@
     "vue-count-to": "~1.0.13",
     "vue-infinite-loading": "^2.4.5",
     "vue-izitoast": "^1.2.1",
+    "vue-observe-visibility": "^1.0.0",
     "vue-scrollto": "^2.17.1",
     "vue-sweetalert-icons": "~4.2.0",
     "vuex-i18n": "~1.13.1",
diff --git a/webapp/plugins/vue-observe-visibility.js b/webapp/plugins/vue-observe-visibility.js
new file mode 100644
index 000000000..af8143d7b
--- /dev/null
+++ b/webapp/plugins/vue-observe-visibility.js
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueObserveVisibility from 'vue-observe-visibility'
+
+Vue.use(VueObserveVisibility)
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index dce6b5f25..bf800a6d9 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -17770,6 +17770,11 @@ vue-no-ssr@^1.1.1:
   resolved "https://registry.yarnpkg.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
   integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
 
+vue-observe-visibility@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz#17cf1b2caf74022f0f3c95371468ddf2b9573152"
+  integrity sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==
+
 vue-resize@^0.4.5:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"