<script>
|
import { on, off, renderThumbStyle, BAR_MAP } from './util'
|
|
export default {
|
name: 'scrollbar-Bar',
|
props: {
|
vertical: Boolean,
|
size: String,
|
move: Number
|
},
|
computed: {
|
bar () {
|
return BAR_MAP[this.vertical ? 'vertical' : 'horizontal']
|
},
|
|
wrap () {
|
return this.$parent.wrap
|
}
|
},
|
destroyed () {
|
off(document, 'mouseup', this.mouseUpDocumentHandler)
|
},
|
methods: {
|
clickThumbHandler (e) {
|
// prevent click event of right button
|
if (e.ctrlKey || e.button === 2) {
|
return
|
}
|
this.startDrag(e)
|
this[this.bar.axis] =
|
e.currentTarget[this.bar.offset] -
|
(e[this.bar.client] -
|
e.currentTarget.getBoundingClientRect()[this.bar.direction])
|
},
|
|
clickTrackHandler (e) {
|
const offset = Math.abs(
|
e.target.getBoundingClientRect()[this.bar.direction] -
|
e[this.bar.client]
|
)
|
const thumbHalf = this.$refs.thumb[this.bar.offset] / 2
|
const thumbPositionPercentage =
|
((offset - thumbHalf) * 100) / this.$el[this.bar.offset]
|
|
this.wrap[this.bar.scroll] =
|
(thumbPositionPercentage * this.wrap[this.bar.scrollSize]) /
|
100
|
},
|
|
startDrag (e) {
|
e.stopImmediatePropagation()
|
this.cursorDown = true
|
|
on(document, 'mousemove', this.mouseMoveDocumentHandler)
|
on(document, 'mouseup', this.mouseUpDocumentHandler)
|
document.onselectstart = () => false
|
},
|
|
mouseMoveDocumentHandler (e) {
|
if (this.cursorDown === false) return
|
const prevPage = this[this.bar.axis]
|
|
if (!prevPage) return
|
|
const offset =
|
(this.$el.getBoundingClientRect()[this.bar.direction] -
|
e[this.bar.client]) *
|
-1
|
const thumbClickPosition =
|
this.$refs.thumb[this.bar.offset] - prevPage
|
const thumbPositionPercentage =
|
((offset - thumbClickPosition) * 100) /
|
this.$el[this.bar.offset]
|
|
this.wrap[this.bar.scroll] =
|
(thumbPositionPercentage * this.wrap[this.bar.scrollSize]) /
|
100
|
},
|
|
mouseUpDocumentHandler (e) {
|
this.cursorDown = false
|
this[this.bar.axis] = 0
|
off(document, 'mousemove', this.mouseMoveDocumentHandler)
|
document.onselectstart = null
|
}
|
},
|
render (h) {
|
const { size, move, bar } = this
|
return (
|
<div
|
class={['ui-scrollbar__bar', 'is-' + bar.key]}
|
onMousedown={this.clickTrackHandler}
|
>
|
<div
|
ref="thumb"
|
class="ui-scrollbar__thumb"
|
onMousedown={this.clickThumbHandler}
|
style={renderThumbStyle({ size, move, bar })}
|
></div>
|
</div>
|
)
|
}
|
}
|
</script>
|
