import "./picker.scss"
|
|
|
function debounce(handle, delay) {
|
let timeout = null
|
return function () {
|
if (timeout) {
|
clearTimeout(timeout)
|
timeout = null
|
}
|
const self = this
|
const args = arguments
|
timeout = setTimeout(() => handle.apply(self, args), delay)
|
}
|
}
|
|
function getClientCenterY(elem) {
|
const { top, bottom } = elem.getBoundingClientRect()
|
return (top + bottom) / 2
|
}
|
|
function normalizeOptions(options) {
|
return options.map((option) => {
|
switch (typeof option) {
|
case 'string': {
|
return { value: option, name: option }
|
}
|
case 'number':
|
case 'boolean': {
|
return { value: option, name: `${option}` }
|
}
|
}
|
return option
|
})
|
}
|
|
function isTouchEvent(event) {
|
return event.changedTouches || event.touches
|
}
|
|
function getEventXY(event) {
|
if (isTouchEvent(event)) {
|
return event.changedTouches[0] || event.touches[0]
|
}
|
return event
|
}
|
|
export default {
|
props: {
|
value: null,
|
options: {
|
type: Array,
|
default: () => [],
|
},
|
dragSensitivity: {
|
type: Number,
|
default: 1.7,
|
},
|
touchSensitivity: {
|
type: Number,
|
default: 1.7,
|
},
|
scrollSensitivity: {
|
type: Number,
|
default: 1,
|
},
|
empty: {
|
type: String,
|
default: 'No Items',
|
},
|
placeholder: {
|
type: String,
|
default: null,
|
},
|
},
|
data() {
|
const normalizedOptions = normalizeOptions(this.options)
|
|
let innerIndex = normalizedOptions.findIndex(option => option.value == this.value)
|
if (innerIndex === -1 && !this.placeholder && this.options.length > 0) {
|
innerIndex = 0
|
}
|
const innerValue = normalizedOptions[innerIndex] && normalizedOptions[innerIndex].value || null
|
|
return {
|
normalizedOptions,
|
innerIndex,
|
innerValue,
|
|
top: null,
|
|
pivots: [],
|
pivotMin: 0,
|
pivotMax: 0,
|
|
transitioning: false,
|
transitionTO: null,
|
|
start: null,
|
|
isMouseDown: false,
|
isDragging: false,
|
|
scrollOffsetTop: 0,
|
scrollMin: 0,
|
scrollMax: 0,
|
}
|
},
|
mounted() {
|
this.calculatePivots()
|
this.top = this.findScrollByIndex(this.innerIndex)
|
if (this.innerValue !== this.value) {
|
this.$emit('input', this.innerValue)
|
}
|
|
this.$el.addEventListener('touchstart', this.onStart)
|
this.$el.addEventListener('touchmove', this.onMove)
|
this.$el.addEventListener('touchend', this.onEnd)
|
this.$el.addEventListener('touchcancel', this.onCancel)
|
|
this.$el.addEventListener('mousewheel', this.onScroll)
|
this.$el.addEventListener('DOMMouseScroll', this.onScroll)
|
this.$el.addEventListener('wheel', this.onScroll)
|
this.$el.addEventListener('mousedown', this.onStart)
|
this.$el.addEventListener('mousemove', this.onMove)
|
this.$el.addEventListener('mouseup', this.onEnd)
|
this.$el.addEventListener('mouseleave', this.onCancel)
|
},
|
destroyed() {
|
this.$el.removeEventListener('touchstart', this.onStart)
|
this.$el.removeEventListener('touchmove', this.onMove)
|
this.$el.removeEventListener('touchend', this.onEnd)
|
this.$el.removeEventListener('touchcancel', this.onCancel)
|
|
this.$el.removeEventListener('mousewheel', this.onScroll)
|
this.$el.removeEventListener('DOMMouseScroll', this.onScroll)
|
this.$el.removeEventListener('wheel', this.onScroll)
|
this.$el.removeEventListener('mousedown', this.onStart)
|
this.$el.removeEventListener('mousemove', this.onMove)
|
this.$el.removeEventListener('mouseup', this.onEnd)
|
this.$el.removeEventListener('mouseleave', this.onCancel)
|
},
|
watch: {
|
value(value) {
|
if ((value === null || value === undefined) && this.placeholder) {
|
this.correction(-1)
|
return
|
}
|
|
const nextInnerIndex = this.normalizedOptions.findIndex((option) => option.value == value)
|
if (nextInnerIndex === -1) {
|
this.$emit('input', this.innerValue)
|
return
|
}
|
|
if (this.innerIndex !== nextInnerIndex) {
|
this.correction(nextInnerIndex)
|
}
|
},
|
options(options) {
|
const normalizedOptions = this.normalizedOptions = normalizeOptions(options)
|
|
let internalIndex = normalizedOptions.findIndex(option => option.value == this.value)
|
if (internalIndex === -1 && !this.placeholder && this.options.length > 0) {
|
internalIndex = 0
|
}
|
const innerValue = normalizedOptions[internalIndex] && normalizedOptions[internalIndex].value || null
|
|
this.$nextTick(() => {
|
this.calculatePivots()
|
this.top = this.findScrollByIndex(internalIndex)
|
this.innerIndex = internalIndex
|
if (this.innerValue !== innerValue) {
|
this.$emit('input', this.innerValue = innerValue)
|
}
|
})
|
}
|
},
|
methods: {
|
resize() {
|
this.$nextTick(() => {
|
this.calculatePivots()
|
this.top = this.findScrollByIndex(this.innerIndex)
|
})
|
},
|
calculatePivots() {
|
const rotatorTop = this.$refs.list.getBoundingClientRect().top
|
this.pivots = (this.$refs.items || []).map((item) => getClientCenterY(item) - rotatorTop).sort((a, b) => a - b)
|
this.pivotMin = Math.min(...this.pivots)
|
this.pivotMax = Math.max(...this.pivots)
|
|
this.scrollOffsetTop = this.$refs.selection.offsetTop + this.$refs.selection.offsetHeight / 2
|
|
this.scrollMin = this.scrollOffsetTop - this.pivotMin
|
this.scrollMax = this.scrollOffsetTop - this.pivotMax
|
},
|
sanitizeInternalIndex(index) {
|
return Math.min(Math.max(index, this.placeholder ? -1 : 0), this.normalizedOptions.length - 1)
|
},
|
findIndexFromScroll(scroll) {
|
let prevDiff = null
|
let pivotIndex = 0
|
this.pivots.forEach((pivot, i) => {
|
const diff = pivot + scroll - this.scrollOffsetTop
|
if (prevDiff === null || Math.abs(prevDiff) > Math.abs(diff)) {
|
pivotIndex = i
|
prevDiff = diff
|
}
|
})
|
if (this.placeholder || this.options.length === 0) {
|
return pivotIndex - 1
|
}
|
return pivotIndex
|
},
|
findScrollByIndex(index) {
|
let pivotIndex = index
|
if (this.placeholder || this.options.length === 0) {
|
pivotIndex++
|
}
|
if (index > -1 && pivotIndex in this.pivots) {
|
return this.scrollOffsetTop - this.pivots[pivotIndex]
|
}
|
if (index >= this.pivots.length) {
|
return this.scrollOffsetTop - this.pivotMax
|
}
|
|
return this.scrollOffsetTop - this.pivotMin
|
},
|
onScroll(e) {
|
if (this.top >= this.scrollMin && e.deltaY < 0) return
|
if (this.top <= this.scrollMax && e.deltaY > 0) return
|
if (this.pivots.length === 1) return
|
|
e.preventDefault()
|
|
const nextDirInnerIndex = this.sanitizeInternalIndex(this.innerIndex + (e.deltaY > 0 ? 1 : -1))
|
const deltaMax = e.deltaY > 0
|
? this.findScrollByIndex(nextDirInnerIndex - 1) - this.findScrollByIndex(nextDirInnerIndex)
|
: this.findScrollByIndex(nextDirInnerIndex) - this.findScrollByIndex(nextDirInnerIndex + 1)
|
|
const deltaY = Math.max(Math.min(e.deltaY, deltaMax), deltaMax * -1)
|
|
this.top = Math.min(Math.max(this.top - deltaY * this.scrollSensitivity, this.scrollMax), this.scrollMin)
|
|
const nextInnerIndex = this.sanitizeInternalIndex(this.findIndexFromScroll(this.top))
|
const nextInnerValue = this.normalizedOptions[nextInnerIndex] && this.normalizedOptions[nextInnerIndex].value || null
|
|
this.innerIndex = nextInnerIndex
|
if (this.innerValue !== nextInnerValue) {
|
this.$emit('input', this.innerValue = nextInnerValue)
|
}
|
|
this.onAfterWheel()
|
},
|
onAfterWheel: debounce(function () {
|
this.correction(this.findIndexFromScroll(this.top))
|
}, 200),
|
onStart(event) {
|
if (event.cancelable) {
|
event.preventDefault()
|
}
|
|
const { clientY } = getEventXY(event)
|
this.start = [this.top, clientY]
|
if (!isTouchEvent(event)) {
|
this.isMouseDown = true
|
}
|
this.isDragging = false
|
},
|
onMove(e) {
|
if (e.cancelable) {
|
e.preventDefault()
|
}
|
if (!this.start) {
|
return
|
}
|
const { clientY } = getEventXY(e)
|
const diff = clientY - this.start[1]
|
if (Math.abs(diff) > 1.5) {
|
this.isDragging = true
|
}
|
this.top = this.start[0] + diff * (isTouchEvent(e) ? this.touchSensitivity : this.dragSensitivity)
|
},
|
onEnd(e) {
|
if (e.cancelable) {
|
e.preventDefault()
|
}
|
if (this.isDragging) {
|
this.correction(this.findIndexFromScroll(this.top))
|
} else {
|
this.handleClick(e)
|
}
|
this.start = null
|
this.isDragging = false
|
this.isMouseDown = false
|
},
|
onCancel(e) {
|
if (e.cancelable) {
|
e.preventDefault()
|
}
|
this.correction(this.findIndexFromScroll(this.top))
|
this.start = null
|
this.isMouseDown = false
|
this.isDragging = false
|
},
|
handleClick(e) {
|
const touchInfo = getEventXY(e)
|
const x = touchInfo.clientX
|
const y = touchInfo.clientY
|
const topRect = this.$refs.top.getBoundingClientRect()
|
const bottomRect = this.$refs.bottom.getBoundingClientRect()
|
if (topRect.left <= x && x <= topRect.right && topRect.top <= y && y <= topRect.bottom) {
|
this.correction(this.innerIndex - 1)
|
} else if (bottomRect.left <= x && x <= bottomRect.right && bottomRect.top <= y && y <= bottomRect.bottom) {
|
this.correction(this.innerIndex + 1)
|
}
|
},
|
correction(index) {
|
const nextInnerIndex = this.sanitizeInternalIndex(index)
|
const nextInnerValue = this.normalizedOptions[nextInnerIndex] && this.normalizedOptions[nextInnerIndex].value || null
|
this.top = this.findScrollByIndex(nextInnerIndex)
|
|
this.transitioning = true
|
if (this.transitionTO) {
|
clearTimeout(this.transitionTO)
|
this.transitionTO = null
|
}
|
|
this.transitionTO = setTimeout(() => {
|
this.transitioning = false
|
this.transitionTO = null
|
|
this.innerIndex = nextInnerIndex
|
if (this.innerValue !== nextInnerValue) {
|
this.innerValue = nextInnerValue
|
this.$emit('input', this.innerValue)
|
}
|
}, 100)
|
},
|
},
|
render(h) {
|
let items = []
|
if (this.placeholder) {
|
items.push(h("div", {
|
class: {
|
"vue-scroll-picker-item": true,
|
"-placeholder": true,
|
"-selected": this.innerIndex == -1,
|
},
|
ref: "items",
|
refInFor: true,
|
domProps: {
|
innerHTML: this.placeholder,
|
},
|
}))
|
} else if (this.normalizedOptions.length === 0 && this.placeholder === null) {
|
items.push(h("div", {
|
class: ["vue-scroll-picker-item", "-empty", "-selected"],
|
ref: "items",
|
refInFor: true,
|
domProps: {
|
innerHTML: this.empty,
|
},
|
}))
|
}
|
|
items = items.concat(this.normalizedOptions.map((option, index) => {
|
return h("div", {
|
class: {
|
"vue-scroll-picker-item": true,
|
"-selected": this.innerIndex == index,
|
},
|
key: option.value,
|
ref: "items",
|
refInFor: true,
|
domProps: {
|
innerHTML: option.name,
|
},
|
})
|
}))
|
return h("div", {class: ["vue-scroll-picker"]}, [
|
h("div", {class: ["vue-scroll-picker-list"]}, [
|
h("div", {
|
ref: 'list',
|
class: {
|
"vue-scroll-picker-list-rotator": true,
|
"-transition": this.transitioning,
|
},
|
style: this.top !== null ? { top: `${this.top}px` } : {},
|
}, items)
|
]),
|
h("div", {class: ["vue-scroll-picker-layer"]}, [
|
h("div", {class: ["top"], ref: "top"}),
|
h("div", {class: ["middle"], ref: "selection"}),
|
h("div", {class: ["bottom"], ref: "bottom"}),
|
]),
|
])
|
}
|
}
|
