CellHandlerMobile.vue 1.3 KB
Newer Older
christianrhansen's avatar
christianrhansen committed
1
<template lang="pug">
christianrhansen's avatar
christianrhansen committed
2
  .handler-new-cell.text-dark.justify-center.row.bg-grey-3.shadow-2(ref="targetHandler")
3 4
    q-btn(@click="onDoubleTap", flat, round, size="sm", no-ripple)
      slot
christianrhansen's avatar
christianrhansen committed
5 6 7 8
</template>

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

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

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

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