mui_app_rails 0.0.1

data/app/assets/javascripts/mui_app_rails/mui.class.scroll.js

@@ -0,0 +1,894 @@
+(function($, window, document, undefined) {
+	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));
+			}
+		}
+	}
+	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,
+				startY: 0,
+				indicators: true,
+				stopPropagation: false,
+				hardwareAccelerated: true,
+				fixedBadAndorid: false,
+				preventDefaultException: {
+					tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
+				},
+				momentum: true,
+
+				snap: false,
+
+				bounce: true,
+				bounceTime: 300,
+				bounceEasing: ease.circular.style,
+
+				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]));
+			}
+
+			this.wrapper.addEventListener('scrollend', function() {
+				self.indicators.map(function(indicator) {
+					indicator.fade();
+				});
+			});
+
+			this.wrapper.addEventListener('scrollstart', function() {
+				self.indicators.map(function(indicator) {
+					indicator.fade(1);
+				});
+			});
+
+			//			this.wrapper.addEventListener('beforescrollstart', function() {
+			//				self.indicators.map(function(indicator) {
+			//					indicator.fade(1, true);
+			//				});
+			//			});
+
+			this.wrapper.addEventListener('refresh', function() {
+				self.indicators.map(function(indicator) {
+					indicator.refresh();
+				});
+			});
+		},
+		_initSnap: function() {
+			this.currentPage = {};
+			this.pages = [];
+			var snaps = this.snaps;
+			var length = snaps.length;
+			var m = 0;
+			var n = -1;
+			var x = 0;
+			var cx = 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);
+				cx = x - Math.round((offsetWidth) / 2);
+				this.pages[m][n] = {
+					x: x,
+					cx: cx,
+					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.bounceTime);
+		},
+		_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++) {
+				if (x >= this.pages[i][0].cx) {
+					return this.pages[i][0];
+				}
+			}
+			return {
+				x: 0,
+				pageX: 0
+			};
+		},
+		_initEvent: function() {
+			window.addEventListener('orientationchange', this);
+			window.addEventListener('resize', this);
+
+			this.scroller.addEventListener('webkitTransitionEnd', this);
+
+			this.wrapper.addEventListener('touchstart', this);
+			this.wrapper.addEventListener('touchcancel', this);
+			this.wrapper.addEventListener('touchend', this);
+			this.wrapper.addEventListener('drag', this);
+			this.wrapper.addEventListener('dragend', this);
+			this.wrapper.addEventListener('flick', this);
+			this.wrapper.addEventListener('scrollend', this);
+			if (this.options.scrollX) {
+				this.wrapper.addEventListener('swiperight', this);
+			}
+			var segmentedControl = this.wrapper.querySelector($.classSelector('.segmented-control'));
+			if (segmentedControl) { //靠，这个bug排查了一下午，阻止hash跳转，一旦hash跳转会导致可拖拽选项卡的tab不见
+				mui(segmentedControl).on('click', 'a', $.preventDefault);
+			}
+		},
+		handleEvent: function(e) {
+			if (this.stopped) {
+				this.resetPosition();
+				return;
+			}
+
+			switch (e.type) {
+				case 'touchstart':
+					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 'touchcancel':
+				case 'touchend':
+					this._end(e);
+					break;
+				case 'webkitTransitionEnd':
+					this._transitionEnd(e);
+					break;
+				case 'scrollend':
+					this._scrollend(e);
+					e.stopPropagation();
+					break;
+				case 'orientationchange':
+				case 'resize':
+					this._resize();
+					break;
+				case 'swiperight':
+					e.stopPropagation();
+					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.touch.lockDirection = true; //锁定方向
+						$.gestures.touch.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.touch.lockDirection = true; //锁定方向
+						$.gestures.touch.startDirection = detail.direction;
+					}
+				} else if (this.options.scrollX && !this.moved) {
+					isReturn = true;
+				}
+			} else {
+				isReturn = true;
+			}
+			if (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 - detail.lastDeltaX;
+				deltaY = detail.deltaY - detail.lastDeltaY;
+			}
+			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.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 === 'touchcancel') {
+				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 (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);
+				}
+			}
+		},
+		_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;
+		},
+		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.bounceEasing);
+
+			return true;
+		},
+		refresh: function() {
+			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);
+			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.bounceTime;
+			this.scrollTo(0, this.maxScrollY, time, easing);
+		},
+		gotoPage: function(index) {
+			this._gotoPage(index);
+		}
+	});
+	//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);