quasar/ui/src/components/scroll-observer/QScrollObserver.js at v1 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import Vue from 'vue'

import { getScrollPosition, getScrollTarget, getHorizontalScrollPosition } from '../../utils/scroll.js'
import { listenOpts, noop } from '../../utils/event.js'

const { passive } = listenOpts

export default Vue.extend({
  name: 'QScrollObserver',

  props: {
    debounce: [ String, Number ],
    horizontal: Boolean,

    scrollTarget: {
      default: void 0
    }
  },

  render: noop, // eslint-disable-line

  data () {
    return {
      pos: 0,
      dir: this.horizontal === true ? 'right' : 'down',
      dirChanged: false,
      dirChangePos: 0
    }
  },

  watch: {
    scrollTarget () {
      this.__unconfigureScrollTarget()
      this.__configureScrollTarget()
    }
  },

  methods: {
    getPosition () {
      return {
        position: this.pos,
        direction: this.dir,
        directionChanged: this.dirChanged,
        inflexionPosition: this.dirChangePos
      }
    },

    trigger (immediately) {
      if (immediately === true || this.debounce === 0 || this.debounce === '0') {
        this.__emit()
      }
      else if (this.clearTimer === void 0) {
        const [ timer, fn ] = this.debounce
          ? [ setTimeout(this.__emit, this.debounce), clearTimeout ]
          : [ requestAnimationFrame(this.__emit), cancelAnimationFrame ]

        this.clearTimer = () => {
          fn(timer)
          this.clearTimer = void 0
        }
      }
    },

    __emit () {
      this.clearTimer !== void 0 && this.clearTimer()

      const fn = this.horizontal === true
        ? getHorizontalScrollPosition
        : getScrollPosition

      const
        pos = Math.max(0, fn(this.__scrollTarget)),
        delta = pos - this.pos,
        dir = this.horizontal === true
          ? delta < 0 ? 'left' : 'right'
          : delta < 0 ? 'up' : 'down'

      this.dirChanged = this.dir !== dir

      if (this.dirChanged) {
        this.dir = dir
        this.dirChangePos = this.pos
      }

      this.pos = pos
      this.$emit('scroll', this.getPosition())
    },

    __configureScrollTarget () {
      this.__scrollTarget = getScrollTarget(this.$el.parentNode, this.scrollTarget)
      this.__scrollTarget.addEventListener('scroll', this.trigger, passive)
      this.trigger(true)
    },

    __unconfigureScrollTarget () {
      if (this.__scrollTarget !== void 0) {
        this.__scrollTarget.removeEventListener('scroll', this.trigger, passive)
        this.__scrollTarget = void 0
      }
    }
  },

  mounted () {
    this.__configureScrollTarget()
  },

  beforeDestroy () {
    this.clearTimer !== void 0 && this.clearTimer()
    this.__unconfigureScrollTarget()
  }
})