gitlab.rlp.net will be temporarily unavailable for maintenance reasons on 2021-01-15 21:00 - 23:00

gitlab.rlp.net will be temporarily unavailable for maintenance reasons on 2021-01-15 21:00 - 23:00

CellHandlerMobile.vue 936 Bytes
Newer Older
christianrhansen's avatar
christianrhansen committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<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 () {
      let observer = new IntersectionObserver(this.observerCallback)
      observer.observe(this.$refs.targetHandler)
      this.observer = observer
    },
    methods: {
      observerCallback (entries) {
        let target = entries[0]

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

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

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