123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- 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;
- state.opened = state.opened || false;
- };
- var initRightWidth = function (newVal, oldVal, ownerInstance) {
- getState(ownerInstance);
- state.rightWidth = newVal;
- initOpen(ownerInstance);
- };
- var initLeftWidth = function (newVal, oldVal, ownerInstance) {
- getState(ownerInstance);
- state.leftWidth = newVal;
- initOpen(ownerInstance);
- };
- var initOpen = function (ownerInstance) {
- getState(ownerInstance);
- if (state.opened.constructor === 'Boolean') {
- // opened为boolen类型,判断默认打开
- if (state.opened && state.rightWidth > 0) {
- swipeMove(-state.rightWidth);
- } else if (state.opened && state.leftWidth > 0) {
- swipeMove(state.leftWidth);
- }
- }
- if (state.opened.constructor === 'Array') {
- // opened为array类型,判断默认打开,同时设定左右action时优先打开右边
- if (state.opened[1] && state.rightWidth > 0) {
- swipeMove(-state.rightWidth);
- } else if (state.opened[0] && state.leftWidth > 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) {
- if (_offset === undefined) _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 onOpenedChange = function (newVal, oldVal, ownerInstance) {
- getState(ownerInstance);
- state.opened = newVal;
- 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,
- onOpenedChange: onOpenedChange,
- };
|