ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

add plugin vue-observe-visibility

Browse Source
This commit is contained in:
Moriz Wahl 2021-02-24 14:46:21 +01:00
parent 88fd83ec2b
commit ae61baadfb
5 changed files with 95 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
webapp/components/PostTeaser/PostTeaser.vue
View File

@ -10,6 +10,7 @@
'--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,14 +60,14 @@
</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 {
export default {
name: 'PostTeaser',
components: {
UserTeaser,
@ -135,8 +136,11 @@ export default {
unpinPost(post) {
this.$emit('unpinPost', post)
},
visibilityChanged(isVisible, entry, id) {
console.log('--', isVisible, id)
},
}
},
}
</script>
<style lang="scss">
.post-teaser,

1
webapp/nuxt.config.js
View File

@ -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: {

1
webapp/package.json
View File

@ -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",

4
webapp/plugins/vue-observe-visibility.js Normal file
View File

@ -0,0 +1,4 @@
import Vue from 'vue'
import VueObserveVisibility from 'vue-observe-visibility'
Vue.use(VueObserveVisibility)

5
webapp/yarn.lock
View File

@ -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"