diff --git a/config.xml b/config.xml
index 44f0237..119b1fa 100755
--- a/config.xml
+++ b/config.xml
@@ -19,7 +19,7 @@
-
+
diff --git a/css/magazine-themes.css b/css/magazine-themes.css
index 677a627..b093a1f 100755
--- a/css/magazine-themes.css
+++ b/css/magazine-themes.css
@@ -62,7 +62,7 @@
.top-toolbar, .bottom-toolbar {
font-size: 14px;
color: silver;
- box-shadow: 5px 5px 50px 5px #444 inset;
+ /*box-shadow: 5px 5px 50px 5px #444 inset;*/
}
.top-toolbar .title,
@@ -154,8 +154,8 @@
.light-viewer .bottom-toolbar {
font-size: 14px;
color: silver;
- background: white;
- box-shadow: 5px 5px 50px 20px #eee;
+ /*background: white;
+ box-shadow: 5px 5px 50px 20px #eee;*/
}
.light-viewer .top-toolbar a,
.light-viewer .bottom-toolbar a {
@@ -240,8 +240,8 @@
.dark-viewer .bottom-toolbar {
font-size: 14px;
color: gray;
- background: black;
- box-shadow: none;
+ /*background: black;
+ box-shadow: none;*/
}
.dark-viewer .top-toolbar a,
diff --git a/css/magazine.css b/css/magazine.css
index 076c2b0..a0ff57b 100755
--- a/css/magazine.css
+++ b/css/magazine.css
@@ -299,7 +299,8 @@ body {
text-align: center;
overflow: hidden;
- background: #555;
+ /*background: #555;*/
+ background: transparent;
opacity: 0.9;
height: 50px;
@@ -319,12 +320,6 @@ body {
bottom: 0px;
width: 100%;
}
-.page-view-mode .top-toolbar,
-.page-view-mode .bottom-toolbar,
-.full-page-view-mode .top-toolbar,
-.full-page-view-mode .bottom-toolbar {
- display: none;
-}
/* title */
.top-toolbar .title,
@@ -560,6 +555,7 @@ body {
.page-view-mode .top-toolbar,
.page-view-mode .bottom-toolbar {
+ display: none;
}
.page-view-mode .page .content {
diff --git a/ext-lib/iscroll-infinite.js b/ext-lib/iscroll-infinite.js
new file mode 100755
index 0000000..f524f40
--- /dev/null
+++ b/ext-lib/iscroll-infinite.js
@@ -0,0 +1,1565 @@
+/*! iScroll v5.1.1 ~ (c) 2008-2014 Matteo Spinelli ~ http://cubiq.org/license */
+(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'],
+ transform,
+ i = 0,
+ 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.momentum = function (current, start, time, lowerMargin, wrapperSize, deceleration) {
+ var distance = current - start,
+ speed = 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
+ };
+ };
+
+ var _transform = _prefixStyle('transform');
+
+ me.extend(me, {
+ hasTransform: _transform !== false,
+ hasPerspective: _prefixStyle('perspective') in _elementStyle,
+ hasTouch: 'ontouchstart' in window,
+ hasPointer: navigator.msPointerEnabled,
+ hasTransition: _prefixStyle('transition') in _elementStyle
+ });
+
+ // This should find all Android browsers lower than build 535.19 (both stock browser and webview)
+ me.isBadAndroid = /Android /.test(window.navigator.appVersion) && !(/Chrome\/\d/.test(window.navigator.appVersion));
+
+ me.extend(me.style = {}, {
+ transform: _transform,
+ transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
+ transitionDuration: _prefixStyle('transitionDuration'),
+ transitionDelay: _prefixStyle('transitionDelay'),
+ transformOrigin: _prefixStyle('transformOrigin')
+ });
+
+ 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,
+ top = -el.offsetTop;
+
+ // jshint -W084
+ while (el = el.offsetParent) {
+ left -= el.offsetLeft;
+ top -= el.offsetTop;
+ }
+ // jshint +W084
+
+ 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,
+
+ 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)', // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 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,
+ 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,
+ ev;
+
+ if ( !(/(SELECT|INPUT|TEXTAREA)/i).test(target.tagName) ) {
+ ev = document.createEvent('MouseEvents');
+ ev.initMouseEvent('click', true, true, e.view, 1,
+ target.screenX, target.screenY, target.clientX, target.clientY,
+ e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+ 0, null);
+
+ ev._constructed = true;
+ target.dispatchEvent(ev);
+ }
+ };
+
+ 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; // cache style for better performance
+
+ this.options = {
+
+ mouseWheelSpeed: 20,
+
+ snapThreshold: 0.334,
+
+ infiniteUseTransform: true,
+ deceleration: 0.004,
+
+// INSERT POINT: OPTIONS
+
+ 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
+ };
+
+ for ( var i in options ) {
+ this.options[i] = options[i];
+ }
+
+ // Normalize options
+ 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;
+
+ // If you want eventPassthrough I have to lock one of the axes
+ this.options.scrollY = this.options.eventPassthrough == 'vertical' ? false : this.options.scrollY;
+ this.options.scrollX = this.options.eventPassthrough == 'horizontal' ? false : this.options.scrollX;
+
+ // With eventPassthrough we also need lockDirection mechanism
+ 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';
+ }
+
+ this.options.invertWheelDirection = this.options.invertWheelDirection ? -1 : 1;
+
+ if ( this.options.infiniteElements ) {
+ this.options.probeType = 3;
+ }
+ this.options.infiniteUseTransform = this.options.infiniteUseTransform && this.options.useTransform;
+
+ if ( this.options.probeType == 3 ) {
+ this.options.useTransition = false; }
+
+// INSERT POINT: NORMALIZATION
+
+ // Some defaults
+ this.x = 0;
+ this.y = 0;
+ this.directionX = 0;
+ this.directionY = 0;
+ this._events = {};
+
+// INSERT POINT: DEFAULTS
+
+ this._init();
+ this.refresh();
+
+ this.scrollTo(this.options.startX, this.options.startY);
+ this.enable();
+}
+
+IScroll.prototype = {
+ version: '5.1.1',
+
+ _init: function () {
+ this._initEvents();
+
+ if ( this.options.mouseWheel ) {
+ this._initWheel();
+ }
+
+ if ( this.options.snap ) {
+ this._initSnap();
+ }
+
+ if ( this.options.keyBindings ) {
+ this._initKeys();
+ }
+
+ if ( this.options.infiniteElements ) {
+ this._initInfinite();
+ }
+
+// INSERT POINT: _init
+
+ },
+
+ destroy: function () {
+ this._initEvents(true);
+
+ 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) {
+ // React to left mouse button only
+ if ( utils.eventType[e.type] != 1 ) {
+ if ( e.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,
+ 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._transitionTime();
+
+ this.startTime = utils.getTime();
+
+ if ( this.options.useTransition && this.isInTransition ) {
+ 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 ( this.options.preventDefault ) { // increases performance on Android? TODO: check!
+ e.preventDefault();
+ }
+
+ var point = e.touches ? e.touches[0] : e,
+ deltaX = point.pageX - this.pointX,
+ deltaY = point.pageY - this.pointY,
+ timestamp = utils.getTime(),
+ newX, newY,
+ absDistX, 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);
+
+ // We need to move at least 10 pixels for the scrolling to initiate
+ if ( timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10) ) {
+ return;
+ }
+
+ // If you are scrolling in one direction lock the other
+ if ( !this.directionLocked && !this.options.freeScroll ) {
+ if ( absDistX > absDistY + this.options.directionLockThreshold ) {
+ this.directionLocked = 'h'; // lock horizontally
+ } else if ( absDistY >= absDistX + this.options.directionLockThreshold ) {
+ this.directionLocked = 'v'; // lock vertically
+ } else {
+ this.directionLocked = 'n'; // no lock
+ }
+ }
+
+ 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;
+
+ // 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;
+ }
+
+ 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);
+
+/* REPLACE START: _move */
+ if ( timestamp - this.startTime > 300 ) {
+ this.startTime = timestamp;
+ this.startX = this.x;
+ this.startY = this.y;
+
+ if ( this.options.probeType == 1 ) {
+ this._execEvent('scroll');
+ }
+ }
+
+ if ( this.options.probeType > 1 ) {
+ this._execEvent('scroll');
+ }
+/* REPLACE END: _move */
+
+ },
+
+ _end: function (e) {
+ if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
+ return;
+ }
+
+ if ( this.options.preventDefault && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
+ e.preventDefault();
+ }
+
+ var point = e.changedTouches ? e.changedTouches[0] : e,
+ momentumX,
+ momentumY,
+ duration = utils.getTime() - this.startTime,
+ newX = Math.round(this.x),
+ newY = Math.round(this.y),
+ distanceX = Math.abs(newX - this.startX),
+ distanceY = Math.abs(newY - this.startY),
+ time = 0,
+ easing = '';
+
+ this.isInTransition = 0;
+ this.initiated = 0;
+ this.endTime = utils.getTime();
+
+ // 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
+
+ // we scrolled less than 10 pixels
+ 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;
+ }
+
+ // start momentum animation if needed
+ 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;
+ }
+
+// INSERT POINT: _end
+
+ if ( newX != this.x || newY != this.y ) {
+ // change easing function when scroller goes out of the boundaries
+ if ( newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY ) {
+ easing = utils.ease.quadratic;
+ }
+
+ this.scrollTo(newX, newY, time, easing);
+ 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,
+ 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;
+ },
+
+ disable: function () {
+ this.enabled = false;
+ },
+
+ enable: function () {
+ this.enabled = true;
+ },
+
+ refresh: function () {
+ var rf = this.wrapper.offsetHeight; // Force reflow
+
+ this.wrapperWidth = this.wrapper.clientWidth;
+ this.wrapperHeight = this.wrapper.clientHeight;
+
+/* REPLACE START: refresh */
+ this.scrollerWidth = this.scroller.offsetWidth;
+ this.scrollerHeight = this.scroller.offsetHeight;
+
+ this.maxScrollX = this.wrapperWidth - this.scrollerWidth;
+
+ var limit;
+ if ( this.options.infiniteElements ) {
+ this.options.infiniteLimit = this.options.infiniteLimit || Math.floor(2147483645 / this.infiniteElementHeight);
+ limit = -this.options.infiniteLimit * this.infiniteElementHeight + this.wrapperHeight;
+ }
+ this.maxScrollY = limit !== undefined ? limit : this.wrapperHeight - this.scrollerHeight;
+/* REPLACE END: refresh */
+
+ 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;
+
+ this.wrapperOffset = utils.offset(this.wrapper);
+
+ this._execEvent('refresh');
+
+ this.resetPosition();
+
+// INSERT POINT: _refresh
+
+ },
+
+ 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,
+ 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);
+ },
+
+ scrollTo: function (x, y, time, easing) {
+ easing = easing || utils.ease.circular;
+
+ this.isInTransition = this.options.useTransition && time > 0;
+
+ if ( !time || (this.options.useTransition && easing.style) ) {
+ 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;
+
+ // if offsetX/Y are true we center the element to the screen
+ if ( offsetX === true ) {
+ offsetX = Math.round(el.offsetWidth / 2 - this.wrapper.offsetWidth / 2);
+ }
+ if ( offsetY === true ) {
+ offsetY = Math.round(el.offsetHeight / 2 - this.wrapper.offsetHeight / 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) {
+ time = time || 0;
+
+ this.scrollerStyle[utils.style.transitionDuration] = time + 'ms';
+
+ if ( !time && utils.isBadAndroid ) {
+ this.scrollerStyle[utils.style.transitionDuration] = '0.001s';
+ }
+
+// INSERT POINT: _transitionTime
+
+ },
+
+ _transitionTimingFunction: function (easing) {
+ this.scrollerStyle[utils.style.transitionTimingFunction] = easing;
+
+// INSERT POINT: _transitionTimingFunction
+
+ },
+
+ _translate: function (x, y) {
+ if ( this.options.useTransform ) {
+
+/* REPLACE START: _translate */
+
+ this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;
+
+/* REPLACE END: _translate */
+
+ } 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;
+
+// INSERT POINT: _translate
+
+ },
+
+ _initEvents: function (remove) {
+ var eventType = remove ? utils.removeEvent : utils.addEvent,
+ 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, 'MSPointerDown', this);
+ eventType(target, 'MSPointerMove', this);
+ eventType(target, 'MSPointerCancel', this);
+ eventType(target, 'MSPointerUp', 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),
+ x, 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 };
+ },
+
+ _initWheel: function () {
+ utils.addEvent(this.wrapper, 'wheel', this);
+ utils.addEvent(this.wrapper, 'mousewheel', this);
+ utils.addEvent(this.wrapper, 'DOMMouseScroll', this);
+
+ this.on('destroy', function () {
+ 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;
+ }
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ var wheelDeltaX, wheelDeltaY,
+ newX, newY,
+ that = this;
+
+ if ( this.wheelTimeout === undefined ) {
+ that._execEvent('scrollStart');
+ }
+
+ // Execute the scrollEnd event after 400ms the wheel stopped scrolling
+ clearTimeout(this.wheelTimeout);
+ this.wheelTimeout = setTimeout(function () {
+ that._execEvent('scrollEnd');
+ that.wheelTimeout = undefined;
+ }, 400);
+
+ if ( 'deltaX' in e ) {
+ 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);
+
+ 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;
+ }
+
+ this.scrollTo(newX, newY, 0);
+
+ if ( this.options.probeType > 1 ) {
+ this._execEvent('scroll');
+ }
+
+// INSERT POINT: _wheel
+ },
+
+ _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, l,
+ m = 0, n,
+ cx, cy,
+ x = 0, y,
+ stepX = this.options.snapStepX || this.wrapperWidth,
+ stepY = this.options.snapStepY || this.wrapperHeight,
+ el;
+
+ 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++ ) {
+ if ( i === 0 || el[i].offsetLeft <= el[i-1].offsetLeft ) {
+ m = 0;
+ n++;
+ }
+
+ if ( !this.pages[m] ) {
+ this.pages[m] = [];
+ }
+
+ x = Math.max(-el[i].offsetLeft, this.maxScrollX);
+ y = Math.max(-el[i].offsetTop, this.maxScrollY);
+ cx = x - Math.round(el[i].offsetWidth / 2);
+ cy = y - Math.round(el[i].offsetHeight / 2);
+
+ this.pages[m][n] = {
+ x: x,
+ y: y,
+ width: el[i].offsetWidth,
+ height: el[i].offsetHeight,
+ cx: cx,
+ cy: cy
+ };
+
+ if ( x > this.maxScrollX ) {
+ m++;
+ }
+ }
+ }
+
+ this.goToPage(this.currentPage.pageX || 0, this.currentPage.pageY || 0, 0);
+
+ // Update snap threshold if needed
+ 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,
+ l = this.pages.length,
+ m = 0;
+
+ // Check if we exceeded the snap threshold
+ 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,
+ 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,
+ 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,
+ y = this.currentPage.pageY;
+
+ x--;
+
+ if ( x < 0 && this.hasVerticalScroll ) {
+ x = 0;
+ y--;
+ }
+
+ this.goToPage(x, y, time, easing);
+ },
+
+ _initKeys: function (e) {
+ // default key bindings
+ var keys = {
+ pageUp: 33,
+ pageDown: 34,
+ end: 35,
+ home: 36,
+ left: 37,
+ up: 38,
+ right: 39,
+ down: 40
+ };
+ var i;
+
+ // if you give me characters I give you keycode
+ 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, // we are using this alot, better to cache it
+ newX = snap ? this.currentPage.pageX : this.x,
+ newY = snap ? this.currentPage.pageY : this.y,
+ now = utils.getTime(),
+ prevTime = this.keyTime || 0,
+ acceleration = 0.250,
+ 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,
+ startX = this.x,
+ startY = this.y,
+ startTime = utils.getTime(),
+ destTime = startTime + duration;
+
+ function step () {
+ var now = utils.getTime(),
+ newX, newY,
+ 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);
+ }
+
+ if ( that.options.probeType == 3 ) {
+ that._execEvent('scroll');
+ }
+ }
+
+ this.isAnimating = true;
+ step();
+ },
+
+ _initInfinite: function () {
+ var el = this.options.infiniteElements;
+
+ this.infiniteElements = typeof el == 'string' ? document.querySelectorAll(el) : el;
+ this.infiniteLength = this.infiniteElements.length;
+ this.infiniteMaster = this.infiniteElements[0];
+ this.infiniteElementHeight = this.infiniteMaster.offsetHeight;
+ this.infiniteHeight = this.infiniteLength * this.infiniteElementHeight;
+
+ this.options.cacheSize = this.options.cacheSize || 1000;
+ this.infiniteCacheBuffer = Math.round(this.options.cacheSize / 4);
+
+ //this.infiniteCache = {};
+ this.options.dataset.call(this, 0, this.options.cacheSize);
+
+ this.on('refresh', function () {
+ var elementsPerPage = Math.ceil(this.wrapperHeight / this.infiniteElementHeight);
+ this.infiniteUpperBufferSize = Math.floor((this.infiniteLength - elementsPerPage) / 2);
+ this.reorderInfinite();
+ });
+
+ this.on('scroll', this.reorderInfinite);
+ },
+
+ // TO-DO: clean up the mess
+ reorderInfinite: function () {
+ var center = -this.y + this.wrapperHeight / 2;
+
+ var minorPhase = Math.max(Math.floor(-this.y / this.infiniteElementHeight) - this.infiniteUpperBufferSize, 0),
+ majorPhase = Math.floor(minorPhase / this.infiniteLength),
+ phase = minorPhase - majorPhase * this.infiniteLength;
+
+ var top = 0;
+ var i = 0;
+ var update = [];
+
+ //var cachePhase = Math.floor((minorPhase + this.infiniteLength / 2) / this.infiniteCacheBuffer);
+ var cachePhase = Math.floor(minorPhase / this.infiniteCacheBuffer);
+
+ while ( i < this.infiniteLength ) {
+ top = i * this.infiniteElementHeight + majorPhase * this.infiniteHeight;
+
+ if ( phase > i ) {
+ top += this.infiniteElementHeight * this.infiniteLength;
+ }
+
+ if ( this.infiniteElements[i]._top !== top ) {
+ this.infiniteElements[i]._phase = top / this.infiniteElementHeight;
+
+ if ( this.infiniteElements[i]._phase < this.options.infiniteLimit ) {
+ this.infiniteElements[i]._top = top;
+ if ( this.options.infiniteUseTransform ) {
+ this.infiniteElements[i].style[utils.style.transform] = 'translate(0, ' + top + 'px)' + this.translateZ;
+ } else {
+ this.infiniteElements[i].style.top = top + 'px';
+ }
+ update.push(this.infiniteElements[i]);
+ }
+ }
+
+ i++;
+ }
+
+ if ( this.cachePhase != cachePhase && (cachePhase === 0 || minorPhase - this.infiniteCacheBuffer > 0) ) {
+ this.options.dataset.call(this, Math.max(cachePhase * this.infiniteCacheBuffer - this.infiniteCacheBuffer, 0), this.options.cacheSize);
+ }
+
+ this.cachePhase = cachePhase;
+
+ this.updateContent(update);
+ },
+
+ updateContent: function (els) {
+ if ( this.infiniteCache === undefined ) {
+ return;
+ }
+
+ for ( var i = 0, l = els.length; i < l; i++ ) {
+ this.options.dataFiller.call(this, els[i], this.infiniteCache[els[i]._phase]);
+ }
+ },
+
+ updateCache: function (start, data) {
+ var firstRun = this.infiniteCache === undefined;
+
+ this.infiniteCache = {};
+
+ for ( var i = 0, l = data.length; i < l; i++ ) {
+ this.infiniteCache[start++] = data[i];
+ }
+
+ if ( firstRun ) {
+ this.updateContent(this.infiniteElements);
+ }
+
+ },
+
+
+ handleEvent: function (e) {
+ switch ( e.type ) {
+ case 'touchstart':
+ case 'MSPointerDown':
+ case 'mousedown':
+ this._start(e);
+ break;
+ case 'touchmove':
+ case 'MSPointerMove':
+ case 'mousemove':
+ this._move(e);
+ break;
+ case 'touchend':
+ case 'MSPointerUp':
+ case 'mouseup':
+ case 'touchcancel':
+ case 'MSPointerCancel':
+ case 'mousecancel':
+ 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':
+ this._wheel(e);
+ break;
+ case 'keydown':
+ this._key(e);
+ break;
+ case 'click':
+ if ( !e._constructed ) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ break;
+ }
+ }
+};
+IScroll.utils = utils;
+
+if ( typeof module != 'undefined' && module.exports ) {
+ module.exports = IScroll;
+} else {
+ window.IScroll = IScroll;
+}
+
+})(window, document, Math);
\ No newline at end of file
diff --git a/ext-lib/iscroll-lite.js b/ext-lib/iscroll-lite.js
new file mode 100755
index 0000000..3a6cab7
--- /dev/null
+++ b/ext-lib/iscroll-lite.js
@@ -0,0 +1,594 @@
+/*!
+ * iScroll Lite base on iScroll v4.1.6 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
+ * Released under MIT license, http://cubiq.org/license
+ */
+
+(function(){
+var m = Math,
+ mround = function (r) { return r >> 0; },
+ vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
+ (/firefox/i).test(navigator.userAgent) ? 'Moz' :
+ 'opera' in window ? 'O' : '',
+
+ // Browser capabilities
+ isAndroid = (/android/gi).test(navigator.appVersion),
+ isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
+ isPlaybook = (/playbook/gi).test(navigator.appVersion),
+ isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
+
+ has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix(),
+ hasTouch = 'ontouchstart' in window && !isTouchPad,
+ hasTransform = vendor + 'Transform' in document.documentElement.style,
+ hasTransitionEnd = isIDevice || isPlaybook,
+
+ nextFrame = (function() {
+ return window.requestAnimationFrame
+ || window.webkitRequestAnimationFrame
+ || window.mozRequestAnimationFrame
+ || window.oRequestAnimationFrame
+ || window.msRequestAnimationFrame
+ || function(callback) { return setTimeout(callback, 17); }
+ })(),
+ cancelFrame = (function () {
+ return window.cancelRequestAnimationFrame
+ || window.webkitCancelAnimationFrame
+ || window.webkitCancelRequestAnimationFrame
+ || window.mozCancelRequestAnimationFrame
+ || window.oCancelRequestAnimationFrame
+ || window.msCancelRequestAnimationFrame
+ || clearTimeout
+ })(),
+
+ // Events
+ RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
+ START_EV = hasTouch ? 'touchstart' : 'mousedown',
+ MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
+ END_EV = hasTouch ? 'touchend' : 'mouseup',
+ CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
+
+ // Helpers
+ trnOpen = 'translate' + (has3d ? '3d(' : '('),
+ trnClose = has3d ? ',0)' : ')',
+
+ // Constructor
+ iScroll = function (el, options) {
+ var that = this,
+ doc = document,
+ i;
+
+ that.wrapper = typeof el == 'object' ? el : doc.getElementById(el);
+ that.wrapper.style.overflow = 'hidden';
+ that.scroller = that.wrapper.children[0];
+
+ // Default options
+ that.options = {
+ hScroll: true,
+ vScroll: true,
+ x: 0,
+ y: 0,
+ bounce: true,
+ bounceLock: false,
+ momentum: true,
+ lockDirection: true,
+ useTransform: true,
+ useTransition: false,
+
+ // Events
+ onRefresh: null,
+ onBeforeScrollStart: function (e) { e.preventDefault(); },
+ onScrollStart: null,
+ onBeforeScrollMove: null,
+ onScrollMove: null,
+ onBeforeScrollEnd: null,
+ onScrollEnd: null,
+ onTouchEnd: null,
+ onDestroy: null
+ };
+
+ // User defined options
+ for (i in options) that.options[i] = options[i];
+
+ // Set starting position
+ that.x = that.options.x;
+ that.y = that.options.y;
+
+ // Normalize options
+ that.options.useTransform = hasTransform ? that.options.useTransform : false;
+ that.options.hScrollbar = that.options.hScroll && that.options.hScrollbar;
+ that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar;
+ that.options.useTransition = hasTransitionEnd && that.options.useTransition;
+
+ // Set some default styles
+ that.scroller.style[vendor + 'TransitionProperty'] = that.options.useTransform ? '-' + vendor.toLowerCase() + '-transform' : 'top left';
+ that.scroller.style[vendor + 'TransitionDuration'] = '0';
+ that.scroller.style[vendor + 'TransformOrigin'] = '0 0';
+ if (that.options.useTransition) that.scroller.style[vendor + 'TransitionTimingFunction'] = 'cubic-bezier(0.33,0.66,0.66,1)';
+
+ if (that.options.useTransform) that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose;
+ else that.scroller.style.cssText += ';position:absolute;top:' + that.y + 'px;left:' + that.x + 'px';
+
+ that.refresh();
+
+ that._bind(RESIZE_EV, window);
+ that._bind(START_EV);
+ if (!hasTouch) that._bind('mouseout', that.wrapper);
+ };
+
+// Prototype
+iScroll.prototype = {
+ enabled: true,
+ x: 0,
+ y: 0,
+ steps: [],
+ scale: 1,
+
+ handleEvent: function (e) {
+ var that = this;
+ switch(e.type) {
+ case START_EV:
+ if (!hasTouch && e.button !== 0) return;
+ that._start(e);
+ break;
+ case MOVE_EV: that._move(e); break;
+ case END_EV:
+ case CANCEL_EV: that._end(e); break;
+ case RESIZE_EV: that._resize(); break;
+ case 'mouseout': that._mouseout(e); break;
+ case 'webkitTransitionEnd': that._transitionEnd(e); break;
+ }
+ },
+
+ _resize: function () {
+ this.refresh();
+ },
+
+ _pos: function (x, y) {
+ x = this.hScroll ? x : 0;
+ y = this.vScroll ? y : 0;
+
+ if (this.options.useTransform) {
+ this.scroller.style[vendor + 'Transform'] = trnOpen + x + 'px,' + y + 'px' + trnClose + ' scale(' + this.scale + ')';
+ } else {
+ x = mround(x);
+ y = mround(y);
+ this.scroller.style.left = x + 'px';
+ this.scroller.style.top = y + 'px';
+ }
+
+ this.x = x;
+ this.y = y;
+ },
+
+ _start: function (e) {
+ var that = this,
+ point = hasTouch ? e.touches[0] : e,
+ matrix, x, y;
+
+ if (!that.enabled) return;
+
+ if (that.options.onBeforeScrollStart) that.options.onBeforeScrollStart.call(that, e);
+
+ if (that.options.useTransition) that._transitionTime(0);
+
+ that.moved = false;
+ that.animating = false;
+ that.zoomed = false;
+ that.distX = 0;
+ that.distY = 0;
+ that.absDistX = 0;
+ that.absDistY = 0;
+ that.dirX = 0;
+ that.dirY = 0;
+
+ if (that.options.momentum) {
+ if (that.options.useTransform) {
+ // Very lame general purpose alternative to CSSMatrix
+ matrix = getComputedStyle(that.scroller, null)[vendor + 'Transform'].replace(/[^0-9-.,]/g, '').split(',');
+ x = matrix[4] * 1;
+ y = matrix[5] * 1;
+ } else {
+ x = getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, '') * 1;
+ y = getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '') * 1;
+ }
+
+ if (x != that.x || y != that.y) {
+ if (that.options.useTransition) that._unbind('webkitTransitionEnd');
+ else cancelFrame(that.aniTime);
+ that.steps = [];
+ that._pos(x, y);
+ }
+ }
+
+ that.startX = that.x;
+ that.startY = that.y;
+ that.pointX = point.pageX;
+ that.pointY = point.pageY;
+
+ that.startTime = e.timeStamp || Date.now();
+
+ if (that.options.onScrollStart) that.options.onScrollStart.call(that, e);
+
+ that._bind(MOVE_EV);
+ that._bind(END_EV);
+ that._bind(CANCEL_EV);
+ },
+
+ _move: function (e) {
+ var that = this,
+ point = hasTouch ? e.touches[0] : e,
+ deltaX = point.pageX - that.pointX,
+ deltaY = point.pageY - that.pointY,
+ newX = that.x + deltaX,
+ newY = that.y + deltaY,
+ timestamp = e.timeStamp || Date.now();
+
+ if (that.options.onBeforeScrollMove) that.options.onBeforeScrollMove.call(that, e);
+
+ that.pointX = point.pageX;
+ that.pointY = point.pageY;
+
+ // Slow down if outside of the boundaries
+ if (newX > 0 || newX < that.maxScrollX) {
+ newX = that.options.bounce ? that.x + (deltaX / 2) : newX >= 0 || that.maxScrollX >= 0 ? 0 : that.maxScrollX;
+ }
+ if (newY > 0 || newY < that.maxScrollY) {
+ newY = that.options.bounce ? that.y + (deltaY / 2) : newY >= 0 || that.maxScrollY >= 0 ? 0 : that.maxScrollY;
+ }
+
+ that.distX += deltaX;
+ that.distY += deltaY;
+ that.absDistX = m.abs(that.distX);
+ that.absDistY = m.abs(that.distY);
+
+ if (that.absDistX < 6 && that.absDistY < 6) {
+ return;
+ }
+
+ // Lock direction
+ if (that.options.lockDirection) {
+ if (that.absDistX > that.absDistY + 5) {
+ newY = that.y;
+ deltaY = 0;
+ } else if (that.absDistY > that.absDistX + 5) {
+ newX = that.x;
+ deltaX = 0;
+ }
+ }
+
+ that.moved = true;
+ that._pos(newX, newY);
+ that.dirX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
+ that.dirY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
+
+ if (timestamp - that.startTime > 300) {
+ that.startTime = timestamp;
+ that.startX = that.x;
+ that.startY = that.y;
+ }
+
+ if (that.options.onScrollMove) that.options.onScrollMove.call(that, e);
+ },
+
+ _end: function (e) {
+ if (hasTouch && e.touches.length != 0) return;
+
+ var that = this,
+ point = hasTouch ? e.changedTouches[0] : e,
+ target, ev,
+ momentumX = { dist:0, time:0 },
+ momentumY = { dist:0, time:0 },
+ duration = (e.timeStamp || Date.now()) - that.startTime,
+ newPosX = that.x,
+ newPosY = that.y,
+ newDuration;
+
+ that._unbind(MOVE_EV);
+ that._unbind(END_EV);
+ that._unbind(CANCEL_EV);
+
+ if (that.options.onBeforeScrollEnd) that.options.onBeforeScrollEnd.call(that, e);
+
+ if (!that.moved) {
+ if (hasTouch) {
+ // Find the last touched element
+ target = point.target;
+ while (target.nodeType != 1) target = target.parentNode;
+
+ if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
+ ev = document.createEvent('MouseEvents');
+ ev.initMouseEvent('click', true, true, e.view, 1,
+ point.screenX, point.screenY, point.clientX, point.clientY,
+ e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+ 0, null);
+ ev._fake = true;
+ target.dispatchEvent(ev);
+ }
+ }
+
+ that._resetPos(200);
+
+ if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
+ return;
+ }
+
+ if (duration < 300 && that.options.momentum) {
+ momentumX = newPosX ? that._momentum(newPosX - that.startX, duration, -that.x, that.scrollerW - that.wrapperW + that.x, that.options.bounce ? that.wrapperW : 0) : momentumX;
+ momentumY = newPosY ? that._momentum(newPosY - that.startY, duration, -that.y, (that.maxScrollY < 0 ? that.scrollerH - that.wrapperH + that.y : 0), that.options.bounce ? that.wrapperH : 0) : momentumY;
+
+ newPosX = that.x + momentumX.dist;
+ newPosY = that.y + momentumY.dist;
+
+ if ((that.x > 0 && newPosX > 0) || (that.x < that.maxScrollX && newPosX < that.maxScrollX)) momentumX = { dist:0, time:0 };
+ if ((that.y > 0 && newPosY > 0) || (that.y < that.maxScrollY && newPosY < that.maxScrollY)) momentumY = { dist:0, time:0 };
+ }
+
+ if (momentumX.dist || momentumY.dist) {
+ newDuration = m.max(m.max(momentumX.time, momentumY.time), 10);
+
+ that.scrollTo(mround(newPosX), mround(newPosY), newDuration);
+
+ if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
+ return;
+ }
+
+ that._resetPos(200);
+ if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
+ },
+
+ _resetPos: function (time) {
+ var that = this,
+ resetX = that.x >= 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x,
+ resetY = that.y >= 0 || that.maxScrollY > 0 ? 0 : that.y < that.maxScrollY ? that.maxScrollY : that.y;
+
+ if (resetX == that.x && resetY == that.y) {
+ if (that.moved) {
+ if (that.options.onScrollEnd) that.options.onScrollEnd.call(that); // Execute custom code on scroll end
+ that.moved = false;
+ }
+
+ return;
+ }
+
+ that.scrollTo(resetX, resetY, time || 0);
+ },
+
+ _mouseout: function (e) {
+ var t = e.relatedTarget;
+
+ if (!t) {
+ this._end(e);
+ return;
+ }
+
+ while (t = t.parentNode) if (t == this.wrapper) return;
+
+ this._end(e);
+ },
+
+ _transitionEnd: function (e) {
+ var that = this;
+
+ if (e.target != that.scroller) return;
+
+ that._unbind('webkitTransitionEnd');
+
+ that._startAni();
+ },
+
+ /**
+ *
+ * Utilities
+ *
+ */
+ _startAni: function () {
+ var that = this,
+ startX = that.x, startY = that.y,
+ startTime = Date.now(),
+ step, easeOut,
+ animate;
+
+ if (that.animating) return;
+
+ if (!that.steps.length) {
+ that._resetPos(400);
+ return;
+ }
+
+ step = that.steps.shift();
+
+ if (step.x == startX && step.y == startY) step.time = 0;
+
+ that.animating = true;
+ that.moved = true;
+
+ if (that.options.useTransition) {
+ that._transitionTime(step.time);
+ that._pos(step.x, step.y);
+ that.animating = false;
+ if (step.time) that._bind('webkitTransitionEnd');
+ else that._resetPos(0);
+ return;
+ }
+
+ animate = function () {
+ var now = Date.now(),
+ newX, newY;
+
+ if (now >= startTime + step.time) {
+ that._pos(step.x, step.y);
+ that.animating = false;
+ if (that.options.onAnimationEnd) that.options.onAnimationEnd.call(that); // Execute custom code on animation end
+ that._startAni();
+ return;
+ }
+
+ now = (now - startTime) / step.time - 1;
+ easeOut = m.sqrt(1 - now * now);
+ newX = (step.x - startX) * easeOut + startX;
+ newY = (step.y - startY) * easeOut + startY;
+ that._pos(newX, newY);
+ if (that.animating) that.aniTime = nextFrame(animate);
+ };
+
+ animate();
+ },
+
+ _transitionTime: function (time) {
+ this.scroller.style[vendor + 'TransitionDuration'] = time + 'ms';
+ },
+
+ _momentum: function (dist, time, maxDistUpper, maxDistLower, size) {
+ var deceleration = 0.0006,
+ speed = m.abs(dist) / time,
+ newDist = (speed * speed) / (2 * deceleration),
+ newTime = 0, outsideDist = 0;
+
+ // Proportinally reduce speed if we are outside of the boundaries
+ if (dist > 0 && newDist > maxDistUpper) {
+ outsideDist = size / (6 / (newDist / speed * deceleration));
+ maxDistUpper = maxDistUpper + outsideDist;
+ speed = speed * maxDistUpper / newDist;
+ newDist = maxDistUpper;
+ } else if (dist < 0 && newDist > maxDistLower) {
+ outsideDist = size / (6 / (newDist / speed * deceleration));
+ maxDistLower = maxDistLower + outsideDist;
+ speed = speed * maxDistLower / newDist;
+ newDist = maxDistLower;
+ }
+
+ newDist = newDist * (dist < 0 ? -1 : 1);
+ newTime = speed / deceleration;
+
+ return { dist: newDist, time: mround(newTime) };
+ },
+
+ _offset: function (el) {
+ var left = -el.offsetLeft,
+ top = -el.offsetTop;
+
+ while (el = el.offsetParent) {
+ left -= el.offsetLeft;
+ top -= el.offsetTop;
+ }
+
+ return { left: left, top: top };
+ },
+
+ _bind: function (type, el, bubble) {
+ (el || this.scroller).addEventListener(type, this, !!bubble);
+ },
+
+ _unbind: function (type, el, bubble) {
+ (el || this.scroller).removeEventListener(type, this, !!bubble);
+ },
+
+
+ /**
+ *
+ * Public methods
+ *
+ */
+ destroy: function () {
+ var that = this;
+
+ that.scroller.style[vendor + 'Transform'] = '';
+
+ // Remove the event listeners
+ that._unbind(RESIZE_EV, window);
+ that._unbind(START_EV);
+ that._unbind(MOVE_EV);
+ that._unbind(END_EV);
+ that._unbind(CANCEL_EV);
+ that._unbind('mouseout', that.wrapper);
+ if (that.options.useTransition) that._unbind('webkitTransitionEnd');
+
+ if (that.options.onDestroy) that.options.onDestroy.call(that);
+ },
+
+ refresh: function () {
+ var that = this,
+ offset;
+
+ that.wrapperW = that.wrapper.clientWidth;
+ that.wrapperH = that.wrapper.clientHeight;
+
+ that.scrollerW = that.scroller.offsetWidth;
+ that.scrollerH = that.scroller.offsetHeight;
+ that.maxScrollX = that.wrapperW - that.scrollerW;
+ that.maxScrollY = that.wrapperH - that.scrollerH;
+ that.dirX = 0;
+ that.dirY = 0;
+
+ that.hScroll = that.options.hScroll && that.maxScrollX < 0;
+ that.vScroll = that.options.vScroll && (!that.options.bounceLock && !that.hScroll || that.scrollerH > that.wrapperH);
+
+ offset = that._offset(that.wrapper);
+ that.wrapperOffsetLeft = -offset.left;
+ that.wrapperOffsetTop = -offset.top;
+
+
+ that.scroller.style[vendor + 'TransitionDuration'] = '0';
+
+ that._resetPos(200);
+ },
+
+ scrollTo: function (x, y, time, relative) {
+ var that = this,
+ step = x,
+ i, l;
+
+ that.stop();
+
+ if (!step.length) step = [{ x: x, y: y, time: time, relative: relative }];
+
+ for (i=0, l=step.length; i 0 ? 0 : pos.left < that.maxScrollX ? that.maxScrollX : pos.left;
+ pos.top = pos.top > 0 ? 0 : pos.top < that.maxScrollY ? that.maxScrollY : pos.top;
+ time = time === undefined ? m.max(m.abs(pos.left)*2, m.abs(pos.top)*2) : time;
+
+ that.scrollTo(pos.left, pos.top, time);
+ },
+
+ disable: function () {
+ this.stop();
+ this._resetPos(0);
+ this.enabled = false;
+
+ // If disabled after touchstart we make sure that there are no left over events
+ this._unbind(MOVE_EV);
+ this._unbind(END_EV);
+ this._unbind(CANCEL_EV);
+ },
+
+ enable: function () {
+ this.enabled = true;
+ },
+
+ stop: function () {
+ cancelFrame(this.aniTime);
+ this.steps = [];
+ this.moved = false;
+ this.animating = false;
+ }
+};
+
+if (typeof exports !== 'undefined') exports.iScroll = iScroll;
+else window.iScroll = iScroll;
+
+})();
diff --git a/ext-lib/iscroll-probe.js b/ext-lib/iscroll-probe.js
new file mode 100755
index 0000000..9a145f0
--- /dev/null
+++ b/ext-lib/iscroll-probe.js
@@ -0,0 +1,2015 @@
+/*! iScroll v5.1.1 ~ (c) 2008-2014 Matteo Spinelli ~ http://cubiq.org/license */
+(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'],
+ transform,
+ i = 0,
+ 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.momentum = function (current, start, time, lowerMargin, wrapperSize, deceleration) {
+ var distance = current - start,
+ speed = 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
+ };
+ };
+
+ var _transform = _prefixStyle('transform');
+
+ me.extend(me, {
+ hasTransform: _transform !== false,
+ hasPerspective: _prefixStyle('perspective') in _elementStyle,
+ hasTouch: 'ontouchstart' in window,
+ hasPointer: navigator.msPointerEnabled,
+ hasTransition: _prefixStyle('transition') in _elementStyle
+ });
+
+ // This should find all Android browsers lower than build 535.19 (both stock browser and webview)
+ me.isBadAndroid = /Android /.test(window.navigator.appVersion) && !(/Chrome\/\d/.test(window.navigator.appVersion));
+
+ me.extend(me.style = {}, {
+ transform: _transform,
+ transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
+ transitionDuration: _prefixStyle('transitionDuration'),
+ transitionDelay: _prefixStyle('transitionDelay'),
+ transformOrigin: _prefixStyle('transformOrigin')
+ });
+
+ 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,
+ top = -el.offsetTop;
+
+ // jshint -W084
+ while (el = el.offsetParent) {
+ left -= el.offsetLeft;
+ top -= el.offsetTop;
+ }
+ // jshint +W084
+
+ 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,
+
+ 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)', // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 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,
+ 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,
+ ev;
+
+ if ( !(/(SELECT|INPUT|TEXTAREA)/i).test(target.tagName) ) {
+ ev = document.createEvent('MouseEvents');
+ ev.initMouseEvent('click', true, true, e.view, 1,
+ target.screenX, target.screenY, target.clientX, target.clientY,
+ e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+ 0, null);
+
+ ev._constructed = true;
+ target.dispatchEvent(ev);
+ }
+ };
+
+ 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; // cache style for better performance
+
+ this.options = {
+
+ resizeScrollbars: true,
+
+ mouseWheelSpeed: 20,
+
+ snapThreshold: 0.334,
+
+// INSERT POINT: OPTIONS
+
+ 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
+ };
+
+ for ( var i in options ) {
+ this.options[i] = options[i];
+ }
+
+ // Normalize options
+ 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;
+
+ // If you want eventPassthrough I have to lock one of the axes
+ this.options.scrollY = this.options.eventPassthrough == 'vertical' ? false : this.options.scrollY;
+ this.options.scrollX = this.options.eventPassthrough == 'horizontal' ? false : this.options.scrollX;
+
+ // With eventPassthrough we also need lockDirection mechanism
+ 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.shrinkScrollbars == 'scale' ) {
+ this.options.useTransition = false;
+ }
+
+ this.options.invertWheelDirection = this.options.invertWheelDirection ? -1 : 1;
+
+ if ( this.options.probeType == 3 ) {
+ this.options.useTransition = false; }
+
+// INSERT POINT: NORMALIZATION
+
+ // Some defaults
+ this.x = 0;
+ this.y = 0;
+ this.directionX = 0;
+ this.directionY = 0;
+ this._events = {};
+
+// INSERT POINT: DEFAULTS
+
+ this._init();
+ this.refresh();
+
+ this.scrollTo(this.options.startX, this.options.startY);
+ this.enable();
+}
+
+IScroll.prototype = {
+ version: '5.1.1',
+
+ _init: function () {
+ this._initEvents();
+
+ 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();
+ }
+
+// INSERT POINT: _init
+
+ },
+
+ destroy: function () {
+ this._initEvents(true);
+
+ 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) {
+ // React to left mouse button only
+ if ( utils.eventType[e.type] != 1 ) {
+ if ( e.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,
+ 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._transitionTime();
+
+ this.startTime = utils.getTime();
+
+ if ( this.options.useTransition && this.isInTransition ) {
+ 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 ( this.options.preventDefault ) { // increases performance on Android? TODO: check!
+ e.preventDefault();
+ }
+
+ var point = e.touches ? e.touches[0] : e,
+ deltaX = point.pageX - this.pointX,
+ deltaY = point.pageY - this.pointY,
+ timestamp = utils.getTime(),
+ newX, newY,
+ absDistX, 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);
+
+ // We need to move at least 10 pixels for the scrolling to initiate
+ if ( timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10) ) {
+ return;
+ }
+
+ // If you are scrolling in one direction lock the other
+ if ( !this.directionLocked && !this.options.freeScroll ) {
+ if ( absDistX > absDistY + this.options.directionLockThreshold ) {
+ this.directionLocked = 'h'; // lock horizontally
+ } else if ( absDistY >= absDistX + this.options.directionLockThreshold ) {
+ this.directionLocked = 'v'; // lock vertically
+ } else {
+ this.directionLocked = 'n'; // no lock
+ }
+ }
+
+ 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;
+
+ // 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;
+ }
+
+ 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);
+
+/* REPLACE START: _move */
+ if ( timestamp - this.startTime > 300 ) {
+ this.startTime = timestamp;
+ this.startX = this.x;
+ this.startY = this.y;
+
+ if ( this.options.probeType == 1 ) {
+ this._execEvent('scroll');
+ }
+ }
+
+ if ( this.options.probeType > 1 ) {
+ this._execEvent('scroll');
+ }
+/* REPLACE END: _move */
+
+ },
+
+ _end: function (e) {
+ if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
+ return;
+ }
+
+ if ( this.options.preventDefault && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
+ e.preventDefault();
+ }
+
+ var point = e.changedTouches ? e.changedTouches[0] : e,
+ momentumX,
+ momentumY,
+ duration = utils.getTime() - this.startTime,
+ newX = Math.round(this.x),
+ newY = Math.round(this.y),
+ distanceX = Math.abs(newX - this.startX),
+ distanceY = Math.abs(newY - this.startY),
+ time = 0,
+ easing = '';
+
+ this.isInTransition = 0;
+ this.initiated = 0;
+ this.endTime = utils.getTime();
+
+ // 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
+
+ // we scrolled less than 10 pixels
+ 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;
+ }
+
+ // start momentum animation if needed
+ 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;
+ }
+
+// INSERT POINT: _end
+
+ if ( newX != this.x || newY != this.y ) {
+ // change easing function when scroller goes out of the boundaries
+ if ( newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY ) {
+ easing = utils.ease.quadratic;
+ }
+
+ this.scrollTo(newX, newY, time, easing);
+ 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,
+ 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;
+ },
+
+ disable: function () {
+ this.enabled = false;
+ },
+
+ enable: function () {
+ this.enabled = true;
+ },
+
+ refresh: function () {
+ var rf = this.wrapper.offsetHeight; // Force reflow
+
+ this.wrapperWidth = this.wrapper.clientWidth;
+ this.wrapperHeight = this.wrapper.clientHeight;
+
+/* REPLACE START: refresh */
+
+ this.scrollerWidth = this.scroller.offsetWidth;
+ this.scrollerHeight = this.scroller.offsetHeight;
+
+ this.maxScrollX = this.wrapperWidth - this.scrollerWidth;
+ this.maxScrollY = this.wrapperHeight - this.scrollerHeight;
+
+/* REPLACE END: refresh */
+
+ 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;
+
+ this.wrapperOffset = utils.offset(this.wrapper);
+
+ this._execEvent('refresh');
+
+ this.resetPosition();
+
+// INSERT POINT: _refresh
+
+ },
+
+ 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,
+ 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);
+ },
+
+ scrollTo: function (x, y, time, easing) {
+ easing = easing || utils.ease.circular;
+
+ this.isInTransition = this.options.useTransition && time > 0;
+
+ if ( !time || (this.options.useTransition && easing.style) ) {
+ 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;
+
+ // if offsetX/Y are true we center the element to the screen
+ if ( offsetX === true ) {
+ offsetX = Math.round(el.offsetWidth / 2 - this.wrapper.offsetWidth / 2);
+ }
+ if ( offsetY === true ) {
+ offsetY = Math.round(el.offsetHeight / 2 - this.wrapper.offsetHeight / 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) {
+ time = time || 0;
+
+ this.scrollerStyle[utils.style.transitionDuration] = time + 'ms';
+
+ if ( !time && utils.isBadAndroid ) {
+ this.scrollerStyle[utils.style.transitionDuration] = '0.001s';
+ }
+
+
+ if ( this.indicators ) {
+ for ( var i = this.indicators.length; i--; ) {
+ this.indicators[i].transitionTime(time);
+ }
+ }
+
+
+// INSERT POINT: _transitionTime
+
+ },
+
+ _transitionTimingFunction: function (easing) {
+ this.scrollerStyle[utils.style.transitionTimingFunction] = easing;
+
+
+ if ( this.indicators ) {
+ for ( var i = this.indicators.length; i--; ) {
+ this.indicators[i].transitionTimingFunction(easing);
+ }
+ }
+
+
+// INSERT POINT: _transitionTimingFunction
+
+ },
+
+ _translate: function (x, y) {
+ if ( this.options.useTransform ) {
+
+/* REPLACE START: _translate */
+
+ this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;
+
+/* REPLACE END: _translate */
+
+ } 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();
+ }
+ }
+
+
+// INSERT POINT: _translate
+
+ },
+
+ _initEvents: function (remove) {
+ var eventType = remove ? utils.removeEvent : utils.addEvent,
+ 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, 'MSPointerDown', this);
+ eventType(target, 'MSPointerMove', this);
+ eventType(target, 'MSPointerCancel', this);
+ eventType(target, 'MSPointerUp', 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),
+ x, 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,
+ customStyle = typeof this.options.scrollbars != 'string',
+ indicators = [],
+ indicator;
+
+ var that = this;
+
+ this.indicators = [];
+
+ if ( this.options.scrollbars ) {
+ // Vertical scrollbar
+ 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);
+ }
+
+ // Horizontal scrollbar
+ 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 ) {
+ // TODO: check concat compatibility
+ indicators = indicators.concat(this.options.indicators);
+ }
+
+ for ( var i = indicators.length; i--; ) {
+ this.indicators.push( new Indicator(this, indicators[i]) );
+ }
+
+ // TODO: check if we can use array.map (wide compatibility and performance issues)
+ function _indicatorsMap (fn) {
+ 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;
+ });
+ },
+
+ _initWheel: function () {
+ utils.addEvent(this.wrapper, 'wheel', this);
+ utils.addEvent(this.wrapper, 'mousewheel', this);
+ utils.addEvent(this.wrapper, 'DOMMouseScroll', this);
+
+ this.on('destroy', function () {
+ 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;
+ }
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ var wheelDeltaX, wheelDeltaY,
+ newX, newY,
+ that = this;
+
+ if ( this.wheelTimeout === undefined ) {
+ that._execEvent('scrollStart');
+ }
+
+ // Execute the scrollEnd event after 400ms the wheel stopped scrolling
+ clearTimeout(this.wheelTimeout);
+ this.wheelTimeout = setTimeout(function () {
+ that._execEvent('scrollEnd');
+ that.wheelTimeout = undefined;
+ }, 400);
+
+ if ( 'deltaX' in e ) {
+ 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);
+
+ 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;
+ }
+
+ this.scrollTo(newX, newY, 0);
+
+ if ( this.options.probeType > 1 ) {
+ this._execEvent('scroll');
+ }
+
+// INSERT POINT: _wheel
+ },
+
+ _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, l,
+ m = 0, n,
+ cx, cy,
+ x = 0, y,
+ stepX = this.options.snapStepX || this.wrapperWidth,
+ stepY = this.options.snapStepY || this.wrapperHeight,
+ el;
+
+ 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++ ) {
+ if ( i === 0 || el[i].offsetLeft <= el[i-1].offsetLeft ) {
+ m = 0;
+ n++;
+ }
+
+ if ( !this.pages[m] ) {
+ this.pages[m] = [];
+ }
+
+ x = Math.max(-el[i].offsetLeft, this.maxScrollX);
+ y = Math.max(-el[i].offsetTop, this.maxScrollY);
+ cx = x - Math.round(el[i].offsetWidth / 2);
+ cy = y - Math.round(el[i].offsetHeight / 2);
+
+ this.pages[m][n] = {
+ x: x,
+ y: y,
+ width: el[i].offsetWidth,
+ height: el[i].offsetHeight,
+ cx: cx,
+ cy: cy
+ };
+
+ if ( x > this.maxScrollX ) {
+ m++;
+ }
+ }
+ }
+
+ this.goToPage(this.currentPage.pageX || 0, this.currentPage.pageY || 0, 0);
+
+ // Update snap threshold if needed
+ 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,
+ l = this.pages.length,
+ m = 0;
+
+ // Check if we exceeded the snap threshold
+ 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,
+ 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,
+ 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,
+ y = this.currentPage.pageY;
+
+ x--;
+
+ if ( x < 0 && this.hasVerticalScroll ) {
+ x = 0;
+ y--;
+ }
+
+ this.goToPage(x, y, time, easing);
+ },
+
+ _initKeys: function (e) {
+ // default key bindings
+ var keys = {
+ pageUp: 33,
+ pageDown: 34,
+ end: 35,
+ home: 36,
+ left: 37,
+ up: 38,
+ right: 39,
+ down: 40
+ };
+ var i;
+
+ // if you give me characters I give you keycode
+ 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, // we are using this alot, better to cache it
+ newX = snap ? this.currentPage.pageX : this.x,
+ newY = snap ? this.currentPage.pageY : this.y,
+ now = utils.getTime(),
+ prevTime = this.keyTime || 0,
+ acceleration = 0.250,
+ 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,
+ startX = this.x,
+ startY = this.y,
+ startTime = utils.getTime(),
+ destTime = startTime + duration;
+
+ function step () {
+ var now = utils.getTime(),
+ newX, newY,
+ 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);
+ }
+
+ if ( that.options.probeType == 3 ) {
+ that._execEvent('scroll');
+ }
+ }
+
+ this.isAnimating = true;
+ step();
+ },
+
+ handleEvent: function (e) {
+ switch ( e.type ) {
+ case 'touchstart':
+ case 'MSPointerDown':
+ case 'mousedown':
+ this._start(e);
+ break;
+ case 'touchmove':
+ case 'MSPointerMove':
+ case 'mousemove':
+ this._move(e);
+ break;
+ case 'touchend':
+ case 'MSPointerUp':
+ case 'mouseup':
+ case 'touchcancel':
+ case 'MSPointerCancel':
+ case 'mousecancel':
+ 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':
+ this._wheel(e);
+ break;
+ case 'keydown':
+ this._key(e);
+ break;
+ case 'click':
+ if ( !e._constructed ) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ break;
+ }
+ }
+};
+function createDefaultScrollbar (direction, interactive, type) {
+ var scrollbar = document.createElement('div'),
+ 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, 'MSPointerDown', this);
+ utils.addEvent(window, 'MSPointerUp', 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;
+ this.wrapperStyle[utils.style.transitionDuration] = utils.isBadAndroid ? '0.001s' : '0ms';
+ this.wrapperStyle.opacity = '0';
+ }
+}
+
+Indicator.prototype = {
+ handleEvent: function (e) {
+ switch ( e.type ) {
+ case 'touchstart':
+ case 'MSPointerDown':
+ case 'mousedown':
+ this._start(e);
+ break;
+ case 'touchmove':
+ case 'MSPointerMove':
+ case 'mousemove':
+ this._move(e);
+ break;
+ case 'touchend':
+ case 'MSPointerUp':
+ case 'mouseup':
+ case 'touchcancel':
+ case 'MSPointerCancel':
+ case 'mousecancel':
+ this._end(e);
+ break;
+ }
+ },
+
+ destroy: function () {
+ if ( this.options.interactive ) {
+ utils.removeEvent(this.indicator, 'touchstart', this);
+ utils.removeEvent(this.indicator, 'MSPointerDown', this);
+ utils.removeEvent(this.indicator, 'mousedown', this);
+
+ utils.removeEvent(window, 'touchmove', this);
+ utils.removeEvent(window, 'MSPointerMove', this);
+ utils.removeEvent(window, 'mousemove', this);
+
+ utils.removeEvent(window, 'touchend', this);
+ utils.removeEvent(window, 'MSPointerUp', this);
+ utils.removeEvent(window, 'mouseup', this);
+ }
+
+ if ( this.options.defaultScrollbars ) {
+ 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, 'MSPointerMove', 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,
+ deltaX, deltaY,
+ newX, newY,
+ 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);
+
+
+ if ( this.scroller.options.probeType == 1 && timestamp - this.startTime > 300 ) {
+ this.startTime = timestamp;
+ this.scroller._execEvent('scroll');
+ } else if ( this.scroller.options.probeType > 1 ) {
+ this.scroller._execEvent('scroll');
+ }
+
+
+// INSERT POINT: indicator._move
+
+ 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, 'MSPointerMove', 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;
+ this.indicatorStyle[utils.style.transitionDuration] = time + 'ms';
+
+ if ( !time && utils.isBadAndroid ) {
+ this.indicatorStyle[utils.style.transitionDuration] = '0.001s';
+ }
+ },
+
+ 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';
+ }
+ }
+ }
+
+ var r = this.wrapper.offsetHeight; // force refresh
+
+ 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,
+ 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,
+ 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 {
+ window.IScroll = IScroll;
+}
+
+})(window, document, Math);
\ No newline at end of file
diff --git a/ext-lib/iscroll-zoom.js b/ext-lib/iscroll-zoom.js
new file mode 100755
index 0000000..4a44055
--- /dev/null
+++ b/ext-lib/iscroll-zoom.js
@@ -0,0 +1,2172 @@
+/*! iScroll v5.1.1 ~ (c) 2008-2014 Matteo Spinelli ~ http://cubiq.org/license */
+(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'],
+ transform,
+ i = 0,
+ 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.momentum = function (current, start, time, lowerMargin, wrapperSize, deceleration) {
+ var distance = current - start,
+ speed = 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
+ };
+ };
+
+ var _transform = _prefixStyle('transform');
+
+ me.extend(me, {
+ hasTransform: _transform !== false,
+ hasPerspective: _prefixStyle('perspective') in _elementStyle,
+ hasTouch: 'ontouchstart' in window,
+ hasPointer: navigator.msPointerEnabled,
+ hasTransition: _prefixStyle('transition') in _elementStyle
+ });
+
+ // This should find all Android browsers lower than build 535.19 (both stock browser and webview)
+ me.isBadAndroid = /Android /.test(window.navigator.appVersion) && !(/Chrome\/\d/.test(window.navigator.appVersion));
+
+ me.extend(me.style = {}, {
+ transform: _transform,
+ transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
+ transitionDuration: _prefixStyle('transitionDuration'),
+ transitionDelay: _prefixStyle('transitionDelay'),
+ transformOrigin: _prefixStyle('transformOrigin')
+ });
+
+ 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,
+ top = -el.offsetTop;
+
+ // jshint -W084
+ while (el = el.offsetParent) {
+ left -= el.offsetLeft;
+ top -= el.offsetTop;
+ }
+ // jshint +W084
+
+ 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,
+
+ 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)', // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 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,
+ 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,
+ ev;
+
+ if ( !(/(SELECT|INPUT|TEXTAREA)/i).test(target.tagName) ) {
+ ev = document.createEvent('MouseEvents');
+ ev.initMouseEvent('click', true, true, e.view, 1,
+ target.screenX, target.screenY, target.clientX, target.clientY,
+ e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+ 0, null);
+
+ ev._constructed = true;
+ target.dispatchEvent(ev);
+ }
+ };
+
+ 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; // cache style for better performance
+
+ this.options = {
+
+ zoomMin: 1,
+ zoomMax: 4, startZoom: 1,
+
+ resizeScrollbars: true,
+
+ mouseWheelSpeed: 20,
+
+ snapThreshold: 0.334,
+
+// INSERT POINT: OPTIONS
+
+ 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
+ };
+
+ for ( var i in options ) {
+ this.options[i] = options[i];
+ }
+
+ // Normalize options
+ 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;
+
+ // If you want eventPassthrough I have to lock one of the axes
+ this.options.scrollY = this.options.eventPassthrough == 'vertical' ? false : this.options.scrollY;
+ this.options.scrollX = this.options.eventPassthrough == 'horizontal' ? false : this.options.scrollX;
+
+ // With eventPassthrough we also need lockDirection mechanism
+ 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.shrinkScrollbars == 'scale' ) {
+ this.options.useTransition = false;
+ }
+
+ this.options.invertWheelDirection = this.options.invertWheelDirection ? -1 : 1;
+
+// INSERT POINT: NORMALIZATION
+
+ // Some defaults
+ 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);
+
+// INSERT POINT: DEFAULTS
+
+ this._init();
+ this.refresh();
+
+ this.scrollTo(this.options.startX, this.options.startY);
+ this.enable();
+}
+
+IScroll.prototype = {
+ version: '5.1.1',
+
+ _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();
+ }
+
+// INSERT POINT: _init
+
+ },
+
+ destroy: function () {
+ this._initEvents(true);
+
+ 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) {
+ // React to left mouse button only
+ if ( utils.eventType[e.type] != 1 ) {
+ if ( e.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,
+ 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._transitionTime();
+
+ this.startTime = utils.getTime();
+
+ if ( this.options.useTransition && this.isInTransition ) {
+ 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 ( this.options.preventDefault ) { // increases performance on Android? TODO: check!
+ e.preventDefault();
+ }
+
+ var point = e.touches ? e.touches[0] : e,
+ deltaX = point.pageX - this.pointX,
+ deltaY = point.pageY - this.pointY,
+ timestamp = utils.getTime(),
+ newX, newY,
+ absDistX, 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);
+
+ // We need to move at least 10 pixels for the scrolling to initiate
+ if ( timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10) ) {
+ return;
+ }
+
+ // If you are scrolling in one direction lock the other
+ if ( !this.directionLocked && !this.options.freeScroll ) {
+ if ( absDistX > absDistY + this.options.directionLockThreshold ) {
+ this.directionLocked = 'h'; // lock horizontally
+ } else if ( absDistY >= absDistX + this.options.directionLockThreshold ) {
+ this.directionLocked = 'v'; // lock vertically
+ } else {
+ this.directionLocked = 'n'; // no lock
+ }
+ }
+
+ 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;
+
+ // 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;
+ }
+
+ 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);
+
+/* REPLACE START: _move */
+
+ if ( timestamp - this.startTime > 300 ) {
+ this.startTime = timestamp;
+ this.startX = this.x;
+ this.startY = this.y;
+ }
+
+/* REPLACE END: _move */
+
+ },
+
+ _end: function (e) {
+ if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
+ return;
+ }
+
+ if ( this.options.preventDefault && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
+ e.preventDefault();
+ }
+
+ var point = e.changedTouches ? e.changedTouches[0] : e,
+ momentumX,
+ momentumY,
+ duration = utils.getTime() - this.startTime,
+ newX = Math.round(this.x),
+ newY = Math.round(this.y),
+ distanceX = Math.abs(newX - this.startX),
+ distanceY = Math.abs(newY - this.startY),
+ time = 0,
+ easing = '';
+
+ this.isInTransition = 0;
+ this.initiated = 0;
+ this.endTime = utils.getTime();
+
+ // 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
+
+ // we scrolled less than 10 pixels
+ 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;
+ }
+
+ // start momentum animation if needed
+ 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;
+ }
+
+// INSERT POINT: _end
+
+ if ( newX != this.x || newY != this.y ) {
+ // change easing function when scroller goes out of the boundaries
+ if ( newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY ) {
+ easing = utils.ease.quadratic;
+ }
+
+ this.scrollTo(newX, newY, time, easing);
+ 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,
+ 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;
+ },
+
+ disable: function () {
+ this.enabled = false;
+ },
+
+ enable: function () {
+ this.enabled = true;
+ },
+
+ refresh: function () {
+ var rf = this.wrapper.offsetHeight; // Force reflow
+
+ this.wrapperWidth = this.wrapper.clientWidth;
+ this.wrapperHeight = this.wrapper.clientHeight;
+
+/* REPLACE START: refresh */
+ this.scrollerWidth = Math.round(this.scroller.offsetWidth * this.scale);
+ this.scrollerHeight = Math.round(this.scroller.offsetHeight * this.scale);
+
+ this.maxScrollX = this.wrapperWidth - this.scrollerWidth;
+ this.maxScrollY = this.wrapperHeight - this.scrollerHeight;
+/* REPLACE END: refresh */
+
+ 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;
+
+ this.wrapperOffset = utils.offset(this.wrapper);
+
+ this._execEvent('refresh');
+
+ this.resetPosition();
+
+// INSERT POINT: _refresh
+
+ },
+
+ 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,
+ 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);
+ },
+
+ scrollTo: function (x, y, time, easing) {
+ easing = easing || utils.ease.circular;
+
+ this.isInTransition = this.options.useTransition && time > 0;
+
+ if ( !time || (this.options.useTransition && easing.style) ) {
+ 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;
+
+ // if offsetX/Y are true we center the element to the screen
+ if ( offsetX === true ) {
+ offsetX = Math.round(el.offsetWidth / 2 - this.wrapper.offsetWidth / 2);
+ }
+ if ( offsetY === true ) {
+ offsetY = Math.round(el.offsetHeight / 2 - this.wrapper.offsetHeight / 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) {
+ time = time || 0;
+
+ this.scrollerStyle[utils.style.transitionDuration] = time + 'ms';
+
+ if ( !time && utils.isBadAndroid ) {
+ this.scrollerStyle[utils.style.transitionDuration] = '0.001s';
+ }
+
+
+ if ( this.indicators ) {
+ for ( var i = this.indicators.length; i--; ) {
+ this.indicators[i].transitionTime(time);
+ }
+ }
+
+
+// INSERT POINT: _transitionTime
+
+ },
+
+ _transitionTimingFunction: function (easing) {
+ this.scrollerStyle[utils.style.transitionTimingFunction] = easing;
+
+
+ if ( this.indicators ) {
+ for ( var i = this.indicators.length; i--; ) {
+ this.indicators[i].transitionTimingFunction(easing);
+ }
+ }
+
+
+// INSERT POINT: _transitionTimingFunction
+
+ },
+
+ _translate: function (x, y) {
+ if ( this.options.useTransform ) {
+
+/* REPLACE START: _translate */ this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ') ' + this.translateZ;/* REPLACE END: _translate */
+
+ } 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();
+ }
+ }
+
+
+// INSERT POINT: _translate
+
+ },
+
+ _initEvents: function (remove) {
+ var eventType = remove ? utils.removeEvent : utils.addEvent,
+ 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, 'MSPointerDown', this);
+ eventType(target, 'MSPointerMove', this);
+ eventType(target, 'MSPointerCancel', this);
+ eventType(target, 'MSPointerUp', 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),
+ x, 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,
+ customStyle = typeof this.options.scrollbars != 'string',
+ indicators = [],
+ indicator;
+
+ var that = this;
+
+ this.indicators = [];
+
+ if ( this.options.scrollbars ) {
+ // Vertical scrollbar
+ 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);
+ }
+
+ // Horizontal scrollbar
+ 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 ) {
+ // TODO: check concat compatibility
+ indicators = indicators.concat(this.options.indicators);
+ }
+
+ for ( var i = indicators.length; i--; ) {
+ this.indicators.push( new Indicator(this, indicators[i]) );
+ }
+
+ // TODO: check if we can use array.map (wide compatibility and performance issues)
+ function _indicatorsMap (fn) {
+ 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 ),
+ 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 ),
+ c2 = Math.abs( e.touches[0].pageY - e.touches[1].pageY ),
+ distance = Math.sqrt( c1 * c1 + c2 * c2 ),
+ scale = 1 / this.touchesDistanceStart * distance * this.startScale,
+ lastScale,
+ x, 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, newY,
+ 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;
+ }
+
+ // Update boundaries
+ 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 ( 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;
+
+ 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(); // update boundaries
+
+ 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,
+ deltaScale,
+ that = this;
+
+ // Execute the zoomEnd event after 400ms the wheel stopped scrolling
+ clearTimeout(this.wheelTimeout);
+ this.wheelTimeout = setTimeout(function () {
+ that._execEvent('zoomEnd');
+ }, 400);
+
+ 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 () {
+ 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;
+ }
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ var wheelDeltaX, wheelDeltaY,
+ newX, newY,
+ that = this;
+
+ if ( this.wheelTimeout === undefined ) {
+ that._execEvent('scrollStart');
+ }
+
+ // Execute the scrollEnd event after 400ms the wheel stopped scrolling
+ clearTimeout(this.wheelTimeout);
+ this.wheelTimeout = setTimeout(function () {
+ that._execEvent('scrollEnd');
+ that.wheelTimeout = undefined;
+ }, 400);
+
+ if ( 'deltaX' in e ) {
+ 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);
+
+ 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;
+ }
+
+ this.scrollTo(newX, newY, 0);
+
+// INSERT POINT: _wheel
+ },
+
+ _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, l,
+ m = 0, n,
+ cx, cy,
+ x = 0, y,
+ stepX = this.options.snapStepX || this.wrapperWidth,
+ stepY = this.options.snapStepY || this.wrapperHeight,
+ el;
+
+ 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++ ) {
+ if ( i === 0 || el[i].offsetLeft <= el[i-1].offsetLeft ) {
+ m = 0;
+ n++;
+ }
+
+ if ( !this.pages[m] ) {
+ this.pages[m] = [];
+ }
+
+ x = Math.max(-el[i].offsetLeft, this.maxScrollX);
+ y = Math.max(-el[i].offsetTop, this.maxScrollY);
+ cx = x - Math.round(el[i].offsetWidth / 2);
+ cy = y - Math.round(el[i].offsetHeight / 2);
+
+ this.pages[m][n] = {
+ x: x,
+ y: y,
+ width: el[i].offsetWidth,
+ height: el[i].offsetHeight,
+ cx: cx,
+ cy: cy
+ };
+
+ if ( x > this.maxScrollX ) {
+ m++;
+ }
+ }
+ }
+
+ this.goToPage(this.currentPage.pageX || 0, this.currentPage.pageY || 0, 0);
+
+ // Update snap threshold if needed
+ 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,
+ l = this.pages.length,
+ m = 0;
+
+ // Check if we exceeded the snap threshold
+ 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,
+ 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,
+ 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,
+ y = this.currentPage.pageY;
+
+ x--;
+
+ if ( x < 0 && this.hasVerticalScroll ) {
+ x = 0;
+ y--;
+ }
+
+ this.goToPage(x, y, time, easing);
+ },
+
+ _initKeys: function (e) {
+ // default key bindings
+ var keys = {
+ pageUp: 33,
+ pageDown: 34,
+ end: 35,
+ home: 36,
+ left: 37,
+ up: 38,
+ right: 39,
+ down: 40
+ };
+ var i;
+
+ // if you give me characters I give you keycode
+ 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, // we are using this alot, better to cache it
+ newX = snap ? this.currentPage.pageX : this.x,
+ newY = snap ? this.currentPage.pageY : this.y,
+ now = utils.getTime(),
+ prevTime = this.keyTime || 0,
+ acceleration = 0.250,
+ 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,
+ startX = this.x,
+ startY = this.y,
+ startTime = utils.getTime(),
+ destTime = startTime + duration;
+
+ function step () {
+ var now = utils.getTime(),
+ newX, newY,
+ 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 'MSPointerDown':
+ case 'mousedown':
+ this._start(e);
+
+ if ( this.options.zoom && e.touches && e.touches.length > 1 ) {
+ this._zoomStart(e);
+ }
+ break;
+ case 'touchmove':
+ case 'MSPointerMove':
+ case 'mousemove':
+ if ( this.options.zoom && e.touches && e.touches[1] ) {
+ this._zoom(e);
+ return;
+ }
+ this._move(e);
+ break;
+ case 'touchend':
+ case 'MSPointerUp':
+ case 'mouseup':
+ case 'touchcancel':
+ 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'),
+ 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, 'MSPointerDown', this);
+ utils.addEvent(window, 'MSPointerUp', 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;
+ this.wrapperStyle[utils.style.transitionDuration] = utils.isBadAndroid ? '0.001s' : '0ms';
+ this.wrapperStyle.opacity = '0';
+ }
+}
+
+Indicator.prototype = {
+ handleEvent: function (e) {
+ switch ( e.type ) {
+ case 'touchstart':
+ case 'MSPointerDown':
+ case 'mousedown':
+ this._start(e);
+ break;
+ case 'touchmove':
+ case 'MSPointerMove':
+ case 'mousemove':
+ this._move(e);
+ break;
+ case 'touchend':
+ case 'MSPointerUp':
+ case 'mouseup':
+ case 'touchcancel':
+ case 'MSPointerCancel':
+ case 'mousecancel':
+ this._end(e);
+ break;
+ }
+ },
+
+ destroy: function () {
+ if ( this.options.interactive ) {
+ utils.removeEvent(this.indicator, 'touchstart', this);
+ utils.removeEvent(this.indicator, 'MSPointerDown', this);
+ utils.removeEvent(this.indicator, 'mousedown', this);
+
+ utils.removeEvent(window, 'touchmove', this);
+ utils.removeEvent(window, 'MSPointerMove', this);
+ utils.removeEvent(window, 'mousemove', this);
+
+ utils.removeEvent(window, 'touchend', this);
+ utils.removeEvent(window, 'MSPointerUp', this);
+ utils.removeEvent(window, 'mouseup', this);
+ }
+
+ if ( this.options.defaultScrollbars ) {
+ 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, 'MSPointerMove', 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,
+ deltaX, deltaY,
+ newX, newY,
+ 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);
+
+// INSERT POINT: indicator._move
+
+ 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, 'MSPointerMove', 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;
+ this.indicatorStyle[utils.style.transitionDuration] = time + 'ms';
+
+ if ( !time && utils.isBadAndroid ) {
+ this.indicatorStyle[utils.style.transitionDuration] = '0.001s';
+ }
+ },
+
+ 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';
+ }
+ }
+ }
+
+ var r = this.wrapper.offsetHeight; // force refresh
+
+ 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,
+ 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,
+ 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 {
+ window.IScroll = IScroll;
+}
+
+})(window, document, Math);
\ No newline at end of file
diff --git a/ext-lib/iscroll.js b/ext-lib/iscroll.js
index f8576f0..6ccf0e2 100755
--- a/ext-lib/iscroll.js
+++ b/ext-lib/iscroll.js
@@ -1,1104 +1,1988 @@
-/*!
- * iScroll v4.2.5 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org
- * Released under MIT license, http://cubiq.org/license
- */
-(function(window, doc){
-var m = Math,
- dummyStyle = doc.createElement('div').style,
- vendor = (function () {
- var vendors = 't,webkitT,MozT,msT,OT'.split(','),
- t,
+/*! iScroll v5.1.1 ~ (c) 2008-2014 Matteo Spinelli ~ http://cubiq.org/license */
+(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'],
+ transform,
i = 0,
l = vendors.length;
for ( ; i < l; i++ ) {
- t = vendors[i] + 'ransform';
- if ( t in dummyStyle ) {
- return vendors[i].substr(0, vendors[i].length - 1);
+ 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.momentum = function (current, start, time, lowerMargin, wrapperSize, deceleration) {
+ var distance = current - start,
+ speed = 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
+ };
+ };
+
+ var _transform = _prefixStyle('transform');
+
+ me.extend(me, {
+ hasTransform: _transform !== false,
+ hasPerspective: _prefixStyle('perspective') in _elementStyle,
+ hasTouch: 'ontouchstart' in window,
+ hasPointer: navigator.msPointerEnabled,
+ hasTransition: _prefixStyle('transition') in _elementStyle
+ });
+
+ // This should find all Android browsers lower than build 535.19 (both stock browser and webview)
+ me.isBadAndroid = /Android /.test(window.navigator.appVersion) && !(/Chrome\/\d/.test(window.navigator.appVersion));
+
+ me.extend(me.style = {}, {
+ transform: _transform,
+ transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
+ transitionDuration: _prefixStyle('transitionDuration'),
+ transitionDelay: _prefixStyle('transitionDelay'),
+ transformOrigin: _prefixStyle('transformOrigin')
+ });
+
+ 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,
+ top = -el.offsetTop;
+
+ // jshint -W084
+ while (el = el.offsetParent) {
+ left -= el.offsetLeft;
+ top -= el.offsetTop;
+ }
+ // jshint +W084
+
+ 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;
- })(),
- cssVendor = vendor ? '-' + vendor.toLowerCase() + '-' : '',
-
- // Style properties
- transform = prefixStyle('transform'),
- transitionProperty = prefixStyle('transitionProperty'),
- transitionDuration = prefixStyle('transitionDuration'),
- transformOrigin = prefixStyle('transformOrigin'),
- transitionTimingFunction = prefixStyle('transitionTimingFunction'),
- transitionDelay = prefixStyle('transitionDelay'),
-
- // Browser capabilities
- isAndroid = (/android/gi).test(navigator.appVersion),
- isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
- isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
-
- has3d = prefixStyle('perspective') in dummyStyle,
- hasTouch = 'ontouchstart' in window && !isTouchPad,
- hasTransform = vendor !== false,
- hasTransitionEnd = prefixStyle('transition') in dummyStyle,
-
- RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
- START_EV = hasTouch ? 'touchstart' : 'mousedown',
- MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
- END_EV = hasTouch ? 'touchend' : 'mouseup',
- CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
- TRNEND_EV = (function () {
- if ( vendor === false ) return false;
-
- var transitionEnd = {
- '' : 'transitionend',
- 'webkit' : 'webkitTransitionEnd',
- 'Moz' : 'transitionend',
- 'O' : 'otransitionend',
- 'ms' : 'MSTransitionEnd'
- };
-
- return transitionEnd[vendor];
- })(),
-
- nextFrame = (function() {
- return window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function(callback) { return setTimeout(callback, 1); };
- })(),
- cancelFrame = (function () {
- return window.cancelRequestAnimationFrame ||
- window.webkitCancelAnimationFrame ||
- window.webkitCancelRequestAnimationFrame ||
- window.mozCancelRequestAnimationFrame ||
- window.oCancelRequestAnimationFrame ||
- window.msCancelRequestAnimationFrame ||
- clearTimeout;
- })(),
-
- // Helpers
- translateZ = has3d ? ' translateZ(0)' : '',
-
- // Constructor
- iScroll = function (el, options) {
- var that = this,
- i;
-
- that.wrapper = typeof el == 'object' ? el : doc.getElementById(el);
- that.wrapper.style.overflow = 'hidden';
- that.scroller = that.wrapper.children[0];
-
- // Default options
- that.options = {
- hScroll: true,
- vScroll: true,
- x: 0,
- y: 0,
- bounce: true,
- bounceLock: false,
- momentum: true,
- lockDirection: true,
- useTransform: true,
- useTransition: false,
- topOffset: 0,
- checkDOMChanges: false, // Experimental
- handleClick: true,
-
- // Scrollbar
- hScrollbar: true,
- vScrollbar: true,
- fixedScrollbar: isAndroid,
- hideScrollbar: isIDevice,
- fadeScrollbar: isIDevice && has3d,
- scrollbarClass: '',
-
- // Zoom
- zoom: false,
- zoomMin: 1,
- zoomMax: 4,
- doubleTapZoom: 2,
- wheelAction: 'scroll',
-
- // Snap
- snap: false,
- snapThreshold: 1,
-
- // Events
- onRefresh: null,
- onBeforeScrollStart: function (e) { e.preventDefault(); },
- onScrollStart: null,
- onBeforeScrollMove: null,
- onScrollMove: null,
- onBeforeScrollEnd: null,
- onScrollEnd: null,
- onTouchEnd: null,
- onDestroy: null,
- onZoomStart: null,
- onZoom: null,
- onZoomEnd: null
- };
-
- // User defined options
- for (i in options) that.options[i] = options[i];
-
- // Set starting position
- that.x = that.options.x;
- that.y = that.options.y;
-
- // Normalize options
- that.options.useTransform = hasTransform && that.options.useTransform;
- that.options.hScrollbar = that.options.hScroll && that.options.hScrollbar;
- that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar;
- that.options.zoom = that.options.useTransform && that.options.zoom;
- that.options.useTransition = hasTransitionEnd && that.options.useTransition;
-
- // Helpers FIX ANDROID BUG!
- // translate3d and scale doesn't work together!
- // Ignoring 3d ONLY WHEN YOU SET that.options.zoom
- if ( that.options.zoom && isAndroid ){
- translateZ = '';
- }
-
- // Set some default styles
- that.scroller.style[transitionProperty] = that.options.useTransform ? cssVendor + 'transform' : 'top left';
- that.scroller.style[transitionDuration] = '0';
- that.scroller.style[transformOrigin] = '0 0';
- if (that.options.useTransition) that.scroller.style[transitionTimingFunction] = 'cubic-bezier(0.33,0.66,0.66,1)';
-
- if (that.options.useTransform) that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px)' + translateZ;
- else that.scroller.style.cssText += ';position:absolute;top:' + that.y + 'px;left:' + that.x + 'px';
-
- if (that.options.useTransition) that.options.fixedScrollbar = true;
-
- that.refresh();
-
- that._bind(RESIZE_EV, window);
- that._bind(START_EV);
- if (!hasTouch) {
- if (that.options.wheelAction != 'none') {
- that._bind('DOMMouseScroll');
- that._bind('mousewheel');
- }
- }
-
- if (that.options.checkDOMChanges) that.checkDOMTime = setInterval(function () {
- that._checkDOMChanges();
- }, 500);
};
-// Prototype
-iScroll.prototype = {
- enabled: true,
- x: 0,
- y: 0,
- steps: [],
- scale: 1,
- currPageX: 0, currPageY: 0,
- pagesX: [], pagesY: [],
- aniTime: null,
- wheelZoomCount: 0,
-
- handleEvent: function (e) {
- var that = this;
- switch(e.type) {
- case START_EV:
- if (!hasTouch && e.button !== 0) return;
- that._start(e);
- break;
- case MOVE_EV: that._move(e); break;
- case END_EV:
- case CANCEL_EV: that._end(e); break;
- case RESIZE_EV: that._resize(); break;
- case 'DOMMouseScroll': case 'mousewheel': that._wheel(e); break;
- case TRNEND_EV: that._transitionEnd(e); break;
- }
- },
-
- _checkDOMChanges: function () {
- if (this.moved || this.zoomed || this.animating ||
- (this.scrollerW == this.scroller.offsetWidth * this.scale && this.scrollerH == this.scroller.offsetHeight * this.scale)) return;
+ me.extend(me.eventType = {}, {
+ touchstart: 1,
+ touchmove: 1,
+ touchend: 1,
- this.refresh();
- },
-
- _scrollbar: function (dir) {
- var that = this,
- bar;
+ mousedown: 2,
+ mousemove: 2,
+ mouseup: 2,
- if (!that[dir + 'Scrollbar']) {
- if (that[dir + 'ScrollbarWrapper']) {
- if (hasTransform) that[dir + 'ScrollbarIndicator'].style[transform] = '';
- that[dir + 'ScrollbarWrapper'].parentNode.removeChild(that[dir + 'ScrollbarWrapper']);
- that[dir + 'ScrollbarWrapper'] = null;
- that[dir + 'ScrollbarIndicator'] = null;
+ 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)', // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 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,
+ 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,
+ ev;
+
+ if ( !(/(SELECT|INPUT|TEXTAREA)/i).test(target.tagName) ) {
+ ev = document.createEvent('MouseEvents');
+ ev.initMouseEvent('click', true, true, e.view, 1,
+ target.screenX, target.screenY, target.clientX, target.clientY,
+ e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+ 0, null);
+
+ ev._constructed = true;
+ target.dispatchEvent(ev);
+ }
+ };
+
+ 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; // cache style for better performance
+
+ this.options = {
+
+ resizeScrollbars: true,
+
+ mouseWheelSpeed: 20,
+
+ snapThreshold: 0.334,
+
+// INSERT POINT: OPTIONS
+
+ 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
+ };
+
+ for ( var i in options ) {
+ this.options[i] = options[i];
+ }
+
+ // Normalize options
+ 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;
+
+ // If you want eventPassthrough I have to lock one of the axes
+ this.options.scrollY = this.options.eventPassthrough == 'vertical' ? false : this.options.scrollY;
+ this.options.scrollX = this.options.eventPassthrough == 'horizontal' ? false : this.options.scrollX;
+
+ // With eventPassthrough we also need lockDirection mechanism
+ 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.shrinkScrollbars == 'scale' ) {
+ this.options.useTransition = false;
+ }
+
+ this.options.invertWheelDirection = this.options.invertWheelDirection ? -1 : 1;
+
+// INSERT POINT: NORMALIZATION
+
+ // Some defaults
+ this.x = 0;
+ this.y = 0;
+ this.directionX = 0;
+ this.directionY = 0;
+ this._events = {};
+
+// INSERT POINT: DEFAULTS
+
+ this._init();
+ this.refresh();
+
+ this.scrollTo(this.options.startX, this.options.startY);
+ this.enable();
+}
+
+IScroll.prototype = {
+ version: '5.1.1',
+
+ _init: function () {
+ this._initEvents();
+
+ 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();
+ }
+
+// INSERT POINT: _init
+
+ },
+
+ destroy: function () {
+ this._initEvents(true);
+
+ this._execEvent('destroy');
+ },
+
+ _transitionEnd: function (e) {
+ if ( e.target != this.scroller || !this.isInTransition ) {
return;
}
- if (!that[dir + 'ScrollbarWrapper']) {
- // Create the scrollbar wrapper
- bar = doc.createElement('div');
-
- if (that.options.scrollbarClass) bar.className = that.options.scrollbarClass + dir.toUpperCase();
- else bar.style.cssText = 'position:absolute;z-index:100;' + (dir == 'h' ? 'height:7px;bottom:1px;left:2px;right:' + (that.vScrollbar ? '7' : '2') + 'px' : 'width:7px;bottom:' + (that.hScrollbar ? '7' : '2') + 'px;top:2px;right:1px');
-
- bar.style.cssText += ';pointer-events:none;' + cssVendor + 'transition-property:opacity;' + cssVendor + 'transition-duration:' + (that.options.fadeScrollbar ? '350ms' : '0') + ';overflow:hidden;opacity:' + (that.options.hideScrollbar ? '0' : '1');
-
- that.wrapper.appendChild(bar);
- that[dir + 'ScrollbarWrapper'] = bar;
-
- // Create the scrollbar indicator
- bar = doc.createElement('div');
- if (!that.options.scrollbarClass) {
- bar.style.cssText = 'position:absolute;z-index:100;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);' + cssVendor + 'background-clip:padding-box;' + cssVendor + 'box-sizing:border-box;' + (dir == 'h' ? 'height:100%' : 'width:100%') + ';' + cssVendor + 'border-radius:3px;border-radius:3px';
- }
- bar.style.cssText += ';pointer-events:none;' + cssVendor + 'transition-property:' + cssVendor + 'transform;' + cssVendor + 'transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);' + cssVendor + 'transition-duration:0;' + cssVendor + 'transform: translate(0,0)' + translateZ;
- if (that.options.useTransition) bar.style.cssText += ';' + cssVendor + 'transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)';
-
- that[dir + 'ScrollbarWrapper'].appendChild(bar);
- that[dir + 'ScrollbarIndicator'] = bar;
+ this._transitionTime();
+ if ( !this.resetPosition(this.options.bounceTime) ) {
+ this.isInTransition = false;
+ this._execEvent('scrollEnd');
}
-
- if (dir == 'h') {
- that.hScrollbarSize = that.hScrollbarWrapper.clientWidth;
- that.hScrollbarIndicatorSize = m.max(m.round(that.hScrollbarSize * that.hScrollbarSize / that.scrollerW), 8);
- that.hScrollbarIndicator.style.width = that.hScrollbarIndicatorSize + 'px';
- that.hScrollbarMaxScroll = that.hScrollbarSize - that.hScrollbarIndicatorSize;
- that.hScrollbarProp = that.hScrollbarMaxScroll / that.maxScrollX;
- } else {
- that.vScrollbarSize = that.vScrollbarWrapper.clientHeight;
- that.vScrollbarIndicatorSize = m.max(m.round(that.vScrollbarSize * that.vScrollbarSize / that.scrollerH), 8);
- that.vScrollbarIndicator.style.height = that.vScrollbarIndicatorSize + 'px';
- that.vScrollbarMaxScroll = that.vScrollbarSize - that.vScrollbarIndicatorSize;
- that.vScrollbarProp = that.vScrollbarMaxScroll / that.maxScrollY;
- }
-
- // Reset position
- that._scrollbarPos(dir, true);
},
-
+
+ _start: function (e) {
+ // React to left mouse button only
+ if ( utils.eventType[e.type] != 1 ) {
+ if ( e.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,
+ 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._transitionTime();
+
+ this.startTime = utils.getTime();
+
+ if ( this.options.useTransition && this.isInTransition ) {
+ 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 ( this.options.preventDefault ) { // increases performance on Android? TODO: check!
+ e.preventDefault();
+ }
+
+ var point = e.touches ? e.touches[0] : e,
+ deltaX = point.pageX - this.pointX,
+ deltaY = point.pageY - this.pointY,
+ timestamp = utils.getTime(),
+ newX, newY,
+ absDistX, 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);
+
+ // We need to move at least 10 pixels for the scrolling to initiate
+ if ( timestamp - this.endTime > 300 && (absDistX < 10 && absDistY < 10) ) {
+ return;
+ }
+
+ // If you are scrolling in one direction lock the other
+ if ( !this.directionLocked && !this.options.freeScroll ) {
+ if ( absDistX > absDistY + this.options.directionLockThreshold ) {
+ this.directionLocked = 'h'; // lock horizontally
+ } else if ( absDistY >= absDistX + this.options.directionLockThreshold ) {
+ this.directionLocked = 'v'; // lock vertically
+ } else {
+ this.directionLocked = 'n'; // no lock
+ }
+ }
+
+ 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;
+
+ // 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;
+ }
+
+ 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);
+
+/* REPLACE START: _move */
+
+ if ( timestamp - this.startTime > 300 ) {
+ this.startTime = timestamp;
+ this.startX = this.x;
+ this.startY = this.y;
+ }
+
+/* REPLACE END: _move */
+
+ },
+
+ _end: function (e) {
+ if ( !this.enabled || utils.eventType[e.type] !== this.initiated ) {
+ return;
+ }
+
+ if ( this.options.preventDefault && !utils.preventDefaultException(e.target, this.options.preventDefaultException) ) {
+ e.preventDefault();
+ }
+
+ var point = e.changedTouches ? e.changedTouches[0] : e,
+ momentumX,
+ momentumY,
+ duration = utils.getTime() - this.startTime,
+ newX = Math.round(this.x),
+ newY = Math.round(this.y),
+ distanceX = Math.abs(newX - this.startX),
+ distanceY = Math.abs(newY - this.startY),
+ time = 0,
+ easing = '';
+
+ this.isInTransition = 0;
+ this.initiated = 0;
+ this.endTime = utils.getTime();
+
+ // 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
+
+ // we scrolled less than 10 pixels
+ 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;
+ }
+
+ // start momentum animation if needed
+ 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;
+ }
+
+// INSERT POINT: _end
+
+ if ( newX != this.x || newY != this.y ) {
+ // change easing function when scroller goes out of the boundaries
+ if ( newX > 0 || newX < this.maxScrollX || newY > 0 || newY < this.maxScrollY ) {
+ easing = utils.ease.quadratic;
+ }
+
+ this.scrollTo(newX, newY, time, easing);
+ return;
+ }
+
+ this._execEvent('scrollEnd');
+ },
+
_resize: function () {
var that = this;
- setTimeout(function () { that.refresh(); }, isAndroid ? 200 : 0);
+
+ clearTimeout(this.resizeTimeout);
+
+ this.resizeTimeout = setTimeout(function () {
+ that.refresh();
+ }, this.options.resizePolling);
},
-
- _pos: function (x, y) {
- if (this.zoomed) return;
- x = this.hScroll ? x : 0;
- y = this.vScroll ? y : 0;
+ resetPosition: function (time) {
+ var x = this.x,
+ y = this.y;
- if (this.options.useTransform) {
- this.scroller.style[transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')' + translateZ;
+ 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;
+ },
+
+ disable: function () {
+ this.enabled = false;
+ },
+
+ enable: function () {
+ this.enabled = true;
+ },
+
+ refresh: function () {
+ var rf = this.wrapper.offsetHeight; // Force reflow
+
+ this.wrapperWidth = this.wrapper.clientWidth;
+ this.wrapperHeight = this.wrapper.clientHeight;
+
+/* REPLACE START: refresh */
+
+ this.scrollerWidth = this.scroller.offsetWidth;
+ this.scrollerHeight = this.scroller.offsetHeight;
+
+ this.maxScrollX = this.wrapperWidth - this.scrollerWidth;
+ this.maxScrollY = this.wrapperHeight - this.scrollerHeight;
+
+/* REPLACE END: refresh */
+
+ 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;
+
+ this.wrapperOffset = utils.offset(this.wrapper);
+
+ this._execEvent('refresh');
+
+ this.resetPosition();
+
+// INSERT POINT: _refresh
+
+ },
+
+ 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,
+ 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);
+ },
+
+ scrollTo: function (x, y, time, easing) {
+ easing = easing || utils.ease.circular;
+
+ this.isInTransition = this.options.useTransition && time > 0;
+
+ if ( !time || (this.options.useTransition && easing.style) ) {
+ this._transitionTimingFunction(easing.style);
+ this._transitionTime(time);
+ this._translate(x, y);
} else {
- x = m.round(x);
- y = m.round(y);
- this.scroller.style.left = x + 'px';
- this.scroller.style.top = y + 'px';
+ 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;
+
+ // if offsetX/Y are true we center the element to the screen
+ if ( offsetX === true ) {
+ offsetX = Math.round(el.offsetWidth / 2 - this.wrapper.offsetWidth / 2);
+ }
+ if ( offsetY === true ) {
+ offsetY = Math.round(el.offsetHeight / 2 - this.wrapper.offsetHeight / 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) {
+ time = time || 0;
+
+ this.scrollerStyle[utils.style.transitionDuration] = time + 'ms';
+
+ if ( !time && utils.isBadAndroid ) {
+ this.scrollerStyle[utils.style.transitionDuration] = '0.001s';
+ }
+
+
+ if ( this.indicators ) {
+ for ( var i = this.indicators.length; i--; ) {
+ this.indicators[i].transitionTime(time);
+ }
+ }
+
+
+// INSERT POINT: _transitionTime
+
+ },
+
+ _transitionTimingFunction: function (easing) {
+ this.scrollerStyle[utils.style.transitionTimingFunction] = easing;
+
+
+ if ( this.indicators ) {
+ for ( var i = this.indicators.length; i--; ) {
+ this.indicators[i].transitionTimingFunction(easing);
+ }
+ }
+
+
+// INSERT POINT: _transitionTimingFunction
+
+ },
+
+ _translate: function (x, y) {
+ if ( this.options.useTransform ) {
+
+/* REPLACE START: _translate */
+
+ this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;
+
+/* REPLACE END: _translate */
+
+ } 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;
- this._scrollbarPos('h');
- this._scrollbarPos('v');
+
+ if ( this.indicators ) {
+ for ( var i = this.indicators.length; i--; ) {
+ this.indicators[i].updatePosition();
+ }
+ }
+
+
+// INSERT POINT: _translate
+
},
- _scrollbarPos: function (dir, hidden) {
- var that = this,
- pos = dir == 'h' ? that.x : that.y,
- size;
+ _initEvents: function (remove) {
+ var eventType = remove ? utils.removeEvent : utils.addEvent,
+ target = this.options.bindToWrapper ? this.wrapper : window;
- if (!that[dir + 'Scrollbar']) return;
+ eventType(window, 'orientationchange', this);
+ eventType(window, 'resize', this);
- pos = that[dir + 'ScrollbarProp'] * pos;
-
- if (pos < 0) {
- if (!that.options.fixedScrollbar) {
- size = that[dir + 'ScrollbarIndicatorSize'] + m.round(pos * 3);
- if (size < 8) size = 8;
- that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px';
- }
- pos = 0;
- } else if (pos > that[dir + 'ScrollbarMaxScroll']) {
- if (!that.options.fixedScrollbar) {
- size = that[dir + 'ScrollbarIndicatorSize'] - m.round((pos - that[dir + 'ScrollbarMaxScroll']) * 3);
- if (size < 8) size = 8;
- that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px';
- pos = that[dir + 'ScrollbarMaxScroll'] + (that[dir + 'ScrollbarIndicatorSize'] - size);
- } else {
- pos = that[dir + 'ScrollbarMaxScroll'];
- }
+ if ( this.options.click ) {
+ eventType(this.wrapper, 'click', this, true);
}
- that[dir + 'ScrollbarWrapper'].style[transitionDelay] = '0';
- that[dir + 'ScrollbarWrapper'].style.opacity = hidden && that.options.hideScrollbar ? '0' : '1';
- that[dir + 'ScrollbarIndicator'].style[transform] = 'translate(' + (dir == 'h' ? pos + 'px,0)' : '0,' + pos + 'px)') + translateZ;
+ 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, 'MSPointerDown', this);
+ eventType(target, 'MSPointerMove', this);
+ eventType(target, 'MSPointerCancel', this);
+ eventType(target, 'MSPointerUp', 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);
},
-
- _start: function (e) {
- var that = this,
- point = hasTouch ? e.touches[0] : e,
- matrix, x, y,
- c1, c2;
- if (!that.enabled) return;
+ getComputedPosition: function () {
+ var matrix = window.getComputedStyle(this.scroller, null),
+ x, y;
- if (that.options.onBeforeScrollStart) that.options.onBeforeScrollStart.call(that, e);
-
- if (that.options.useTransition || that.options.zoom) that._transitionTime(0);
-
- that.moved = false;
- that.animating = false;
- that.zoomed = false;
- that.distX = 0;
- that.distY = 0;
- that.absDistX = 0;
- that.absDistY = 0;
- that.dirX = 0;
- that.dirY = 0;
-
- // Gesture start
- if (that.options.zoom && hasTouch && e.touches.length > 1) {
- c1 = m.abs(e.touches[0].pageX-e.touches[1].pageX);
- c2 = m.abs(e.touches[0].pageY-e.touches[1].pageY);
- that.touchesDistStart = m.sqrt(c1 * c1 + c2 * c2);
-
- that.originX = m.abs(e.touches[0].pageX + e.touches[1].pageX - that.wrapperOffsetLeft * 2) / 2 - that.x;
- that.originY = m.abs(e.touches[0].pageY + e.touches[1].pageY - that.wrapperOffsetTop * 2) / 2 - that.y;
-
- if (that.options.onZoomStart) that.options.onZoomStart.call(that, e);
+ 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, '');
}
- if (that.options.momentum) {
- if (that.options.useTransform) {
- // Very lame general purpose alternative to CSSMatrix
- matrix = getComputedStyle(that.scroller, null)[transform].replace(/[^0-9\-.,]/g, '').split(',');
- x = +(matrix[12] || matrix[4]);
- y = +(matrix[13] || matrix[5]);
- } else {
- x = +getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, '');
- y = +getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '');
- }
-
- if (x != that.x || y != that.y) {
- if (that.options.useTransition) that._unbind(TRNEND_EV);
- else cancelFrame(that.aniTime);
- that.steps = [];
- that._pos(x, y);
- if (that.options.onScrollEnd) that.options.onScrollEnd.call(that);
- }
- }
-
- that.absStartX = that.x; // Needed by snap threshold
- that.absStartY = that.y;
-
- that.startX = that.x;
- that.startY = that.y;
- that.pointX = point.pageX;
- that.pointY = point.pageY;
-
- that.startTime = e.timeStamp || Date.now();
-
- if (that.options.onScrollStart) that.options.onScrollStart.call(that, e);
-
- that._bind(MOVE_EV, window);
- that._bind(END_EV, window);
- that._bind(CANCEL_EV, window);
+ return { x: x, y: y };
},
-
- _move: function (e) {
- var that = this,
- point = hasTouch ? e.touches[0] : e,
- deltaX = point.pageX - that.pointX,
- deltaY = point.pageY - that.pointY,
- newX = that.x + deltaX,
- newY = that.y + deltaY,
- c1, c2, scale,
- timestamp = e.timeStamp || Date.now();
- if (that.options.onBeforeScrollMove) that.options.onBeforeScrollMove.call(that, e);
+ _initIndicators: function () {
+ var interactive = this.options.interactiveScrollbars,
+ customStyle = typeof this.options.scrollbars != 'string',
+ indicators = [],
+ indicator;
- // Zoom
- if (that.options.zoom && hasTouch && e.touches.length > 1) {
- c1 = m.abs(e.touches[0].pageX - e.touches[1].pageX);
- c2 = m.abs(e.touches[0].pageY - e.touches[1].pageY);
- that.touchesDist = m.sqrt(c1*c1+c2*c2);
+ var that = this;
- that.zoomed = true;
+ this.indicators = [];
- scale = 1 / that.touchesDistStart * that.touchesDist * this.scale;
+ if ( this.options.scrollbars ) {
+ // Vertical scrollbar
+ 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
+ };
- if (scale < that.options.zoomMin) scale = 0.5 * that.options.zoomMin * Math.pow(2.0, scale / that.options.zoomMin);
- else if (scale > that.options.zoomMax) scale = 2.0 * that.options.zoomMax * Math.pow(0.5, that.options.zoomMax / scale);
+ this.wrapper.appendChild(indicator.el);
+ indicators.push(indicator);
+ }
- that.lastScale = scale / this.scale;
+ // Horizontal scrollbar
+ 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
+ };
- newX = this.originX - this.originX * that.lastScale + this.x,
- newY = this.originY - this.originY * that.lastScale + this.y;
-
- this.scroller.style[transform] = 'translate(' + newX + 'px,' + newY + 'px) scale(' + scale + ')' + translateZ;
-
- if (that.options.onZoom) that.options.onZoom.call(that, e);
- return;
- }
-
- that.pointX = point.pageX;
- that.pointY = point.pageY;
-
- // Slow down if outside of the boundaries
- if (newX > 0 || newX < that.maxScrollX) {
- newX = that.options.bounce ? that.x + (deltaX / 2) : newX >= 0 || that.maxScrollX >= 0 ? 0 : that.maxScrollX;
- }
- if (newY > that.minScrollY || newY < that.maxScrollY) {
- newY = that.options.bounce ? that.y + (deltaY / 2) : newY >= that.minScrollY || that.maxScrollY >= 0 ? that.minScrollY : that.maxScrollY;
- }
-
- that.distX += deltaX;
- that.distY += deltaY;
- that.absDistX = m.abs(that.distX);
- that.absDistY = m.abs(that.distY);
-
- if (that.absDistX < 6 && that.absDistY < 6) {
- return;
- }
-
- // Lock direction
- if (that.options.lockDirection) {
- if (that.absDistX > that.absDistY + 5) {
- newY = that.y;
- deltaY = 0;
- } else if (that.absDistY > that.absDistX + 5) {
- newX = that.x;
- deltaX = 0;
+ this.wrapper.appendChild(indicator.el);
+ indicators.push(indicator);
}
}
- that.moved = true;
- that._pos(newX, newY);
- that.dirX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
- that.dirY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
-
- if (timestamp - that.startTime > 300) {
- that.startTime = timestamp;
- that.startX = that.x;
- that.startY = that.y;
+ if ( this.options.indicators ) {
+ // TODO: check concat compatibility
+ indicators = indicators.concat(this.options.indicators);
}
-
- if (that.options.onScrollMove) that.options.onScrollMove.call(that, e);
+
+ for ( var i = indicators.length; i--; ) {
+ this.indicators.push( new Indicator(this, indicators[i]) );
+ }
+
+ // TODO: check if we can use array.map (wide compatibility and performance issues)
+ function _indicatorsMap (fn) {
+ 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;
+ });
},
-
- _end: function (e) {
- if (hasTouch && e.touches.length !== 0) return;
- var that = this,
- point = hasTouch ? e.changedTouches[0] : e,
- target, ev,
- momentumX = { dist:0, time:0 },
- momentumY = { dist:0, time:0 },
- duration = (e.timeStamp || Date.now()) - that.startTime,
- newPosX = that.x,
- newPosY = that.y,
- distX, distY,
- newDuration,
- snap,
- scale;
+ _initWheel: function () {
+ utils.addEvent(this.wrapper, 'wheel', this);
+ utils.addEvent(this.wrapper, 'mousewheel', this);
+ utils.addEvent(this.wrapper, 'DOMMouseScroll', this);
- that._unbind(MOVE_EV, window);
- that._unbind(END_EV, window);
- that._unbind(CANCEL_EV, window);
-
- if (that.options.onBeforeScrollEnd) that.options.onBeforeScrollEnd.call(that, e);
-
- if (that.zoomed) {
- scale = that.scale * that.lastScale;
- scale = Math.max(that.options.zoomMin, scale);
- scale = Math.min(that.options.zoomMax, scale);
- that.lastScale = scale / that.scale;
- that.scale = scale;
-
- that.x = that.originX - that.originX * that.lastScale + that.x;
- that.y = that.originY - that.originY * that.lastScale + that.y;
-
- that.scroller.style[transitionDuration] = '200ms';
- that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px) scale(' + that.scale + ')' + translateZ;
-
- that.zoomed = false;
- that.refresh();
-
- if (that.options.onZoomEnd) that.options.onZoomEnd.call(that, e);
- return;
- }
-
- if (!that.moved) {
- if (hasTouch) {
- if (that.doubleTapTimer && that.options.zoom) {
- // Double tapped
- clearTimeout(that.doubleTapTimer);
- that.doubleTapTimer = null;
- if (that.options.onZoomStart) that.options.onZoomStart.call(that, e);
- that.zoom(that.pointX, that.pointY, that.scale == 1 ? that.options.doubleTapZoom : 1);
- if (that.options.onZoomEnd) {
- setTimeout(function() {
- that.options.onZoomEnd.call(that, e);
- }, 200); // 200 is default zoom duration
- }
- } else if (this.options.handleClick) {
- that.doubleTapTimer = setTimeout(function () {
- that.doubleTapTimer = null;
-
- // Find the last touched element
- target = point.target;
- while (target.nodeType != 1) target = target.parentNode;
-
- if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
- ev = doc.createEvent('MouseEvents');
- ev.initMouseEvent('click', true, true, e.view, 1,
- point.screenX, point.screenY, point.clientX, point.clientY,
- e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
- 0, null);
- ev._fake = true;
- target.dispatchEvent(ev);
- }
- }, that.options.zoom ? 250 : 0);
- }
- }
-
- that._resetPos(400);
-
- if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
- return;
- }
-
- if (duration < 300 && that.options.momentum) {
- momentumX = newPosX ? that._momentum(newPosX - that.startX, duration, -that.x, that.scrollerW - that.wrapperW + that.x, that.options.bounce ? that.wrapperW : 0) : momentumX;
- momentumY = newPosY ? that._momentum(newPosY - that.startY, duration, -that.y, (that.maxScrollY < 0 ? that.scrollerH - that.wrapperH + that.y - that.minScrollY : 0), that.options.bounce ? that.wrapperH : 0) : momentumY;
-
- newPosX = that.x + momentumX.dist;
- newPosY = that.y + momentumY.dist;
-
- if ((that.x > 0 && newPosX > 0) || (that.x < that.maxScrollX && newPosX < that.maxScrollX)) momentumX = { dist:0, time:0 };
- if ((that.y > that.minScrollY && newPosY > that.minScrollY) || (that.y < that.maxScrollY && newPosY < that.maxScrollY)) momentumY = { dist:0, time:0 };
- }
-
- if (momentumX.dist || momentumY.dist) {
- newDuration = m.max(m.max(momentumX.time, momentumY.time), 10);
-
- // Do we need to snap?
- if (that.options.snap) {
- distX = newPosX - that.absStartX;
- distY = newPosY - that.absStartY;
- if (m.abs(distX) < that.options.snapThreshold && m.abs(distY) < that.options.snapThreshold) { that.scrollTo(that.absStartX, that.absStartY, 200); }
- else {
- snap = that._snap(newPosX, newPosY);
- newPosX = snap.x;
- newPosY = snap.y;
- newDuration = m.max(snap.time, newDuration);
- }
- }
-
- that.scrollTo(m.round(newPosX), m.round(newPosY), newDuration);
-
- if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
- return;
- }
-
- // Do we need to snap?
- if (that.options.snap) {
- distX = newPosX - that.absStartX;
- distY = newPosY - that.absStartY;
- if (m.abs(distX) < that.options.snapThreshold && m.abs(distY) < that.options.snapThreshold) that.scrollTo(that.absStartX, that.absStartY, 200);
- else {
- snap = that._snap(that.x, that.y);
- if (snap.x != that.x || snap.y != that.y) that.scrollTo(snap.x, snap.y, snap.time);
- }
-
- if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
- return;
- }
-
- that._resetPos(200);
- if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
- },
-
- _resetPos: function (time) {
- var that = this,
- resetX = that.x >= 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x,
- resetY = that.y >= that.minScrollY || that.maxScrollY > 0 ? that.minScrollY : that.y < that.maxScrollY ? that.maxScrollY : that.y;
-
- if (resetX == that.x && resetY == that.y) {
- if (that.moved) {
- that.moved = false;
- if (that.options.onScrollEnd) that.options.onScrollEnd.call(that); // Execute custom code on scroll end
- }
-
- if (that.hScrollbar && that.options.hideScrollbar) {
- if (vendor == 'webkit') that.hScrollbarWrapper.style[transitionDelay] = '300ms';
- that.hScrollbarWrapper.style.opacity = '0';
- }
- if (that.vScrollbar && that.options.hideScrollbar) {
- if (vendor == 'webkit') that.vScrollbarWrapper.style[transitionDelay] = '300ms';
- that.vScrollbarWrapper.style.opacity = '0';
- }
-
- return;
- }
-
- that.scrollTo(resetX, resetY, time || 0);
+ this.on('destroy', function () {
+ utils.removeEvent(this.wrapper, 'wheel', this);
+ utils.removeEvent(this.wrapper, 'mousewheel', this);
+ utils.removeEvent(this.wrapper, 'DOMMouseScroll', this);
+ });
},
_wheel: function (e) {
- var that = this,
- wheelDeltaX, wheelDeltaY,
- deltaX, deltaY,
- deltaScale;
+ if ( !this.enabled ) {
+ return;
+ }
- if ('wheelDeltaX' in e) {
- wheelDeltaX = e.wheelDeltaX / 12;
- wheelDeltaY = e.wheelDeltaY / 12;
- } else if('wheelDelta' in e) {
- wheelDeltaX = wheelDeltaY = e.wheelDelta / 12;
- } else if ('detail' in e) {
- wheelDeltaX = wheelDeltaY = -e.detail * 3;
+ e.preventDefault();
+ e.stopPropagation();
+
+ var wheelDeltaX, wheelDeltaY,
+ newX, newY,
+ that = this;
+
+ if ( this.wheelTimeout === undefined ) {
+ that._execEvent('scrollStart');
+ }
+
+ // Execute the scrollEnd event after 400ms the wheel stopped scrolling
+ clearTimeout(this.wheelTimeout);
+ this.wheelTimeout = setTimeout(function () {
+ that._execEvent('scrollEnd');
+ that.wheelTimeout = undefined;
+ }, 400);
+
+ if ( 'deltaX' in e ) {
+ 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;
}
-
- if (that.options.wheelAction == 'zoom') {
- deltaScale = that.scale * Math.pow(2, 1/3 * (wheelDeltaY ? wheelDeltaY / Math.abs(wheelDeltaY) : 0));
- if (deltaScale < that.options.zoomMin) deltaScale = that.options.zoomMin;
- if (deltaScale > that.options.zoomMax) deltaScale = that.options.zoomMax;
-
- if (deltaScale != that.scale) {
- if (!that.wheelZoomCount && that.options.onZoomStart) that.options.onZoomStart.call(that, e);
- that.wheelZoomCount++;
-
- that.zoom(e.pageX, e.pageY, deltaScale, 400);
-
- setTimeout(function() {
- that.wheelZoomCount--;
- if (!that.wheelZoomCount && that.options.onZoomEnd) that.options.onZoomEnd.call(that, e);
- }, 400);
+
+ 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;
}
-
- deltaX = that.x + wheelDeltaX;
- deltaY = that.y + wheelDeltaY;
- if (deltaX > 0) deltaX = 0;
- else if (deltaX < that.maxScrollX) deltaX = that.maxScrollX;
+ newX = this.x + Math.round(this.hasHorizontalScroll ? wheelDeltaX : 0);
+ newY = this.y + Math.round(this.hasVerticalScroll ? wheelDeltaY : 0);
- if (deltaY > that.minScrollY) deltaY = that.minScrollY;
- else if (deltaY < that.maxScrollY) deltaY = that.maxScrollY;
-
- if (that.maxScrollY < 0) {
- that.scrollTo(deltaX, deltaY, 0);
+ if ( newX > 0 ) {
+ newX = 0;
+ } else if ( newX < this.maxScrollX ) {
+ newX = this.maxScrollX;
}
- },
-
- _transitionEnd: function (e) {
- var that = this;
- if (e.target != that.scroller) return;
+ if ( newY > 0 ) {
+ newY = 0;
+ } else if ( newY < this.maxScrollY ) {
+ newY = this.maxScrollY;
+ }
- that._unbind(TRNEND_EV);
-
- that._startAni();
+ this.scrollTo(newX, newY, 0);
+
+// INSERT POINT: _wheel
},
+ _initSnap: function () {
+ this.currentPage = {};
- /**
- *
- * Utilities
- *
- */
- _startAni: function () {
- var that = this,
- startX = that.x, startY = that.y,
- startTime = Date.now(),
- step, easeOut,
- animate;
-
- if (that.animating) return;
-
- if (!that.steps.length) {
- that._resetPos(400);
- return;
- }
-
- step = that.steps.shift();
-
- if (step.x == startX && step.y == startY) step.time = 0;
-
- that.animating = true;
- that.moved = true;
-
- if (that.options.useTransition) {
- that._transitionTime(step.time);
- that._pos(step.x, step.y);
- that.animating = false;
- if (step.time) that._bind(TRNEND_EV);
- else that._resetPos(0);
- return;
+ if ( typeof this.options.snap == 'string' ) {
+ this.options.snap = this.scroller.querySelectorAll(this.options.snap);
}
- animate = function () {
- var now = Date.now(),
- newX, newY;
+ this.on('refresh', function () {
+ var i = 0, l,
+ m = 0, n,
+ cx, cy,
+ x = 0, y,
+ stepX = this.options.snapStepX || this.wrapperWidth,
+ stepY = this.options.snapStepY || this.wrapperHeight,
+ el;
- if (now >= startTime + step.time) {
- that._pos(step.x, step.y);
- that.animating = false;
- if (that.options.onAnimationEnd) that.options.onAnimationEnd.call(that); // Execute custom code on animation end
- that._startAni();
+ this.pages = [];
+
+ if ( !this.wrapperWidth || !this.wrapperHeight || !this.scrollerWidth || !this.scrollerHeight ) {
return;
}
- now = (now - startTime) / step.time - 1;
- easeOut = m.sqrt(1 - now * now);
- newX = (step.x - startX) * easeOut + startX;
- newY = (step.y - startY) * easeOut + startY;
- that._pos(newX, newY);
- if (that.animating) that.aniTime = nextFrame(animate);
+ 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++ ) {
+ if ( i === 0 || el[i].offsetLeft <= el[i-1].offsetLeft ) {
+ m = 0;
+ n++;
+ }
+
+ if ( !this.pages[m] ) {
+ this.pages[m] = [];
+ }
+
+ x = Math.max(-el[i].offsetLeft, this.maxScrollX);
+ y = Math.max(-el[i].offsetTop, this.maxScrollY);
+ cx = x - Math.round(el[i].offsetWidth / 2);
+ cy = y - Math.round(el[i].offsetHeight / 2);
+
+ this.pages[m][n] = {
+ x: x,
+ y: y,
+ width: el[i].offsetWidth,
+ height: el[i].offsetHeight,
+ cx: cx,
+ cy: cy
+ };
+
+ if ( x > this.maxScrollX ) {
+ m++;
+ }
+ }
+ }
+
+ this.goToPage(this.currentPage.pageX || 0, this.currentPage.pageY || 0, 0);
+
+ // Update snap threshold if needed
+ 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,
+ l = this.pages.length,
+ m = 0;
+
+ // Check if we exceeded the snap threshold
+ 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,
+ 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
};
- animate();
+ this.scrollTo(posX, posY, time, easing);
},
- _transitionTime: function (time) {
- time += 'ms';
- this.scroller.style[transitionDuration] = time;
- if (this.hScrollbar) this.hScrollbarIndicator.style[transitionDuration] = time;
- if (this.vScrollbar) this.vScrollbarIndicator.style[transitionDuration] = time;
- },
+ next: function (time, easing) {
+ var x = this.currentPage.pageX,
+ y = this.currentPage.pageY;
- _momentum: function (dist, time, maxDistUpper, maxDistLower, size) {
- var deceleration = 0.0006,
- speed = m.abs(dist) / time,
- newDist = (speed * speed) / (2 * deceleration),
- newTime = 0, outsideDist = 0;
+ x++;
- // Proportinally reduce speed if we are outside of the boundaries
- if (dist > 0 && newDist > maxDistUpper) {
- outsideDist = size / (6 / (newDist / speed * deceleration));
- maxDistUpper = maxDistUpper + outsideDist;
- speed = speed * maxDistUpper / newDist;
- newDist = maxDistUpper;
- } else if (dist < 0 && newDist > maxDistLower) {
- outsideDist = size / (6 / (newDist / speed * deceleration));
- maxDistLower = maxDistLower + outsideDist;
- speed = speed * maxDistLower / newDist;
- newDist = maxDistLower;
+ if ( x >= this.pages.length && this.hasVerticalScroll ) {
+ x = 0;
+ y++;
}
- newDist = newDist * (dist < 0 ? -1 : 1);
- newTime = speed / deceleration;
-
- return { dist: newDist, time: m.round(newTime) };
+ this.goToPage(x, y, time, easing);
},
- _offset: function (el) {
- var left = -el.offsetLeft,
- top = -el.offsetTop;
-
- while (el = el.offsetParent) {
- left -= el.offsetLeft;
- top -= el.offsetTop;
- }
-
- if (el != this.wrapper) {
- left *= this.scale;
- top *= this.scale;
+ prev: function (time, easing) {
+ var x = this.currentPage.pageX,
+ y = this.currentPage.pageY;
+
+ x--;
+
+ if ( x < 0 && this.hasVerticalScroll ) {
+ x = 0;
+ y--;
}
- return { left: left, top: top };
+ this.goToPage(x, y, time, easing);
},
- _snap: function (x, y) {
+ _initKeys: function (e) {
+ // default key bindings
+ var keys = {
+ pageUp: 33,
+ pageDown: 34,
+ end: 35,
+ home: 36,
+ left: 37,
+ up: 38,
+ right: 39,
+ down: 40
+ };
+ var i;
+
+ // if you give me characters I give you keycode
+ 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, // we are using this alot, better to cache it
+ newX = snap ? this.currentPage.pageX : this.x,
+ newY = snap ? this.currentPage.pageY : this.y,
+ now = utils.getTime(),
+ prevTime = this.keyTime || 0,
+ acceleration = 0.250,
+ 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,
- i, l,
- page, time,
- sizeX, sizeY;
+ startX = this.x,
+ startY = this.y,
+ startTime = utils.getTime(),
+ destTime = startTime + duration;
- // Check page X
- page = that.pagesX.length - 1;
- for (i=0, l=that.pagesX.length; i= that.pagesX[i]) {
- page = i;
- break;
+ function step () {
+ var now = utils.getTime(),
+ newX, newY,
+ 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);
}
}
- if (page == that.currPageX && page > 0 && that.dirX < 0) page--;
- x = that.pagesX[page];
- sizeX = m.abs(x - that.pagesX[that.currPageX]);
- sizeX = sizeX ? m.abs(that.x - x) / sizeX * 500 : 0;
- that.currPageX = page;
- // Check page Y
- page = that.pagesY.length-1;
- for (i=0; i= that.pagesY[i]) {
- page = i;
+ this.isAnimating = true;
+ step();
+ },
+ handleEvent: function (e) {
+ switch ( e.type ) {
+ case 'touchstart':
+ case 'MSPointerDown':
+ case 'mousedown':
+ this._start(e);
+ break;
+ case 'touchmove':
+ case 'MSPointerMove':
+ case 'mousemove':
+ this._move(e);
+ break;
+ case 'touchend':
+ case 'MSPointerUp':
+ case 'mouseup':
+ case 'touchcancel':
+ case 'MSPointerCancel':
+ case 'mousecancel':
+ 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':
+ this._wheel(e);
+ break;
+ case 'keydown':
+ this._key(e);
+ break;
+ case 'click':
+ if ( !e._constructed ) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
break;
- }
}
- if (page == that.currPageY && page > 0 && that.dirY < 0) page--;
- y = that.pagesY[page];
- sizeY = m.abs(y - that.pagesY[that.currPageY]);
- sizeY = sizeY ? m.abs(that.y - y) / sizeY * 500 : 0;
- that.currPageY = page;
+ }
+};
+function createDefaultScrollbar (direction, interactive, type) {
+ var scrollbar = document.createElement('div'),
+ indicator = document.createElement('div');
- // Snap with constant speed (proportional duration)
- time = m.round(m.max(sizeX, sizeY)) || 200;
+ 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';
+ }
- return { x: x, y: y, time: time };
+ 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, 'MSPointerDown', this);
+ utils.addEvent(window, 'MSPointerUp', 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;
+ this.wrapperStyle[utils.style.transitionDuration] = utils.isBadAndroid ? '0.001s' : '0ms';
+ this.wrapperStyle.opacity = '0';
+ }
+}
+
+Indicator.prototype = {
+ handleEvent: function (e) {
+ switch ( e.type ) {
+ case 'touchstart':
+ case 'MSPointerDown':
+ case 'mousedown':
+ this._start(e);
+ break;
+ case 'touchmove':
+ case 'MSPointerMove':
+ case 'mousemove':
+ this._move(e);
+ break;
+ case 'touchend':
+ case 'MSPointerUp':
+ case 'mouseup':
+ case 'touchcancel':
+ case 'MSPointerCancel':
+ case 'mousecancel':
+ this._end(e);
+ break;
+ }
},
- _bind: function (type, el, bubble) {
- (el || this.scroller).addEventListener(type, this, !!bubble);
- },
-
- _unbind: function (type, el, bubble) {
- (el || this.scroller).removeEventListener(type, this, !!bubble);
- },
-
-
- /**
- *
- * Public methods
- *
- */
destroy: function () {
- var that = this;
+ if ( this.options.interactive ) {
+ utils.removeEvent(this.indicator, 'touchstart', this);
+ utils.removeEvent(this.indicator, 'MSPointerDown', this);
+ utils.removeEvent(this.indicator, 'mousedown', this);
- that.scroller.style[transform] = '';
+ utils.removeEvent(window, 'touchmove', this);
+ utils.removeEvent(window, 'MSPointerMove', this);
+ utils.removeEvent(window, 'mousemove', this);
- // Remove the scrollbars
- that.hScrollbar = false;
- that.vScrollbar = false;
- that._scrollbar('h');
- that._scrollbar('v');
-
- // Remove the event listeners
- that._unbind(RESIZE_EV, window);
- that._unbind(START_EV);
- that._unbind(MOVE_EV, window);
- that._unbind(END_EV, window);
- that._unbind(CANCEL_EV, window);
-
- if (!that.options.hasTouch) {
- that._unbind('DOMMouseScroll');
- that._unbind('mousewheel');
+ utils.removeEvent(window, 'touchend', this);
+ utils.removeEvent(window, 'MSPointerUp', this);
+ utils.removeEvent(window, 'mouseup', this);
}
-
- if (that.options.useTransition) that._unbind(TRNEND_EV);
-
- if (that.options.checkDOMChanges) clearInterval(that.checkDOMTime);
-
- if (that.options.onDestroy) that.options.onDestroy.call(that);
+
+ if ( this.options.defaultScrollbars ) {
+ 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, 'MSPointerMove', 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,
+ deltaX, deltaY,
+ newX, newY,
+ 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);
+
+// INSERT POINT: indicator._move
+
+ 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, 'MSPointerMove', 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;
+ this.indicatorStyle[utils.style.transitionDuration] = time + 'ms';
+
+ if ( !time && utils.isBadAndroid ) {
+ this.indicatorStyle[utils.style.transitionDuration] = '0.001s';
+ }
+ },
+
+ transitionTimingFunction: function (easing) {
+ this.indicatorStyle[utils.style.transitionTimingFunction] = easing;
},
refresh: function () {
- var that = this,
- offset,
- i, l,
- els,
- pos = 0,
- page = 0;
+ this.transitionTime();
- if (that.scale < that.options.zoomMin) that.scale = that.options.zoomMin;
- that.wrapperW = that.wrapper.clientWidth || 1;
- that.wrapperH = that.wrapper.clientHeight || 1;
-
- that.minScrollY = -that.options.topOffset || 0;
- that.scrollerW = m.round(that.scroller.offsetWidth * that.scale);
- that.scrollerH = m.round((that.scroller.offsetHeight + that.minScrollY) * that.scale);
- that.maxScrollX = that.wrapperW - that.scrollerW;
- that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY;
- that.dirX = 0;
- that.dirY = 0;
-
- if (that.options.onRefresh) that.options.onRefresh.call(that);
-
- that.hScroll = that.options.hScroll && that.maxScrollX < 0;
- that.vScroll = that.options.vScroll && (!that.options.bounceLock && !that.hScroll || that.scrollerH > that.wrapperH);
-
- that.hScrollbar = that.hScroll && that.options.hScrollbar;
- that.vScrollbar = that.vScroll && that.options.vScrollbar && that.scrollerH > that.wrapperH;
-
- offset = that._offset(that.wrapper);
- that.wrapperOffsetLeft = -offset.left;
- that.wrapperOffsetTop = -offset.top;
-
- // Prepare snap
- if (typeof that.options.snap == 'string') {
- that.pagesX = [];
- that.pagesY = [];
- els = that.scroller.querySelectorAll(that.options.snap);
- for (i=0, l=els.length; i= that.maxScrollX) {
- that.pagesX[page] = pos;
- pos = pos - that.wrapperW;
- page++;
- }
- if (that.maxScrollX%that.wrapperW) that.pagesX[that.pagesX.length] = that.maxScrollX - that.pagesX[that.pagesX.length-1] + that.pagesX[that.pagesX.length-1];
-
- pos = 0;
- page = 0;
- that.pagesY = [];
- while (pos >= that.maxScrollY) {
- that.pagesY[page] = pos;
- pos = pos - that.wrapperH;
- page++;
- }
- if (that.maxScrollY%that.wrapperH) that.pagesY[that.pagesY.length] = that.maxScrollY - that.pagesY[that.pagesY.length-1] + that.pagesY[that.pagesY.length-1];
- }
-
- // Prepare the scrollbars
- that._scrollbar('h');
- that._scrollbar('v');
-
- if (!that.zoomed) {
- that.scroller.style[transitionDuration] = '0';
- that._resetPos(400);
- }
- },
-
- scrollTo: function (x, y, time, relative) {
- var that = this,
- step = x,
- i, l;
-
- that.stop();
-
- if (!step.length) step = [{ x: x, y: y, time: time, relative: relative }];
-
- for (i=0, l=step.length; i 0 ? 0 : pos.left < that.maxScrollX ? that.maxScrollX : pos.left;
- pos.top = pos.top > that.minScrollY ? that.minScrollY : pos.top < that.maxScrollY ? that.maxScrollY : pos.top;
- time = time === undefined ? m.max(m.abs(pos.left)*2, m.abs(pos.top)*2) : time;
-
- that.scrollTo(pos.left, pos.top, time);
- },
-
- scrollToPage: function (pageX, pageY, time) {
- var that = this, x, y;
-
- time = time === undefined ? 400 : time;
-
- if (that.options.onScrollStart) that.options.onScrollStart.call(that);
-
- if (that.options.snap) {
- pageX = pageX == 'next' ? that.currPageX+1 : pageX == 'prev' ? that.currPageX-1 : pageX;
- pageY = pageY == 'next' ? that.currPageY+1 : pageY == 'prev' ? that.currPageY-1 : pageY;
-
- pageX = pageX < 0 ? 0 : pageX > that.pagesX.length-1 ? that.pagesX.length-1 : pageX;
- pageY = pageY < 0 ? 0 : pageY > that.pagesY.length-1 ? that.pagesY.length-1 : pageY;
-
- that.currPageX = pageX;
- that.currPageY = pageY;
- x = that.pagesX[pageX];
- y = that.pagesY[pageY];
+ 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 {
- x = -that.wrapperW * pageX;
- y = -that.wrapperH * pageY;
- if (x < that.maxScrollX) x = that.maxScrollX;
- if (y < that.maxScrollY) y = that.maxScrollY;
+ this.indicatorStyle.display = this.scroller.hasHorizontalScroll || this.scroller.hasVerticalScroll ? 'block' : 'none';
}
- that.scrollTo(x, y, time);
+ 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';
+ }
+ }
+ }
+
+ var r = this.wrapper.offsetHeight; // force refresh
+
+ 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();
},
- disable: function () {
- this.stop();
- this._resetPos(0);
- this.enabled = false;
+ 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 disabled after touchstart we make sure that there are no left over events
- this._unbind(MOVE_EV, window);
- this._unbind(END_EV, window);
- this._unbind(CANCEL_EV, window);
+ 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';
+ }
},
-
- enable: function () {
- this.enabled = true;
+
+ _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);
},
-
- stop: function () {
- if (this.options.useTransition) this._unbind(TRNEND_EV);
- else cancelFrame(this.aniTime);
- this.steps = [];
- this.moved = false;
- this.animating = false;
- },
-
- zoom: function (x, y, scale, time) {
- var that = this,
- relScale = scale / that.scale;
- if (!that.options.useTransform) return;
+ fade: function (val, hold) {
+ if ( hold && !this.visible ) {
+ return;
+ }
- that.zoomed = true;
- time = time === undefined ? 200 : time;
- x = x - that.wrapperOffsetLeft - that.x;
- y = y - that.wrapperOffsetTop - that.y;
- that.x = x - x * relScale + that.x;
- that.y = y - y * relScale + that.y;
+ clearTimeout(this.fadeTimeout);
+ this.fadeTimeout = null;
- that.scale = scale;
- that.refresh();
+ var time = val ? 250 : 500,
+ delay = val ? 0 : 300;
- that.x = that.x > 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x;
- that.y = that.y > that.minScrollY ? that.minScrollY : that.y < that.maxScrollY ? that.maxScrollY : that.y;
+ val = val ? '1' : '0';
- that.scroller.style[transitionDuration] = time + 'ms';
- that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px) scale(' + scale + ')' + translateZ;
- that.zoomed = false;
- },
-
- isReady: function () {
- return !this.moved && !this.zoomed && !this.animating;
+ this.wrapperStyle[utils.style.transitionDuration] = time + 'ms';
+
+ this.fadeTimeout = setTimeout((function (val) {
+ this.wrapperStyle.opacity = val;
+ this.visible = +val;
+ }).bind(this, val), delay);
}
};
-function prefixStyle (style) {
- if ( vendor === '' ) return style;
+IScroll.utils = utils;
- style = style.charAt(0).toUpperCase() + style.substr(1);
- return vendor + style;
+if ( typeof module != 'undefined' && module.exports ) {
+ module.exports = IScroll;
+} else {
+ window.IScroll = IScroll;
}
-dummyStyle = null; // for the sake of it
-
-if (typeof exports !== 'undefined') exports.iScroll = iScroll;
-else window.iScroll = iScroll;
-
-})(window, document);
+})(window, document, Math);
\ No newline at end of file
diff --git a/index.html b/index.html
index f80f806..303d7cb 100755
--- a/index.html
+++ b/index.html
@@ -34,6 +34,7 @@
.magazine {
left: 150px;
margin-left: 0px;
+ background-color: black;
}
.page {
@@ -89,6 +90,9 @@
+
+
+
@@ -242,8 +246,90 @@ function handleFileSelect(evt) {
}
}
+// XXX these stubs override the magazine API and use iScroll...
-$(document).ready(function(){
+// XXX need to account for page align...
+// XXX this works only for big pages...
+function getVisiblePage(){
+ var offset = $('.magazine').offset().left
+ var width = $('.viewer').width()
+ var pages = $('.page')
+ // filter the closest page to the viewer...
+ .filter(function(){
+ var page = $(this)
+ var p = page.position().left + offset
+ return p >= 0 && p < width/2
+ || p < 0 && p + page.width() >= width/2
+ })
+ // select the best candidate...
+ // XXX
+ return pages
+}
+
+
+/************************************************ iScroll5 Actions ***/
+
+// XXX next/prev page work but only when BOTH:
+// - MagazineScroller.zoom is set to 1
+// - current page is focused
+
+// XXX zoom != 1 messes up both iScroll5 navigation AND PortableMag navigation...
+
+// XXX we do not need the snap feature, flick event is enough to do next/prev page...
+
+// XXX make centered page account for page align...
+
+
+function enableFreeScroll(){
+ MagazineScroller.options.scrollY = true
+ MagazineScroller.options.freeScroll = true
+ MagazineScroller.refresh()
+}
+
+function disableFreeScroll(){
+ MagazineScroller.options.scrollY = false
+ MagazineScroller.options.freeScroll = false
+ MagazineScroller.refresh()
+}
+
+
+// Actions...
+
+// XXX this needs correct reference point calc...
+function zoomTo(n, scale, time){
+ // calculate page projection center...
+ var page = setCurrent(n)
+
+ var sc = getMagazineScale()
+ var st = scale
+
+ var d = st / sc
+
+ var W = $('.viewer').width()
+ var w = page.width()*sc
+ var o = page.offset().left
+
+ var C = W/2
+ var c = o + w/2
+
+ // left border -> 0
+ // centered -> C = c -> independent of d
+ // right border -> W
+
+ console.log('>>>', c, C, d, (c-C)*d)
+
+ // XXX this works iff d == 2
+
+ MagazineScroller.zoom(scale, C + (c-C)*d, null, time)
+
+ //return page
+}
+
+
+
+/*********************************************************************/
+
+$(function(){
// this is to fix some sort of bug baking things align in a wrong
// way at startup...
@@ -259,18 +345,166 @@ $(document).ready(function(){
$(document)
.keydown(makeKeyboardHandler(KEYBOARD_CONFIG))
- window.MagazineScroller = makeScrollHandler($('.viewer'), {
- hScroll: true,
- vScroll: false,
- // XXX still a bit flacky...
- preCallback: function(){stopAnimation($('.magazine'))},
- // XXX...
- //scrollCallback: function(){ updateNavigator() },
- //enableMultiClicks: true,
- transitionEasing: 'cubic-bezier(0.33,0.66,0.66,1)',
- }).start()
+ window.MagazineScroller = new IScroll('.viewer', {
+ tap: true,
+
+ scrollX: true,
+ scrollY: false,
+
+ scrollbars: true,
+ fadeScrollbars: true,
+ interactiveScrollbars: true,
+ shrinkScrollbars: 'clip',
+
+ //bounce: false,
+
+ zoom: true,
+ // XXX calc these dynamically depending on viewer size/resolution...
+ zoomMin: 0.2,
+ zoomMax: 2,
+ })
+
+ window.MULTI_FINGER_RELEASE_TIMEOUT = 50
$('.viewer')
+ .on('tap', function(){
+ // XXX for some reason this does not focus the page clicked
+ // if it's not the current and we are in page view...
+ focusPage(event.target, togglePageView('?') == 'on' ? 'auto' : 'center')
+
+ handleCaption(event.target)
+ })
+ .on('touchstart', function(){
+ // This is here to recover from touching a finger after
+ // lifting it before the timeout...
+ if(event.touches.length > 2){
+ delete window._THIRD_FINGER_LIFTED
+ }
+ if(event.touches.length > 1){
+ delete window._SECOND_FINGER_LIFTED
+ }
+ })
+ .on('mouseup touchend', function(){
+ var now = Date.now()
+
+ // handle the touchend only if ALL fingers are lifted...
+ if(event.touches != null){
+ // count touches within a timeout to handle multytouch swipes...
+ if(event.touches.length == 2){
+ window._THIRD_FINGER_LIFTED = now
+ } else if(event.touches.length == 1){
+ window._SECOND_FINGER_LIFTED = now
+ }
+
+ // if we are still touching skip any action...
+ if(event.touches.length > 0){
+ return
+ }
+ }
+
+ // three finger action...
+ if(window._THIRD_FINGER_LIFTED != null
+ && now - _THIRD_FINGER_LIFTED <= MULTI_FINGER_RELEASE_TIMEOUT){
+ // first/last pages...
+ if(MagazineScroller.directionX > 0){
+ setTimeout(last, 0)
+ } else if(MagazineScroller.directionX < 0){
+ setTimeout(first, 0)
+ }
+
+ // two finger action...
+ } else if(window._SECOND_FINGER_LIFTED != null
+ && now - _SECOND_FINGER_LIFTED <= MULTI_FINGER_RELEASE_TIMEOUT){
+ // next/prev cover...
+ if(MagazineScroller.directionX > 0){
+ setTimeout(nextCover, 0)
+ } else if(MagazineScroller.directionX < 0){
+ setTimeout(prevCover, 0)
+ }
+
+ // single finger action...
+ } else {
+ if(togglePageView('?') == 'on'){
+ // next/prev page...
+ if(MagazineScroller.directionX > 0){
+ setTimeout(nextPage, 0)
+ } else if(MagazineScroller.directionX < 0){
+ setTimeout(prevPage, 0)
+ }
+
+ } else {
+ setCurrent()
+ }
+ }
+ })
+
+ /*
+ // XXX do we really need this???
+ window.MagazineScroller
+ .on('flick', function(){
+ if(togglePageView('?') == 'on'){
+ if(this.directionX > 0){
+ setTimeout(nextPage, 0)
+ } else if(this.directionX < 0){
+ setTimeout(prevPage, 0)
+ }
+ }
+ })
+ */
+
+ window.MagazineScroller
+ .on('scrollCancel', function(){
+ if(togglePageView('?') == 'on'){
+ focusPage(setCurrent(centeredPage()))
+ }
+ })
+
+ // XXX is this needed???
+ window.MagazineScroller
+ .on('scrollEnd', function(){
+ // focus page that we end up on...
+ if(!togglePageView('?') == 'on'){
+ setCurrent()
+ }
+ })
+
+ // zooming...
+ // XXX needs testing on device...
+ window.MagazineScroller
+ .on('zoomStart', function(){
+ window._START_SCALE = getMagazineScale()
+ })
+ window.MagazineScroller
+ .on('zoomEnd', function(){
+ var s = getMagazineScale()
+
+ // XXX add issue support...
+ //var state = togglePageView('?')
+
+ // zoom in...
+ if(window._START_SCALE > s){
+ togglePageView('off')
+
+ // zoom out...
+ } else {
+ togglePageView('on')
+ }
+ })
+
+
+
+ $('.magazine')
+ .css({
+ '-webkit-transform-origin': '0px 50%',
+ 'left': 0,
+ })
+
+ $('.viewer')
+ .on('mouseup tapup', function(){
+ //MagazineScroller.scrollToElement(getVisiblePage()[0], 300, true, true)
+ })
+
+ /*
.on('scrollCancelled', function(){ setCurrentPage() })
.on('shortClick', handleCaption)
.on('shortClick', handleClick)
@@ -279,6 +513,7 @@ $(document).ready(function(){
.on('swipeRight', handleSwipeRight)
.on('swipeUp swipeDown', function(){ togglePageView('off') })
.on('screenReleased', handleScrollRelease)
+ */
.on('pageChanged', updatePageNumberIndicator)
.on('magazineDataLoaded', loadMagazineChrome)
@@ -299,26 +534,28 @@ $(document).ready(function(){
togglePageView('on')
// XXX this still depends on touchSwipe...
- setupNavigator()
- loadMagazineChrome()
- setCurrentPage(0)
+ //setupNavigator()
+ //loadMagazineChrome()
+ //setCurrentPage(0)
- toggleThemes('none')
+ //toggleThemes('none')
- setupEditor()
+ //setupEditor()
$('.dpi').text(getDPI())
-
// hide the splash...
setTimeout(function(){
- //setCurrentPage(0)
+
+ focusPage(0, null, 0)
+
$('.splash').fadeOut()
}, 350)
// remove the spinner...
setTimeout(function(){
$('#spinner').spin(false)
+ MagazineScroller.refresh()
}, 500)
})
@@ -944,7 +1181,6 @@ $(document).ready(function(){
-
diff --git a/keybindings.js b/keybindings.js
index 5e6ade8..210d306 100755
--- a/keybindings.js
+++ b/keybindings.js
@@ -138,17 +138,23 @@ var KEYBOARD_CONFIG = {
}
},
- Home: firstPage,
- End: lastPage,
+ //Home: firstPage,
+ //End: lastPage,
+ Home: function(){ first() },
+ End: function(){ last() },
Left: {
- default: function(){ prevPage() },
- shift: prevBookmark,
- ctrl: prevArticle,
+ //default: function(){ prevPage() },
+ default: function(){ prev() },
+ //shift: prevBookmark,
+ //ctrl: prevArticle,
+ ctrl: function(){ prevCover() },
},
Right: {
- default: function(){ nextPage() },
- shift: nextBookmark,
- ctrl: nextArticle,
+ //default: function(){ nextPage() },
+ default: function(){ next() },
+ //shift: nextBookmark,
+ //ctrl: nextArticle,
+ ctrl: function(){ nextCover() },
},
Space: {
default: 'Right',
diff --git a/layout.js b/layout.js
index a11bb8c..360cf19 100755
--- a/layout.js
+++ b/layout.js
@@ -4,8 +4,6 @@
*
**********************************************************************/
-var SNAP_TO_PAGES_IN_RIBBON = false
-
var DEFAULT_TRANSITION_DURATION = 200
var INNERTIA_SCALE = 0.25
@@ -23,61 +21,6 @@ var toggleThemes = createCSSClassToggler('.chrome', [
])
-// NOTE: this should not change anything unless the screen size changes...
-function fitScreenSizedPages(){
- var s = getPageTargetScale(1)
- var W = $('.viewer').width()
- $(SCREEN_SIZED_PAGES).width(W / s)
-}
-
-var togglePageFitMode = createCSSClassToggler(
- '.chrome',
- 'page-fit-to-viewer',
- function(action){
- if(action == 'on'){
- var n = getPageNumber()
- var scale = getMagazineScale()
- $(RESIZABLE_PAGES)
- .width($('.viewer').width() / scale)
- } else {
- var n = getPageNumber()
- $(RESIZABLE_PAGES).width('')
- }
- fitScreenSizedPages()
- setCurrentPage(n)
- })
-
-
-var togglePageView = createCSSClassToggler(
- '.chrome',
- 'full-page-view-mode',
- function(action){
- var view = $('.viewer')
- var page = $('.page')
-
- // XXX
- setTransitionDuration($('.magazine'), 0)
- var n = getPageNumber()
-
- if(action == 'on'){
- var scale = getPageTargetScale(1).value
- setMagazineScale(scale)
- //unanimated($('.magazine, .viewer'), togglePageFitMode)('on')
- togglePageFitMode('on')
- $('.viewer').trigger('fullScreenMode')
- } else {
- //unanimated($('.magazine, .viewer'), togglePageFitMode)('off')
- togglePageFitMode('off')
- var scale = getPageTargetScale(PAGES_IN_RIBBON).value
- setMagazineScale(scale)
- $('.viewer').trigger('ribbonMode')
- }
- // NOTE: can't disable transitions on this one because ScrollTo
- // uses jQuery animation...
- setCurrentPage(n)
- })
-
-
// XXX this is neither final nor usable...
function prepareInlineCaptions(){
$('.page img[title]').each(function(){
@@ -90,30 +33,12 @@ function prepareInlineCaptions(){
/************************************************** event handlers ***/
-// Click
-// - in full page do the default click, if clicked on other page, select
-// - in ribbon, open clicked page in full mode
-function handleClick(evt, data){
- var target = getPageNumber(data.orig_event.target)
- if(target != -1){
- var mag = $('.magazine')
-
- if(togglePageView('?') == 'on'){
- setTransitionDuration(mag, DEFAULT_TRANSITION_DURATION)
- } else {
- togglePageView('on')
- }
- setCurrentPage(target)
-
- //setTransitionEasing(mag, 'ease')
- setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)')
- }
-}
-
// Click on caption...
// XXX add inline caption support...
-function handleCaption(evt, data){
- elem = $(data.orig_event.target)
+function handleCaption(elem){
+ //elem = $(data.orig_event.target)
+ elem = elem == null ? $('.current.page').find('.caption') : $(elem)
+
if(elem.is('.image-fit-height, .image-fit, .image-with-caption')
|| elem.parents('.image-fit-height, .image-fit, .image-with-caption').length > 0){
@@ -136,328 +61,6 @@ function handleCaption(evt, data){
}
-// Long Click
-// - in full page, go to ribbon
-// - in ribbon, center clicked page
-function handleLongClick(evt, data){
- var target = getPageNumber(data.orig_event.target)
- if(target != -1){
- var mag = $('.magazine')
-
- if(togglePageView('?') == 'on'){
- togglePageView('off')
- } else {
- setTransitionDuration(mag, DEFAULT_TRANSITION_DURATION)
- }
- setCurrentPage(target)
-
- //setTransitionEasing(mag, 'ease')
- setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)')
- }
-}
-
-
-// Swipe Left/Right
-// - in full page, next/prev page select
-// - in ribbon, kinetic scroll
-// - with two fingers, select next/prev article
-function makeSwipeHandler(actionA, actionB){
- return function(evt, data){
- // ribbon mode...
- if(togglePageView('?') == 'off'){
-
- // article navigation...
- if(data.touches >= 2){
- actionB($('.current.page'))
- return
- }
-
- // this makes things snap...
- if(SNAP_TO_PAGES_IN_RIBBON){
- setCurrentPage()
- return
- }
-
- return handleScrollRelease(evt, data)
- }
- // full page view...
- var mag = $('.magazine')
- //setTransitionEasing(mag, 'ease-out')
- setTransitionEasing(mag, 'cubic-bezier(0.33,0.66,0.66,1)')
-
- if(data.touches >= 2){
- actionB($('.current.page'))
- } else {
- actionA($('.current.page'))
- }
- }
-}
-var handleSwipeLeft = makeSwipeHandler(prevPage, prevArticle)
-var handleSwipeRight = makeSwipeHandler(nextPage, nextArticle)
-
-
-// XXX
-GLOBAL_SCROLL_CALLBACK = null
-
-// Scroll Release
-// - check bounds and if out center first/last page
-// - filter out "throw" speeds below threshold
-// - do inertial scroll (within check bounds)
-// - snap to pages
-//
-// NOTE: this will also handle swipeUp/swopeDown as we do not
-// explicitly bind them...
-// NOTE: at this point this ONLY handles horizontal scroll...
-//
-// XXX restore all the changed values...
-// XXX this may kill the ipad...
-function handleScrollRelease(evt, data){
- console.log(callback)
- var callback = GLOBAL_SCROLL_CALLBACK
- var speed = data.speed.x
- var pages = $('.page')
- var mag = $('.magazine')
- // innertial scroll...
- // XXX make this generic...
- //var t = DEFAULT_TRANSITION_DURATION * (1+Math.abs(speed))
- var t = DEFAULT_TRANSITION_DURATION
- // XXX this is only horizontal at this point...
- var at = getElementShift(mag).left
- var d = MAX_DISTANCE_TO_SCROLL != null ? MAX_DISTANCE_TO_SCROLL : Infinity
- var s = sign(speed) >= 0 ? 1 : -1
- var to = (at + (Math.min(Math.abs(t*speed*INNERTIA_SCALE), d) * s))
- var first = getMagazineOffset(pages.first(), null, 'center')
- var last = getMagazineOffset(pages.last(), null, 'center')
-
- var easing = 'cubic-bezier(0.33,0.66,0.66,1)'
-
- // filter out really small speeds...
- if(Math.abs(speed) > 0.5){
- // check bounds...
- // NOTE: need to cut the distance and time if we are going the
- // hit the bounds...
- if(to > first){
- // trim the time proportionally...
- var _t = t
- t = Math.abs(t * ((at-first)/(at-to)))
- to = first
- //easing = 'linear'
- } else if(to < last){
- // trim the time proportionally...
- var _t = t
- t = Math.abs(t * ((at-last)/(at-to)))
- to = last
- //easing = 'linear'
-
- } else {
- //easing = 'ease-out'
- }
-
- animateElementTo(mag, to, t, easing, speed, callback)
-
- // check scroll bounds...
- // do not let the user scroll out of view...
- } else {
- if(at > first){
- //animateElementTo(mag, first, DEFAULT_TRANSITION_DURATION, 'ease-in')
- animateElementTo(mag, first,
- DEFAULT_TRANSITION_DURATION,
- easing,
- null,
- callback)
-
- } else if(at < last){
- //animateElementTo(mag, last, DEFAULT_TRANSITION_DURATION, 'ease-in')
- animateElementTo(mag, last,
- DEFAULT_TRANSITION_DURATION,
- easing,
- null,
- callback)
- }
- }
-}
-
-
-
-/********************************************************* helpers ***/
-
-function getPageInMagazineOffset(page, scale){
- if(page == null){
- page = $('.current.page')
- } else if(typeof(page) == typeof(7)){
- page = $($('.page')[page])
- }
-
- return page.position().left / (scale == null ? getMagazineScale() : scale)
-}
-
-
-// XXX there is something here that depends on scale that is either not
-// compensated, or is over compensated...
-function getMagazineOffset(page, scale, align){
- if(page == null){
- page = $('.current.page')
- // if no current page get the first...
- if(page.length == 0){
- page = $('.page').first()
- }
- }
- if(scale == null){
- scale = getMagazineScale()
- }
- if(align == null){
- align = getPageAlign(page)
- }
- var mag = $('.magazine')
-
- // calculate the align offset...
- if(align == 'left'){
- var offset = 0
-
- } else if(align == 'right'){
- var offset = $('.viewer').width() - page.width()*scale
-
- // center (default)
- } else {
- var offset = $('.viewer').width()/2 - (page.width()/2)*scale
- }
-
- // NOTE: this without scaling also represents the inner width of
- // the viewer...
- var w = mag.outerWidth(true)
- // XXX this depends on scale...
- //var pos = getPageInMagazineOffset(page, scale)
- var pos = page.position().left//*scale
-
- var l = 0
-
- return -((w - w*scale)/2 + pos) + offset
-}
-
-
-function getPageNumber(page){
- // a page/element is given explicitly...
- if(page != null){
- page = $(page)
- if(!page.hasClass('page')){
- page = page.parents('.page')
- }
- return $('.page').index(page)
- }
-
- // current page index...
- if(togglePageView('?') == 'on'){
- return $('.page').index($('.current.page'))
-
- // get the closest page to view center...
- // NOTE: this ignores page aligns and only gets the page who's center
- // is closer to view's center
- } else {
- var scale = getMagazineScale()
- var o = -$($('.magazine')[0]).offset().left - $('.viewer').offset().left
- var W = $('.viewer').width()
- var cur = -1
- var res = $('.page').map(function(i, e){
- e = $(e)
- var l = e.position().left
- var w = e.width()*scale
- return Math.abs((l+(w/2)) - (o+(W/2)))
- }).toArray()
- cur = res.indexOf(Math.min.apply(Math, res))
- return cur
- }
-}
-
-
-function getMagazineScale(){
- return getElementScale($('.magazine'))
-}
-function setMagazineScale(scale){
- var mag = $('.magazine')
- var cur = $('.current.page')
- if(cur.length == 0){
- cur = $('.page').first()
- }
-
- // center-align ribbon view pages...
- var align = togglePageView('?') == 'off' ? 'center' : null
- var left = getMagazineOffset(cur, scale, align)
-
- setElementTransform(mag, left, scale)
-
- return mag
-}
-
-
-
-/********************************************************* actions ***/
-
-function setCurrentPage(n, use_transitions){
- if(n == null){
- n = getPageNumber()
- }
- if(typeof(n) != typeof(3)){
- n = getPageNumber(n)
- }
- var l = $('.page').length
- // normalize the number...
- n = n < 0 ? l - n : n
- n = n < -l ? 0 : n
- n = n >= l ? l - 1 : n
- use_transitions = use_transitions != null ?
- use_transitions
- : USE_TRANSITIONS_FOR_ANIMATION
-
- $('.current.page').removeClass('current')
- $($('.page')[n]).addClass('current')
-
- var cur = $('.current.page')
-
- // center-align pages in ribbon view...
- var align = togglePageView('?') == 'off' ? 'center' : null
- var left = getMagazineOffset(cur, null, align)
-
- if(use_transitions){
- setElementTransform($('.magazine'), left)
-
- } else {
- animateElementTo($('.magazine'), left)
- }
-
- $('.viewer').trigger('pageChanged', n)
-
- $(':focus').blur()
- return cur
-}
-
-
-function nextPage(page){
- // XXX is this the right place for this?
- setTransitionDuration($('.magazine'), DEFAULT_TRANSITION_DURATION)
- setCurrentPage(getPageNumber(page)+1)
-}
-function prevPage(page){
- // XXX is this the right place for this?
- setTransitionDuration($('.magazine'), DEFAULT_TRANSITION_DURATION)
- var n = getPageNumber(page)-1
- n = n < 0 ? 0 : n
- setCurrentPage(n)
-}
-
-
-function firstPage(){
- // XXX is this the right place for this?
- setTransitionDuration($('.magazine'), DEFAULT_TRANSITION_DURATION)
- setCurrentPage(0)
-}
-function lastPage(){
- // XXX is this the right place for this?
- setTransitionDuration($('.magazine'), DEFAULT_TRANSITION_DURATION)
- setCurrentPage(-1)
-}
-
-
-
/**********************************************************************
* vim:set ts=4 sw=4 : */
diff --git a/magazine.js b/magazine.js
index e05df9d..1d59aaf 100755
--- a/magazine.js
+++ b/magazine.js
@@ -55,6 +55,12 @@ var FULL_HISTORY_ENABLED = false
// if true, use CSS3 transforms to scroll, of false, use left.
var USE_TRANSFORM = true
+var SCROLL_TIME = 400
+
+var BOUNCE_LENGTH = 10
+var BOUNCE_TIME_DIVIDER = 5
+
+
// list of css classes of pages that will not allow page fitting.
var NO_RESIZE_CLASSES = [
'no-resize',
@@ -119,20 +125,23 @@ var _PAGE_VIEW
// - single page mode (.page-view-mode)
// - thumbnail/ribbon mode
var togglePageView = createCSSClassToggler(
- '.viewer',
+ '.chrome',
'page-view-mode',
// post-change callback...
function(action){
if(action == 'on'){
fitNPages(1, !FIT_PAGE_TO_VIEW)
+ MagazineScroller.options.momentum = false
_PAGE_VIEW = true
} else {
fitNPages(PAGES_IN_RIBBON)
+ MagazineScroller.options.momentum = true
_PAGE_VIEW = false
}
})
+
// this will simply update the current view...
function updateView(){
return togglePageView(togglePageView('?'))
@@ -142,6 +151,68 @@ function updateView(){
/********************************************************* helpers ***/
+function centeredPageNumber(){
+ var scale = getMagazineScale()
+ var o = -$($('.magazine')[0]).offset().left - $('.viewer').offset().left
+ var W = $('.viewer').width()
+ var cur = -1
+ var res = $('.page').map(function(i, e){
+ e = $(e)
+ var l = e.position().left
+ var w = e.width()*scale
+ return Math.abs((l+(w/2)) - (o+(W/2)))
+ }).toArray()
+ cur = res.indexOf(Math.min.apply(Math, res))
+ return cur
+}
+function centeredPage(){
+ return $('.page').eq(centeredPageNumber())
+}
+
+
+function visiblePages(partial){
+ var W = $('.viewer').width()
+ var scale = getMagazineScale()
+
+ return $('.page').filter(function(_, page){
+ page = $(page)
+
+ // XXX this calculates the offset from the document rather than the magazine...
+ var o = page.offset().left
+
+ // page out of view (right)...
+ if(o >= W){
+ return false
+ }
+
+ var w = page.width() * scale
+
+ if(o < 0){
+ // partial left...
+ if(partial && o + w > 0){
+ return true
+ }
+
+ // page out of view (left)...
+ return false
+ }
+
+ // partial right...
+ if(partial && W - o < w){
+ return true
+ }
+
+ // page compleately in view...
+ if(W - o >= w){
+ return true
+ }
+
+ // NOTE: we should not get here but just in case...
+ return false
+ })
+}
+
+
function isPageResizable(page){
if(page == null){
page = $('.current.page')
@@ -223,35 +294,64 @@ function getMagazineTitle(){
function getMagazineScale(){
- return getElementScale($('.scaler'))
+ return getElementScale($('.magazine'))
}
-function setPageScale(scale){
- return setElementTransform($('.scaler'), null, scale)
+function setMagazineScale(scale){
+ var mag = $('.magazine')
+ var cur = $('.current.page')
+ if(cur.length == 0){
+ cur = $('.page').first()
+ }
+
+ // center-align ribbon view pages...
+ var align = togglePageView('?') == 'off' ? 'center' : null
+ var left = getMagazineOffset(cur, scale, align)
+
+ //setElementTransform(mag, left, scale)
+ MagazineScroller.zoom(scale)
+
+ return mag
}
// NOTE: if page is not given get the current page number...
function getPageNumber(page){
- if(page == null){
- page = $('.current.page')
- } else {
+ // a page/element is given explicitly...
+ if(page != null){
page = $(page)
+ if(!page.hasClass('page')){
+ page = page.parents('.page')
+ }
+ return $('.page').index(page)
+ }
+
+ // current page index...
+ if(togglePageView('?') == 'on'){
+ return $('.page').index($('.current.page'))
+
+ // get the closest page to view center...
+ // NOTE: this ignores page aligns and only gets the page who's center
+ // is closer to view's center
+ } else {
+ return centeredPageNumber()
}
- return $('.page').index(page)
}
+
+
// NOTE: negative values will yield results from the tail...
function getPageAt(n){
var page = $('.page')
if(n < 0){
n = page.length + n
}
- return $(page[n])
+ return $(page).eq(n)
}
function shiftMagazineTo(offset){
- setElementTransform($('.magazine'), offset)
+ MagazineScroller.scrollTo(offset, 0, 200)
+ //setElementTransform($('.magazine'), offset)
}
// XXX this is almost the same as getElementScale...
@@ -386,373 +486,374 @@ function viewResizeHandler(){
}
-// swipe state handler
-// this handles single and double finger swipes and dragging
-// while draggign this triggers magazineDragging event on the viewer...
-// NOTE: this will trigger 'magazineDragging' event on the viewer on
-// each call while dragging...
-// XXX for some reason with finger count of 3 and greater, touchSwipe
-// dies on android...
-function makeSwipeHandler(){
- var pages
- var cur
- var n
- var scale
- var mag
- var pos
- var viewer = $('.viewer')
-
- return function(evt, phase, direction, distance, duration, fingers){
-
- if(phase == 'start'){
- // NOTE: this is used with the "unanimated" trick, we will make
- // dragging real-time...
- togglePageDragging('on')
-
- // setup the data for the drag...
- pages = $('.page')
- cur = $('.current.page')
- n = pages.index(cur)
- scale = getMagazineScale()
- mag = $('.magazine')
- pos = $('.navigator .bar .indicator')
-
- // XXX make this drag pages that are larger than view before dragging outside...
- } else if(phase=='move'
- // see if wee need to drag the page and allways drag the ribbon...
- && (DRAG_FULL_PAGE || !_PAGE_VIEW)
- && (direction=='left' || direction=='right')){
- if(direction == 'left'){
- shiftMagazineTo(-cur.position().left/scale - distance/scale)
- } else if(direction == 'right') {
- shiftMagazineTo(-cur.position().left/scale + distance/scale)
- }
- viewer.trigger('magazineDragging')
-
- } else if(phase == 'cancel'){
- togglePageDragging('off')
- setCurrentPage()
-
- } else if(phase =='end' ){
- togglePageDragging('off')
- // see which page is closer to the middle of the screen and set it...
- // do this based on how much we dragged...
- var p = Math.ceil((distance/scale)/cur.width())
-
- // prev page...
- if(direction == 'right'){
- // 2 fingers moves to closest article...
- if(fingers == 2){
- prevArticle()
- // 3+ fingers moves to bookmark...
- } else if(fingers >= 3){
- prevBookmark()
- } else {
- setCurrentPage(Math.max(n-p, 0))
- }
- // next page...
- } else if(direction == 'left'){
- if(fingers == 2){
- nextArticle()
- } else if(fingers >= 3){
- nextBookmark()
- } else {
- setCurrentPage(Math.min(n+p, pages.length-1))
- }
- }
- }
- }
-}
-
-
/********************************************************** layout ***/
+// mode can be:
+// - viewer
+// - content
+//
+// XXX should this calculate offset????
+function fitPagesTo(mode, cur, time, scale){
+ mode = mode == null ? 'content' : mode
+ cur = cur == null ? centeredPageNumber() : cur
+ time = time == null ? 0 : time
+ scale = scale == null ? getMagazineScale() : scale
+
+ // fit to content...
+ if(mode == 'content'){
+ var target_width = 'auto'
+ var target_height = 'auto'
+
+ // fit to viewer...
+ } else if(mode == 'viewer'){
+ var viewer = $('.viewer')
+ var W = viewer.width()
+ var H = viewer.height()
+ // XXX is this a good way to sample content size???
+ var content = $('.content')
+ var w = content.width()
+ var h = content.height()
+
+ // need to calc width only...
+ if(W/H > w/h){
+ s = H/h
+ w = W/s
+ h = h
+
+ // need to calc height only...
+ } else if(W/H > w/h){
+ s = W/w
+ h = H/s
+ w = w
+
+ // set both width and height to defaults (content and page ratios match)...
+ } else {
+ s = W/h
+ h = h
+ w = w
+ }
+ var target_width = w
+ var target_height = h
+
+ // bad mode...
+ } else {
+ return
+ }
+
+ var pages = $('.page')
+ var offset = 0
+
+ $(RESIZABLE_PAGES)
+ .each(function(_, e){
+ var E = $(e)
+ var w = target_width == 'auto' ? E.find('.content').width() : target_width
+ var h = target_height == 'auto' ? E.find('.content').height() : target_height
+
+ // offset...
+ if(pages.index(e) < cur){
+ offset += (E.width() - w)
+ }
+ // offset half the current page...
+ if(pages.index(e) == cur){
+ // XXX to be more accurate we can use distance from page
+ // center rather than 1/2...
+ offset += ((E.width() - w)/2)
+ }
+
+ if(time <= 0){
+ e.style.width = w
+ e.style.height = h
+ } else {
+ E.animate({
+ width: w,
+ height: h,
+ }, time, 'linear')
+ }
+ })
+
+ //$(NON_RESIZABLE_PAGES).width('auto')
+ $(NON_RESIZABLE_PAGES)
+ .each(function(_, e){
+ e.style.width = 'auto'
+ })
+
+ MagazineScroller.scrollBy(offset*scale, 0, time)
+
+ setTimeout(function(){
+ MagazineScroller.refresh()
+ }, 0)
+}
+
+
// NOTE: if n is not given then it defaults to 1
// NOTE: if n > 1 and fit_to_content is not given it defaults to true
// NOTE: if n is 1 then fit_to_content bool argument controls wether:
// - the page will be stretched to viewer (false)
// - or to content (true)
+// XXX need to align/focus the corrent page...
+// case:
+// when current page is pushed off center by a resized page...
function fitNPages(n, fit_to_content){
- if(n == null){
- n = 1
- }
- if(n > 1 && fit_to_content == null){
- fit_to_content = true
- }
- var view = $('.viewer')
- if(USE_REAL_PAGE_SIZES){
- var page = $(RESIZABLE_PAGES)
- } else {
- var page = $('.page')
- }
- var content = $('.content')
- var cur = $('.current.page')
-
- var W = view.width()
- var H = view.height()
- var cW = content.width()
- var cH = content.height()
-
- // to compensate for transitions, no data sampling should be beyound
- // this point, as we will start changing things next...
-
+ n = n == null ? 1 : n
var scale = getPageTargetScale(n, fit_to_content)
- // cache some data...
- var target_width = scale.width
- var target_height = scale.height
- var rW = scale.result_width
-
- // NOTE: we need to calculate the offset as the actual widths during
- // the animation are not correct... so just looking at .position()
- // will be counterproductive...
- if(!USE_REAL_PAGE_SIZES && fit_to_content){
- var offset = rW * getPageNumber()-1
+ if(n == 1){
+ fitPagesTo('viewer')
} else {
- // calculate the target offset...
- if(USE_REAL_PAGE_SIZES){
- var rpages = $(RESIZABLE_PAGES+', .current.page')
- } else {
- var rpages = page
- }
- var i = rpages.index(cur)
- var offset = rW * i-1
- // now do the no-resize elements...
- if(USE_REAL_PAGE_SIZES){
- var nrpages = $(NON_RESIZABLE_PAGES+', .current.page')
- i = nrpages.index(cur)
- nrpages.splice(i)
- nrpages.each(function(_, e){
- offset += $(e).children('.content').width()
- })
- }
+ fitPagesTo('content')
}
-
- // align the magazine...
- if(USE_REAL_PAGE_SIZES){
- if(!isPageResizable(cur)){
- var align = getPageAlign(cur)
-
- // center align if explicitly required or if we are in a ribbon...
- if(n > 1 || align == 'center'){
- rW = cur.children('.content').width()
-
- // align left...
- } else if(align == 'left'){
- rW = $('.viewer').width()/scale
-
- // align right...
- } else if(align == 'right'){
- var v = $('.viewer')
- rW = (v.width()/scale/2 - (v.width()/scale-cur.width()))*2
- }
- }
- }
-
- // now do the actual modification...
-
- // do the scaling...
- setElementScale($('.scaler'), scale)
-
- // XXX for some reason setting size "auto" will first shrink the whole
- // page to 0 and then instantly set it to the correct size...
- //page
- // .width(target_width)
- // .height(target_height)
- //if(USE_REAL_PAGE_SIZES){
- // $(NON_RESIZABLE_PAGES).width('auto')
- //}
-
- // NOTE: we only need the .scaler animated, the rest just plays havoc with
- // the transition...
- // XXX this still jumps to offset on left/right aligned pages but 1) on
- // fast transitions it is not noticable and 2) it is way better than
- // the effect that was before...
- unanimated($('.page, .content, .magazine'), function(){
- // NOTE: this is not done directly as to avoid artifacts asociated with
- // setting 'auto' to all the elements, which makes them first slowly
- // shrink down to 0 and then appear correctly sized in an instant.
- page.each(function(_, e){
- if(target_width == 'auto'){
- e.style.width = $(e).find('.content').width()
- e.style.height = $(e).find('.content').height()
- } else {
- e.style.width = target_width
- e.style.height = target_height
- }
- })
- if(USE_REAL_PAGE_SIZES){
- //$(NON_RESIZABLE_PAGES).width('auto')
- $(NON_RESIZABLE_PAGES).each(function(_, e){
- e.style.width = 'auto'
- })
- }
- // fix position...
- setCurrentPage(null, offset, rW)
- }, 200)()
+ MagazineScroller.zoom(scale)
+ MagazineScroller.refresh()
}
/********************************************************* actions ***/
-// NOTE: "width" is used ONLY to center the page.
-// NOTE: if n is not given it will be set to current page number
-// NOTE: if width is not given it will be set to current page width.
-// NOTE: n can be:
-// - page number
-// - page element
-// NOTE: this will fire a 'pageChanged(n)' event on the viewer each time
-// it is called...
-// NOTE: this now supports negative indexes to count pages from the end...
-function setCurrentPage(n, offset, width){
- var page = $('.page')
- // setup n and cur...
- // no n is given, do the defaultdance
- if(n == null){
- var cur = $('.current.page')
- // no current page...
- // try to land on the magazine cover...
- if(cur.length == 0){
- cur = $('.magazine > .cover')
- }
- // try the first cover...
- if(cur.length == 0){
- cur = $('.cover.page')
- }
- // try first page...
- if(cur.length == 0){
- cur = page.first()
- }
- // no pages to work with...
- if(cur.length == 0){
- return
- }
- n = page.index(cur)
+// Set the .current class...
+//
+// page can be:
+// - null - centered page in view
+// - number - page number/index
+// - page - a page element
+// - elem - resolves to a containing page element
+function setCurrent(page){
+ var pages = $('.page')
+ page = page == null ? pages.eq(centeredPageNumber())
+ : typeof(page) == typeof(123) ? pages.eq(Math.max(0, Math.min(page, pages.length-1)))
+ : !$(page).eq(0).hasClass('page') ? $(page).eq(0).parents('.page').eq(0)
+ : $(page).eq(0)
- // n is a number...
- } else if(typeof(n) == typeof(1)) {
- // normalize n...
- if(n >= page.length){
- n = page.length-1
- } else if(-n > page.length){
- n = 0
- }
- var cur = getPageAt(n)
-
- // n is an element, likely...
- } else {
- var cur = $(n)
- n = $('.page').index(cur)
- //n = page.index(cur)
- }
-
- // default width...
- if(width == null){
- width = cur.width()
- if(USE_REAL_PAGE_SIZES && togglePageView('?') == 'on'){
- var align = getPageAlign(cur)
- var scale = getMagazineScale()
- if(align == 'center'){
- width = cur.width()
-
- } else if(align == 'left'){
- width = $('.viewer').width()/scale
-
- } else if(align == 'right'){
- var v = $('.viewer')
- width = (v.width()/scale/2 - (v.width()/scale-cur.width()))*2
- }
- }
+ if(page.hasClass('current')){
+ return page
}
+ // set the class...
$('.current.page').removeClass('current')
- cur.addClass('current')
-
- // NOTE: this will be wrong during a transition, that's why we
- // can pass the pre-calculated offset as an argument...
- shiftMagazineTo(-(offset == null ?
- cur.position()['left']/getMagazineScale()
- : offset))
-
- // center the pages correctly...
- // NOTE: this is the main reason we need width, and we can get it
- // pre-calculated because of ongoing transitions make it
- // pointless to read it...
- $('.magazine').css({
- 'margin-left': -width/2
- })
-
- $('.viewer').trigger('pageChanged', n)
-
- return cur
+ return page.addClass('current')
}
-function goToMagazineCover(){
- return setCurrentPage(0)
+// Focus a page...
+//
+// NOTE: n is a setCurrent(..) compatible value...
+// NOTE: if n is out of bounds (n < 0 | n >= length) this will focus the
+// first/last page and bounce...
+function focusPage(n, align, time){
+ // XXX the default needs to depend on the scale...
+ align = align == null ? 'auto' : align
+ time = time == null ? SCROLL_TIME : time
+
+ var page = setCurrent(n)
+ var pages = $('.page')
+
+ align = align == 'auto' ? getPageAlign(page) : align
+
+ // magazine offset...
+ var m = page.position().left
+ // base value for 'left' align...
+ var o = 0
+
+ var w = page.width() * getMagazineScale()
+ var W = $('.viewer').width()
+
+ if(align != 'left'){
+
+ // right...
+ if(align == 'right'){
+ o = W - w
+
+ // center / default...
+ } else {
+ o = W/2 - w/2
+ }
+ }
+
+ // compensate for first/last page align to screen (optional???)...
+ var offset = page.offset().left
+ var f = pages.first().offset().left
+ if(f + o - offset >= 0){
+ o = 0
+ m = 0
+ }
+ var last = $('.page').last()
+ var l = last.offset().left
+ if(l + o - offset <= W - w){
+ o = 0
+ m = last.position().left + last.width()*getMagazineScale() - W
+ }
+
+ // do the bounce...
+ if(time > 0){
+ var i = pages.index(page)
+ var l = pages.length
+ if(n < 0){
+ o += BOUNCE_LENGTH*getMagazineScale()
+ time /= BOUNCE_TIME_DIVIDER
+ }
+ if(n >= l){
+ o -= BOUNCE_LENGTH*getMagazineScale()
+ time /= BOUNCE_TIME_DIVIDER
+ }
+ }
+
+ // NOTE: this does not care about the zoom...
+ MagazineScroller.scrollTo(-m + o, 0, time)
+
+ return page
}
-function goToMagazineEnd(){
- return setCurrentPage(-1)
+
+
+// Focus first/last page...
+//
+// NOTE: if we are already at the first/last page, do a bounce...
+function first(align){
+ // visually show that we are at the start...
+ if($('.magazine').offset().left >= 0){
+ return focusPage(-1, align)
+ }
+ return focusPage(0, align)
}
-function goToArticleCover(){
- // try and get the actual first cover...
- var cover = $('.current.page')
- .parents('.article')
- .find('.cover.page')
- .first()
- if(cover.length == 0){
- // no cover, get the first page...
- return setCurrentPage(
- $('.current.page')
- .parents('.article')
- .find('.page')
- .first())
+function last(align){
+ var mag = $('.magazine')
+ var l = mag.offset().left
+ var end = mag.offset().left + mag.width()*getMagazineScale()
+ var i = $('.page').length-1
+
+ if(end <= $('.viewer').width()+1){
+ return focusPage(i+1, align)
+ }
+ return focusPage(i, align)
+}
+
+
+// Focus a page of class cls adjacent to current in direction...
+//
+// direction can be:
+// - 'next' - next page
+// - 'prev' - previous page
+//
+// If cls is not given, then all pages (.page) are considered.
+//
+// NOTE: if we are already at the first/last page and direction is
+// prev/next resp. then do a bounce...
+function step(direction, cls, align){
+ cls = cls == null ? '' : cls
+
+ var page = visiblePages(true).filter('.current').eq(0)
+ var pages = $('.page')
+
+ if(page.length == 0){
+ page = setCurrent()
+ }
+
+ var i = pages.index(page)
+ var l = pages.length
+
+ // if we are at the first/last page do the bounce dance...
+ // bounce first...
+ if(i == 0 && direction == 'prev'){
+ return focusPage(-1, align)
+ }
+
+ // bounce last...
+ if(i == l-1 && direction == 'next'){
+ return focusPage(l, align)
+ }
+
+ var to = page[direction+'All']('.page'+cls)
+
+ // if we have no pages on the same level, to a deeper search...
+ if(to.length == 0){
+ if(direction == 'next'){
+ to = pages.slice(i+1).filter('.page'+cls).first()
+ } else {
+ to = pages.slice(0, i).filter('.page'+cls).last()
+ }
+ }
+
+ // still no candidates, then we can't do a thing...
+ if(to.length == 0){
+ to = page
+ }
+
+ return focusPage(to.eq(0), align)
+}
+
+
+// Focus next/prev page shorthands...
+//
+function nextPage(cls, align){ return step('next', cls, align) }
+function prevPage(cls, align){ return step('prev', cls, align) }
+
+
+// Focus next/prev cover page shorthands...
+//
+function nextCover(cls, align){
+ cls = cls == null ? '' : cls
+ return step('next', '.cover'+cls, align)
+}
+function prevCover(cls, align){
+ cls = cls == null ? '' : cls
+ return step('prev', '.cover'+cls, align)
+}
+
+
+// Move the view a screen width (.viewer) left/right...
+//
+// NOTE: if we are at magazine start/end and try to move left/right resp.
+// this will do a bounce...
+function nextScreen(time){
+ time = time == null ? SCROLL_TIME : time
+ var W = $('.viewer').width()
+ var mag = $('.magazine')
+ var o = mag.position().left
+ var w = mag.width()*getMagazineScale()
+
+ // we reached the end...
+ if(w + o < 2*W){
+ // NOTE: we use focusPage(..) to handle stuff like bounces...
+ return focusPage($('.page').length)
+ }
+
+ MagazineScroller.scrollTo(o-W, 0, time)
+ return setCurrent()
+}
+function prevScreen(time){
+ time = time == null ? SCROLL_TIME : time
+ var W = $('.viewer').width()
+ var o = $('.magazine').position().left
+
+ // we reached the start...
+ if(-o < W){
+ // NOTE: we use focusPage(..) to handle stuff like bounces...
+ return focusPage(-1)
+ }
+
+ MagazineScroller.scrollTo(o+W, 0, time)
+ return setCurrent()
+}
+
+
+// Mode-aware next/prev high-level actions...
+//
+// Supported modes:
+// - page view - focus next/prev page
+// - magazine view - view next/prev screen
+//
+function next(){
+ if(togglePageView('?') == 'on'){
+ return nextPage()
} else {
- return setCurrentPage(cover)
+ return nextScreen()
}
}
-
-
-function nextPage(){
- var pages = $('.page')
- var cur = $('.current.page')
- return setCurrentPage(Math.min(pages.index(cur)+1, pages.length-1))
-}
-function prevPage(){
- var pages = $('.page')
- var cur = $('.current.page')
- return setCurrentPage(Math.max(pages.index(cur)-1, 0))
-}
-
-
-function nextArticle(){
- var cur = $('.current.page').parents('.article')
- // we are at the magazine cover...
- if(cur.length == 0){
- return setCurrentPage(
- $('.magazine .article .page:first-child').first())
+function prev(){
+ if(togglePageView('?') == 'on'){
+ return prevPage()
+ } else {
+ return prevScreen()
}
- // just find the next one...
- var articles = $('.magazine .article')
- return setCurrentPage(
- $(articles[Math.min(articles.index(cur)+1, articles.length-1)])
- .find('.page')
- .first())
-}
-function prevArticle(){
- var cur = $('.current.page').parents('.article')
- // we are at the magazine cover...
- if(cur.length == 0){
- //return $('.current.page')
- return setCurrentPage()
- }
- // just find the prev one...
- var articles = $('.magazine .article')
- return setCurrentPage(
- $(articles[Math.max(articles.index(cur)-1, 0)])
- .find('.page')
- .first())
}
@@ -809,6 +910,7 @@ function clearBookmarks(){
// NOTE: this will trigger the folowing events on the viewer:
// - bookmarkAdded(n)
// - bookmarkRemoved(n)
+// XXX rewrite...
function toggleBookmark(n){
if(n == null){
n = getPageNumber()
@@ -841,21 +943,13 @@ function toggleBookmark(n){
return res
}
-function nextBookmark(){
- var pages = $('.page')
- pages = $(pages.splice(getPageNumber()+1))
- page = pages.children('.bookmark').first().parents('.page')
- if(page.length != 0){
- return setCurrentPage(page)
- }
+function nextBookmark(cls, align){
+ cls = cls == null ? '' : cls
+ return step('next', '.bookmark'+cls, align)
}
-function prevBookmark(){
- var pages = $('.page')
- pages.splice(getPageNumber())
- page = pages.children('.bookmark').last().parents('.page')
- if(page.length != 0){
- return setCurrentPage(page)
- }
+function prevBookmark(cls, align){
+ cls = cls == null ? '' : cls
+ return step('prev', '.bookmark'+cls, align)
}