<template>

<div class="md-picker-column" :style="{ height: `${style.indicatorHeight + 2 * style.maskerHeight}px` }">

<div class="md-picker-column-container">

<div class="md-picker-column-masker top" :style="{ height: `${style.maskerHeight}px` }"></div>

<div class="md-picker-column-masker bottom" :style="{ height: `${style.maskerHeight}px` }"></div>

<div class="md-picker-column-list">

<template v-for="(colunm, i) in columnValues">

<div

class="md-picker-column-item"

:key="i"

>

<ul class="column-list" :style="{ 'padding-top': `${style.maskerHeight}px` }">

<template v-for="(item, j) in colunm">

<li

class="column-item"

:class="{

'active': $_isColumnIndexActive(i, j),

'disabled': $_isColumnIndexInvalid(i, j)

}"

:style="{

'height': `${style.indicatorHeight}px`,

'line-height': `${style.indicatorHeight}px`

}"

:key="j"

v-text="item.text || item.label"

>

</li>

</template>

</ul>

</div>

</template>

<template v-if="cols">

<div

class="md-picker-column-item"

v-for="n in (cols - columnValues.length)"

:key="n + columnValues.length - 1"

>

<ul class="column-list" :style="{ 'padding-top': `${style.maskerHeight}px` }"></ul>

</div>

</template>

</div>

<div class="md-picker-column-hooks">

<template v-if="cols">

<div

class="md-picker-column-hook"

v-for="n in cols"

:key="n - 1"

@touchstart="$_onColumnTouchStart($event, n - 1)"

@mousedown="$_onColumnTouchStart($event, n - 1, true)"

@touchmove="$_onColumnTouchMove($event, n - 1)"

@mousemove="$_onColumnTouchMove($event, n - 1, true)"

@touchend="$_onColumnTouchEnd($event, n - 1)"

@mouseup="$_onColumnTouchEnd($event, n - 1, true)"

></div>

</template>

</div>

</div>

</div>

</template>

<script>import Scroller from '../_util/scroller'

import {render} from '../_util/render'

import {noop, getDpr, traverse, inArray, extend, warn} from '../_util'

const dpr = getDpr()

const API_LIST = [

'getColumnValue',

'getColumnValues',

'getColumnIndex',

'getColumnIndexs',

'getColumnIndexByDefault',

'setColumnValues',

'refresh',

'inheritPickerApi',

]

export default {

name: 'md-picker-column',

props: {

data: {

type: Array,

default() {

/* istanbul ignore next */

return []

},

},

cols: {

type: Number,

default: 1,

},

defaultValue: {

type: Array,

default() {

/* istanbul ignore next */

return []

},

},

defaultIndex: {

type: Array,

default() {

/* istanbul ignore next */

return []

},

},

invalidIndex: {

type: Array,

default() {

/* istanbul ignore next */

return []

},

},

lineHeight: {

type: Number,

default: 45,

},

keepIndex: {

type: Boolean,

default: false,

},

},

data() {

return {

columnValues: [],

scrollers: [],

scrollDirect: 1,

scrollPosition: 0,

activedIndexs: [],

isInitialed: false,

isScrollInitialed: false,

isScrolling: false,

isMouseDown: false,

}

},

computed: {

hooks() {

const _hooks = this.$el.querySelectorAll('.md-picker-column-hook')

/* istanbul ignore if */

if (!_hooks) {

return []

}

return Array.isArray(_hooks) ? _hooks : Array.prototype.slice.call(_hooks)

},

style() {

return {

maskerHeight: (this.lineHeight * 2 + 10) * dpr,

indicatorHeight: this.lineHeight * dpr,

}

},

},

watch: {

data: {

handler(val) {

this.columnValues = extend([], val)

},

deep: true,

},

},

created() {

this.columnValues = extend([], this.data)

},

methods: {

// MARK: private methods

// initial scroller for each column

$_initColumnsScroller(startIndex = 0) {

for (let i = startIndex, len = this.hooks.length; i < len; i++) {

const container = this.hooks[i]

container && this.$_initSingleColumnScroller(container, i)

}

// initial index only refresh all columns

if (!startIndex) {

this.$_initColumnIndex()

if (!this.isInitialed) {

this.isInitialed = true

setTimeout(() => {

this.$emit('initialed')

}, 0)

}

}

this.isScrollInitialed = true

},

// initial scroller for column by index

$_initSingleColumnScroller(container, index) {

const columns = this.$el.querySelectorAll('.column-list')

const content = columns[index]

/* istanbul ignore if */

if (index === undefined || !columns || !container || !content) {

return

}

const rect = container.getBoundingClientRect()

const scroller = new Scroller(

(left, top) => {

render(content, left, top)

},

{

scrollingX: false,

snapping: true,

snappingVelocity: 1,

animationDuration: 350,

scrollingComplete: () => {

this.$_onColumnScrollEnd(index)

},

},

)

// set scroller size

scroller.setPosition(rect.left + container.clientLeft, rect.top + container.clientTop)

scroller.setDimensions(

container.clientWidth,

container.clientHeight,

content.offsetWidth,

content.offsetHeight + this.style.maskerHeight,

)

scroller.setSnapSize(0, this.style.indicatorHeight)

// save scroller instance

this.$set(this.scrollers, index, scroller)

// reset scrolling position

this.$_resetScrollingPosition(index)

},

// each column scroll to active item by defaultIndex

$_initColumnIndex() {

const data = this.columnValues

const scrollers = this.scrollers

const defaultValue = this.defaultValue

const defaultIndex = this.defaultIndex

this.$_getColumnIndexByDefault(data, defaultIndex, defaultValue, (columnIndex, itemIndex) => {

const scroller = scrollers[columnIndex]

/* istanbul ignore if */

if (!scroller) {

warn(`initialColumnIndex: scroller of column ${columnIndex} is undefined`)

return 1

}

/**

* If the initial selection item is invalid,

* then a valid item is automatically selected

*/

if (this.$_isColumnIndexInvalid(columnIndex, itemIndex)) {

this.$_scrollToValidIndex(scroller, columnIndex, itemIndex)

} else {

this.$_scrollToIndex(scroller, columnIndex, itemIndex)

this.$set(this.activedIndexs, columnIndex, itemIndex)

}

})

},

$_getColumnIndexByDefault(data, defaultIndex = [], defaultValue = [], fn = noop) {

/* istanbul ignore if */

if (!data) {

return

}

traverse(data, (item, level, indexs) => {

const columnIndex = indexs[0]

const itemIndex = indexs[1]

let itemDefaultIndex = defaultIndex[columnIndex]

const itemDefaultValue = defaultValue[columnIndex]

/*

* given a default itemIndex when both defaultIndex & defaultValue are undefined

* avoid activieIndexs failing to initialize

*/

if (itemDefaultIndex === undefined && itemDefaultValue === undefined) {

itemDefaultIndex = 0

}

// get initial itemIndex of each columnIndex by defaultIndex or defaultValue

if (

(itemDefaultIndex !== undefined && itemIndex === itemDefaultIndex) ||

(itemDefaultValue !== undefined &&

(item.text === itemDefaultValue || item.label === itemDefaultValue || item.value === itemDefaultValue))

) {

fn(columnIndex, itemIndex)

return 2

}

})

},

$_getColumnIndexByOffset(top) {

return Math.round(top / this.style.indicatorHeight)

},

$_getColumnOffsetByIndex(index) {

return index * this.style.indicatorHeight

},

$_isColumnIndexActive(columnIndex, itemIndex) {

const activeIndex = this.activedIndexs[columnIndex]

return activeIndex === itemIndex

},

$_isColumnIndexInvalid(columnIndex, itemIndex) {

const invalidIndex = this.invalidIndex[columnIndex]

return inArray(invalidIndex, itemIndex)

},

$_hasValidIndex(columnIndex) {

for (const key of this.data[columnIndex].keys()) {

if (!this.$_isColumnIndexInvalid(columnIndex, key)) {

return true

}

}

/* istanbul ignore next */

warn(`hasValidIndex: has no valid items in column index ${columnIndex}`)

return false

},

$_findValidIndex(columnIndex, count) {

// Has no valid items

if (!this.$_hasValidIndex(columnIndex)) {

return count

}

let tempCount = count

while (this.$_isColumnIndexInvalid(columnIndex, tempCount)) {

tempCount += this.scrollDirect

}

/**

* No valid item in this direction,

* find valid item in another direction

*/

if (tempCount < 0 || tempCount > this.data[columnIndex].length - 1) {

this.scrollDirect = -this.scrollDirect

return this.$_findValidIndex(columnIndex, count)

}

return tempCount

},

$_resetScrollingPosition(columnIndex) {

const scroller = this.scrollers[columnIndex]

const columnValue = this.columnValues[columnIndex] || []

let oldColumnActiveIndex = this.activedIndexs[columnIndex] || 0

if (!scroller || !oldColumnActiveIndex) {

return

}

if (oldColumnActiveIndex > columnValue.length - 1) {

oldColumnActiveIndex = columnValue.length - 1

}

this.$_scrollToIndex(scroller, columnIndex, oldColumnActiveIndex)

this.$set(this.activedIndexs, columnIndex, oldColumnActiveIndex)

},

$_scrollToIndex(scroller, columnIndex, itemIndex) {

const offsetTop = this.$_getColumnOffsetByIndex(itemIndex)

scroller.scrollTo(0, offsetTop)

},

$_scrollToValidIndex(scroller, columnIndex, itemIndex) {

const count = this.$_findValidIndex(columnIndex, itemIndex)

const offsetTop = this.$_getColumnOffsetByIndex(count)

scroller.scrollTo(0, this.$_scrollInZoon(scroller, offsetTop), true)

},

$_scrollInZoon(scroller, top) {

const MaxTop = scroller.getScrollMax().top

if (top < 0) {

return 0

} else if (top > MaxTop) {

return MaxTop

} else {

return top

}

},

// MARK: events handler

$_onColumnTouchStart(event, index, isMouse) {

event.preventDefault()

const scroller = this.scrollers[index]

const touches = isMouse ? [{pageX: event.pageX, pageY: event.pageY}] : event.touches

/* istanbul ignore if */

if (!scroller) {

warn(`touchstart: scroller of column ${index} is undefined`)

return

}

this.scrollPosition = isMouse ? event.pageY : event.touches[0].pageY

scroller.doTouchStart(touches, event.timeStamp)

isMouse && (this.isMouseDown = true)

},

$_onColumnTouchMove(event, index, isMouse) {

const scroller = this.scrollers[index]

const touches = isMouse ? [{pageX: event.pageX, pageY: event.pageY}] : event.touches

/* istanbul ignore if */

if (!scroller || (isMouse && !this.isMouseDown)) {

return

}

const diff = this.scrollPosition - (isMouse ? event.pageY : event.touches[0].pageY)

this.scrollDirect = diff ? diff / Math.abs(diff) : 1

scroller.doTouchMove(touches, event.timeStamp)

isMouse && (this.isMouseDown = true)

},

$_onColumnTouchEnd(event, index, isMouse) {

const scroller = this.scrollers[index]

/* istanbul ignore if */

if (!scroller || (isMouse && !this.isMouseDown)) {

return

}

scroller.doTouchEnd(event.timeStamp)

isMouse && (this.isMouseDown = false)

},

$_onColumnScrollEnd(index) {

const scroller = this.scrollers[index]

const top = scroller.getValues().top

const scrollTop = this.$_scrollInZoon(scroller, top)

const activeItemIndex = this.$_getColumnIndexByOffset(scrollTop)

const isInvalid = this.$_isColumnIndexInvalid(index, activeItemIndex)

if (isInvalid || activeItemIndex === this.activedIndexs[index]) {

isInvalid && this.$_scrollToValidIndex(scroller, index, activeItemIndex)

activeItemIndex === this.activedIndexs[index] && this.$_scrollToIndex(scroller, index, activeItemIndex)

return false

}

/* istanbul ignore next */

this.$set(this.activedIndexs, index, activeItemIndex)

/* istanbul ignore next */

this.$emit('change', index, activeItemIndex, this.getColumnValue(index))

},

// MARK: public methods

inheritPickerApi(instance, blacklist = []) {

traverse(API_LIST, api => {

/* istanbul ignore if */

if (!instance) {

return 2

} else if (~blacklist.indexOf(api)) {

return 1

}

const fn = this[api]

/* istanbul ignore else */

if (fn) {

instance[api] = fn

} else {

warn(`inheritPickerApi: Api method [${api}] is undefined`)

}

})

},

getColumnValue(index = 0) {

const activeValues = this.getColumnValues()

return activeValues[index]

},

getColumnValues() {

const data = this.columnValues

const activeIndexs = this.activedIndexs

let activeValues = []

data.forEach((item, index) => {

activeValues[index] = item[activeIndexs[index]]

})

return activeValues

},

getColumnIndex(index = 0) {

return this.activedIndexs[index]

},

getColumnIndexs() {

return this.activedIndexs

},

getColumnIndexByDefault(data, defaultIndex = [], defaultValue = [], fn = noop) {

/* istanbul ignore next */

this.$_getColumnIndexByDefault(data, defaultIndex, defaultValue, fn)

},

setColumnValues(index, values, callback = noop) {

/* istanbul ignore if */

if (index === undefined || values === undefined) {

return

}

// reset active index

if (!this.keepIndex) {

this.$set(this.activedIndexs, index, 0)

}

this.$set(this.columnValues, index, values)

this.$nextTick(() => {

// this.$_initSingleColumnScroller(index)

callback(this)

})

},

refresh(callback, startIndex = 0) {

// const _callback = () => {

// this.$_initColumnsScroller(startIndex)

// callback && callback(this)

// }

// if (microTask) {

// this.$nextTick(_callback)

// } else {

// setTimeout(_callback, 0)

// }

this.$nextTick(() => {

this.$_initColumnsScroller(startIndex)

callback && callback()

})

},

},

}

</script>

<style lang="stylus">

.md-picker-column

position relative

width 100%

padding 0 picker-padding-h

background color-bg-inverse

box-sizing border-box

transform translate3d(0, 0, 0)

.md-picker-column-container

height 100%

.md-picker-column-masker

position absolute !important

z-index 2

left picker-padding-h

right picker-padding-h

transform translate3d(0, 0, 0)

&.top

top 0

// background -webkit-gradient(linear,left bottom,left top,from(hsla(0, 0%,100%,.2)),to(hsla(0,0%,100%,1)))

hairline(bottom, picker-border-color, 0, 3px)

// border-bottom solid 1px picker-border-color

&.bottom

bottom 0

// bottom constant(safe-area-inset-bottom)

// background -webkit-gradient(linear,left top,left bottom,from(hsla(0, 0%,100%,.2)),to(hsla(0,0%,100%,1)))

hairline(top, picker-border-color, 0, 3px)

// border-top solid 1px picker-border-color

.md-picker-column-hooks

display flex

position absolute

z-index 3

absolute-pos()

padding 0 picker-padding-h

.md-picker-column-hook

display flex

flex 1

height 100%

.md-picker-column-list

display flex

height 100%

// padding 0 picker-padding-h

.md-picker-column-item

position relative

display flex

flex 1

clearfix()

overflow hidden

.column-list

position absolute

top 0

left 0

width 100%

transform-origin left top

box-sizing border-box

transform translate3d(0, 0, 0)

.column-item

float left

width 100%

padding 0 h-gap-md

box-sizing border-box

color picker-color

font-size picker-font-size

text-align center

word-ellipsis()

&.active

color picker-color-active

font-weight picker-font-weight-active

&.disabled

opacity picker-disabled-opacity

</style>