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

<script>
  export default {
9
    props: ['element', 'doubleTap'],
10 11 12 13 14
    data () {
      return {
        clickTimer: null
      }
    },
christianrhansen's avatar
christianrhansen committed
15
    mounted () {
16 17 18 19 20
      if (this.element) {
        let observer = new IntersectionObserver(this.observerCallback)
        observer.observe(this.$refs.targetHandler)
        this.observer = observer
      }
christianrhansen's avatar
christianrhansen committed
21 22
    },
    methods: {
23
      onDoubleTap () {
24 25 26 27 28 29 30 31 32 33 34
        if (this.doubleTap) {
          if (this.clickTimer == null) {
            this.clickTimer = setTimeout(function () {
              clearTimeout(this.clickTimer)
              this.clickTimer = null
              // alert('single')
            }, 300)
          }
          else {
            clearTimeout(this.clickTimer)
            this.clickTimer = null
35
            this.doubleTap.el.scrollLeft = this.doubleTap.oLeft - 16
36 37 38
            // alert('double')
          }
        }
39
      },
christianrhansen's avatar
christianrhansen committed
40 41 42 43
      observerCallback (entries) {
        let target = entries[0]

        if (!target.isIntersecting) {
christianrhansen's avatar
christianrhansen committed
44
          this.$emit('onIntersectionChange', {element: this.element, intersecting: target.isIntersecting, offsetLeft: target.boundingClientRect.left})
christianrhansen's avatar
christianrhansen committed
45 46
        }
        else {
christianrhansen's avatar
christianrhansen committed
47
          this.$emit('onIntersectionChange', {element: this.element, intersecting: target.isIntersecting, offsetLeft: undefined})
christianrhansen's avatar
christianrhansen committed
48 49 50
        }
      }
    },
christianrhansen's avatar
christianrhansen committed
51
    destroyed () {
christianrhansen's avatar
christianrhansen committed
52
      if (this.observer) this.observer.disconnect()
christianrhansen's avatar
christianrhansen committed
53
    },
christianrhansen's avatar
christianrhansen committed
54 55 56 57 58 59 60 61 62 63 64
    name: 'CellHandlerMobile'
  }
</script>

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

  .handler-new-cell
    width handler-width
    height handler-width
</style>