var THRESHOLD = 0.3;
var MIN_DISTANCE = 10;
var owner;
var state;
var getState = function(ownerInstance) {
owner = ownerInstance;
state = owner.getState();
state.leftWidth = state.leftWidth || 0;
state.rightWidth = state.rightWidth || 0;
state.offset = state.offset || 0;
state.startOffset = state.startOffset || 0;
};
var initRightWidth = function(newVal, oldVal, ownerInstance) {
getState(ownerInstance);
state.rightWidth = newVal;
if (state.offset < 0) {
swipeMove(-state.rightWidth);
}
};
var initLeftWidth = function(newVal, oldVal, ownerInstance) {
getState(ownerInstance);
state.leftWidth = newVal;
if (state.offset > 0) {
swipeMove(state.leftWidth);
}
}
var resetTouchStatus = function() {
state.direction = '';
state.deltaX = 0;
state.deltaY = 0;
state.offsetX = 0;
state.offsetY = 0;
};
var touchMove = function(event) {
var touchPoint = event.touches[0];
state.deltaX = touchPoint.clientX - state.startX;
state.deltaY = touchPoint.clientY - state.startY;
state.offsetX = Math.abs(state.deltaX);
state.offsetY = Math.abs(state.deltaY);
state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
};
var getDirection = function(x, y) {
if (x > y && x > MIN_DISTANCE) {
return 'horizontal';
}
if (y > x && y > MIN_DISTANCE) {
return 'vertical';
}
return '';
};
var range = function(num, min, max) {
return Math.min(Math.max(num, min), max);
};
var swipeMove = function(_offset = 0) {
state.offset = range(
_offset,
-state.rightWidth,
+state.leftWidth,
);
var transform = 'translate3d(' + state.offset + 'px, 0, 0)';
var transition = state.dragging
? 'none'
: 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';
owner.selectComponent('#wrapper').setStyle({
'-webkit-transform': transform,
'-webkit-transition': transition,
'transform': transform,
'transition': transition
});
};
var close = function() {
swipeMove(0);
};
var onCloseChange = function(newVal, oldVal, ownerInstance) {
getState(ownerInstance);
if (newVal === oldVal) return;
if (newVal) {
close();
}
};
var touchStart = function(event) {
resetTouchStatus();
state.startOffset = state.offset;
var touchPoint = event.touches[0];
state.startX = touchPoint.clientX;
state.startY = touchPoint.clientY;
owner.callMethod('closeOther');
};
var startDrag = function(event, ownerInstance) {
getState(ownerInstance);
touchStart(event);
};
var onDrag = function(event, ownerInstance) {
getState(ownerInstance);
touchMove(event);
if (state.direction !== 'horizontal') {
return;
}
state.dragging = true;
swipeMove(state.startOffset + state.deltaX);
};
var open = function(position) {
var _offset = position === 'left' ? +state.leftWidth : -state.rightWidth;
owner.callMethod('open', { position: position });
swipeMove(_offset);
};
var endDrag = function(event, ownerInstance) {
getState(ownerInstance);
state.dragging = false;
// 左/右侧有可滑动区域，且当前不是已open状态，且滑动幅度超过阈值时open左/右侧（滚动到该侧的最边上）
if (+state.rightWidth > 0 && -state.startOffset < +state.rightWidth && -state.offset > +state.rightWidth * THRESHOLD) {
open('right');
} else if (+state.leftWidth > 0 && state.startOffset < +state.leftWidth && state.offset > +state.leftWidth * THRESHOLD) {
open('left');
} else {
// 仅在有发生侧滑的情况下自动关闭（由js控制是否异步关闭）
if (state.startOffset !== state.offset) {
close();
}
}
};
module.exports = {
initLeftWidth: initLeftWidth,
initRightWidth: initRightWidth,
startDrag: startDrag,
onDrag: onDrag,
endDrag: endDrag,
onCloseChange: onCloseChange
};