123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256 |
- function touchstart(event, ownerInstance) {
-
- var instance = event.instance
-
- var state = instance.getState()
- if (state.disable) return
- var touches = event.touches
-
- if (touches && touches.length > 1) return
-
- state.moving = true
-
- state.startX = touches[0].pageX
- state.startY = touches[0].pageY
- }
- function touchmove(event, ownerInstance) {
-
- var instance = event.instance
-
- var state = instance.getState()
- if (state.disabled || !state.moving) return
- var touches = event.touches
- var pageX = touches[0].pageX
- var pageY = touches[0].pageY
- var moveX = pageX - state.startX
- var moveY = pageY - state.startY
- var buttonsWidth = state.buttonsWidth
-
- if (Math.abs(moveX) > Math.abs(moveY) || Math.abs(moveX) > state.threshold) {
- event.preventDefault()
- event.stopPropagation()
- }
-
- if (Math.abs(moveX) < Math.abs(moveY)) return
-
-
-
- if (state.status === 'open') {
-
- if (moveX < 0) moveX = 0
-
- if (moveX > buttonsWidth) moveX = buttonsWidth
-
- moveSwipeAction(-buttonsWidth + moveX, instance, ownerInstance)
- } else {
-
- if (moveX > 0) moveX = 0
-
- if (Math.abs(moveX) > buttonsWidth) moveX = -buttonsWidth
-
- moveSwipeAction(moveX, instance, ownerInstance)
- }
- }
- function touchend(event, ownerInstance) {
-
- var instance = event.instance
-
- var state = instance.getState()
- if (!state.moving || state.disabled) return
- var touches = event.changedTouches ? event.changedTouches[0] : {}
- var pageX = touches.pageX
- var pageY = touches.pageY
- var moveX = pageX - state.startX
- if (state.status === 'open') {
-
- if (moveX < 0) return
-
- if (moveX === 0) {
- return closeSwipeAction(instance, ownerInstance)
- }
-
- if (Math.abs(moveX) < state.threshold) {
- openSwipeAction(instance, ownerInstance)
- } else {
-
- closeSwipeAction(instance, ownerInstance)
- }
- } else {
-
- if (moveX > 0) return
-
- if (Math.abs(moveX) < state.threshold) {
- closeSwipeAction(instance, ownerInstance)
- } else {
- openSwipeAction(instance, ownerInstance)
- }
- }
- }
- function getDuration(value) {
- if (value.toString().indexOf('s') >= 0) return value
- return value > 30 ? value + 'ms' : value + 's'
- }
- function getMoveDirection(instance, ownerInstance) {
- var state = instance.getState()
- }
- function moveSwipeAction(moveX, instance, ownerInstance) {
- var state = instance.getState()
-
- var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
- var len = buttons.length
- var previewButtonsMoveX = 0
-
- instance.requestAnimationFrame(function() {
- instance.setStyle({
-
- 'transition': 'none',
- transform: 'translateX(' + moveX + 'px)',
- '-webkit-transform': 'translateX(' + moveX + 'px)'
- })
-
- for (var i = len - 1; i >= 0; i--) {
-
- var translateX = state.buttons[i].width / state.buttonsWidth * moveX
-
- var realTranslateX = translateX + previewButtonsMoveX
- buttons[i].setStyle({
-
- 'transition': 'none',
- 'transform': 'translateX(' + realTranslateX + 'px)',
- '-webkit-transform': 'translateX(' + realTranslateX + 'px)'
- })
-
- previewButtonsMoveX += translateX
- }
- })
- }
- function openSwipeAction(instance, ownerInstance) {
- var state = instance.getState()
-
- var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
- var len = buttons.length
-
- const duration = getDuration(state.duration)
-
- var buttonsWidth = -state.buttonsWidth
- var previewButtonsMoveX = 0
- instance.requestAnimationFrame(function() {
-
- instance.setStyle({
- 'transition': 'transform ' + duration,
- 'transform': 'translateX(' + buttonsWidth + 'px)',
- '-webkit-transform': 'translateX(' + buttonsWidth + 'px)',
- })
-
- for (var i = len - 1; i >= 0; i--) {
-
- var translateX = state.buttons[i].width / state.buttonsWidth * buttonsWidth
-
- var realTranslateX = translateX + previewButtonsMoveX
- buttons[i].setStyle({
-
- 'transition': 'transform ' + duration,
- 'transform': 'translateX(' + realTranslateX + 'px)',
- '-webkit-transform': 'translateX(' + realTranslateX + 'px)'
- })
-
- previewButtonsMoveX += translateX
- }
- })
- setStatus('open', instance)
- }
- function setStatus(status, instance) {
- var state = instance.getState()
- state.status = status
- }
- function closeSwipeAction(instance, ownerInstance) {
- var state = instance.getState()
-
- var buttons = ownerInstance.selectAllComponents('.u-swipe-action-item__right__button')
- var len = buttons.length
-
- const duration = getDuration(state.duration)
- instance.requestAnimationFrame(function() {
-
- instance.setStyle({
- 'transition': 'transform ' + duration,
- 'transform': 'translateX(0px)',
- '-webkit-transform': 'translateX(0px)'
- })
-
- for (var i = len - 1; i >= 0; i--) {
- buttons[i].setStyle({
- 'transition': 'transform ' + duration,
- 'transform': 'translateX(0px)',
- '-webkit-transform': 'translateX(0px)'
- })
- }
- })
- setStatus('close', instance)
- }
- function showChange(newValue, oldValue, ownerInstance, instance) {
- var state = instance.getState()
- if (state.disabled) return
-
- if (newValue) {
- openSwipeAction(instance, ownerInstance)
- } else {
- closeSwipeAction(instance, ownerInstance)
- }
- }
- function sizeChange(newValue, oldValue, ownerInstance, instance) {
-
- var state = instance.getState()
- state.disabled = newValue.disabled
- state.duration = newValue.duration
- state.show = newValue.show
- state.threshold = newValue.threshold
- state.buttons = newValue.buttons
- var len = state.buttons.length
- if (len) {
- var buttonsWidth = 0
- var buttons = newValue.buttons
- for (var i = 0; i < len; i++) {
- buttonsWidth += buttons[i].width
- }
- }
- state.buttonsWidth = buttonsWidth
- }
- module.exports = {
- touchstart: touchstart,
- touchmove: touchmove,
- touchend: touchend,
- sizeChange: sizeChange
- }
|