quasar/src/components/data-table/plugins/scroll/scroll.js at v0.14 · 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
import { getMouseWheelDistance } from '../../../../utils/event'
import { getScrollbarWidth } from '../../../../utils/scroll'

export default {
  data () {
    return {
      scroll: {
        horiz: 0,
        vert: 0
      }
    }
  },
  methods: {
    scrollHandler (e) {
      const
        left = e.currentTarget.scrollLeft,
        top = e.currentTarget.scrollTop

      window.requestAnimationFrame(() => {
        if (this.$refs.head) {
          this.$refs.head.scrollLeft = left
        }
        this.updateStickyScroll(top)
      })
    },
    mouseWheel (e) {
      if (!this.scroll.vert) {
        return
      }

      let body = this.$refs.body
      body.scrollTop += getMouseWheelDistance(e).pixelY
      if (body.scrollTop > 0 && body.scrollTop + body.clientHeight < body.scrollHeight) {
        e.preventDefault()
      }
    },
    resize () {
      this.$nextTick(() => {
        window.requestAnimationFrame(() => {
          if (this.responsive) {
            return
          }
          const
            body = this.$refs.body,
            size = getScrollbarWidth()

          this.scroll.horiz = size && body.clientWidth < body.scrollWidth ? size + 'px' : 0
          this.scroll.vert = size && body.scrollHeight > body.clientHeight ? size + 'px' : 0
        })
      })
    },
    updateStickyScroll (top) {
      if (this.$refs.stickyLeft) {
        this.$refs.stickyLeft.scrollTop = top
      }
      if (this.$refs.stickyRight) {
        this.$refs.stickyRight.scrollTop = top
      }
    }
  },
  watch: {
    $data: {
      deep: true,
      handler () {
        this.resize()
      }
    },
    bodyStyle: {
      deep: true,
      handler () {
        this.$nextTick(() => {
          this.resize()
        })
      }
    },
    rowStyle: {
      deep: true,
      handler () {
        this.$nextTick(() => {
          this.resize()
        })
      }
    },
    rightStickyColumns () {
      this.$nextTick(() => {
        this.updateStickyScroll(this.$refs.body.scrollTop)
      })
    },
    leftStickyColumns () {
      this.$nextTick(() => {
        this.updateStickyScroll(this.$refs.body.scrollTop)
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.resize()
      window.addEventListener('resize', this.resize)
    })
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  }
}