|
|
(function($, window, document, undefined) {
|
|
|
var CLASS_SCROLL = $.className('scroll');
|
|
|
var CLASS_SCROLLBAR = $.className('scrollbar');
|
|
|
var CLASS_INDICATOR = $.className('scrollbar-indicator');
|
|
|
var CLASS_SCROLLBAR_VERTICAL = CLASS_SCROLLBAR + '-vertical';
|
|
|
var CLASS_SCROLLBAR_HORIZONTAL = CLASS_SCROLLBAR + '-horizontal';
|
|
|
|
|
|
var CLASS_ACTIVE = $.className('active');
|
|
|
|
|
|
var ease = {
|
|
|
quadratic: {
|
|
|
style: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
|
|
fn: function(k) {
|
|
|
return k * (2 - k);
|
|
|
}
|
|
|
},
|
|
|
circular: {
|
|
|
style: 'cubic-bezier(0.1, 0.57, 0.1, 1)',
|
|
|
fn: function(k) {
|
|
|
return Math.sqrt(1 - (--k * k));
|
|
|
}
|
|
|
},
|
|
|
outCirc: {
|
|
|
style: 'cubic-bezier(0.075, 0.82, 0.165, 1)'
|
|
|
},
|
|
|
outCubic: {
|
|
|
style: 'cubic-bezier(0.165, 0.84, 0.44, 1)'
|
|
|
}
|
|
|
}
|
|
|
var Scroll = $.Class.extend({
|
|
|
init: function(element, options) {
|
|
|
this.wrapper = this.element = element;
|
|
|
this.scroller = this.wrapper.children[0];
|
|
|
this.scrollerStyle = this.scroller && this.scroller.style;
|
|
|
this.stopped = false;
|
|
|
|
|
|
this.options = $.extend(true, {
|
|
|
scrollY: true, //是否竖向滚动
|
|
|
scrollX: false, //是否横向滚动
|
|
|
startX: 0, //初始化时滚动至x
|
|
|
startY: 0, //初始化时滚动至y
|
|
|
|
|
|
indicators: true, //是否显示滚动条
|
|
|
stopPropagation: false,
|
|
|
hardwareAccelerated: true,
|
|
|
fixedBadAndorid: false,
|
|
|
preventDefaultException: {
|
|
|
tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/
|
|
|
},
|
|
|
momentum: true,
|
|
|
|
|
|
snapX: 0.5, //横向切换距离(以当前容器宽度为基准)
|
|
|
snap: false, //图片轮播，拖拽式选项卡
|
|
|
|
|
|
bounce: true, //是否启用回弹
|
|
|
bounceTime: 500, //回弹动画时间
|
|
|
bounceEasing: ease.outCirc, //回弹动画曲线
|
|
|
|
|
|
scrollTime: 500,
|
|
|
scrollEasing: ease.outCubic, //轮播动画曲线
|
|
|
|
|
|
directionLockThreshold: 5,
|
|
|
|
|
|
parallaxElement: false, //视差元素
|
|
|
parallaxRatio: 0.5
|
|
|
}, options);
|
|
|
|
|
|
this.x = 0;
|
|
|
this.y = 0;
|
|
|
this.translateZ = this.options.hardwareAccelerated ? ' translateZ(0)' : '';
|
|
|
|
|
|
this._init();
|
|
|
if (this.scroller) {
|
|
|
this.refresh();
|
|
|
// if (this.options.startX !== 0 || this.options.startY !== 0) { //需要判断吗？后续根据实际情况再看看
|
|
|
this.scrollTo(this.options.startX, this.options.startY);
|
|
|
// }
|
|
|
}
|
|
|
},
|
|
|
_init: function() {
|
|
|
this._initParallax();
|
|
|
this._initIndicators();
|
|
|
this._initEvent();
|
|
|
},
|
|
|
_initParallax: function() {
|
|
|
if (this.options.parallaxElement) {
|
|
|
this.parallaxElement = document.querySelector(this.options.parallaxElement);
|
|
|
this.parallaxStyle = this.parallaxElement.style;
|
|
|
this.parallaxHeight = this.parallaxElement.offsetHeight;
|
|
|
this.parallaxImgStyle = this.parallaxElement.querySelector('img').style;
|
|
|
}
|
|
|
},
|
|
|
_initIndicators: function() {
|
|
|
var self = this;
|
|
|
self.indicators = [];
|
|
|
if (!this.options.indicators) {
|
|
|
return;
|
|
|
}
|
|
|
var indicators = [],
|
|
|
indicator;
|
|
|
|
|
|
// Vertical scrollbar
|
|
|
if (self.options.scrollY) {
|
|
|
indicator = {
|
|
|
el: this._createScrollBar(CLASS_SCROLLBAR_VERTICAL),
|
|
|
listenX: false
|
|
|
};
|
|
|
|
|
|
this.wrapper.appendChild(indicator.el);
|
|
|
indicators.push(indicator);
|
|
|
}
|
|
|
|
|
|
// Horizontal scrollbar
|
|
|
if (this.options.scrollX) {
|
|
|
indicator = {
|
|
|
el: this._createScrollBar(CLASS_SCROLLBAR_HORIZONTAL),
|
|
|
listenY: false
|
|
|
};
|
|
|
|
|
|
this.wrapper.appendChild(indicator.el);
|
|
|
indicators.push(indicator);
|
|
|
}
|
|
|
|
|
|
for (var i = indicators.length; i--;) {
|
|
|
this.indicators.push(new Indicator(this, indicators[i]));
|
|
|
}
|
|
|
|
|
|
},
|
|
|
_initSnap: function() {
|
|
|
this.currentPage = {};
|
|
|
this.pages = [];
|
|
|
var snaps = this.snaps;
|
|
|
var length = snaps.length;
|
|
|
var m = 0;
|
|
|
var n = -1;
|
|
|
var x = 0;
|
|
|
var leftX = 0;
|
|
|
var rightX = 0;
|
|
|
var snapX = 0;
|
|
|
for (var i = 0; i < length; i++) {
|
|
|
var snap = snaps[i];
|
|
|
var offsetLeft = snap.offsetLeft;
|
|
|
var offsetWidth = snap.offsetWidth;
|
|
|
if (i === 0 || offsetLeft <= snaps[i - 1].offsetLeft) {
|
|
|
m = 0;
|
|
|
n++;
|
|
|
}
|
|
|
if (!this.pages[m]) {
|
|
|
this.pages[m] = [];
|
|
|
}
|
|
|
x = this._getSnapX(offsetLeft);
|
|
|
snapX = Math.round((offsetWidth) * this.options.snapX);
|
|
|
leftX = x - snapX;
|
|
|
rightX = x - offsetWidth + snapX;
|
|
|
this.pages[m][n] = {
|
|
|
x: x,
|
|
|
leftX: leftX,
|
|
|
rightX: rightX,
|
|
|
pageX: m,
|
|
|
element: snap
|
|
|
}
|
|
|
if (snap.classList.contains(CLASS_ACTIVE)) {
|
|
|
this.currentPage = this.pages[m][0];
|
|
|
}
|
|
|
if (x >= this.maxScrollX) {
|
|
|
m++;
|
|
|
}
|
|
|
}
|
|
|
this.options.startX = this.currentPage.x || 0;
|
|
|
},
|
|
|
_getSnapX: function(offsetLeft) {
|
|
|
return Math.max(Math.min(0, -offsetLeft + (this.wrapperWidth / 2)), this.maxScrollX);
|
|
|
},
|
|
|
_gotoPage: function(index) {
|
|
|
this.currentPage = this.pages[Math.min(index, this.pages.length - 1)][0];
|
|
|
for (var i = 0, len = this.snaps.length; i < len; i++) {
|
|
|
if (i === index) {
|
|
|
this.snaps[i].classList.add(CLASS_ACTIVE);
|
|
|
} else {
|
|
|
this.snaps[i].classList.remove(CLASS_ACTIVE);
|
|
|
}
|
|
|
}
|
|
|
this.scrollTo(this.currentPage.x, 0, this.options.scrollTime);
|
|
|
},
|
|
|
_nearestSnap: function(x) {
|
|
|
if (!this.pages.length) {
|
|
|
return {
|
|
|
x: 0,
|
|
|
pageX: 0
|
|
|
};
|
|
|
}
|
|
|
var i = 0;
|
|
|
var length = this.pages.length;
|
|
|
if (x > 0) {
|
|
|
x = 0;
|
|
|
} else if (x < this.maxScrollX) {
|
|
|
x = this.maxScrollX;
|
|
|
}
|
|
|
for (; i < length; i++) {
|
|
|
var nearestX = this.direction === 'left' ? this.pages[i][0].leftX : this.pages[i][0].rightX;
|
|
|
if (x >= nearestX) {
|
|
|
return this.pages[i][0];
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
x: 0,
|
|
|
pageX: 0
|
|
|
};
|
|
|
},
|
|
|
_initEvent: function(detach) {
|
|
|
var action = detach ? 'removeEventListener' : 'addEventListener';
|
|
|
window[action]('orientationchange', this);
|
|
|
window[action]('resize', this);
|
|
|
|
|
|
this.scroller[action]('webkitTransitionEnd', this);
|
|
|
|
|
|
this.wrapper[action]($.EVENT_START, this);
|
|
|
this.wrapper[action]($.EVENT_CANCEL, this);
|
|
|
this.wrapper[action]($.EVENT_END, this);
|
|
|
this.wrapper[action]('drag', this);
|
|
|
this.wrapper[action]('dragend', this);
|
|
|
this.wrapper[action]('flick', this);
|
|
|
this.wrapper[action]('scrollend', this);
|
|
|
if (this.options.scrollX) {
|
|
|
this.wrapper[action]('swiperight', this);
|
|
|
}
|
|
|
var segmentedControl = this.wrapper.querySelector($.classSelector('.segmented-control'));
|
|
|
if (segmentedControl) { //靠，这个bug排查了一下午，阻止hash跳转，一旦hash跳转会导致可拖拽选项卡的tab不见
|
|
|
mui(segmentedControl)[detach ? 'off' : 'on']('click', 'a', $.preventDefault);
|
|
|
}
|
|
|
|
|
|
this.wrapper[action]('scrollstart', this);
|
|
|
this.wrapper[action]('refresh', this);
|
|
|
},
|
|
|
_handleIndicatorScrollend: function() {
|
|
|
this.indicators.map(function(indicator) {
|
|
|
indicator.fade();
|
|
|
});
|
|
|
},
|
|
|
_handleIndicatorScrollstart: function() {
|
|
|
this.indicators.map(function(indicator) {
|
|
|
indicator.fade(1);
|
|
|
});
|
|
|
},
|
|
|
_handleIndicatorRefresh: function() {
|
|
|
this.indicators.map(function(indicator) {
|
|
|
indicator.refresh();
|
|
|
});
|
|
|
},
|
|
|
handleEvent: function(e) {
|
|
|
if (this.stopped) {
|
|
|
this.resetPosition();
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
switch (e.type) {
|
|
|
case $.EVENT_START:
|
|
|
this._start(e);
|
|
|
break;
|
|
|
case 'drag':
|
|
|
this.options.stopPropagation && e.stopPropagation();
|
|
|
this._drag(e);
|
|
|
break;
|
|
|
case 'dragend':
|
|
|
case 'flick':
|
|
|
this.options.stopPropagation && e.stopPropagation();
|
|
|
this._flick(e);
|
|
|
break;
|
|
|
case $.EVENT_CANCEL:
|
|
|
case $.EVENT_END:
|
|
|
this._end(e);
|
|
|
break;
|
|
|
case 'webkitTransitionEnd':
|
|
|
this.transitionTimer && this.transitionTimer.cancel();
|
|
|
this._transitionEnd(e);
|
|
|
break;
|
|
|
case 'scrollstart':
|
|
|
this._handleIndicatorScrollstart(e);
|
|
|
break;
|
|
|
case 'scrollend':
|
|
|
this._handleIndicatorScrollend(e);
|
|
|
this._scrollend(e);
|
|
|
e.stopPropagation();
|
|
|
break;
|
|
|
case 'orientationchange':
|
|
|
case 'resize':
|
|
|
this._resize();
|
|
|
break;
|
|
|
case 'swiperight':
|
|
|
e.stopPropagation();
|
|
|
break;
|
|
|
case 'refresh':
|
|
|
this._handleIndicatorRefresh(e);
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
},
|
|
|
_start: function(e) {
|
|
|
this.moved = this.needReset = false;
|
|
|
this._transitionTime();
|
|
|
if (this.isInTransition) {
|
|
|
this.needReset = true;
|
|
|
this.isInTransition = false;
|
|
|
var pos = $.parseTranslateMatrix($.getStyles(this.scroller, 'webkitTransform'));
|
|
|
this.setTranslate(Math.round(pos.x), Math.round(pos.y));
|
|
|
// this.resetPosition(); //reset
|
|
|
$.trigger(this.scroller, 'scrollend', this);
|
|
|
// e.stopPropagation();
|
|
|
e.preventDefault();
|
|
|
}
|
|
|
this.reLayout();
|
|
|
$.trigger(this.scroller, 'beforescrollstart', this);
|
|
|
},
|
|
|
_getDirectionByAngle: function(angle) {
|
|
|
if (angle < -80 && angle > -100) {
|
|
|
return 'up';
|
|
|
} else if (angle >= 80 && angle < 100) {
|
|
|
return 'down';
|
|
|
} else if (angle >= 170 || angle <= -170) {
|
|
|
return 'left';
|
|
|
} else if (angle >= -35 && angle <= 10) {
|
|
|
return 'right';
|
|
|
}
|
|
|
return null;
|
|
|
},
|
|
|
_drag: function(e) {
|
|
|
// if (this.needReset) {
|
|
|
// e.stopPropagation(); //disable parent drag(nested scroller)
|
|
|
// return;
|
|
|
// }
|
|
|
var detail = e.detail;
|
|
|
if (this.options.scrollY || detail.direction === 'up' || detail.direction === 'down') { //如果是竖向滚动或手势方向是上或下
|
|
|
//ios8 hack
|
|
|
if ($.os.ios && parseFloat($.os.version) >= 8) { //多webview时，离开当前webview会导致后续touch事件不触发
|
|
|
var clientY = detail.gesture.touches[0].clientY;
|
|
|
//下拉刷新 or 上拉加载
|
|
|
if ((clientY + 10) > window.innerHeight || clientY < 10) {
|
|
|
this.resetPosition(this.options.bounceTime);
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
var isPreventDefault = isReturn = false;
|
|
|
var direction = this._getDirectionByAngle(detail.angle);
|
|
|
if (detail.direction === 'left' || detail.direction === 'right') {
|
|
|
if (this.options.scrollX) {
|
|
|
isPreventDefault = true;
|
|
|
if (!this.moved) { //识别角度(该角度导致轮播不灵敏)
|
|
|
// if (direction !== 'left' && direction !== 'right') {
|
|
|
// isReturn = true;
|
|
|
// } else {
|
|
|
$.gestures.session.lockDirection = true; //锁定方向
|
|
|
$.gestures.session.startDirection = detail.direction;
|
|
|
// }
|
|
|
}
|
|
|
} else if (this.options.scrollY && !this.moved) {
|
|
|
isReturn = true;
|
|
|
}
|
|
|
} else if (detail.direction === 'up' || detail.direction === 'down') {
|
|
|
if (this.options.scrollY) {
|
|
|
isPreventDefault = true;
|
|
|
// if (!this.moved) { //识别角度,竖向滚动似乎没必要进行小角度验证
|
|
|
// if (direction !== 'up' && direction !== 'down') {
|
|
|
// isReturn = true;
|
|
|
// }
|
|
|
// }
|
|
|
if (!this.moved) {
|
|
|
$.gestures.session.lockDirection = true; //锁定方向
|
|
|
$.gestures.session.startDirection = detail.direction;
|
|
|
}
|
|
|
} else if (this.options.scrollX && !this.moved) {
|
|
|
isReturn = true;
|
|
|
}
|
|
|
} else {
|
|
|
isReturn = true;
|
|
|
}
|
|
|
if (this.moved || isPreventDefault) {
|
|
|
e.stopPropagation(); //阻止冒泡(scroll类嵌套)
|
|
|
detail.gesture && detail.gesture.preventDefault();
|
|
|
}
|
|
|
if (isReturn) { //禁止非法方向滚动
|
|
|
return;
|
|
|
}
|
|
|
if (!this.moved) {
|
|
|
$.trigger(this.scroller, 'scrollstart', this);
|
|
|
} else {
|
|
|
e.stopPropagation(); //move期间阻止冒泡(scroll嵌套)
|
|
|
}
|
|
|
var deltaX = 0;
|
|
|
var deltaY = 0;
|
|
|
if (!this.moved) { //start
|
|
|
deltaX = detail.deltaX;
|
|
|
deltaY = detail.deltaY;
|
|
|
} else { //move
|
|
|
deltaX = detail.deltaX - $.gestures.session.prevTouch.deltaX;
|
|
|
deltaY = detail.deltaY - $.gestures.session.prevTouch.deltaY;
|
|
|
}
|
|
|
var absDeltaX = Math.abs(detail.deltaX);
|
|
|
var absDeltaY = Math.abs(detail.deltaY);
|
|
|
if (absDeltaX > absDeltaY + this.options.directionLockThreshold) {
|
|
|
deltaY = 0;
|
|
|
} else if (absDeltaY >= absDeltaX + this.options.directionLockThreshold) {
|
|
|
deltaX = 0;
|
|
|
}
|
|
|
|
|
|
deltaX = this.hasHorizontalScroll ? deltaX : 0;
|
|
|
deltaY = this.hasVerticalScroll ? deltaY : 0;
|
|
|
var newX = this.x + deltaX;
|
|
|
var newY = this.y + deltaY;
|
|
|
// Slow down if outside of the boundaries
|
|
|
if (newX > 0 || newX < this.maxScrollX) {
|
|
|
newX = this.options.bounce ? this.x + deltaX / 3 : newX > 0 ? 0 : this.maxScrollX;
|
|
|
}
|
|
|
if (newY > 0 || newY < this.maxScrollY) {
|
|
|
newY = this.options.bounce ? this.y + deltaY / 3 : newY > 0 ? 0 : this.maxScrollY;
|
|
|
}
|
|
|
|
|
|
if (!this.requestAnimationFrame) {
|
|
|
this._updateTranslate();
|
|
|
}
|
|
|
this.direction = detail.deltaX > 0 ? 'right' : 'left';
|
|
|
this.moved = true;
|
|
|
this.x = newX;
|
|
|
this.y = newY;
|
|
|
$.trigger(this.scroller, 'scroll', this);
|
|
|
},
|
|
|
_flick: function(e) {
|
|
|
// if (!this.moved || this.needReset) {
|
|
|
// return;
|
|
|
// }
|
|
|
if (!this.moved) {
|
|
|
return;
|
|
|
}
|
|
|
e.stopPropagation();
|
|
|
var detail = e.detail;
|
|
|
this._clearRequestAnimationFrame();
|
|
|
if (e.type === 'dragend' && detail.flick) { //dragend
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var newX = Math.round(this.x);
|
|
|
var newY = Math.round(this.y);
|
|
|
|
|
|
this.isInTransition = false;
|
|
|
// reset if we are outside of the boundaries
|
|
|
if (this.resetPosition(this.options.bounceTime)) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
this.scrollTo(newX, newY); // ensures that the last position is rounded
|
|
|
|
|
|
if (e.type === 'dragend') { //dragend
|
|
|
$.trigger(this.scroller, 'scrollend', this);
|
|
|
return;
|
|
|
}
|
|
|
var time = 0;
|
|
|
var easing = '';
|
|
|
// start momentum animation if needed
|
|
|
if (this.options.momentum && detail.flickTime < 300) {
|
|
|
momentumX = this.hasHorizontalScroll ? this._momentum(this.x, detail.flickDistanceX, detail.flickTime, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options.deceleration) : {
|
|
|
destination: newX,
|
|
|
duration: 0
|
|
|
};
|
|
|
momentumY = this.hasVerticalScroll ? this._momentum(this.y, detail.flickDistanceY, detail.flickTime, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options.deceleration) : {
|
|
|
destination: newY,
|
|
|
duration: 0
|
|
|
};
|
|
|
newX = momentumX.destination;
|
|
|
newY = momentumY.destination;
|
|
|
time = Math.max(momentumX.duration, momentumY.duration);
|
|
|
this.isInTransition = true;
|
|
|
}
|
|
|
|
|
|
if (newX != this.x || newY != this.y) {
|
|
|
if (newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY) {
|
|
|
easing = ease.quadratic;
|
|
|
}
|
|
|
this.scrollTo(newX, newY, time, easing);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
$.trigger(this.scroller, 'scrollend', this);
|
|
|
// e.stopPropagation();
|
|
|
},
|
|
|
_end: function(e) {
|
|
|
this.needReset = false;
|
|
|
if ((!this.moved && this.needReset) || e.type === $.EVENT_CANCEL) {
|
|
|
this.resetPosition();
|
|
|
}
|
|
|
},
|
|
|
_transitionEnd: function(e) {
|
|
|
if (e.target != this.scroller || !this.isInTransition) {
|
|
|
return;
|
|
|
}
|
|
|
this._transitionTime();
|
|
|
if (!this.resetPosition(this.options.bounceTime)) {
|
|
|
this.isInTransition = false;
|
|
|
$.trigger(this.scroller, 'scrollend', this);
|
|
|
}
|
|
|
},
|
|
|
_scrollend: function(e) {
|
|
|
if ((this.y === 0 && this.maxScrollY === 0) || (Math.abs(this.y) > 0 && this.y <= this.maxScrollY)) {
|
|
|
$.trigger(this.scroller, 'scrollbottom', this);
|
|
|
}
|
|
|
},
|
|
|
_resize: function() {
|
|
|
var that = this;
|
|
|
clearTimeout(that.resizeTimeout);
|
|
|
that.resizeTimeout = setTimeout(function() {
|
|
|
that.refresh();
|
|
|
}, that.options.resizePolling);
|
|
|
},
|
|
|
_transitionTime: function(time) {
|
|
|
time = time || 0;
|
|
|
this.scrollerStyle['webkitTransitionDuration'] = time + 'ms';
|
|
|
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
|
|
|
this.parallaxStyle['webkitTransitionDuration'] = time + 'ms';
|
|
|
}
|
|
|
if (this.options.fixedBadAndorid && !time && $.os.isBadAndroid) {
|
|
|
this.scrollerStyle['webkitTransitionDuration'] = '0.001s';
|
|
|
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
|
|
|
this.parallaxStyle['webkitTransitionDuration'] = '0.001s';
|
|
|
}
|
|
|
}
|
|
|
if (this.indicators) {
|
|
|
for (var i = this.indicators.length; i--;) {
|
|
|
this.indicators[i].transitionTime(time);
|
|
|
}
|
|
|
}
|
|
|
if (time) { //自定义timer，保证webkitTransitionEnd始终触发
|
|
|
this.transitionTimer && this.transitionTimer.cancel();
|
|
|
this.transitionTimer = $.later(function() {
|
|
|
$.trigger(this.scroller, 'webkitTransitionEnd');
|
|
|
}, time + 100, this);
|
|
|
}
|
|
|
},
|
|
|
_transitionTimingFunction: function(easing) {
|
|
|
this.scrollerStyle['webkitTransitionTimingFunction'] = easing;
|
|
|
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
|
|
|
this.parallaxStyle['webkitTransitionDuration'] = easing;
|
|
|
}
|
|
|
if (this.indicators) {
|
|
|
for (var i = this.indicators.length; i--;) {
|
|
|
this.indicators[i].transitionTimingFunction(easing);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
_translate: function(x, y) {
|
|
|
this.x = x;
|
|
|
this.y = y;
|
|
|
},
|
|
|
_clearRequestAnimationFrame: function() {
|
|
|
if (this.requestAnimationFrame) {
|
|
|
cancelAnimationFrame(this.requestAnimationFrame);
|
|
|
this.requestAnimationFrame = null;
|
|
|
}
|
|
|
},
|
|
|
_updateTranslate: function() {
|
|
|
var self = this;
|
|
|
if (self.x !== self.lastX || self.y !== self.lastY) {
|
|
|
self.setTranslate(self.x, self.y);
|
|
|
}
|
|
|
self.requestAnimationFrame = requestAnimationFrame(function() {
|
|
|
self._updateTranslate();
|
|
|
});
|
|
|
},
|
|
|
_createScrollBar: function(clazz) {
|
|
|
var scrollbar = document.createElement('div');
|
|
|
var indicator = document.createElement('div');
|
|
|
scrollbar.className = CLASS_SCROLLBAR + ' ' + clazz;
|
|
|
indicator.className = CLASS_INDICATOR;
|
|
|
scrollbar.appendChild(indicator);
|
|
|
if (clazz === CLASS_SCROLLBAR_VERTICAL) {
|
|
|
this.scrollbarY = scrollbar;
|
|
|
this.scrollbarIndicatorY = indicator;
|
|
|
} else if (clazz === CLASS_SCROLLBAR_HORIZONTAL) {
|
|
|
this.scrollbarX = scrollbar;
|
|
|
this.scrollbarIndicatorX = indicator;
|
|
|
}
|
|
|
this.wrapper.appendChild(scrollbar);
|
|
|
return scrollbar;
|
|
|
},
|
|
|
_preventDefaultException: function(el, exceptions) {
|
|
|
for (var i in exceptions) {
|
|
|
if (exceptions[i].test(el[i])) {
|
|
|
return true;
|
|
|
}
|
|
|
}
|
|
|
return false;
|
|
|
},
|
|
|
_reLayout: function() {
|
|
|
if (!this.hasHorizontalScroll) {
|
|
|
this.maxScrollX = 0;
|
|
|
this.scrollerWidth = this.wrapperWidth;
|
|
|
}
|
|
|
|
|
|
if (!this.hasVerticalScroll) {
|
|
|
this.maxScrollY = 0;
|
|
|
this.scrollerHeight = this.wrapperHeight;
|
|
|
}
|
|
|
|
|
|
this.indicators.map(function(indicator) {
|
|
|
indicator.refresh();
|
|
|
});
|
|
|
|
|
|
//以防slider类嵌套使用
|
|
|
if (this.options.snap && typeof this.options.snap === 'string') {
|
|
|
var items = this.scroller.querySelectorAll(this.options.snap);
|
|
|
this.itemLength = 0;
|
|
|
this.snaps = [];
|
|
|
for (var i = 0, len = items.length; i < len; i++) {
|
|
|
var item = items[i];
|
|
|
if (item.parentNode === this.scroller) {
|
|
|
this.itemLength++;
|
|
|
this.snaps.push(item);
|
|
|
}
|
|
|
}
|
|
|
this._initSnap(); //需要每次都_initSnap么。其实init的时候执行一次，后续resize的时候执行一次就行了吧.先这么做吧，如果影响性能，再调整
|
|
|
}
|
|
|
},
|
|
|
_momentum: function(current, distance, time, lowerMargin, wrapperSize, deceleration) {
|
|
|
var speed = parseFloat(Math.abs(distance) / time),
|
|
|
destination,
|
|
|
duration;
|
|
|
|
|
|
deceleration = deceleration === undefined ? 0.0006 : deceleration;
|
|
|
destination = current + (speed * speed) / (2 * deceleration) * (distance < 0 ? -1 : 1);
|
|
|
duration = speed / deceleration;
|
|
|
if (destination < lowerMargin) {
|
|
|
destination = wrapperSize ? lowerMargin - (wrapperSize / 2.5 * (speed / 8)) : lowerMargin;
|
|
|
distance = Math.abs(destination - current);
|
|
|
duration = distance / speed;
|
|
|
} else if (destination > 0) {
|
|
|
destination = wrapperSize ? wrapperSize / 2.5 * (speed / 8) : 0;
|
|
|
distance = Math.abs(current) + destination;
|
|
|
duration = distance / speed;
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
destination: Math.round(destination),
|
|
|
duration: duration
|
|
|
};
|
|
|
},
|
|
|
_getTranslateStr: function(x, y) {
|
|
|
if (this.options.hardwareAccelerated) {
|
|
|
return 'translate3d(' + x + 'px,' + y + 'px,0px) ' + this.translateZ;
|
|
|
}
|
|
|
return 'translate(' + x + 'px,' + y + 'px) ';
|
|
|
},
|
|
|
//API
|
|
|
setStopped: function(stopped) {
|
|
|
this.stopped = !!stopped;
|
|
|
},
|
|
|
setTranslate: function(x, y) {
|
|
|
this.x = x;
|
|
|
this.y = y;
|
|
|
this.scrollerStyle['webkitTransform'] = this._getTranslateStr(x, y);
|
|
|
if (this.parallaxElement && this.options.scrollY) { //目前仅支持竖向视差效果
|
|
|
var parallaxY = y * this.options.parallaxRatio;
|
|
|
var scale = 1 + parallaxY / ((this.parallaxHeight - parallaxY) / 2);
|
|
|
if (scale > 1) {
|
|
|
this.parallaxImgStyle['opacity'] = 1 - parallaxY / 100 * this.options.parallaxRatio;
|
|
|
this.parallaxStyle['webkitTransform'] = this._getTranslateStr(0, -parallaxY) + ' scale(' + scale + ',' + scale + ')';
|
|
|
} else {
|
|
|
this.parallaxImgStyle['opacity'] = 1;
|
|
|
this.parallaxStyle['webkitTransform'] = this._getTranslateStr(0, -1) + ' scale(1,1)';
|
|
|
}
|
|
|
}
|
|
|
if (this.indicators) {
|
|
|
for (var i = this.indicators.length; i--;) {
|
|
|
this.indicators[i].updatePosition();
|
|
|
}
|
|
|
}
|
|
|
this.lastX = this.x;
|
|
|
this.lastY = this.y;
|
|
|
$.trigger(this.scroller, 'scroll', this);
|
|
|
},
|
|
|
reLayout: function() {
|
|
|
this.wrapper.offsetHeight;
|
|
|
|
|
|
var paddingLeft = parseFloat($.getStyles(this.wrapper, 'padding-left')) || 0;
|
|
|
var paddingRight = parseFloat($.getStyles(this.wrapper, 'padding-right')) || 0;
|
|
|
var paddingTop = parseFloat($.getStyles(this.wrapper, 'padding-top')) || 0;
|
|
|
var paddingBottom = parseFloat($.getStyles(this.wrapper, 'padding-bottom')) || 0;
|
|
|
|
|
|
var clientWidth = this.wrapper.clientWidth;
|
|
|
var clientHeight = this.wrapper.clientHeight;
|
|
|
|
|
|
this.scrollerWidth = this.scroller.offsetWidth;
|
|
|
this.scrollerHeight = this.scroller.offsetHeight;
|
|
|
|
|
|
this.wrapperWidth = clientWidth - paddingLeft - paddingRight;
|
|
|
this.wrapperHeight = clientHeight - paddingTop - paddingBottom;
|
|
|
|
|
|
this.maxScrollX = Math.min(this.wrapperWidth - this.scrollerWidth, 0);
|
|
|
this.maxScrollY = Math.min(this.wrapperHeight - this.scrollerHeight, 0);
|
|
|
this.hasHorizontalScroll = this.options.scrollX && this.maxScrollX < 0;
|
|
|
this.hasVerticalScroll = this.options.scrollY && this.maxScrollY < 0;
|
|
|
this._reLayout();
|
|
|
},
|
|
|
resetPosition: function(time) {
|
|
|
var x = this.x,
|
|
|
y = this.y;
|
|
|
|
|
|
time = time || 0;
|
|
|
if (!this.hasHorizontalScroll || this.x > 0) {
|
|
|
x = 0;
|
|
|
} else if (this.x < this.maxScrollX) {
|
|
|
x = this.maxScrollX;
|
|
|
}
|
|
|
|
|
|
if (!this.hasVerticalScroll || this.y > 0) {
|
|
|
y = 0;
|
|
|
} else if (this.y < this.maxScrollY) {
|
|
|
y = this.maxScrollY;
|
|
|
}
|
|
|
|
|
|
if (x == this.x && y == this.y) {
|
|
|
return false;
|
|
|
}
|
|
|
this.scrollTo(x, y, time, this.options.scrollEasing);
|
|
|
|
|
|
return true;
|
|
|
},
|
|
|
_reInit: function() {
|
|
|
var groups = this.wrapper.querySelectorAll('.' + CLASS_SCROLL);
|
|
|
for (var i = 0, len = groups.length; i < len; i++) {
|
|
|
if (groups[i].parentNode === this.wrapper) {
|
|
|
this.scroller = groups[i];
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
this.scrollerStyle = this.scroller && this.scroller.style;
|
|
|
},
|
|
|
refresh: function() {
|
|
|
this._reInit();
|
|
|
this.reLayout();
|
|
|
$.trigger(this.scroller, 'refresh', this);
|
|
|
this.resetPosition();
|
|
|
},
|
|
|
scrollTo: function(x, y, time, easing) {
|
|
|
var easing = easing || ease.circular;
|
|
|
// this.isInTransition = time > 0 && (this.lastX != x || this.lastY != y);
|
|
|
//暂不严格判断x,y，否则会导致部分版本上不正常触发轮播
|
|
|
this.isInTransition = time > 0;
|
|
|
if (this.isInTransition) {
|
|
|
this._clearRequestAnimationFrame();
|
|
|
this._transitionTimingFunction(easing.style);
|
|
|
this._transitionTime(time);
|
|
|
this.setTranslate(x, y);
|
|
|
} else {
|
|
|
this.setTranslate(x, y);
|
|
|
}
|
|
|
|
|
|
},
|
|
|
scrollToBottom: function(time, easing) {
|
|
|
time = time || this.options.scrollTime;
|
|
|
this.scrollTo(0, this.maxScrollY, time, easing);
|
|
|
},
|
|
|
gotoPage: function(index) {
|
|
|
this._gotoPage(index);
|
|
|
},
|
|
|
destroy: function() {
|
|
|
this._initEvent(true); //detach
|
|
|
delete $.data[this.wrapper.getAttribute('data-scroll')];
|
|
|
this.wrapper.setAttribute('data-scroll', '');
|
|
|
}
|
|
|
});
|
|
|
//Indicator
|
|
|
var Indicator = function(scroller, options) {
|
|
|
this.wrapper = typeof options.el == 'string' ? document.querySelector(options.el) : options.el;
|
|
|
this.wrapperStyle = this.wrapper.style;
|
|
|
this.indicator = this.wrapper.children[0];
|
|
|
this.indicatorStyle = this.indicator.style;
|
|
|
this.scroller = scroller;
|
|
|
|
|
|
this.options = $.extend({
|
|
|
listenX: true,
|
|
|
listenY: true,
|
|
|
fade: false,
|
|
|
speedRatioX: 0,
|
|
|
speedRatioY: 0
|
|
|
}, options);
|
|
|
|
|
|
this.sizeRatioX = 1;
|
|
|
this.sizeRatioY = 1;
|
|
|
this.maxPosX = 0;
|
|
|
this.maxPosY = 0;
|
|
|
|
|
|
if (this.options.fade) {
|
|
|
this.wrapperStyle['webkitTransform'] = this.scroller.translateZ;
|
|
|
this.wrapperStyle['webkitTransitionDuration'] = this.options.fixedBadAndorid && $.os.isBadAndroid ? '0.001s' : '0ms';
|
|
|
this.wrapperStyle.opacity = '0';
|
|
|
}
|
|
|
}
|
|
|
Indicator.prototype = {
|
|
|
handleEvent: function(e) {
|
|
|
|
|
|
},
|
|
|
transitionTime: function(time) {
|
|
|
time = time || 0;
|
|
|
this.indicatorStyle['webkitTransitionDuration'] = time + 'ms';
|
|
|
if (this.scroller.options.fixedBadAndorid && !time && $.os.isBadAndroid) {
|
|
|
this.indicatorStyle['webkitTransitionDuration'] = '0.001s';
|
|
|
}
|
|
|
},
|
|
|
transitionTimingFunction: function(easing) {
|
|
|
this.indicatorStyle['webkitTransitionTimingFunction'] = easing;
|
|
|
},
|
|
|
refresh: function() {
|
|
|
this.transitionTime();
|
|
|
|
|
|
if (this.options.listenX && !this.options.listenY) {
|
|
|
this.indicatorStyle.display = this.scroller.hasHorizontalScroll ? 'block' : 'none';
|
|
|
} else if (this.options.listenY && !this.options.listenX) {
|
|
|
this.indicatorStyle.display = this.scroller.hasVerticalScroll ? 'block' : 'none';
|
|
|
} else {
|
|
|
this.indicatorStyle.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? 'block' : 'none';
|
|
|
}
|
|
|
|
|
|
this.wrapper.offsetHeight; // force refresh
|
|
|
|
|
|
if (this.options.listenX) {
|
|
|
this.wrapperWidth = this.wrapper.clientWidth;
|
|
|
this.indicatorWidth = Math.max(Math.round(this.wrapperWidth * this.wrapperWidth / (this.scroller.scrollerWidth || this.wrapperWidth || 1)), 8);
|
|
|
this.indicatorStyle.width = this.indicatorWidth + 'px';
|
|
|
|
|
|
this.maxPosX = this.wrapperWidth - this.indicatorWidth;
|
|
|
|
|
|
this.minBoundaryX = 0;
|
|
|
this.maxBoundaryX = this.maxPosX;
|
|
|
|
|
|
this.sizeRatioX = this.options.speedRatioX || (this.scroller.maxScrollX && (this.maxPosX / this.scroller.maxScrollX));
|
|
|
}
|
|
|
|
|
|
if (this.options.listenY) {
|
|
|
this.wrapperHeight = this.wrapper.clientHeight;
|
|
|
this.indicatorHeight = Math.max(Math.round(this.wrapperHeight * this.wrapperHeight / (this.scroller.scrollerHeight || this.wrapperHeight || 1)), 8);
|
|
|
this.indicatorStyle.height = this.indicatorHeight + 'px';
|
|
|
|
|
|
this.maxPosY = this.wrapperHeight - this.indicatorHeight;
|
|
|
|
|
|
this.minBoundaryY = 0;
|
|
|
this.maxBoundaryY = this.maxPosY;
|
|
|
|
|
|
this.sizeRatioY = this.options.speedRatioY || (this.scroller.maxScrollY && (this.maxPosY / this.scroller.maxScrollY));
|
|
|
}
|
|
|
|
|
|
this.updatePosition();
|
|
|
},
|
|
|
|
|
|
updatePosition: function() {
|
|
|
var x = this.options.listenX && Math.round(this.sizeRatioX * this.scroller.x) || 0,
|
|
|
y = this.options.listenY && Math.round(this.sizeRatioY * this.scroller.y) || 0;
|
|
|
|
|
|
if (x < this.minBoundaryX) {
|
|
|
this.width = Math.max(this.indicatorWidth + x, 8);
|
|
|
this.indicatorStyle.width = this.width + 'px';
|
|
|
x = this.minBoundaryX;
|
|
|
} else if (x > this.maxBoundaryX) {
|
|
|
this.width = Math.max(this.indicatorWidth - (x - this.maxPosX), 8);
|
|
|
this.indicatorStyle.width = this.width + 'px';
|
|
|
x = this.maxPosX + this.indicatorWidth - this.width;
|
|
|
} else if (this.width != this.indicatorWidth) {
|
|
|
this.width = this.indicatorWidth;
|
|
|
this.indicatorStyle.width = this.width + 'px';
|
|
|
}
|
|
|
|
|
|
if (y < this.minBoundaryY) {
|
|
|
this.height = Math.max(this.indicatorHeight + y * 3, 8);
|
|
|
this.indicatorStyle.height = this.height + 'px';
|
|
|
y = this.minBoundaryY;
|
|
|
} else if (y > this.maxBoundaryY) {
|
|
|
this.height = Math.max(this.indicatorHeight - (y - this.maxPosY) * 3, 8);
|
|
|
this.indicatorStyle.height = this.height + 'px';
|
|
|
y = this.maxPosY + this.indicatorHeight - this.height;
|
|
|
} else if (this.height != this.indicatorHeight) {
|
|
|
this.height = this.indicatorHeight;
|
|
|
this.indicatorStyle.height = this.height + 'px';
|
|
|
}
|
|
|
|
|
|
this.x = x;
|
|
|
this.y = y;
|
|
|
|
|
|
this.indicatorStyle['webkitTransform'] = this.scroller._getTranslateStr(x, y);
|
|
|
|
|
|
},
|
|
|
fade: function(val, hold) {
|
|
|
if (hold && !this.visible) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
clearTimeout(this.fadeTimeout);
|
|
|
this.fadeTimeout = null;
|
|
|
|
|
|
var time = val ? 250 : 500,
|
|
|
delay = val ? 0 : 300;
|
|
|
|
|
|
val = val ? '1' : '0';
|
|
|
|
|
|
this.wrapperStyle['webkitTransitionDuration'] = time + 'ms';
|
|
|
|
|
|
this.fadeTimeout = setTimeout((function(val) {
|
|
|
this.wrapperStyle.opacity = val;
|
|
|
this.visible = +val;
|
|
|
}).bind(this, val), delay);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
$.Scroll = Scroll;
|
|
|
|
|
|
$.fn.scroll = function(options) {
|
|
|
var scrollApis = [];
|
|
|
this.each(function() {
|
|
|
var scrollApi = null;
|
|
|
var self = this;
|
|
|
var id = self.getAttribute('data-scroll');
|
|
|
if (!id) {
|
|
|
id = ++$.uuid;
|
|
|
var _options = $.extend({}, options);
|
|
|
if (self.classList.contains($.className('segmented-control'))) {
|
|
|
_options = $.extend(_options, {
|
|
|
scrollY: false,
|
|
|
scrollX: true,
|
|
|
indicators: false,
|
|
|
snap: $.classSelector('.control-item')
|
|
|
});
|
|
|
}
|
|
|
$.data[id] = scrollApi = new Scroll(self, _options);
|
|
|
self.setAttribute('data-scroll', id);
|
|
|
} else {
|
|
|
scrollApi = $.data[id];
|
|
|
}
|
|
|
scrollApis.push(scrollApi);
|
|
|
});
|
|
|
return scrollApis.length === 1 ? scrollApis[0] : scrollApis;
|
|
|
};
|
|
|
})(mui, window, document); |
