CellHandlerMobile.vue 1.1 KB
Newer Older
christianrhansen's avatar
christianrhansen committed
1
2
3
4
5
6
7
8
9
<template lang="pug">
  .handler-new-cell.text-dark.justify-center.row.bg-white.shadow-6(ref="targetHandler")
    slot
</template>

<script>
  export default {
    props: ['element'],
    mounted () {
10
11
12
13
14
      if (this.element) {
        let observer = new IntersectionObserver(this.observerCallback)
        observer.observe(this.$refs.targetHandler)
        this.observer = observer
      }
christianrhansen's avatar
christianrhansen committed
15
16
17
18
19
20
    },
    methods: {
      observerCallback (entries) {
        let target = entries[0]

        if (!target.isIntersecting) {
christianrhansen's avatar
christianrhansen committed
21
          this.$emit('onIntersectionChange', {element: this.element, intersecting: target.isIntersecting, offsetLeft: target.boundingClientRect.left})
christianrhansen's avatar
christianrhansen committed
22
23
        }
        else {
christianrhansen's avatar
christianrhansen committed
24
          this.$emit('onIntersectionChange', {element: this.element, intersecting: target.isIntersecting, offsetLeft: undefined})
christianrhansen's avatar
christianrhansen committed
25
26
27
        }
      }
    },
christianrhansen's avatar
christianrhansen committed
28
    destroyed () {
29
      if (this.element) this.observer.disconnect()
christianrhansen's avatar
christianrhansen committed
30
    },
christianrhansen's avatar
christianrhansen committed
31
32
33
34
35
36
37
38
39
40
41
42
    name: 'CellHandlerMobile'
  }
</script>

<style scoped lang="stylus">
  handler-width = 40px

  .handler-new-cell
    width handler-width
    height handler-width
    border-radius 1000px
</style>