123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657 |
- function setTimeout(instance, cb, time) {
- if (time > 0) {
- var s = getDate().getTime()
- var fn = function () {
- if (getDate().getTime() - s > time) {
- cb && cb()
- } else
- instance.requestAnimationFrame(fn)
- }
- fn()
- }
- else
- cb && cb()
- }
- function decideSwiperDirection(startTouches, currentTouches, direction) {
-
- var toleranceShake = 30
-
- var toleranceTranslate = 10
-
- if (direction === 'horizontal') {
-
- if (Math.abs(currentTouches.y - startTouches.y) <= toleranceShake) {
-
- if (Math.abs(currentTouches.x - startTouches.x) > toleranceTranslate) {
- if (currentTouches.x - startTouches.x > 0) {
- return 'right'
- } else if (currentTouches.x - startTouches.x < 0) {
- return 'left'
- }
- }
- }
- } else if (direction === 'vertical') {
-
- if (Math.abs(currentTouches.x - startTouches.x) <= toleranceShake) {
-
- if (Math.abs(currentTouches.y - startTouches.y) > toleranceTranslate) {
- if (currentTouches.y - startTouches.y > 0) {
- return 'down'
- } else if (currentTouches.y - startTouches.y < 0) {
- return 'up'
- }
- }
- }
- }
- return ''
- }
- function updateSwiperStyle(currentTouches, instance, state) {
- var itemData = state.itemData
- var itemsInstance = state.itemsInstance
- var list = state.list
- var currentIndex = state.currentIndex
- var touchRelactive = state.touchRelactive
-
-
- if (itemData.direction === 'horizontal') {
-
- var itemAnimationWidth = state.itemAnimationWidth
-
- var translateX = currentTouches.x - touchRelactive.x
- if (currentTouches.x > itemData.windowWidth || currentTouches.x < 0) return
-
-
- if (state.direction == 'left') {
-
- instance.setStyle({
- 'transform': 'translate3d('+ translateX + 'px, 0px, 0px)',
- 'z-index': list[currentIndex].zIndex + 1,
- 'opacity': list[currentIndex].opacity
- })
-
- if (Math.abs(translateX) > itemAnimationWidth) {
- state.itemsInstance.forEach( function(itemInstance, index) {
- if (index != currentIndex) {
- var preIndex = (index == 0) ? list.length - 1 : index - 1
- var distanceRate = (Math.abs(translateX) - itemAnimationWidth) / (itemData.itemWidth - itemAnimationWidth)
- var itemTranslateX = list[index].translateX - (list[index].translateX - list[preIndex].translateX) * distanceRate
- var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
- var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
-
-
-
-
-
-
-
- itemInstance.setStyle({
- 'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
- 'z-index': list[index].zIndex,
- 'opacity': itemOpacity
- })
- }
- })
- }
- } else if (state.direction == 'right') {
- var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
-
- state.itemsInstance[preIndex].setStyle({
- 'transform': 'translate3d(-' + (itemData.itemWidth - translateX) + 'px, 0px, 0px) scale(1)',
- 'z-index': list[currentIndex].zIndex + 1,
- 'opacity': list[currentIndex].opacity
- })
-
- if (Math.abs(translateX) < itemAnimationWidth) {
- state.itemsInstance.forEach( function(itemInstance, index) {
- if (index != preIndex) {
- var replaceIndex = index == list.length - 1 ? 0 : index + 1
- var distanceRate = Math.abs(translateX) / itemAnimationWidth
- var itemTranslateX = list[index].translateX + (list[replaceIndex].translateX - list[index].translateX) * distanceRate
- var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
- var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
-
-
-
-
-
-
-
-
-
- itemInstance.setStyle({
- 'transform': 'translate3d(' + itemTranslateX + 'px, 0px, 0px) scale(' + itemScale + ')',
- 'z-index': list[index].zIndex,
- 'opacity': itemOpacity
- })
- }
- })
- }
- }
- } else if (itemData.direction === 'vertical') {
-
- var itemAnimationHeight = state.itemAnimationHeight
-
- var translateY = currentTouches.y - touchRelactive.y
- if (currentTouches.y > itemData.windowHeight || currentTouches.y < 0) return
-
-
- if (state.direction == 'up') {
-
- instance.setStyle({
- 'transform': 'translate3d(0px, '+ translateY + 'px, 0px)',
- 'z-index': list[currentIndex].zIndex + 1,
- 'opacity': list[currentIndex].opacity
- })
-
- if (Math.abs(translateY) > itemAnimationHeight) {
- state.itemsInstance.forEach( function(itemInstance, index) {
- if (index != currentIndex) {
- var preIndex = (index == 0) ? list.length - 1 : index - 1
- var distanceRate = (Math.abs(translateY) - itemAnimationHeight) / (itemData.itemHeight - itemAnimationHeight)
- var itemTranslateY = list[index].translateY - (list[index].translateY - list[preIndex].translateY) * distanceRate
- var itemScale = list[index].scale + (list[preIndex].scale - list[index].scale) * distanceRate
- var itemOpacity = list[index].opacity + (list[preIndex].opacity - list[index].opacity) * distanceRate
-
-
-
-
-
-
- itemInstance.setStyle({
- 'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
- 'z-index': list[index].zIndex,
- 'opacity': itemOpacity
-
- })
- }
- })
- }
- } else if (state.direction == 'down') {
- var preIndex = (currentIndex == 0) ? list.length - 1 : currentIndex - 1
-
- state.itemsInstance[preIndex].setStyle({
- 'transform': 'translate3d(0px, -' + (itemData.itemHeight - translateY) + 'px, 0px) scale(1)',
- 'z-index': list[currentIndex].zIndex + 1,
- 'opacity': list[currentIndex].opacity
- })
-
- if (Math.abs(translateY) < itemAnimationHeight) {
- state.itemsInstance.forEach( function(itemInstance, index) {
- if (index != preIndex) {
- var replaceIndex = index == list.length - 1 ? 0 : index + 1
- var distanceRate = Math.abs(translateY) / itemAnimationHeight
- var itemTranslateY = list[index].translateY + (list[replaceIndex].translateY - list[index].translateY) * distanceRate
- var itemScale = list[index].scale - (list[index].scale - list[replaceIndex].scale) * distanceRate
- var itemOpacity = list[index].opacity - (list[index].opacity - list[replaceIndex].opacity) * distanceRate
-
-
-
-
-
-
-
-
-
- itemInstance.setStyle({
- 'transform': 'translate3d(0px, ' + itemTranslateY + 'px, 0px) scale(' + itemScale + ')',
- 'z-index': list[index].zIndex,
- 'opacity': itemOpacity
- })
- }
- })
- }
- }
- }
- }
- function updateCurrentSwiperIndex(index, ownerInstance, state) {
- state.currentIndex = index
- ownerInstance.callMethod('changeSwiperIndex', {
- index: index
- })
- }
- function switchNextSwiper(newIndex, touches, instance, state) {
- var currentIndex = state.currentIndex
- var list = state.list
- var direction = state.itemData.direction
- var touchRelactive = state.touchRelactive || {x: 0, y: 0}
-
-
- var currentListItemData = JSON.parse(JSON.stringify(list))
-
- if (direction === 'horizontal') {
-
- var itemWidth = state.itemData.itemWidth
-
- instance.setStyle({
- 'transform': 'translate3d(-'+ itemWidth + 'px, 0px, 0px) scale(1)',
- 'z-index': list[currentIndex].zIndex + 1,
- 'opacity': list[currentIndex].opacity
- })
-
- var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
-
- setTimeout(instance, function() {
- for (var i = list.length - 1; i >= 0; i--) {
- var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
-
-
- state.itemsInstance[i].setStyle({
- 'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
- 'z-index': currentListItemData[replaceIndex].zIndex,
- 'opacity': currentListItemData[replaceIndex].opacity
- })
- state.list[i] = currentListItemData[replaceIndex]
- }
- }, time)
- } else if (direction === 'vertical') {
-
- var itemHeight = state.itemData.itemHeight
-
- instance.setStyle({
- 'transform': 'translate3d(0px, -'+ itemHeight + 'px, 0px) scale(1)',
- 'z-index': list[currentIndex].zIndex + 1,
- 'opacity': list[currentIndex].opacity
- })
-
- var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
-
- setTimeout(instance, function() {
- for (var i = list.length - 1; i >= 0; i--) {
- var replaceIndex = i - 1 < 0 ? list.length - 1 : i - 1
-
-
- state.itemsInstance[i].setStyle({
- 'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
- 'z-index': currentListItemData[replaceIndex].zIndex,
- 'opacity': currentListItemData[replaceIndex].opacity
- })
- state.list[i] = currentListItemData[replaceIndex]
- }
- }, time)
- }
- }
- function switchPrevSwiper(newIndex, touches, instance, state) {
- var currentIndex = state.currentIndex
- var list = state.list
- var direction = state.itemData.direction
- var touchRelactive = state.touchRelactive || {x: 0, y: 0}
-
- var currentListItemData = JSON.parse(JSON.stringify(list))
-
- if (direction === 'horizontal') {
-
- var itemWidth = state.itemData.itemWidth
-
- state.itemsInstance[newIndex].setStyle({
- 'transform': 'translate3d(0px, 0px, 0px) scale(1)',
- 'z-index': list[currentIndex].zIndex + 1,
- 'opacity': list[currentIndex].opacity
- })
-
- var time = Math.floor((itemWidth - Math.abs(touches.pageX - touchRelactive.x)) / itemWidth * 250)
-
-
- setTimeout(instance, function() {
- for (var i = 0; i < list.length; i++) {
- var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
- state.itemsInstance[i].setStyle({
- 'transform': 'translate3d('+ currentListItemData[replaceIndex].translateX + 'px, 0px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
- 'z-index': currentListItemData[replaceIndex].zIndex,
- 'opacity': currentListItemData[replaceIndex].opacity
- })
- state.list[i] = currentListItemData[replaceIndex]
- }
- }, time)
- } else if (direction === 'vertical') {
-
- var itemHeight = state.itemData.itemHeight
-
- state.itemsInstance[newIndex].setStyle({
- 'transform': 'translate3d(0px, 0px, 0px) scale(1)',
- 'z-index': list[currentIndex].zIndex + 1,
- 'opacity': list[currentIndex].opacity
- })
-
- var time = Math.floor((itemHeight - Math.abs(touches.pageY - touchRelactive.y)) / itemHeight * 250)
-
-
- setTimeout(instance, function() {
- for (var i = 0; i < list.length; i++) {
- var replaceIndex = (i + 1 > list.length - 1) ? 0 : i + 1
- state.itemsInstance[i].setStyle({
- 'transform': 'translate3d(0px, '+ currentListItemData[replaceIndex].translateY + 'px, 0px) scale(' + currentListItemData[replaceIndex].scale + ')',
- 'z-index': currentListItemData[replaceIndex].zIndex,
- 'opacity': currentListItemData[replaceIndex].opacity
- })
- state.list[i] = currentListItemData[replaceIndex]
- }
- }, time)
- }
- }
- function toggleSwiperAnimation(state, add) {
- if (!state.itemsInstance) return
- if (add === true) {
- state.itemsInstance.forEach(function(item, index) {
- if (!item.hasClass('tn-stack-swiper__item__transition')) {
- item.addClass('tn-stack-swiper__item__transition')
- }
- })
- } else {
- state.itemsInstance.forEach(function(item, index) {
- if (item.hasClass('tn-stack-swiper__item__transition')) {
- item.removeClass('tn-stack-swiper__item__transition')
- }
- })
- }
- }
- var itemDataObserver = function (newVal, oldVal, ownerInstance, instance) {
- var state = ownerInstance.getState()
- state.itemData = newVal
- }
- var listObserver = function(newVal, oldVal, ownerInstance, instance) {
- var state = ownerInstance.getState()
- var itemData = state.itemData
- state.itemsInstance = ownerInstance.selectAllComponents('.tn-stack-swiper__item')
-
- state.list = newVal || []
-
- state.list.forEach(function(item, index) {
- var itemInstance = state.itemsInstance[index]
- if (item && itemInstance) {
- if (itemData.direction === 'horizontal') {
- itemInstance.setStyle({
- 'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
- 'z-index': item.zIndex,
- 'opacity': item.opacity
- })
- } else if (itemData.direction === 'vertical') {
- itemInstance.setStyle({
- 'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
- 'z-index': item.zIndex,
- 'opacity': item.opacity
- })
- }
- }
- })
- }
- var swiperIndexChange = function(newVal, oldVal, ownerInstance, instance) {
- var state = ownerInstance.getState()
-
-
-
-
-
- if (oldVal < 0 || typeof oldVal == 'undefined' || state.currentIndex == newVal) {
- if (oldVal < 0 || typeof oldVal == 'undefined') {
- state.currentIndex = 0
- }
- return
- }
- state.currentIndex = newVal
-
- if (newVal > oldVal || (oldVal == state.list.length - 1 && newVal == 0)) {
-
-
-
-
- switchNextSwiper(newVal, {
- pageX: 0
- }, state.itemsInstance[oldVal], state)
- } else if (newVal < oldVal || (oldVal == 0 && newVal == state.list.length - 1)) {
-
- }
- }
- var autoplayFlagChange = function(newVal, oldVal, ownerInstance, instance) {
- var state = ownerInstance.getState()
-
- if (newVal === true) {
- toggleSwiperAnimation(state, true)
- } else {
- toggleSwiperAnimation(state, false)
- }
- }
- var touchStart = function (event, ownerInstance) {
-
- var instance = event.instance
- var dataset = instance.getDataset()
- var state = ownerInstance.getState()
-
- var itemData = state.itemData
-
-
- if (dataset.index != state.currentIndex) return
-
- var touches = event.changedTouches[0]
- if (!touches) return
-
-
- state.touchRelactive = {
- x: touches.pageX,
- y: touches.pageY
- }
-
- state.touchId = touches.identifier
-
- if (itemData.direction === 'horizontal') {
-
-
- state.itemAnimationWidth = itemData.itemWidth * (dataset.switchrate / 100)
- } else if (itemData.direction === 'vertical') {
-
-
- state.itemAnimationHeight = itemData.itemHeight * (dataset.switchrate / 100)
- }
-
-
- toggleSwiperAnimation(state, false)
-
-
- state.touching = true
- ownerInstance.callMethod('changeTouchState', {
- touching: true
- })
-
- ownerInstance.callMethod('clearAutoPlayTimer')
- }
- var touchMove = function (event, ownerInstance) {
-
- var instance = event.instance
- var dataset = instance.getDataset()
- var state = ownerInstance.getState()
- var itemData = state.itemData
-
-
- if (dataset.index != state.currentIndex) return
-
-
- if (!state.touching) return
-
- var touches = event.changedTouches[0]
- if (!touches) return
-
-
- if (state.touchId != touches.identifier) return
-
- var currentTouchRelactive = {
- x: touches.pageX,
- y: touches.pageY
- }
-
- if (!state.direction) {
- state.direction = decideSwiperDirection(state.touchRelactive, currentTouchRelactive, itemData.direction)
- }
-
- updateSwiperStyle(currentTouchRelactive, instance, state)
- }
- var touchEnd = function (event, ownerInstance) {
-
- var instance = event.instance
- var dataset = instance.getDataset()
- var state = ownerInstance.getState()
- var itemData = state.itemData
- var list = state.list
- var touchRelactive = state.touchRelactive
-
-
- if (dataset.index != state.currentIndex) return
-
-
- if (!state.touching) return
-
- var touches = event.changedTouches[0]
- if (!touches) return
-
-
- if (state.touchId != touches.identifier) return
-
-
- toggleSwiperAnimation(state, true)
-
- if (itemData.direction === 'horizontal') {
-
- var itemAnimationWidth = state.itemAnimationWidth
-
-
- if (state.direction == 'left') {
- if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
- list.forEach(function(item, index) {
- var itemInstance = state.itemsInstance[index]
- if (item && itemInstance) {
- itemInstance.setStyle({
- 'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
- 'z-index': item.zIndex
- })
- }
- })
- } else {
- var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
- switchNextSwiper(newIndex, touches, instance, state)
-
- updateCurrentSwiperIndex(newIndex, ownerInstance, state)
- }
- } else if (state.direction == 'right') {
- if (Math.abs(touches.pageX - touchRelactive.x) < itemAnimationWidth) {
-
- var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
- state.itemsInstance[preIndex].setStyle({
- 'transform': 'translate3d(-' + itemData.itemWidth + 'px, 0px, 0px) scale(1)',
- 'z-index': list[state.currentIndex].zIndex + 1,
- 'opacity': list[state.currentIndex].opacity
- })
- list.forEach(function(item, index) {
- var itemInstance = state.itemsInstance[index]
- if (item && itemInstance) {
- itemInstance.setStyle({
- 'transform': 'translate3d('+ item.translateX + 'px, 0px, 0px) scale(' + item.scale + ')',
- 'z-index': item.zIndex,
- 'opacity': item.opacity
- })
- }
- })
- } else {
- var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
- switchPrevSwiper(newIndex, touches, instance, state)
-
- updateCurrentSwiperIndex(newIndex, ownerInstance, state)
- }
- }
- } else if (itemData.direction === 'vertical') {
-
- var itemAnimationHeight = state.itemAnimationHeight
-
-
- if (state.direction == 'up') {
- if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
- list.forEach(function(item, index) {
- var itemInstance = state.itemsInstance[index]
- if (item && itemInstance) {
- itemInstance.setStyle({
- 'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
- 'z-index': item.zIndex,
- 'opacity': item.opacity
- })
- }
- })
- } else {
- var newIndex = state.currentIndex + 1 > list.length - 1 ? 0 : state.currentIndex + 1
- switchNextSwiper(newIndex, touches, instance, state)
-
- updateCurrentSwiperIndex(newIndex, ownerInstance, state)
- }
- } else if (state.direction == 'down') {
- if (Math.abs(touches.pageY - touchRelactive.y) < itemAnimationHeight) {
-
- var preIndex = (state.currentIndex == 0) ? list.length - 1 : state.currentIndex - 1
- state.itemsInstance[preIndex].setStyle({
- 'transform': 'translate3d(0px, -' + itemData.itemHeight + 'px, 0px) scale(1)',
- 'z-index': list[state.currentIndex].zIndex + 1,
- 'opacity': list[state.currentIndex].opacity
- })
- list.forEach(function(item, index) {
- var itemInstance = state.itemsInstance[index]
- if (item && itemInstance) {
- itemInstance.setStyle({
- 'transform': 'translate3d(0px, '+ item.translateY + 'px, 0px) scale(' + item.scale + ')',
- 'z-index': item.zIndex,
- 'opacity': item.opacity
- })
- }
- })
- } else {
- var newIndex = (state.currentIndex - 1 < 0) ? list.length - 1 : state.currentIndex - 1
- switchPrevSwiper(newIndex, touches, instance, state)
-
- updateCurrentSwiperIndex(newIndex, ownerInstance, state)
- }
- }
- }
-
-
- state.touchRelactive = null
- state.touching = false
- state.direction = null
- state.touchId = null
-
- ownerInstance.callMethod('changeTouchState', {
- touching: false
- })
-
- ownerInstance.callMethod('setAutoPlay')
- }
- module.exports = {
- itemDataObserver: itemDataObserver,
- listObserver: listObserver,
- swiperIndexChange: swiperIndexChange,
- autoplayFlagChange: autoplayFlagChange,
- touchStart: touchStart,
- touchMove: touchMove,
- touchEnd: touchEnd
- }
|