(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; // fixed ios双webview模式下拉刷新 if(stopped) { this.disablePullupToRefresh(); this.disablePulldownToRefresh(); } else { this.enablePullupToRefresh(); this.enablePulldownToRefresh(); } }, 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);