367 lines
12 KiB
XML
367 lines
12 KiB
XML
function touchstart (event, ins) {
|
|
var state = ins.getState()
|
|
if ( state.isTouch || state.disableTouch ) {
|
|
return
|
|
}
|
|
state.isTouch = true
|
|
state.touchTime = 0
|
|
state.interval = true
|
|
setInterval(ins)
|
|
var touch = event.touches[0]
|
|
state.startX = touch.pageX
|
|
state.startY = touch.pageY
|
|
}
|
|
function touchmove (event, ins) {
|
|
var state = ins.getState()
|
|
if ( state.isTouch && !state.disableTouch ) {
|
|
var touch = event.touches[0]
|
|
state.offset = state.vertical ? touch.pageY - state.startY : touch.pageX - state.startX;
|
|
if (state.direction) {
|
|
var rect = ins.getBoundingClientRect()
|
|
var size = state.vertical ? rect.height : rect.width
|
|
state.offset = state.direction == 'next' ? state.offset + state.sliderFault : state.offset - state.sliderFault
|
|
if ( (state.offset > 0 && state.direction == 'next') || (state.offset < 0 && state.direction == 'prev') ) {
|
|
state.offset = 0
|
|
}
|
|
if ( Math.abs(state.offset) <= size ) {
|
|
animation(state.offset, 0, ins)
|
|
}
|
|
} else {
|
|
if ( Math.abs(state.offset) < state.sliderFault ) {
|
|
return
|
|
}
|
|
if ( state.offset < 0 ) {
|
|
if ( state.nextIndex < state.count && state.nextIndex != 0 ) {
|
|
if ( state.type != 'none' ) {state.direction = 'next'}
|
|
} else if ( state.pullupable && state.loadingState != 'loading' && state.loadingState != 'success' && state.loadingState != 'fail' ) {
|
|
state.loadingType = 'pullup'
|
|
state.offset = state.offset + state.sliderFault
|
|
pulling(state.offset, ins)
|
|
}
|
|
} else {
|
|
if ( state.prevIndex >= 0 && state.prevIndex != state.count - 1 ) {
|
|
if ( state.type != 'none' ) {state.direction = 'prev'}
|
|
} else if ( state.pulldownable && state.loadingState != 'loading' && state.loadingState != 'success' && state.loadingState != 'fail' ) {
|
|
state.loadingType = 'pulldown'
|
|
state.offset = state.offset - state.sliderFault
|
|
pulling(state.offset, ins)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function touchend (event, ins) {
|
|
touchaction(event, ins)
|
|
}
|
|
function touchcancel (event, ins) {
|
|
touchaction(event, ins)
|
|
}
|
|
function touchaction (event, ins,isFlipTo) {
|
|
var state = ins.getState()
|
|
clearInterval(ins)
|
|
if ( state.isTouch && !state.disableTouch ) {
|
|
var rect = ins.getBoundingClientRect()
|
|
var size = state.vertical ? rect.height : rect.width
|
|
var start = state.vertical ? state.startY : state.startX
|
|
if ( !state.direction && state.touchTime <= 200 && (!state.unableClickPage || state.type == 'none') && !isFlipTo ) {
|
|
//获取点击位置，判断向哪里翻页
|
|
if (start > (size / 4) * 3 && state.nextIndex < state.count && state.nextIndex != 0 ) {
|
|
state.direction = 'next'
|
|
}
|
|
if (start < (size / 4) && state.prevIndex >= 0 && state.prevIndex != state.count - 1 ) {
|
|
state.direction = 'prev'
|
|
}
|
|
}
|
|
if (state.direction) {
|
|
state.disableTouch = true
|
|
if (state.touchTime <= 200) {
|
|
var duration = state.type == 'none' ? 0 : state.duration;
|
|
var value = state.direction == 'next' ? 1 : -1;
|
|
animation(-value * size, duration, ins);
|
|
ins.setTimeout(function () {
|
|
resetShadow(ins, true)
|
|
ins.callMethod('handleFlipChange', value);
|
|
}, duration + 50)
|
|
} else {
|
|
var duration = state.type == 'none' ? 0 : state.duration;
|
|
if (Math.abs(state.offset) >= size / 4) {
|
|
var value = state.direction == 'next' ? 1 : -1;
|
|
animation(-value * size, duration, ins);
|
|
ins.setTimeout(function () {
|
|
resetShadow(ins, true)
|
|
ins.callMethod('handleFlipChange', value);
|
|
}, duration + 50)
|
|
} else {
|
|
animation(0, duration, ins);
|
|
ins.setTimeout(function () {
|
|
resetShadow(ins)
|
|
resetFlip(ins);
|
|
}, duration + 50)
|
|
}
|
|
}
|
|
} else if ( state.loadingState == 'default' ) {
|
|
resetPulling(ins)
|
|
} else if ( state.loadingState == 'ready' ) {
|
|
pullingRefresh(ins)
|
|
} else {
|
|
resetShadow(ins, false)
|
|
resetFlip(ins)
|
|
}
|
|
}
|
|
}
|
|
function propWatcher (newVal, oldVal, ins) {
|
|
ins.setTimeout(function () {
|
|
var state = ins.getState()
|
|
state.vertical = newVal.vertical
|
|
state.pulldownable = newVal.pulldownable
|
|
state.pullupable = newVal.pullupable
|
|
state.pulldownHeight = newVal.pulldownHeight
|
|
state.loadingState = newVal.loadingState
|
|
state.pullupHeight = newVal.pullupHeight
|
|
state.duration = newVal.duration
|
|
state.nextIndex = newVal.nextIndex
|
|
state.prevIndex = newVal.prevIndex
|
|
state.currentIndex = newVal.currentIndex
|
|
state.sliderFault = newVal.sliderFault
|
|
state.count = newVal.count
|
|
state.type = newVal.type
|
|
state.unableClickPage = newVal.unableClickPage
|
|
state.translate = newVal.translate
|
|
if ( oldVal && newVal.currentIndex != oldVal.currentIndex ) {
|
|
resetFlip(ins);
|
|
}
|
|
if ( oldVal && newVal.loadingState != oldVal.loadingState && state.loadingState ) {
|
|
resetPulling(ins)
|
|
ins.callMethod('resetLoading')
|
|
}
|
|
if (oldVal && newVal.flipTo != oldVal.flipTo && newVal.flipTo != 0 ) {
|
|
if ( !state.disableTouch ) {
|
|
if ( newVal.flipTo < 0 && state.prevIndex >= 0 && (state.prevIndex != state.count - 1) ) {
|
|
state.isTouch = true
|
|
state.touchTime = 0
|
|
state.direction = 'prev'
|
|
touchaction(null, ins, true)
|
|
}
|
|
if ( newVal.flipTo > 0 && state.nextIndex < state.count && state.nextIndex != 0 ) {
|
|
state.isTouch = true
|
|
state.touchTime = 0
|
|
state.direction = 'next'
|
|
touchaction(null, ins, true)
|
|
}
|
|
}
|
|
}
|
|
}, 100)
|
|
}
|
|
function setInterval (ins) {
|
|
var state = ins.getState()
|
|
state.touchTimer = ins.setTimeout(function () {
|
|
state.touchTime += 10
|
|
if ( state.interval ) {
|
|
setInterval(ins)
|
|
}
|
|
}, 10)
|
|
}
|
|
function clearInterval (ins) {
|
|
var state = ins.getState()
|
|
state.interval = false
|
|
if ( state.touchTimer ) {
|
|
ins.clearTimeout(state.touchTimer)
|
|
state.touchTimer = null
|
|
}
|
|
}
|
|
function resetShadow (ins, isChange) {
|
|
var state = ins.getState()
|
|
var direction = state.direction
|
|
if ( !direction ) {
|
|
return
|
|
}
|
|
var index = direction == 'next' ? state.currentIndex : state.prevIndex
|
|
var translate = state.translate
|
|
var rect = ins.getBoundingClientRect()
|
|
var size = state.vertical ? rect.height : rect.width;
|
|
var draw = function () {
|
|
ins.selectComponent('.yingbing-flip-item_' + index).setStyle({
|
|
'box-shadow': '',
|
|
transform: translate + '(' + (isChange ? (direction == 'next'? -size : 0) : (direction == 'next'? 0 : -size)) + 'px)',
|
|
transition: ''
|
|
})
|
|
if ( state.type == 'real' ) {
|
|
ins.selectComponent('.yingbing-flip-item-bg_' + index).setStyle({
|
|
'box-shadow': '',
|
|
transform: translate + '(' + (isChange ? (direction == 'next' ? 0 : size) : (direction == 'next' ? size : 0)) + 'px)',
|
|
transition: ''
|
|
})
|
|
}
|
|
ins.selectComponent('.yingbing-flip-item-shadow_' + index).setStyle({
|
|
'box-shadow': '',
|
|
transition: ''
|
|
})
|
|
}
|
|
ins.requestAnimationFrame(draw)
|
|
}
|
|
function resetFlip (ins) {
|
|
var state = ins.getState()
|
|
state.direction = null
|
|
state.isTouch = false
|
|
state.disableTouch = false
|
|
state.offset = 0
|
|
state.touchTime = 0
|
|
state.startX = 0
|
|
state.startY = 0
|
|
}
|
|
function animation (offset, duration, ins, noshadow) {
|
|
var state = ins.getState()
|
|
var rect = ins.getBoundingClientRect()
|
|
var size = state.vertical ? rect.height : rect.width
|
|
var translate = state.translate
|
|
var late = offset
|
|
var draw = function () {
|
|
if ( state.direction == 'prev' ) {
|
|
if ( state.prevIndex >= 0 ) {
|
|
ins.selectComponent('.yingbing-flip-item_' + state.prevIndex).setStyle({
|
|
transform: translate + '(' + (late - size) + 'px)',
|
|
'box-shadow': noshadow ? '' : state.type == 'real' ? '0 0 30px 20px rgba(0,0,0,0.4)' : state.type == 'cover' ? '0 0 10px 5px rgba(0,0,0,0.3)' : '',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
|
|
})
|
|
if ( state.type == 'real' ) {
|
|
ins.selectComponent('.yingbing-flip-item-content_' + state.prevIndex).setStyle({
|
|
transform: translate + '(' + (size-late) + 'px)',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
|
|
})
|
|
ins.selectComponent('.yingbing-flip-item-bg_' + state.prevIndex).setStyle({
|
|
transform: translate + '(' + (late) + 'px)',
|
|
'box-shadow': noshadow ? '' : '-5px 0 20px rgba(0,0,0,0.1)',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms, ' + 'boxShadow ' + duration + 'ms' : ''
|
|
})
|
|
ins.selectComponent('.yingbing-flip-item-shadow_' + state.prevIndex).setStyle({
|
|
'box-shadow': noshadow ? '' : '0 0 60px 30px rgba(0,0,0,0.4)',
|
|
transition: duration > 0 ? 'boxShadow ' + duration + 'ms' : ''
|
|
})
|
|
}
|
|
}
|
|
} else {
|
|
if ( state.nextIndex < state.count ) {
|
|
ins.selectComponent('.yingbing-flip-item_' + state.nextIndex).setStyle({
|
|
transform: translate + '(0)',
|
|
transition: ''
|
|
})
|
|
}
|
|
ins.selectComponent('.yingbing-flip-item_' + state.currentIndex).setStyle({
|
|
transform: translate + '(' + late + 'px)',
|
|
'box-shadow': noshadow ? '' : state.type == 'real' ? '0 0 30px 20px rgba(0,0,0,0.4)' : state.type == 'cover' ? '0 0 10px 5px rgba(0,0,0,0.3)' : '',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
|
|
})
|
|
if ( state.type == 'real' ) {
|
|
ins.selectComponent('.yingbing-flip-item-content_' + state.currentIndex).setStyle({
|
|
transform: translate + '(' + (-late) + 'px)',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms' : ''
|
|
})
|
|
ins.selectComponent('.yingbing-flip-item-bg_' + state.currentIndex).setStyle({
|
|
transform: translate + '(' + (late + size) + 'px)',
|
|
'box-shadow': noshadow ? '' : '-5px 0 20px rgba(0,0,0,0.1)',
|
|
transition: duration > 0 ? 'transform ' + duration + 'ms, ' + 'boxShadow ' + duration + 'ms' : ''
|
|
})
|
|
ins.selectComponent('.yingbing-flip-item-shadow_' + state.currentIndex).setStyle({
|
|
'box-shadow': noshadow ? '' : '0 0 60px 30px rgba(0,0,0,0.4)',
|
|
transition: duration > 0 ? 'boxShadow ' + duration + 'ms' : ''
|
|
})
|
|
}
|
|
}
|
|
}
|
|
ins.requestAnimationFrame(draw)
|
|
}
|
|
function pulling (offset, ins) {
|
|
var state = ins.getState()
|
|
var loadingType = state.loadingType
|
|
var translate = state.translate
|
|
var size = loadingType == 'pullup' ? state.pullupHeight : state.pulldownHeight
|
|
var late = offset
|
|
if ( Math.abs(state.offset) < size ) {
|
|
state.loadingState = 'default'
|
|
} else {
|
|
state.loadingState = 'ready'
|
|
}
|
|
var draw = function () {
|
|
var pullingItems = ins.selectAllComponents('.yingbing-flip-' + loadingType + '-item')
|
|
for ( var i = 0; i < pullingItems.length; i++ ) {
|
|
if ( pullingItems[i].hasClass('yingbing-flip-' + loadingType + '-' + state.loadingState) ) {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'visible'
|
|
})
|
|
} else {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'hidden'
|
|
})
|
|
}
|
|
}
|
|
if ( Math.abs(late) <= size ) {
|
|
ins.selectComponent('.yingbing-flip-' + loadingType).setStyle({
|
|
transform: translate + '(' + (loadingType == 'pullup' ? late + size : late - size) + 'px)',
|
|
transition: ''
|
|
})
|
|
}
|
|
}
|
|
ins.requestAnimationFrame(draw)
|
|
}
|
|
function resetPulling (ins) {
|
|
var state = ins.getState()
|
|
var loadingType = state.loadingType
|
|
var translate = state.translate
|
|
var size = loadingType == 'pullup' ? state.pullupHeight : state.pulldownHeight
|
|
var draw = function () {
|
|
var pullingItems = ins.selectAllComponents('.yingbing-flip-' + loadingType + '-item')
|
|
for ( var i = 0; i < pullingItems.length; i++ ) {
|
|
if ( pullingItems[i].hasClass('yingbing-flip-' + loadingType + '-' + state.loadingState) ) {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'visible'
|
|
})
|
|
} else {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'hidden'
|
|
})
|
|
}
|
|
}
|
|
ins.selectComponent('.yingbing-flip-' + loadingType).setStyle({
|
|
transform: translate + '(' + (loadingType == 'pullup' ? size : -size) + 'px)',
|
|
transition: 'transform .3s'
|
|
})
|
|
}
|
|
ins.requestAnimationFrame(draw)
|
|
if ( state.loadingState ) {
|
|
ins.setTimeout( function () {
|
|
state.loadingState = ''
|
|
resetPulling(ins)
|
|
}, 300)
|
|
} else {
|
|
state.loadingType = ''
|
|
resetFlip(ins)
|
|
}
|
|
}
|
|
function pullingRefresh (ins) {
|
|
var state = ins.getState()
|
|
state.loadingState = 'loading'
|
|
var loadingType = state.loadingType
|
|
var draw = function () {
|
|
var pullingItems = ins.selectAllComponents('.yingbing-flip-' + loadingType + '-item')
|
|
for ( var i = 0; i < pullingItems.length; i++ ) {
|
|
if ( pullingItems[i].hasClass('yingbing-flip-' + loadingType + '-loading') ) {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'visible'
|
|
})
|
|
} else {
|
|
pullingItems[i].setStyle({
|
|
visibility: 'hidden'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
ins.requestAnimationFrame(draw)
|
|
ins.callMethod('pullingRefresh', state.loadingType)
|
|
}
|
|
module.exports = {
|
|
touchstart: touchstart,
|
|
touchmove: touchmove,
|
|
touchend: touchend,
|
|
touchcancel: touchcancel,
|
|
propWatcher: propWatcher
|
|
} |