| |
| |
| |
| |
| |
| |
| |
| (function (window, document, Math) { |
| var rAF = |
| window.requestAnimationFrame || |
| window.webkitRequestAnimationFrame || |
| window.mozRequestAnimationFrame || |
| window.oRequestAnimationFrame || |
| window.msRequestAnimationFrame || |
| function (callback) { |
| window.setTimeout(callback, 1000 / 60); |
| }; |
|
|
| var utils = (function () { |
| var me = {}; |
|
|
| var _elementStyle = document.createElement('div').style; |
| var _vendor = (function () { |
| var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT']; |
| var transform; |
| var i = 0; |
| var l = vendors.length; |
|
|
| for (; i < l; i++) { |
| transform = vendors[i] + 'ransform'; |
| if (transform in _elementStyle) { |
| return vendors[i].substr(0, vendors[i].length - 1); |
| } |
| } |
|
|
| return false; |
| })(); |
|
|
| function _prefixStyle(style) { |
| if (_vendor === false) { |
| return false; |
| } |
| if (_vendor === '') { |
| return style; |
| } |
| return _vendor + style.charAt(0).toUpperCase() + style.substr(1); |
| } |
|
|
| me.getTime = |
| Date.now || |
| function getTime() { |
| return new Date().getTime(); |
| }; |
|
|
| me.extend = function (target, obj) { |
| for (var i in obj) { |
| target[i] = obj[i]; |
| } |
| }; |
|
|
| me.addEvent = function (el, type, fn, capture) { |
| el.addEventListener(type, fn, !!capture); |
| }; |
|
|
| me.removeEvent = function (el, type, fn, capture) { |
| el.removeEventListener(type, fn, !!capture); |
| }; |
|
|
| me.prefixPointerEvent = function (pointerEvent) { |
| return window.MSPointerEvent |
| ? 'MSPointer' + pointerEvent.charAt(7).toUpperCase() + pointerEvent.substr(8) |
| : pointerEvent; |
| }; |
|
|
| me.momentum = function (current, start, time, lowerMargin, wrapperSize, deceleration) { |
| var distance = current - start; |
| var speed = Math.abs(distance) / time; |
| var destination; |
| var 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, |
| }; |
| }; |
|
|
| var _transform = _prefixStyle('transform'); |
|
|
| me.extend(me, { |
| hasTransform: _transform !== false, |
| hasPerspective: _prefixStyle('perspective') in _elementStyle, |
| hasTouch: 'ontouchstart' in window, |
| hasPointer: !!(window.PointerEvent || window.MSPointerEvent), |
| hasTransition: _prefixStyle('transition') in _elementStyle, |
| }); |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| me.isBadAndroid = (function () { |
| var appVersion = window.navigator.appVersion; |
| |
| if (/Android/.test(appVersion) && !/Chrome\/\d/.test(appVersion)) { |
| var safariVersion = appVersion.match(/Safari\/(\d+.\d)/); |
| if (safariVersion && typeof safariVersion === 'object' && safariVersion.length >= 2) { |
| return parseFloat(safariVersion[1]) < 535.19; |
| } else { |
| return true; |
| } |
| } else { |
| return false; |
| } |
| })(); |
|
|
| me.extend((me.style = {}), { |
| transform: _transform, |
| transitionTimingFunction: _prefixStyle('transitionTimingFunction'), |
| transitionDuration: _prefixStyle('transitionDuration'), |
| transitionDelay: _prefixStyle('transitionDelay'), |
| transformOrigin: _prefixStyle('transformOrigin'), |
| touchAction: _prefixStyle('touchAction'), |
| }); |
|
|
| me.hasClass = function (e, c) { |
| var re = new RegExp('(^|\\s)' + c + '(\\s|$)'); |
| return re.test(e.className); |
| }; |
|
|
| me.addClass = function (e, c) { |
| if (me.hasClass(e, c)) { |
| return; |
| } |
|
|
| var newclass = e.className.split(' '); |
| newclass.push(c); |
| e.className = newclass.join(' '); |
| }; |
|
|
| me.removeClass = function (e, c) { |
| if (!me.hasClass(e, c)) { |
| return; |
| } |
|
|
| var re = new RegExp('(^|\\s)' + c + '(\\s|$)', 'g'); |
| e.className = e.className.replace(re, ' '); |
| }; |
|
|
| me.offset = function (el) { |
| var left = -el.offsetLeft; |
| var top = -el.offsetTop; |
|
|
| |
| while ((el = el.offsetParent)) { |
| left -= el.offsetLeft; |
| top -= el.offsetTop; |
| } |
| |
|
|
| |
| return { left: 0, top: 0 }; |
| |
|
|
| return { |
| left: left, |
| top: top, |
| }; |
| }; |
|
|
| me.preventDefaultException = function (el, exceptions) { |
| for (var i in exceptions) { |
| if (exceptions[i].test(el[i])) { |
| return true; |
| } |
| } |
|
|
| return false; |
| }; |
|
|
| me.extend((me.eventType = {}), { |
| touchstart: 1, |
| touchmove: 1, |
| touchend: 1, |
|
|
| mousedown: 2, |
| mousemove: 2, |
| mouseup: 2, |
|
|
| pointerdown: 3, |
| pointermove: 3, |
| pointerup: 3, |
|
|
| MSPointerDown: 3, |
| MSPointerMove: 3, |
| MSPointerUp: 3, |
| }); |
|
|
| me.extend((me.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); |
| }, |
| }, |
| back: { |
| style: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)', |
| fn: function (k) { |
| var b = 4; |
| return (k = k - 1) * k * ((b + 1) * k + b) + 1; |
| }, |
| }, |
| bounce: { |
| style: '', |
| fn: function (k) { |
| if ((k /= 1) < 1 / 2.75) { |
| return 7.5625 * k * k; |
| } else if (k < 2 / 2.75) { |
| return 7.5625 * (k -= 1.5 / 2.75) * k + 0.75; |
| } else if (k < 2.5 / 2.75) { |
| return 7.5625 * (k -= 2.25 / 2.75) * k + 0.9375; |
| } else { |
| return 7.5625 * (k -= 2.625 / 2.75) * k + 0.984375; |
| } |
| }, |
| }, |
| elastic: { |
| style: '', |
| fn: function (k) { |
| var f = 0.22; |
| var e = 0.4; |
|
|
| if (k === 0) { |
| return 0; |
| } |
| if (k == 1) { |
| return 1; |
| } |
|
|
| return e * Math.pow(2, -10 * k) * Math.sin(((k - f / 4) * (2 * Math.PI)) / f) + 1; |
| }, |
| }, |
| }); |
|
|
| me.tap = function (e, eventName) { |
| var ev = document.createEvent('Event'); |
| ev.initEvent(eventName, true, true); |
| ev.pageX = e.pageX; |
| ev.pageY = e.pageY; |
| e.target.dispatchEvent(ev); |
| }; |
|
|
| me.click = function (e) { |
| var target = e.target; |
| var ev; |
|
|
| if (!/(SELECT|INPUT|TEXTAREA)/i.test(target.tagName)) { |
| |
| |
| ev = document.createEvent(window.MouseEvent ? 'MouseEvents' : 'Event'); |
| ev.initEvent('click', true, true); |
| ev.view = e.view || window; |
| ev.detail = 1; |
| ev.screenX = target.screenX || 0; |
| ev.screenY = target.screenY || 0; |
| ev.clientX = target.clientX || 0; |
| ev.clientY = target.clientY || 0; |
| ev.ctrlKey = !!e.ctrlKey; |
| ev.altKey = !!e.altKey; |
| ev.shiftKey = !!e.shiftKey; |
| ev.metaKey = !!e.metaKey; |
| ev.button = 0; |
| ev.relatedTarget = null; |
| ev._constructed = true; |
| target.dispatchEvent(ev); |
| } |
| }; |
|
|
| me.getTouchAction = function (eventPassthrough, addPinch) { |
| var touchAction = 'none'; |
| if (eventPassthrough === 'vertical') { |
| touchAction = 'pan-y'; |
| } else if (eventPassthrough === 'horizontal') { |
| touchAction = 'pan-x'; |
| } |
| if (addPinch && touchAction != 'none') { |
| |
| touchAction += ' pinch-zoom'; |
| } |
| return touchAction; |
| }; |
|
|
| me.getRect = function (el) { |
| if (el instanceof SVGElement) { |
| var rect = el.getBoundingClientRect(); |
| return { |
| top: rect.top, |
| left: rect.left, |
| width: rect.width, |
| height: rect.height, |
| }; |
| } else { |
| return { |
| top: el.offsetTop, |
| left: el.offsetLeft, |
| width: el.offsetWidth, |
| height: el.offsetHeight, |
| }; |
| } |
| }; |
|
|
| return me; |
| })(); |
| function IScroll(el, options) { |
| this.wrapper = typeof el == 'string' ? document.querySelector(el) : el; |
| this.scroller = this.wrapper.children[0]; |
| this.scrollerStyle = this.scroller.style; |
|
|
| this.options = { |
| zoomMin: 1, |
| zoomMax: 4, |
| startZoom: 1, |
|
|
| resizeScrollbars: true, |
|
|
| mouseWheelSpeed: 20, |
| mouseWheelTimeout: 400, |
|
|
| snapThreshold: 0.334, |
|
|
| |
| disablePointer: !utils.hasPointer, |
| disableTouch: utils.hasPointer || !utils.hasTouch, |
| disableMouse: utils.hasPointer || utils.hasTouch, |
| startX: 0, |
| startY: 0, |
| scrollY: true, |
| directionLockThreshold: 5, |
| momentum: true, |
|
|
| bounce: true, |
| bounceTime: 600, |
| bounceEasing: '', |
|
|
| preventDefault: true, |
| preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }, |
|
|
| HWCompositing: true, |
| useTransition: true, |
| useTransform: true, |
| bindToWrapper: typeof window.onmousedown === 'undefined', |
| }; |
|
|
| for (var i in options) { |
| this.options[i] = options[i]; |
| } |
|
|
| |
| this.translateZ = this.options.HWCompositing && utils.hasPerspective ? ' translateZ(0)' : ''; |
|
|
| this.options.useTransition = utils.hasTransition && this.options.useTransition; |
| this.options.useTransform = utils.hasTransform && this.options.useTransform; |
|
|
| this.options.eventPassthrough = |
| this.options.eventPassthrough === true ? 'vertical' : this.options.eventPassthrough; |
| this.options.preventDefault = !this.options.eventPassthrough && this.options.preventDefault; |
|
|
| |
| this.options.scrollY = this.options.eventPassthrough == 'vertical' ? false : this.options.scrollY; |
| this.options.scrollX = this.options.eventPassthrough == 'horizontal' ? false : this.options.scrollX; |
|
|
| |
| this.options.freeScroll = this.options.freeScroll && !this.options.eventPassthrough; |
| this.options.directionLockThreshold = this.options.eventPassthrough ? 0 : this.options.directionLockThreshold; |
|
|
| this.options.bounceEasing = |
| typeof this.options.bounceEasing == 'string' |
| ? utils.ease[this.options.bounceEasing] || utils.ease.circular |
| : this.options.bounceEasing; |
|
|
| this.options.resizePolling = this.options.resizePolling === undefined ? 60 : this.options.resizePolling; |
|
|
| if (this.options.tap === true) { |
| this.options.tap = 'tap'; |
| } |
|
|
| |
| if (!this.options.useTransition && !this.options.useTransform) { |
| if (!/relative|absolute/i.test(this.scrollerStyle.position)) { |
| this.scrollerStyle.position = 'relative'; |
| } |
| } |
|
|
| if (this.options.shrinkScrollbars == 'scale') { |
| this.options.useTransition = false; |
| } |
|
|
| this.options.invertWheelDirection = this.options.invertWheelDirection ? -1 : 1; |
|
|
| |
|
|
| |
| this.x = 0; |
| this.y = 0; |
| this.directionX = 0; |
| this.directionY = 0; |
| this._events = {}; |
|
|
| this.scale = Math.min(Math.max(this.options.startZoom, this.options.zoomMin), this.options.zoomMax); |
|
|
| |
|
|
| this._init(); |
| this.refresh(); |
|
|
| this.scrollTo(this.options.startX, this.options.startY); |
| this.enable(); |
| } |
|
|
| IScroll.prototype = { |
| version: '5.2.0-snapshot', |
|
|
| _init: function () { |
| this._initEvents(); |
|
|
| if (this.options.zoom) { |
| this._initZoom(); |
| } |
|
|
| if (this.options.scrollbars || this.options.indicators) { |
| this._initIndicators(); |
| } |
|
|
| if (this.options.mouseWheel) { |
| this._initWheel(); |
| } |
|
|
| if (this.options.snap) { |
| this._initSnap(); |
| } |
|
|
| if (this.options.keyBindings) { |
| this._initKeys(); |
| } |
|
|
| |
| }, |
|
|
| destroy: function () { |
| this._initEvents(true); |
| clearTimeout(this.resizeTimeout); |
| this.resizeTimeout = null; |
| this._execEvent('destroy'); |
| }, |
|
|
| _transitionEnd: function (e) { |
| if (e.target != this.scroller || !this.isInTransition) { |
| return; |
| } |
|
|
| this._transitionTime(); |
| if (!this.resetPosition(this.options.bounceTime)) { |
| this.isInTransition = false; |
| this._execEvent('scrollEnd'); |
| } |
| }, |
|
|
| _start: function (e) { |
| |
| if (e.type == 'pointerdown' && !e.isPrimary) { |
| return; |
| } |
| |
| if (utils.eventType[e.type] != 1) { |
| |
| |
| var button; |
| if (!e.which) { |
| |
| button = e.button < 2 ? 0 : e.button == 4 ? 1 : 2; |
| } else { |
| |
| button = e.button; |
| } |
| if (button !== 0) { |
| return; |
| } |
| } |
|
|
| if (!this.enabled || (this.initiated && utils.eventType[e.type] !== this.initiated)) { |
| return; |
| } |
|
|
| if ( |
| this.options.preventDefault && |
| !utils.isBadAndroid && |
| !utils.preventDefaultException(e.target, this.options.preventDefaultException) |
| ) { |
| e.preventDefault(); |
| } |
|
|
| var point = e.touches ? e.touches[0] : e; |
| var pos; |
|
|
| this.initiated = utils.eventType[e.type]; |
| this.moved = false; |
| this.distX = 0; |
| this.distY = 0; |
| this.directionX = 0; |
| this.directionY = 0; |
| this.directionLocked = 0; |
|
|
| this.startTime = utils.getTime(); |
|
|
| if (this.options.useTransition && this.isInTransition) { |
| this._transitionTime(); |
| this.isInTransition = false; |
| pos = this.getComputedPosition(); |
| this._translate(Math.round(pos.x), Math.round(pos.y)); |
| this._execEvent('scrollEnd'); |
| } else if (!this.options.useTransition && this.isAnimating) { |
| this.isAnimating = false; |
| this._execEvent('scrollEnd'); |
| } |
|
|
| this.startX = this.x; |
| this.startY = this.y; |
| this.absStartX = this.x; |
| this.absStartY = this.y; |
| this.pointX = point.pageX; |
| this.pointY = point.pageY; |
|
|
| this._execEvent('beforeScrollStart'); |
| }, |
|
|
| _move: function (e) { |
| if (!this.enabled || utils.eventType[e.type] !== this.initiated) { |
| return; |
| } |
|
|
| |
| if (e.type == 'pointermove' && !e.isPrimary) { |
| return; |
| } |
|
|
| if (this.options.preventDefault) { |
| |
| e.preventDefault(); |
| } |
|
|
| var point = e.touches ? e.touches[0] : e; |
| var deltaX = point.pageX - this.pointX; |
| var deltaY = point.pageY - this.pointY; |
| var timestamp = utils.getTime(); |
| var newX; |
| var newY; |
| var absDistX; |
| var absDistY; |
|
|
| this.pointX = point.pageX; |
| this.pointY = point.pageY; |
|
|
| this.distX += deltaX; |
| this.distY += deltaY; |
| absDistX = Math.abs(this.distX); |
| absDistY = Math.abs(this.distY); |
|
|
| |
| if (timestamp - this.endTime > 300 && absDistX < 10 && absDistY < 10) { |
| return; |
| } |
|
|
| |
| if (!this.directionLocked && !this.options.freeScroll) { |
| if (absDistX > absDistY + this.options.directionLockThreshold) { |
| this.directionLocked = 'h'; |
| } else if (absDistY >= absDistX + this.options.directionLockThreshold) { |
| this.directionLocked = 'v'; |
| } else { |
| this.directionLocked = 'n'; |
| } |
| } |
|
|
| if (this.directionLocked == 'h') { |
| if (this.options.eventPassthrough == 'vertical') { |
| e.preventDefault(); |
| } else if (this.options.eventPassthrough == 'horizontal') { |
| this.initiated = false; |
| return; |
| } |
|
|
| deltaY = 0; |
| } else if (this.directionLocked == 'v') { |
| if (this.options.eventPassthrough == 'horizontal') { |
| e.preventDefault(); |
| } else if (this.options.eventPassthrough == 'vertical') { |
| this.initiated = false; |
| return; |
| } |
|
|
| deltaX = 0; |
| } |
|
|
| deltaX = this.hasHorizontalScroll ? deltaX : 0; |
| deltaY = this.hasVerticalScroll ? deltaY : 0; |
|
|
| newX = this.x + deltaX; |
| newY = this.y + deltaY; |
|
|
| |
| 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; |
| } |
|
|
| this.directionX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0; |
| this.directionY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0; |
|
|
| if (!this.moved) { |
| this._execEvent('scrollStart'); |
| } |
|
|
| this.moved = true; |
|
|
| this._translate(newX, newY); |
|
|
| |
|
|
| if (timestamp - this.startTime > 300) { |
| this.startTime = timestamp; |
| this.startX = this.x; |
| this.startY = this.y; |
| } |
|
|
| |
| }, |
|
|
| _end: function (e) { |
| if (!this.enabled || utils.eventType[e.type] !== this.initiated) { |
| return; |
| } |
|
|
| |
| if (e.type == 'pointerup' && !e.isPrimary) { |
| return; |
| } |
|
|
| if ( |
| this.options.preventDefault && |
| !utils.preventDefaultException(e.target, this.options.preventDefaultException) |
| ) { |
| e.preventDefault(); |
| } |
|
|
| var point = e.changedTouches ? e.changedTouches[0] : e; |
| var momentumX; |
| var momentumY; |
| var duration = utils.getTime() - this.startTime; |
| var newX = Math.round(this.x); |
| var newY = Math.round(this.y); |
| var distanceX = Math.abs(newX - this.startX); |
| var distanceY = Math.abs(newY - this.startY); |
| var time = 0; |
| var easing = ''; |
|
|
| this.isInTransition = 0; |
| this.initiated = 0; |
| this.endTime = utils.getTime(); |
|
|
| |
| if (this.resetPosition(this.options.bounceTime)) { |
| return; |
| } |
|
|
| this.scrollTo(newX, newY); |
|
|
| |
| if (!this.moved) { |
| if (this.options.tap) { |
| utils.tap(e, this.options.tap); |
| } |
|
|
| if (this.options.click) { |
| utils.click(e); |
| } |
|
|
| this._execEvent('scrollCancel'); |
| return; |
| } |
|
|
| if (this._events.flick && duration < 200 && distanceX < 100 && distanceY < 100) { |
| this._execEvent('flick'); |
| return; |
| } |
|
|
| |
| if (this.options.momentum && duration < 300) { |
| momentumX = this.hasHorizontalScroll |
| ? utils.momentum( |
| this.x, |
| this.startX, |
| duration, |
| this.maxScrollX, |
| this.options.bounce ? this.wrapperWidth : 0, |
| this.options.deceleration |
| ) |
| : { destination: newX, duration: 0 }; |
| momentumY = this.hasVerticalScroll |
| ? utils.momentum( |
| this.y, |
| this.startY, |
| duration, |
| 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 = 1; |
| } |
|
|
| if (this.options.snap) { |
| var snap = this._nearestSnap(newX, newY); |
| this.currentPage = snap; |
| time = |
| this.options.snapSpeed || |
| Math.max( |
| Math.max(Math.min(Math.abs(newX - snap.x), 1000), Math.min(Math.abs(newY - snap.y), 1000)), |
| 300 |
| ); |
| newX = snap.x; |
| newY = snap.y; |
|
|
| this.directionX = 0; |
| this.directionY = 0; |
| easing = this.options.bounceEasing; |
| } |
|
|
| |
|
|
| if (newX != this.x || newY != this.y) { |
| |
| if (newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY) { |
| easing = utils.ease.quadratic; |
| } |
|
|
| this.scrollTo(newX, newY, time, easing); |
|
|
| |
| this._execEvent('scrollToPage'); |
| return; |
| } |
|
|
| this._execEvent('scrollEnd'); |
| }, |
|
|
| _resize: function () { |
| var that = this; |
|
|
| clearTimeout(this.resizeTimeout); |
|
|
| this.resizeTimeout = setTimeout(function () { |
| that.refresh(); |
| }, this.options.resizePolling); |
| }, |
|
|
| resetPosition: function (time) { |
| var x = this.x; |
| var y = this.y; |
|
|
| time = time || 0; |
|
|
| if (!this.hasHorizontalScroll || this.x > 0) { |
| x = 0; |
| |
| if (this.options.keepInCenterH && this.getScrollerWidth() * this.scale < this.wrapperWidth) { |
| x = this.wrapperWidth / 2 - (this.getScrollerWidth() * this.scale) / 2; |
| } |
| |
| } else if (this.x < this.maxScrollX) { |
| x = this.maxScrollX; |
| } |
|
|
| if (!this.hasVerticalScroll || this.y > 0) { |
| y = 0; |
| |
| if (this.options.keepInCenterV && this.getScrollerHeight() * this.scale < this.wrapperHeight) { |
| y = this.wrapperHeight / 2 - (this.getScrollerHeight() * this.scale) / 2; |
| } |
| |
| } 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; |
| }, |
|
|
| disable: function () { |
| this.enabled = false; |
| }, |
|
|
| enable: function () { |
| this.enabled = true; |
| }, |
|
|
| |
|
|
| setScrollerSize: function (w, h) { |
| this.scrollerW = w; |
| this.scrollerH = h; |
| }, |
|
|
| setWrapperOffset: function (left, top) { |
| this.wrapperOffsetLeft = left; |
| this.wrapperOffsetTop = top; |
| }, |
|
|
| |
|
|
| refresh: function () { |
| utils.getRect(this.wrapper); |
|
|
| this.wrapperWidth = this.wrapper.clientWidth; |
| this.wrapperHeight = this.wrapper.clientHeight; |
|
|
| var rect = utils.getRect(this.scroller); |
| if (this.scrollerW) { |
| rect.width = this.scrollerW; |
| } |
| if (this.scrollerH) { |
| rect.height = this.scrollerH; |
| } |
| |
| this.scrollerWidth = Math.round(rect.width * this.scale); |
| this.scrollerHeight = Math.round(rect.height * this.scale); |
|
|
| this.maxScrollX = this.wrapperWidth - this.scrollerWidth; |
| this.maxScrollY = this.wrapperHeight - this.scrollerHeight; |
| |
|
|
| this.hasHorizontalScroll = this.options.scrollX && this.maxScrollX < 0; |
| this.hasVerticalScroll = this.options.scrollY && this.maxScrollY < 0; |
|
|
| if (!this.hasHorizontalScroll) { |
| this.maxScrollX = 0; |
| this.scrollerWidth = this.wrapperWidth; |
| } |
|
|
| if (!this.hasVerticalScroll) { |
| this.maxScrollY = 0; |
| this.scrollerHeight = this.wrapperHeight; |
| } |
|
|
| this.endTime = 0; |
| this.directionX = 0; |
| this.directionY = 0; |
|
|
| if (utils.hasPointer && !this.options.disablePointer) { |
| |
| this.wrapper.style[utils.style.touchAction] = utils.getTouchAction(this.options.eventPassthrough, true); |
|
|
| |
| |
| if (!this.wrapper.style[utils.style.touchAction]) { |
| this.wrapper.style[utils.style.touchAction] = utils.getTouchAction( |
| this.options.eventPassthrough, |
| false |
| ); |
| } |
| } |
| this.wrapperOffset = utils.offset(this.wrapper); |
| if (this.wrapperOffsetLeft) { |
| this.wrapperOffset.left = this.wrapperOffsetLeft; |
| } |
| if (this.wrapperOffsetTop) { |
| this.wrapperOffset.top = this.wrapperOffsetTop; |
| } |
|
|
| this._execEvent('refresh'); |
|
|
| this.resetPosition(); |
|
|
| |
| }, |
|
|
| on: function (type, fn) { |
| if (!this._events[type]) { |
| this._events[type] = []; |
| } |
|
|
| this._events[type].push(fn); |
| }, |
|
|
| off: function (type, fn) { |
| if (!this._events[type]) { |
| return; |
| } |
|
|
| var index = this._events[type].indexOf(fn); |
|
|
| if (index > -1) { |
| this._events[type].splice(index, 1); |
| } |
| }, |
|
|
| _execEvent: function (type) { |
| if (!this._events[type]) { |
| return; |
| } |
|
|
| var i = 0; |
| var l = this._events[type].length; |
|
|
| if (!l) { |
| return; |
| } |
|
|
| for (; i < l; i++) { |
| this._events[type][i].apply(this, [].slice.call(arguments, 1)); |
| } |
| }, |
|
|
| scrollBy: function (x, y, time, easing) { |
| x = this.x + x; |
| y = this.y + y; |
| time = time || 0; |
|
|
| this.scrollTo(x, y, time, easing); |
| }, |
|
|
| |
|
|
| getScrollerWidth: function () { |
| return this.scrollerW !== undefined ? this.scrollerW : this.scroller.offsetWidth; |
| }, |
|
|
| getScrollerHeight: function () { |
| return this.scrollerH !== undefined ? this.scrollerH : this.scroller.offsetHeight; |
| }, |
|
|
| |
|
|
| scrollTo: function (x, y, time, easing) { |
| |
|
|
| if (this.wrapperWidth == 0 || this.wrapperHeight == 0) { |
| return; |
| } |
|
|
| if (time) { |
| if (this.prevDisabled && x == 0) { |
| this.goToPage(1, 0, 0); |
| return; |
| } |
|
|
| if (this.nextDisabled && x == -(this.scrollerWidth - this.wrapperWidth)) { |
| this.goToPage(1, 0, 0); |
| return; |
| } |
| } |
|
|
| if (this.options.keepInCenterH && this.getScrollerWidth() * this.scale < this.wrapperWidth) { |
| x = this.wrapperWidth / 2 - (this.getScrollerWidth() * this.scale) / 2; |
| } |
|
|
| if (this.options.keepInCenterV && this.getScrollerHeight() * this.scale < this.wrapperHeight) { |
| y = this.wrapperHeight / 2 - (this.getScrollerHeight() * this.scale) / 2; |
| } |
| |
|
|
| easing = easing || utils.ease.circular; |
|
|
| this.isInTransition = this.options.useTransition && time > 0; |
| var transitionType = this.options.useTransition && easing.style; |
| if (!time || transitionType) { |
| if (transitionType) { |
| this._transitionTimingFunction(easing.style); |
| this._transitionTime(time); |
| } |
| this._translate(x, y); |
| } else { |
| this._animate(x, y, time, easing.fn); |
| } |
| }, |
|
|
| scrollToElement: function (el, time, offsetX, offsetY, easing) { |
| el = el.nodeType ? el : this.scroller.querySelector(el); |
|
|
| if (!el) { |
| return; |
| } |
|
|
| var pos = utils.offset(el); |
|
|
| pos.left -= this.wrapperOffset.left; |
| pos.top -= this.wrapperOffset.top; |
|
|
| |
| var elRect = utils.getRect(el); |
| var wrapperRect = utils.getRect(this.wrapper); |
| if (offsetX === true) { |
| offsetX = Math.round(elRect.width / 2 - wrapperRect.width / 2); |
| } |
| if (offsetY === true) { |
| offsetY = Math.round(elRect.height / 2 - wrapperRect.height / 2); |
| } |
|
|
| pos.left -= offsetX || 0; |
| pos.top -= offsetY || 0; |
|
|
| pos.left = pos.left > 0 ? 0 : pos.left < this.maxScrollX ? this.maxScrollX : pos.left; |
| pos.top = pos.top > 0 ? 0 : pos.top < this.maxScrollY ? this.maxScrollY : pos.top; |
|
|
| time = |
| time === undefined || time === null || time === 'auto' |
| ? Math.max(Math.abs(this.x - pos.left), Math.abs(this.y - pos.top)) |
| : time; |
|
|
| this.scrollTo(pos.left, pos.top, time, easing); |
| }, |
|
|
| _transitionTime: function (time) { |
| if (!this.options.useTransition) { |
| return; |
| } |
| time = time || 0; |
| var durationProp = utils.style.transitionDuration; |
| if (!durationProp) { |
| return; |
| } |
|
|
| this.scrollerStyle[durationProp] = time + 'ms'; |
|
|
| if (!time && utils.isBadAndroid) { |
| this.scrollerStyle[durationProp] = '0.0001ms'; |
| |
| var self = this; |
| rAF(function () { |
| if (self.scrollerStyle[durationProp] === '0.0001ms') { |
| self.scrollerStyle[durationProp] = '0s'; |
| } |
| }); |
| } |
|
|
| if (this.indicators) { |
| for (var i = this.indicators.length; i--; ) { |
| this.indicators[i].transitionTime(time); |
| } |
| } |
|
|
| |
| }, |
|
|
| _transitionTimingFunction: function (easing) { |
| this.scrollerStyle[utils.style.transitionTimingFunction] = easing; |
|
|
| if (this.indicators) { |
| for (var i = this.indicators.length; i--; ) { |
| this.indicators[i].transitionTimingFunction(easing); |
| } |
| } |
|
|
| |
| }, |
|
|
| _translate: function (x, y) { |
| if (this.options.useTransform) { |
| this.scrollerStyle[utils.style.transform] = |
| 'translate(' + |
| x + |
| 'px,' + |
| y + |
| 'px) scale(' + |
| this.scale + |
| ') ' + |
| this.translateZ; |
| } else { |
| x = Math.round(x); |
| y = Math.round(y); |
| this.scrollerStyle.left = x + 'px'; |
| this.scrollerStyle.top = y + 'px'; |
| } |
|
|
| this.x = x; |
| this.y = y; |
|
|
| if (this.indicators) { |
| for (var i = this.indicators.length; i--; ) { |
| this.indicators[i].updatePosition(); |
| } |
| } |
|
|
| |
| }, |
|
|
| _initEvents: function (remove) { |
| var eventType = remove ? utils.removeEvent : utils.addEvent; |
| var target = this.options.bindToWrapper ? this.wrapper : window; |
|
|
| eventType(window, 'orientationchange', this); |
| eventType(window, 'resize', this); |
|
|
| if (this.options.click) { |
| eventType(this.wrapper, 'click', this, true); |
| } |
|
|
| if (!this.options.disableMouse) { |
| eventType(this.wrapper, 'mousedown', this); |
| eventType(target, 'mousemove', this); |
| eventType(target, 'mousecancel', this); |
| eventType(target, 'mouseup', this); |
| } |
|
|
| if (utils.hasPointer && !this.options.disablePointer) { |
| eventType(this.wrapper, utils.prefixPointerEvent('pointerdown'), this); |
| eventType(target, utils.prefixPointerEvent('pointermove'), this); |
| eventType(target, utils.prefixPointerEvent('pointercancel'), this); |
| eventType(target, utils.prefixPointerEvent('pointerup'), this); |
| } |
|
|
| if (utils.hasTouch && !this.options.disableTouch) { |
| eventType(this.wrapper, 'touchstart', this); |
| eventType(target, 'touchmove', this); |
| eventType(target, 'touchcancel', this); |
| eventType(target, 'touchend', this); |
| } |
|
|
| eventType(this.scroller, 'transitionend', this); |
| eventType(this.scroller, 'webkitTransitionEnd', this); |
| eventType(this.scroller, 'oTransitionEnd', this); |
| eventType(this.scroller, 'MSTransitionEnd', this); |
| }, |
|
|
| getComputedPosition: function () { |
| var matrix = window.getComputedStyle(this.scroller, null); |
| var x; |
| var y; |
|
|
| if (this.options.useTransform) { |
| matrix = matrix[utils.style.transform].split(')')[0].split(', '); |
| x = +(matrix[12] || matrix[4]); |
| y = +(matrix[13] || matrix[5]); |
| } else { |
| x = +matrix.left.replace(/[^-\d.]/g, ''); |
| y = +matrix.top.replace(/[^-\d.]/g, ''); |
| } |
|
|
| return { x: x, y: y }; |
| }, |
| _initIndicators: function () { |
| var interactive = this.options.interactiveScrollbars; |
| var customStyle = typeof this.options.scrollbars != 'string'; |
| var indicators = []; |
| var indicator; |
|
|
| var that = this; |
|
|
| this.indicators = []; |
|
|
| if (this.options.scrollbars) { |
| |
| if (this.options.scrollY) { |
| indicator = { |
| el: createDefaultScrollbar('v', interactive, this.options.scrollbars), |
| interactive: interactive, |
| defaultScrollbars: true, |
| customStyle: customStyle, |
| resize: this.options.resizeScrollbars, |
| shrink: this.options.shrinkScrollbars, |
| fade: this.options.fadeScrollbars, |
| listenX: false, |
| }; |
|
|
| this.wrapper.appendChild(indicator.el); |
| indicators.push(indicator); |
| } |
|
|
| |
| if (this.options.scrollX) { |
| indicator = { |
| el: createDefaultScrollbar('h', interactive, this.options.scrollbars), |
| interactive: interactive, |
| defaultScrollbars: true, |
| customStyle: customStyle, |
| resize: this.options.resizeScrollbars, |
| shrink: this.options.shrinkScrollbars, |
| fade: this.options.fadeScrollbars, |
| listenY: false, |
| }; |
|
|
| this.wrapper.appendChild(indicator.el); |
| indicators.push(indicator); |
| } |
| } |
|
|
| if (this.options.indicators) { |
| |
| indicators = indicators.concat(this.options.indicators); |
| } |
|
|
| for (var i = indicators.length; i--; ) { |
| this.indicators.push(new Indicator(this, indicators[i])); |
| } |
|
|
| |
| function _indicatorsMap(fn) { |
| if (that.indicators) { |
| for (var i = that.indicators.length; i--; ) { |
| fn.call(that.indicators[i]); |
| } |
| } |
| } |
|
|
| if (this.options.fadeScrollbars) { |
| this.on('scrollEnd', function () { |
| _indicatorsMap(function () { |
| this.fade(); |
| }); |
| }); |
|
|
| this.on('scrollCancel', function () { |
| _indicatorsMap(function () { |
| this.fade(); |
| }); |
| }); |
|
|
| this.on('scrollStart', function () { |
| _indicatorsMap(function () { |
| this.fade(1); |
| }); |
| }); |
|
|
| this.on('beforeScrollStart', function () { |
| _indicatorsMap(function () { |
| this.fade(1, true); |
| }); |
| }); |
| } |
|
|
| this.on('refresh', function () { |
| _indicatorsMap(function () { |
| this.refresh(); |
| }); |
| }); |
|
|
| this.on('destroy', function () { |
| _indicatorsMap(function () { |
| this.destroy(); |
| }); |
|
|
| delete this.indicators; |
| }); |
| }, |
|
|
| _initZoom: function () { |
| this.scrollerStyle[utils.style.transformOrigin] = '0 0'; |
| }, |
|
|
| _zoomStart: function (e) { |
| var c1 = Math.abs(e.touches[0].pageX - e.touches[1].pageX); |
| var c2 = Math.abs(e.touches[0].pageY - e.touches[1].pageY); |
|
|
| this.touchesDistanceStart = Math.sqrt(c1 * c1 + c2 * c2); |
| this.startScale = this.scale; |
|
|
| this.originX = Math.abs(e.touches[0].pageX + e.touches[1].pageX) / 2 + this.wrapperOffset.left - this.x; |
| this.originY = Math.abs(e.touches[0].pageY + e.touches[1].pageY) / 2 + this.wrapperOffset.top - this.y; |
|
|
| this._execEvent('zoomStart'); |
| }, |
|
|
| _zoom: function (e) { |
| if (!this.enabled || utils.eventType[e.type] !== this.initiated) { |
| return; |
| } |
|
|
| if (this.options.preventDefault) { |
| e.preventDefault(); |
| } |
|
|
| var c1 = Math.abs(e.touches[0].pageX - e.touches[1].pageX); |
| var c2 = Math.abs(e.touches[0].pageY - e.touches[1].pageY); |
| var distance = Math.sqrt(c1 * c1 + c2 * c2); |
| var scale = (1 / this.touchesDistanceStart) * distance * this.startScale; |
| var lastScale; |
| var x; |
| var y; |
|
|
| this.scaled = true; |
|
|
| if (scale < this.options.zoomMin) { |
| scale = 0.5 * this.options.zoomMin * Math.pow(2.0, scale / this.options.zoomMin); |
| } else if (scale > this.options.zoomMax) { |
| scale = 2.0 * this.options.zoomMax * Math.pow(0.5, this.options.zoomMax / scale); |
| } |
|
|
| lastScale = scale / this.startScale; |
| x = this.originX - this.originX * lastScale + this.startX; |
| y = this.originY - this.originY * lastScale + this.startY; |
|
|
| this.scale = scale; |
|
|
| this.scrollTo(x, y, 0); |
| }, |
|
|
| _zoomEnd: function (e) { |
| if (!this.enabled || utils.eventType[e.type] !== this.initiated) { |
| return; |
| } |
|
|
| if (this.options.preventDefault) { |
| e.preventDefault(); |
| } |
|
|
| var newX; |
| var newY; |
| var lastScale; |
|
|
| this.isInTransition = 0; |
| this.initiated = 0; |
|
|
| if (this.scale > this.options.zoomMax) { |
| this.scale = this.options.zoomMax; |
| } else if (this.scale < this.options.zoomMin) { |
| this.scale = this.options.zoomMin; |
| } |
|
|
| |
| this.refresh(); |
|
|
| lastScale = this.scale / this.startScale; |
|
|
| newX = this.originX - this.originX * lastScale + this.startX; |
| newY = this.originY - this.originY * lastScale + this.startY; |
|
|
| if (newX > 0) { |
| newX = 0; |
| } else if (newX < this.maxScrollX) { |
| newX = this.maxScrollX; |
| } |
|
|
| if (newY > 0) { |
| newY = 0; |
| } else if (newY < this.maxScrollY) { |
| newY = this.maxScrollY; |
| } |
|
|
| if (this.x != newX || this.y != newY) { |
| this.scrollTo(newX, newY, this.options.bounceTime); |
| } |
|
|
| this.scaled = false; |
|
|
| this._execEvent('zoomEnd'); |
| }, |
|
|
| zoom: function (scale, x, y, time) { |
| |
| if (this.wrapperWidth == 0 || this.wrapperHeight == 0) { |
| return; |
| } |
| |
|
|
| if (scale < this.options.zoomMin) { |
| scale = this.options.zoomMin; |
| } else if (scale > this.options.zoomMax) { |
| scale = this.options.zoomMax; |
| } |
|
|
| if (scale == this.scale) { |
| return; |
| } |
|
|
| var relScale = scale / this.scale; |
|
|
| |
| var that = this; |
| if (relScale != 1) { |
| clearTimeout(this.zoomStartTimeout); |
| this.zoomStartTimeout = setTimeout(function () { |
| that._execEvent('zoomStart'); |
| }, 0); |
|
|
| |
| clearTimeout(this.wheelTimeout); |
| this.wheelTimeout = setTimeout(function () { |
| that._execEvent('zoomEnd'); |
| }, Number(time + 100)); |
| } |
|
|
| |
|
|
| x = x === undefined ? this.wrapperWidth / 2 : x; |
| y = y === undefined ? this.wrapperHeight / 2 : y; |
| time = time === undefined ? 300 : time; |
|
|
| x = x + this.wrapperOffset.left - this.x; |
| y = y + this.wrapperOffset.top - this.y; |
|
|
| x = x - x * relScale + this.x; |
| y = y - y * relScale + this.y; |
|
|
| this.scale = scale; |
|
|
| this.refresh(); |
|
|
| if (x > 0) { |
| x = 0; |
| } else if (x < this.maxScrollX) { |
| x = this.maxScrollX; |
| } |
|
|
| if (y > 0) { |
| y = 0; |
| } else if (y < this.maxScrollY) { |
| y = this.maxScrollY; |
| } |
|
|
| this.scrollTo(x, y, time); |
| }, |
|
|
| _wheelZoom: function (e) { |
| var wheelDeltaY; |
| var deltaScale; |
| var that = this; |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| if ('deltaX' in e) { |
| wheelDeltaY = -e.deltaY / Math.abs(e.deltaY); |
| } else if ('wheelDeltaX' in e) { |
| wheelDeltaY = e.wheelDeltaY / Math.abs(e.wheelDeltaY); |
| } else if ('wheelDelta' in e) { |
| wheelDeltaY = e.wheelDelta / Math.abs(e.wheelDelta); |
| } else if ('detail' in e) { |
| wheelDeltaY = -e.detail / Math.abs(e.wheelDelta); |
| } else { |
| return; |
| } |
|
|
| deltaScale = this.scale + wheelDeltaY / 5; |
|
|
| this.zoom(deltaScale, e.pageX, e.pageY, 0); |
| }, |
|
|
| _initWheel: function () { |
| utils.addEvent(this.wrapper, 'wheel', this); |
| utils.addEvent(this.wrapper, 'mousewheel', this); |
| utils.addEvent(this.wrapper, 'DOMMouseScroll', this); |
|
|
| this.on('destroy', function () { |
| clearTimeout(this.wheelTimeout); |
| this.wheelTimeout = null; |
| utils.removeEvent(this.wrapper, 'wheel', this); |
| utils.removeEvent(this.wrapper, 'mousewheel', this); |
| utils.removeEvent(this.wrapper, 'DOMMouseScroll', this); |
| }); |
| }, |
|
|
| _wheel: function (e) { |
| if (!this.enabled) { |
| return; |
| } |
| |
| if (this.options.preventDefault) { |
| |
| e.preventDefault(); |
| |
| } |
| |
| var wheelDeltaX; |
| var wheelDeltaY; |
| var newX; |
| var newY; |
| var that = this; |
|
|
| if (this.wheelTimeout === undefined) { |
| that._execEvent('scrollStart'); |
| } |
|
|
| |
| clearTimeout(this.wheelTimeout); |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| this.wheelTimeout = setTimeout(function () { |
| if (!that.options.snap) { |
| that._execEvent('scrollEnd'); |
| } |
| that.wheelTimeout = undefined; |
| }, this.options.mouseWheelTimeout); |
|
|
| if ('deltaX' in e) { |
| if (e.deltaMode === 1) { |
| wheelDeltaX = -e.deltaX * this.options.mouseWheelSpeed; |
| wheelDeltaY = -e.deltaY * this.options.mouseWheelSpeed; |
| } else { |
| wheelDeltaX = -e.deltaX; |
| wheelDeltaY = -e.deltaY; |
| } |
| } else if ('wheelDeltaX' in e) { |
| wheelDeltaX = (e.wheelDeltaX / 120) * this.options.mouseWheelSpeed; |
| wheelDeltaY = (e.wheelDeltaY / 120) * this.options.mouseWheelSpeed; |
| } else if ('wheelDelta' in e) { |
| wheelDeltaX = wheelDeltaY = (e.wheelDelta / 120) * this.options.mouseWheelSpeed; |
| } else if ('detail' in e) { |
| wheelDeltaX = wheelDeltaY = (-e.detail / 3) * this.options.mouseWheelSpeed; |
| } else { |
| return; |
| } |
|
|
| wheelDeltaX *= this.options.invertWheelDirection; |
| wheelDeltaY *= this.options.invertWheelDirection; |
|
|
| if (!this.hasVerticalScroll) { |
| wheelDeltaX = wheelDeltaY; |
| wheelDeltaY = 0; |
| } |
|
|
| if (this.options.snap) { |
| newX = this.currentPage.pageX; |
| newY = this.currentPage.pageY; |
|
|
| if (wheelDeltaX > 0) { |
| newX--; |
| } else if (wheelDeltaX < 0) { |
| newX++; |
| } |
|
|
| if (wheelDeltaY > 0) { |
| newY--; |
| } else if (wheelDeltaY < 0) { |
| newY++; |
| } |
|
|
| this.goToPage(newX, newY); |
|
|
| return; |
| } |
|
|
| newX = this.x + Math.round(this.hasHorizontalScroll ? wheelDeltaX : 0); |
| newY = this.y + Math.round(this.hasVerticalScroll ? wheelDeltaY : 0); |
|
|
| this.directionX = wheelDeltaX > 0 ? -1 : wheelDeltaX < 0 ? 1 : 0; |
| this.directionY = wheelDeltaY > 0 ? -1 : wheelDeltaY < 0 ? 1 : 0; |
|
|
| if (newX > 0) { |
| newX = 0; |
| } else if (newX < this.maxScrollX) { |
| newX = this.maxScrollX; |
| } |
|
|
| if (newY > 0) { |
| newY = 0; |
| } else if (newY < this.maxScrollY) { |
| newY = this.maxScrollY; |
| } |
| |
| else { |
| e.preventDefault(); |
| } |
| |
|
|
| this.scrollTo(newX, newY, 0); |
|
|
| |
| }, |
|
|
| _initSnap: function () { |
| this.currentPage = {}; |
|
|
| if (typeof this.options.snap == 'string') { |
| this.options.snap = this.scroller.querySelectorAll(this.options.snap); |
| } |
|
|
| this.on('refresh', function () { |
| var i = 0; |
| var l; |
| var m = 0; |
| var n; |
| var cx; |
| var cy; |
| var x = 0; |
| var y; |
| var stepX = this.options.snapStepX || this.wrapperWidth; |
| var stepY = this.options.snapStepY || this.wrapperHeight; |
| var el; |
| var rect; |
|
|
| this.pages = []; |
|
|
| if (!this.wrapperWidth || !this.wrapperHeight || !this.scrollerWidth || !this.scrollerHeight) { |
| return; |
| } |
|
|
| if (this.options.snap === true) { |
| cx = Math.round(stepX / 2); |
| cy = Math.round(stepY / 2); |
|
|
| while (x > -this.scrollerWidth) { |
| this.pages[i] = []; |
| l = 0; |
| y = 0; |
|
|
| while (y > -this.scrollerHeight) { |
| this.pages[i][l] = { |
| x: Math.max(x, this.maxScrollX), |
| y: Math.max(y, this.maxScrollY), |
| width: stepX, |
| height: stepY, |
| cx: x - cx, |
| cy: y - cy, |
| }; |
|
|
| y -= stepY; |
| l++; |
| } |
|
|
| x -= stepX; |
| i++; |
| } |
| } else { |
| el = this.options.snap; |
| l = el.length; |
| n = -1; |
|
|
| for (; i < l; i++) { |
| rect = utils.getRect(el[i]); |
| if (i === 0 || rect.left <= utils.getRect(el[i - 1]).left) { |
| m = 0; |
| n++; |
| } |
|
|
| if (!this.pages[m]) { |
| this.pages[m] = []; |
| } |
|
|
| x = Math.max(-rect.left, this.maxScrollX); |
| y = Math.max(-rect.top, this.maxScrollY); |
| cx = x - Math.round(rect.width / 2); |
| cy = y - Math.round(rect.height / 2); |
|
|
| this.pages[m][n] = { |
| x: x, |
| y: y, |
| width: rect.width, |
| height: rect.height, |
| cx: cx, |
| cy: cy, |
| }; |
|
|
| if (x > this.maxScrollX) { |
| m++; |
| } |
| } |
| } |
|
|
| this.goToPage(this.currentPage.pageX || 0, this.currentPage.pageY || 0, 0); |
|
|
| |
| if (this.options.snapThreshold % 1 === 0) { |
| this.snapThresholdX = this.options.snapThreshold; |
| this.snapThresholdY = this.options.snapThreshold; |
| } else { |
| this.snapThresholdX = Math.round( |
| this.pages[this.currentPage.pageX][this.currentPage.pageY].width * this.options.snapThreshold |
| ); |
| this.snapThresholdY = Math.round( |
| this.pages[this.currentPage.pageX][this.currentPage.pageY].height * this.options.snapThreshold |
| ); |
| } |
| }); |
|
|
| this.on('flick', function () { |
| var time = |
| this.options.snapSpeed || |
| Math.max( |
| Math.max( |
| Math.min(Math.abs(this.x - this.startX), 1000), |
| Math.min(Math.abs(this.y - this.startY), 1000) |
| ), |
| 300 |
| ); |
|
|
| this.goToPage(this.currentPage.pageX + this.directionX, this.currentPage.pageY + this.directionY, time); |
| }); |
| }, |
|
|
| _nearestSnap: function (x, y) { |
| if (!this.pages.length) { |
| return { x: 0, y: 0, pageX: 0, pageY: 0 }; |
| } |
|
|
| var i = 0; |
| var l = this.pages.length; |
| var m = 0; |
|
|
| |
| if ( |
| Math.abs(x - this.absStartX) < this.snapThresholdX && |
| Math.abs(y - this.absStartY) < this.snapThresholdY |
| ) { |
| return this.currentPage; |
| } |
|
|
| if (x > 0) { |
| x = 0; |
| } else if (x < this.maxScrollX) { |
| x = this.maxScrollX; |
| } |
|
|
| if (y > 0) { |
| y = 0; |
| } else if (y < this.maxScrollY) { |
| y = this.maxScrollY; |
| } |
|
|
| for (; i < l; i++) { |
| if (x >= this.pages[i][0].cx) { |
| x = this.pages[i][0].x; |
| break; |
| } |
| } |
|
|
| l = this.pages[i].length; |
|
|
| for (; m < l; m++) { |
| if (y >= this.pages[0][m].cy) { |
| y = this.pages[0][m].y; |
| break; |
| } |
| } |
|
|
| if (i == this.currentPage.pageX) { |
| i += this.directionX; |
|
|
| if (i < 0) { |
| i = 0; |
| } else if (i >= this.pages.length) { |
| i = this.pages.length - 1; |
| } |
|
|
| x = this.pages[i][0].x; |
| } |
|
|
| if (m == this.currentPage.pageY) { |
| m += this.directionY; |
|
|
| if (m < 0) { |
| m = 0; |
| } else if (m >= this.pages[0].length) { |
| m = this.pages[0].length - 1; |
| } |
|
|
| y = this.pages[0][m].y; |
| } |
|
|
| return { |
| x: x, |
| y: y, |
| pageX: i, |
| pageY: m, |
| }; |
| }, |
|
|
| goToPage: function (x, y, time, easing) { |
| easing = easing || this.options.bounceEasing; |
|
|
| if (x >= this.pages.length) { |
| x = this.pages.length - 1; |
| } else if (x < 0) { |
| x = 0; |
| } |
|
|
| if (y >= this.pages[x].length) { |
| y = this.pages[x].length - 1; |
| } else if (y < 0) { |
| y = 0; |
| } |
|
|
| var posX = this.pages[x][y].x; |
| var posY = this.pages[x][y].y; |
|
|
| time = |
| time === undefined |
| ? this.options.snapSpeed || |
| Math.max( |
| Math.max(Math.min(Math.abs(posX - this.x), 1000), Math.min(Math.abs(posY - this.y), 1000)), |
| 300 |
| ) |
| : time; |
|
|
| this.currentPage = { |
| x: posX, |
| y: posY, |
| pageX: x, |
| pageY: y, |
| }; |
|
|
| this.scrollTo(posX, posY, time, easing); |
| }, |
|
|
| next: function (time, easing) { |
| var x = this.currentPage.pageX; |
| var y = this.currentPage.pageY; |
|
|
| x++; |
|
|
| if (x >= this.pages.length && this.hasVerticalScroll) { |
| x = 0; |
| y++; |
| } |
|
|
| this.goToPage(x, y, time, easing); |
| }, |
|
|
| prev: function (time, easing) { |
| var x = this.currentPage.pageX; |
| var y = this.currentPage.pageY; |
|
|
| x--; |
|
|
| if (x < 0 && this.hasVerticalScroll) { |
| x = 0; |
| y--; |
| } |
|
|
| this.goToPage(x, y, time, easing); |
| }, |
|
|
| _initKeys: function (e) { |
| |
| var keys = { |
| pageUp: 33, |
| pageDown: 34, |
| end: 35, |
| home: 36, |
| left: 37, |
| up: 38, |
| right: 39, |
| down: 40, |
| }; |
| var i; |
|
|
| |
| if (typeof this.options.keyBindings == 'object') { |
| for (i in this.options.keyBindings) { |
| if (typeof this.options.keyBindings[i] == 'string') { |
| this.options.keyBindings[i] = this.options.keyBindings[i].toUpperCase().charCodeAt(0); |
| } |
| } |
| } else { |
| this.options.keyBindings = {}; |
| } |
|
|
| for (i in keys) { |
| this.options.keyBindings[i] = this.options.keyBindings[i] || keys[i]; |
| } |
|
|
| utils.addEvent(window, 'keydown', this); |
|
|
| this.on('destroy', function () { |
| utils.removeEvent(window, 'keydown', this); |
| }); |
| }, |
|
|
| _key: function (e) { |
| if (!this.enabled) { |
| return; |
| } |
|
|
| var snap = this.options.snap; |
| var newX = snap ? this.currentPage.pageX : this.x; |
| var newY = snap ? this.currentPage.pageY : this.y; |
| var now = utils.getTime(); |
| var prevTime = this.keyTime || 0; |
| var acceleration = 0.25; |
| var pos; |
|
|
| if (this.options.useTransition && this.isInTransition) { |
| pos = this.getComputedPosition(); |
|
|
| this._translate(Math.round(pos.x), Math.round(pos.y)); |
| this.isInTransition = false; |
| } |
|
|
| this.keyAcceleration = now - prevTime < 200 ? Math.min(this.keyAcceleration + acceleration, 50) : 0; |
|
|
| switch (e.keyCode) { |
| case this.options.keyBindings.pageUp: |
| if (this.hasHorizontalScroll && !this.hasVerticalScroll) { |
| newX += snap ? 1 : this.wrapperWidth; |
| } else { |
| newY += snap ? 1 : this.wrapperHeight; |
| } |
| break; |
| case this.options.keyBindings.pageDown: |
| if (this.hasHorizontalScroll && !this.hasVerticalScroll) { |
| newX -= snap ? 1 : this.wrapperWidth; |
| } else { |
| newY -= snap ? 1 : this.wrapperHeight; |
| } |
| break; |
| case this.options.keyBindings.end: |
| newX = snap ? this.pages.length - 1 : this.maxScrollX; |
| newY = snap ? this.pages[0].length - 1 : this.maxScrollY; |
| break; |
| case this.options.keyBindings.home: |
| newX = 0; |
| newY = 0; |
| break; |
| case this.options.keyBindings.left: |
| newX += snap ? -1 : (5 + this.keyAcceleration) >> 0; |
| break; |
| case this.options.keyBindings.up: |
| newY += snap ? 1 : (5 + this.keyAcceleration) >> 0; |
| break; |
| case this.options.keyBindings.right: |
| newX -= snap ? -1 : (5 + this.keyAcceleration) >> 0; |
| break; |
| case this.options.keyBindings.down: |
| newY -= snap ? 1 : (5 + this.keyAcceleration) >> 0; |
| break; |
| default: |
| return; |
| } |
|
|
| if (snap) { |
| this.goToPage(newX, newY); |
| return; |
| } |
|
|
| if (newX > 0) { |
| newX = 0; |
| this.keyAcceleration = 0; |
| } else if (newX < this.maxScrollX) { |
| newX = this.maxScrollX; |
| this.keyAcceleration = 0; |
| } |
|
|
| if (newY > 0) { |
| newY = 0; |
| this.keyAcceleration = 0; |
| } else if (newY < this.maxScrollY) { |
| newY = this.maxScrollY; |
| this.keyAcceleration = 0; |
| } |
|
|
| this.scrollTo(newX, newY, 0); |
|
|
| this.keyTime = now; |
| }, |
|
|
| _animate: function (destX, destY, duration, easingFn) { |
| var that = this; |
| var startX = this.x; |
| var startY = this.y; |
| var startTime = utils.getTime(); |
| var destTime = startTime + duration; |
|
|
| function step() { |
| var now = utils.getTime(); |
| var newX; |
| var newY; |
| var easing; |
|
|
| if (now >= destTime) { |
| that.isAnimating = false; |
| that._translate(destX, destY); |
|
|
| if (!that.resetPosition(that.options.bounceTime)) { |
| that._execEvent('scrollEnd'); |
| } |
|
|
| return; |
| } |
|
|
| now = (now - startTime) / duration; |
| easing = easingFn(now); |
| newX = (destX - startX) * easing + startX; |
| newY = (destY - startY) * easing + startY; |
| that._translate(newX, newY); |
|
|
| if (that.isAnimating) { |
| rAF(step); |
| } |
| } |
|
|
| this.isAnimating = true; |
| step(); |
| }, |
| handleEvent: function (e) { |
| switch (e.type) { |
| case 'touchstart': |
| case 'pointerdown': |
| case 'MSPointerDown': |
| case 'mousedown': |
| this._start(e); |
|
|
| if (this.options.zoom && e.touches && e.touches.length > 1) { |
| this._zoomStart(e); |
| } |
| break; |
| case 'touchmove': |
| case 'pointermove': |
| case 'MSPointerMove': |
| case 'mousemove': |
| if (this.options.zoom && e.touches && e.touches[1]) { |
| this._zoom(e); |
| return; |
| } |
| this._move(e); |
| break; |
| case 'touchend': |
| case 'pointerup': |
| case 'MSPointerUp': |
| case 'mouseup': |
| case 'touchcancel': |
| case 'pointercancel': |
| case 'MSPointerCancel': |
| case 'mousecancel': |
| if (this.scaled) { |
| this._zoomEnd(e); |
| return; |
| } |
| this._end(e); |
| break; |
| case 'orientationchange': |
| case 'resize': |
| this._resize(); |
| break; |
| case 'transitionend': |
| case 'webkitTransitionEnd': |
| case 'oTransitionEnd': |
| case 'MSTransitionEnd': |
| this._transitionEnd(e); |
| break; |
| case 'wheel': |
| case 'DOMMouseScroll': |
| case 'mousewheel': |
| if (this.options.wheelAction == 'zoom') { |
| this._wheelZoom(e); |
| return; |
| } |
| this._wheel(e); |
| break; |
| case 'keydown': |
| this._key(e); |
| break; |
| } |
| }, |
| }; |
| function createDefaultScrollbar(direction, interactive, type) { |
| var scrollbar = document.createElement('div'); |
| var indicator = document.createElement('div'); |
|
|
| if (type === true) { |
| scrollbar.style.cssText = 'position:absolute;z-index:9999'; |
| indicator.style.cssText = |
| '-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;position:absolute;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);border-radius:3px'; |
| } |
|
|
| indicator.className = 'iScrollIndicator'; |
|
|
| if (direction == 'h') { |
| if (type === true) { |
| scrollbar.style.cssText += ';height:7px;left:2px;right:2px;bottom:0'; |
| indicator.style.height = '100%'; |
| } |
| scrollbar.className = 'iScrollHorizontalScrollbar'; |
| } else { |
| if (type === true) { |
| scrollbar.style.cssText += ';width:7px;bottom:2px;top:2px;right:1px'; |
| indicator.style.width = '100%'; |
| } |
| scrollbar.className = 'iScrollVerticalScrollbar'; |
| } |
|
|
| scrollbar.style.cssText += ';overflow:hidden'; |
|
|
| if (!interactive) { |
| scrollbar.style.pointerEvents = 'none'; |
| } |
|
|
| scrollbar.appendChild(indicator); |
|
|
| return scrollbar; |
| } |
|
|
| function Indicator(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 = { |
| listenX: true, |
| listenY: true, |
| interactive: false, |
| resize: true, |
| defaultScrollbars: false, |
| shrink: false, |
| fade: false, |
| speedRatioX: 0, |
| speedRatioY: 0, |
| }; |
|
|
| for (var i in options) { |
| this.options[i] = options[i]; |
| } |
|
|
| this.sizeRatioX = 1; |
| this.sizeRatioY = 1; |
| this.maxPosX = 0; |
| this.maxPosY = 0; |
|
|
| if (this.options.interactive) { |
| if (!this.options.disableTouch) { |
| utils.addEvent(this.indicator, 'touchstart', this); |
| utils.addEvent(window, 'touchend', this); |
| } |
| if (!this.options.disablePointer) { |
| utils.addEvent(this.indicator, utils.prefixPointerEvent('pointerdown'), this); |
| utils.addEvent(window, utils.prefixPointerEvent('pointerup'), this); |
| } |
| if (!this.options.disableMouse) { |
| utils.addEvent(this.indicator, 'mousedown', this); |
| utils.addEvent(window, 'mouseup', this); |
| } |
| } |
|
|
| if (this.options.fade) { |
| this.wrapperStyle[utils.style.transform] = this.scroller.translateZ; |
| var durationProp = utils.style.transitionDuration; |
| if (!durationProp) { |
| return; |
| } |
| this.wrapperStyle[durationProp] = utils.isBadAndroid ? '0.0001ms' : '0ms'; |
| |
| var self = this; |
| if (utils.isBadAndroid) { |
| rAF(function () { |
| if (self.wrapperStyle[durationProp] === '0.0001ms') { |
| self.wrapperStyle[durationProp] = '0s'; |
| } |
| }); |
| } |
| this.wrapperStyle.opacity = '0'; |
| } |
| } |
|
|
| Indicator.prototype = { |
| handleEvent: function (e) { |
| switch (e.type) { |
| case 'touchstart': |
| case 'pointerdown': |
| case 'MSPointerDown': |
| case 'mousedown': |
| this._start(e); |
| break; |
| case 'touchmove': |
| case 'pointermove': |
| case 'MSPointerMove': |
| case 'mousemove': |
| this._move(e); |
| break; |
| case 'touchend': |
| case 'pointerup': |
| case 'MSPointerUp': |
| case 'mouseup': |
| case 'touchcancel': |
| case 'pointercancel': |
| case 'MSPointerCancel': |
| case 'mousecancel': |
| this._end(e); |
| break; |
| } |
| }, |
|
|
| destroy: function () { |
| if (this.options.fadeScrollbars) { |
| clearTimeout(this.fadeTimeout); |
| this.fadeTimeout = null; |
| } |
| if (this.options.interactive) { |
| utils.removeEvent(this.indicator, 'touchstart', this); |
| utils.removeEvent(this.indicator, utils.prefixPointerEvent('pointerdown'), this); |
| utils.removeEvent(this.indicator, 'mousedown', this); |
|
|
| utils.removeEvent(window, 'touchmove', this); |
| utils.removeEvent(window, utils.prefixPointerEvent('pointermove'), this); |
| utils.removeEvent(window, 'mousemove', this); |
|
|
| utils.removeEvent(window, 'touchend', this); |
| utils.removeEvent(window, utils.prefixPointerEvent('pointerup'), this); |
| utils.removeEvent(window, 'mouseup', this); |
| } |
|
|
| if (this.options.defaultScrollbars && this.wrapper.parentNode) { |
| this.wrapper.parentNode.removeChild(this.wrapper); |
| } |
| }, |
|
|
| _start: function (e) { |
| var point = e.touches ? e.touches[0] : e; |
|
|
| e.preventDefault(); |
| e.stopPropagation(); |
|
|
| this.transitionTime(); |
|
|
| this.initiated = true; |
| this.moved = false; |
| this.lastPointX = point.pageX; |
| this.lastPointY = point.pageY; |
|
|
| this.startTime = utils.getTime(); |
|
|
| if (!this.options.disableTouch) { |
| utils.addEvent(window, 'touchmove', this); |
| } |
| if (!this.options.disablePointer) { |
| utils.addEvent(window, utils.prefixPointerEvent('pointermove'), this); |
| } |
| if (!this.options.disableMouse) { |
| utils.addEvent(window, 'mousemove', this); |
| } |
|
|
| this.scroller._execEvent('beforeScrollStart'); |
| }, |
|
|
| _move: function (e) { |
| var point = e.touches ? e.touches[0] : e; |
| var deltaX; |
| var deltaY; |
| var newX; |
| var newY; |
| var timestamp = utils.getTime(); |
|
|
| if (!this.moved) { |
| this.scroller._execEvent('scrollStart'); |
| } |
|
|
| this.moved = true; |
|
|
| deltaX = point.pageX - this.lastPointX; |
| this.lastPointX = point.pageX; |
|
|
| deltaY = point.pageY - this.lastPointY; |
| this.lastPointY = point.pageY; |
|
|
| newX = this.x + deltaX; |
| newY = this.y + deltaY; |
|
|
| this._pos(newX, newY); |
|
|
| |
|
|
| e.preventDefault(); |
| e.stopPropagation(); |
| }, |
|
|
| _end: function (e) { |
| if (!this.initiated) { |
| return; |
| } |
|
|
| this.initiated = false; |
|
|
| e.preventDefault(); |
| e.stopPropagation(); |
|
|
| utils.removeEvent(window, 'touchmove', this); |
| utils.removeEvent(window, utils.prefixPointerEvent('pointermove'), this); |
| utils.removeEvent(window, 'mousemove', this); |
|
|
| if (this.scroller.options.snap) { |
| var snap = this.scroller._nearestSnap(this.scroller.x, this.scroller.y); |
|
|
| var time = |
| this.options.snapSpeed || |
| Math.max( |
| Math.max( |
| Math.min(Math.abs(this.scroller.x - snap.x), 1000), |
| Math.min(Math.abs(this.scroller.y - snap.y), 1000) |
| ), |
| 300 |
| ); |
|
|
| if (this.scroller.x != snap.x || this.scroller.y != snap.y) { |
| this.scroller.directionX = 0; |
| this.scroller.directionY = 0; |
| this.scroller.currentPage = snap; |
| this.scroller.scrollTo(snap.x, snap.y, time, this.scroller.options.bounceEasing); |
| } |
| } |
|
|
| if (this.moved) { |
| this.scroller._execEvent('scrollEnd'); |
| } |
| }, |
|
|
| transitionTime: function (time) { |
| time = time || 0; |
| var durationProp = utils.style.transitionDuration; |
| if (!durationProp) { |
| return; |
| } |
|
|
| this.indicatorStyle[durationProp] = time + 'ms'; |
|
|
| if (!time && utils.isBadAndroid) { |
| this.indicatorStyle[durationProp] = '0.0001ms'; |
| |
| var self = this; |
| rAF(function () { |
| if (self.indicatorStyle[durationProp] === '0.0001ms') { |
| self.indicatorStyle[durationProp] = '0s'; |
| } |
| }); |
| } |
| }, |
|
|
| transitionTimingFunction: function (easing) { |
| this.indicatorStyle[utils.style.transitionTimingFunction] = 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'; |
| } |
|
|
| if (this.scroller.hasHorizontalScroll && this.scroller.hasVerticalScroll) { |
| utils.addClass(this.wrapper, 'iScrollBothScrollbars'); |
| utils.removeClass(this.wrapper, 'iScrollLoneScrollbar'); |
|
|
| if (this.options.defaultScrollbars && this.options.customStyle) { |
| if (this.options.listenX) { |
| this.wrapper.style.right = '8px'; |
| } else { |
| this.wrapper.style.bottom = '8px'; |
| } |
| } |
| } else { |
| utils.removeClass(this.wrapper, 'iScrollBothScrollbars'); |
| utils.addClass(this.wrapper, 'iScrollLoneScrollbar'); |
|
|
| if (this.options.defaultScrollbars && this.options.customStyle) { |
| if (this.options.listenX) { |
| this.wrapper.style.right = '2px'; |
| } else { |
| this.wrapper.style.bottom = '2px'; |
| } |
| } |
| } |
|
|
| utils.getRect(this.wrapper); |
|
|
| if (this.options.listenX) { |
| this.wrapperWidth = this.wrapper.clientWidth; |
| if (this.options.resize) { |
| this.indicatorWidth = Math.max( |
| Math.round( |
| (this.wrapperWidth * this.wrapperWidth) / |
| (this.scroller.scrollerWidth || this.wrapperWidth || 1) |
| ), |
| 8 |
| ); |
| this.indicatorStyle.width = this.indicatorWidth + 'px'; |
| } else { |
| this.indicatorWidth = this.indicator.clientWidth; |
| } |
|
|
| this.maxPosX = this.wrapperWidth - this.indicatorWidth; |
|
|
| if (this.options.shrink == 'clip') { |
| this.minBoundaryX = -this.indicatorWidth + 8; |
| this.maxBoundaryX = this.wrapperWidth - 8; |
| } else { |
| 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; |
| if (this.options.resize) { |
| this.indicatorHeight = Math.max( |
| Math.round( |
| (this.wrapperHeight * this.wrapperHeight) / |
| (this.scroller.scrollerHeight || this.wrapperHeight || 1) |
| ), |
| 8 |
| ); |
| this.indicatorStyle.height = this.indicatorHeight + 'px'; |
| } else { |
| this.indicatorHeight = this.indicator.clientHeight; |
| } |
|
|
| this.maxPosY = this.wrapperHeight - this.indicatorHeight; |
|
|
| if (this.options.shrink == 'clip') { |
| this.minBoundaryY = -this.indicatorHeight + 8; |
| this.maxBoundaryY = this.wrapperHeight - 8; |
| } else { |
| this.minBoundaryY = 0; |
| this.maxBoundaryY = this.maxPosY; |
| } |
|
|
| this.maxPosY = this.wrapperHeight - this.indicatorHeight; |
| 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; |
| var y = (this.options.listenY && Math.round(this.sizeRatioY * this.scroller.y)) || 0; |
|
|
| if (!this.options.ignoreBoundaries) { |
| if (x < this.minBoundaryX) { |
| if (this.options.shrink == 'scale') { |
| this.width = Math.max(this.indicatorWidth + x, 8); |
| this.indicatorStyle.width = this.width + 'px'; |
| } |
| x = this.minBoundaryX; |
| } else if (x > this.maxBoundaryX) { |
| if (this.options.shrink == 'scale') { |
| this.width = Math.max(this.indicatorWidth - (x - this.maxPosX), 8); |
| this.indicatorStyle.width = this.width + 'px'; |
| x = this.maxPosX + this.indicatorWidth - this.width; |
| } else { |
| x = this.maxBoundaryX; |
| } |
| } else if (this.options.shrink == 'scale' && this.width != this.indicatorWidth) { |
| this.width = this.indicatorWidth; |
| this.indicatorStyle.width = this.width + 'px'; |
| } |
|
|
| if (y < this.minBoundaryY) { |
| if (this.options.shrink == 'scale') { |
| this.height = Math.max(this.indicatorHeight + y * 3, 8); |
| this.indicatorStyle.height = this.height + 'px'; |
| } |
| y = this.minBoundaryY; |
| } else if (y > this.maxBoundaryY) { |
| if (this.options.shrink == 'scale') { |
| 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 { |
| y = this.maxBoundaryY; |
| } |
| } else if (this.options.shrink == 'scale' && this.height != this.indicatorHeight) { |
| this.height = this.indicatorHeight; |
| this.indicatorStyle.height = this.height + 'px'; |
| } |
| } |
|
|
| this.x = x; |
| this.y = y; |
|
|
| if (this.scroller.options.useTransform) { |
| this.indicatorStyle[utils.style.transform] = |
| 'translate(' + x + 'px,' + y + 'px)' + this.scroller.translateZ; |
| } else { |
| this.indicatorStyle.left = x + 'px'; |
| this.indicatorStyle.top = y + 'px'; |
| } |
| }, |
|
|
| _pos: function (x, y) { |
| if (x < 0) { |
| x = 0; |
| } else if (x > this.maxPosX) { |
| x = this.maxPosX; |
| } |
|
|
| if (y < 0) { |
| y = 0; |
| } else if (y > this.maxPosY) { |
| y = this.maxPosY; |
| } |
|
|
| x = this.options.listenX ? Math.round(x / this.sizeRatioX) : this.scroller.x; |
| y = this.options.listenY ? Math.round(y / this.sizeRatioY) : this.scroller.y; |
|
|
| this.scroller.scrollTo(x, y); |
| }, |
|
|
| fade: function (val, hold) { |
| if (hold && !this.visible) { |
| return; |
| } |
|
|
| clearTimeout(this.fadeTimeout); |
| this.fadeTimeout = null; |
|
|
| var time = val ? 250 : 500; |
| var delay = val ? 0 : 300; |
|
|
| val = val ? '1' : '0'; |
|
|
| this.wrapperStyle[utils.style.transitionDuration] = time + 'ms'; |
|
|
| this.fadeTimeout = setTimeout( |
| function (val) { |
| this.wrapperStyle.opacity = val; |
| this.visible = +val; |
| }.bind(this, val), |
| delay |
| ); |
| }, |
| }; |
|
|
| IScroll.utils = utils; |
|
|
| if (typeof module != 'undefined' && module.exports) { |
| module.exports = IScroll; |
| } else if (typeof define == 'function' && define.amd) { |
| define(function () { |
| return IScroll; |
| }); |
| } else { |
| window.IScroll = IScroll; |
| } |
|
|
| window.FLIPBOOK = window.FLIPBOOK || {}; |
| window.FLIPBOOK.IScroll = IScroll; |
|
|
| window.PointerEvent = undefined; |
|
|
| |
| |
| |
| |
| |
| })(window, document, Math); |
|
|