WebSVN – SmartDukaan – Diff – /trunk/DtrMobileAppDashboard/app/webroot/js/iscroll.js

-/*! iScroll v5.1.3 ~ (c) 2008-2014 Matteo Spinelli ~ http://cubiq.org/license */
+/*! iScroll v5.2.0-snapshot ~ (c) 2008-2017 Matteo Spinelli ~ http://cubiq.org/license */
 (function (window, document, Math) {
 var rAF = window.requestAnimationFrame	||
 	window.webkitRequestAnimationFrame	||
 	window.mozRequestAnimationFrame		||
 	window.oRequestAnimationFrame		||
 	me.removeEvent = function (el, type, fn, capture) {
 		el.removeEventListener(type, fn, !!capture);
 	};
 	me.prefixPointerEvent = function (pointerEvent) {
 		return window.MSPointerEvent ?
-			'MSPointer' + pointerEvent.charAt(9).toUpperCase() + pointerEvent.substr(10):
+			'MSPointer' + pointerEvent.charAt(7).toUpperCase() + pointerEvent.substr(8):
 			pointerEvent;
 	};
 	me.momentum = function (current, start, time, lowerMargin, wrapperSize, deceleration) {
 		var distance = current - start,
 	me.extend(me, {
 		hasTransform: _transform !== false,
 		hasPerspective: _prefixStyle('perspective') in _elementStyle,
 		hasTouch: 'ontouchstart' in window,
-		hasPointer: window.PointerEvent || window.MSPointerEvent, // IE10 is prefixed
+		hasPointer: !!(window.PointerEvent || window.MSPointerEvent), // IE10 is prefixed
 		hasTransition: _prefixStyle('transition') in _elementStyle
 	});
+	/*
-	// This should find all Android browsers lower than build 535.19 (both stock browser and webview)
+	This should find all Android browsers lower than build 535.19 (both stock browser and webview)
+	- galaxy S2 is ok
+    - 2.3.6 : `AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1`
+    - 4.0.4 : `AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30`
+   - galaxy S3 is badAndroid (stock brower, webview)
+     `AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30`
+   - galaxy S4 is badAndroid (stock brower, webview)
+     `AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30`
+   - galaxy S5 is OK
+     `AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Mobile Safari/537.36 (Chrome/)`
+   - galaxy S6 is OK
+     `AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Mobile Safari/537.36 (Chrome/)`
+  */
+	me.isBadAndroid = (function() {
+		var appVersion = window.navigator.appVersion;
+		// Android browser is not a chrome browser.
-	me.isBadAndroid = /Android /.test(window.navigator.appVersion) && !(/Chrome\/\d/.test(window.navigator.appVersion));
+		if (/Android/.test(appVersion) && !(/Chrome\/\d/.test(appVersion))) {
+			var safariVersion = appVersion.match(/Safari\/(\d+.\d)/);
+			if(safariVersion && typeof safariVersion === "object" && safariVersion.length >= 2) {
+				return parseFloat(safariVersion[1]) < 535.19;
+			} else {
+				return true;
+			}
+		} else {
+			return false;
+		}
+	})();
 	me.extend(me.style = {}, {
 		transform: _transform,
 		transitionTimingFunction: _prefixStyle('transitionTimingFunction'),
 		transitionDuration: _prefixStyle('transitionDuration'),
 		transitionDelay: _prefixStyle('transitionDelay'),
-		transformOrigin: _prefixStyle('transformOrigin')
+		transformOrigin: _prefixStyle('transformOrigin'),
+		touchAction: _prefixStyle('touchAction')
 	});
 	me.hasClass = function (e, c) {
 		var re = new RegExp("(^|\\s)" + c + "(\\s|$)");
 		return re.test(e.className);
 	me.click = function (e) {
 		var target = e.target,
 			ev;
 		if ( !(/(SELECT|INPUT|TEXTAREA)/i).test(target.tagName) ) {
+			// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent
+			// initMouseEvent is deprecated.
-			ev = document.createEvent('MouseEvents');
+			ev = document.createEvent(window.MouseEvent ? 'MouseEvents' : 'Event');
-			ev.initMouseEvent('click', true, true, e.view, 1,
+			ev.initEvent('click', true, true);
+			ev.view = e.view || window;
+			ev.detail = 1;
+			ev.screenX = target.screenX || 0;
-				target.screenX, target.screenY, target.clientX, target.clientY,
+			ev.screenY = target.screenY || 0;
+			ev.clientX = target.clientX || 0;
+			ev.clientY = target.clientY || 0;
+			ev.ctrlKey = !!e.ctrlKey;
+			ev.altKey = !!e.altKey;
+			ev.shiftKey = !!e.shiftKey;
-				e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+			ev.metaKey = !!e.metaKey;
-, null);
+			ev.button = 0;
+			ev.relatedTarget = null;
 			ev._constructed = true;
 			target.dispatchEvent(ev);
+		}
 	};
+	me.getTouchAction = function(eventPassthrough, addPinch) {
+		var touchAction = 'none';
+		if ( eventPassthrough === 'vertical' ) {
+			touchAction = 'pan-y';
+		} else if (eventPassthrough === 'horizontal' ) {
+			touchAction = 'pan-x';
+		}
+		if (addPinch && touchAction != 'none') {
+			// add pinch-zoom support if the browser supports it, but if not (eg. Chrome <55) do nothing
+			touchAction += ' pinch-zoom';
+		}
+		return touchAction;
+	};
+	me.getRect = function(el) {
+		if (el instanceof SVGElement) {
+			var rect = el.getBoundingClientRect();
+			return {
+				top : rect.top,
+				left : rect.left,
+				width : rect.width,
+				height : rect.height
+			};
+		} else {
+			return {
+				top : el.offsetTop,
+				left : el.offsetLeft,
+				width : el.offsetWidth,
+				height : el.offsetHeight
+			};
+		}
+	};
 	return me;
 })();
 function IScroll (el, options) {
 	this.wrapper = typeof el == 'string' ? document.querySelector(el) : el;
 	this.scroller = this.wrapper.children[0];
 	this.scrollerStyle = this.scroller.style;		// cache style for better performance
 		mouseWheelSpeed: 20,
 		snapThreshold: 0.334,
 // INSERT POINT: OPTIONS
+		disablePointer : !utils.hasPointer,
+		disableTouch : utils.hasPointer || !utils.hasTouch,
+		disableMouse : utils.hasPointer || utils.hasTouch,
 		startX: 0,
 		startY: 0,
 		scrollY: true,
 		directionLockThreshold: 5,
 		momentum: true,
 		preventDefault: true,
 		preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ },
 		HWCompositing: true,
 		useTransition: true,
-		useTransform: true
+		useTransform: true,
+		bindToWrapper: typeof window.onmousedown === "undefined"
 	};
 	for ( var i in options ) {
 		this.options[i] = options[i];
+	}
 	if ( this.options.tap === true ) {
 		this.options.tap = 'tap';
+	}
+	// https://github.com/cubiq/iscroll/issues/1029
+	if (!this.options.useTransition && !this.options.useTransform) {
+		if(!(/relative|absolute/i).test(this.scrollerStyle.position)) {
+			this.scrollerStyle.position = "relative";
+		}
+	}
 	if ( this.options.shrinkScrollbars == 'scale' ) {
 		this.options.useTransition = false;
+	}
 	this.options.invertWheelDirection = this.options.invertWheelDirection ? -1 : 1;
 // INSERT POINT: NORMALIZATION
 	// Some defaults
 	this.x = 0;
 	this.y = 0;
 	this.directionX = 0;
 	this.directionY = 0;
 	this._events = {};
 	this.scrollTo(this.options.startX, this.options.startY);
 	this.enable();
+}
 IScroll.prototype = {
-	version: '5.1.3',
+	version: '5.2.0-snapshot',
 	_init: function () {
 		this._initEvents();
 		if ( this.options.scrollbars || this.options.indicators ) {
 	},
 	destroy: function () {
 		this._initEvents(true);
+		clearTimeout(this.resizeTimeout);
+ 		this.resizeTimeout = null;
 		this._execEvent('destroy');
 	},
 	_transitionEnd: function (e) {
 		if ( e.target != this.scroller || !this.isInTransition ) {
 	},
 	_start: function (e) {
 		// React to left mouse button only
 		if ( utils.eventType[e.type] != 1 ) {
+		  // for button property
+		  // http://unixpapa.com/js/mouse.html
+		  var button;
+	    if (!e.which) {
+	      /* IE case */
+	      button = (e.button < 2) ? 0 :
+	               ((e.button == 4) ? 1 : 2);
+	    } else {
+	      /* All others */
+	      button = e.button;
+	    }
-			if ( e.button !== 0 ) {
+			if ( button !== 0 ) {
 				return;
+			}
+		}
 		if ( !this.enabled || (this.initiated && utils.eventType[e.type] !== this.initiated) ) {
 		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._transitionTime();
 			this.isInTransition = false;
 			pos = this.getComputedPosition();
 			this._translate(Math.round(pos.x), Math.round(pos.y));
 			this._execEvent('scrollEnd');
 		} else if ( !this.options.useTransition && this.isAnimating ) {
 	enable: function () {
 		this.enabled = true;
 	},
 	refresh: function () {
-		var rf = this.wrapper.offsetHeight;		// Force reflow
+		utils.getRect(this.wrapper);		// Force reflow
 		this.wrapperWidth	= this.wrapper.clientWidth;
 		this.wrapperHeight	= this.wrapper.clientHeight;
+		var rect = utils.getRect(this.scroller);
 /* REPLACE START: refresh */
-		this.scrollerWidth	= this.scroller.offsetWidth;
+		this.scrollerWidth	= rect.width;
-		this.scrollerHeight	= this.scroller.offsetHeight;
+		this.scrollerHeight	= rect.height;
 		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;
+		}
+		}
 		this.endTime = 0;
 		this.directionX = 0;
 		this.directionY = 0;
+		if(utils.hasPointer && !this.options.disablePointer) {
+			// The wrapper should have `touchAction` property for using pointerEvent.
+			this.wrapper.style[utils.style.touchAction] = utils.getTouchAction(this.options.eventPassthrough, true);
+			// case. not support 'pinch-zoom'
+			// https://github.com/cubiq/iscroll/issues/1118#issuecomment-270057583
+			if (!this.wrapper.style[utils.style.touchAction]) {
+				this.wrapper.style[utils.style.touchAction] = utils.getTouchAction(this.options.eventPassthrough, false);
+			}
+		}
 		this.wrapperOffset = utils.offset(this.wrapper);
 		this._execEvent('refresh');
 		this.resetPosition();
 // INSERT POINT: _refresh
 	},
 	on: function (type, fn) {
 		if ( !this._events[type] ) {
 			this._events[type] = [];
+		}
 	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) ) {
+		var transitionType = this.options.useTransition && easing.style;
+		if ( !time || transitionType ) {
+				if(transitionType) {
-			this._transitionTimingFunction(easing.style);
+					this._transitionTimingFunction(easing.style);
-			this._transitionTime(time);
+					this._transitionTime(time);
+				}
 			this._translate(x, y);
 		} else {
 			this._animate(x, y, time, easing.fn);
+		}
 	},
 		pos.left -= this.wrapperOffset.left;
 		pos.top  -= this.wrapperOffset.top;
 		// if offsetX/Y are true we center the element to the screen
+		var elRect = utils.getRect(el);
+		var wrapperRect = utils.getRect(this.wrapper);
 		if ( offsetX === true ) {
-			offsetX = Math.round(el.offsetWidth / 2 - this.wrapper.offsetWidth / 2);
+			offsetX = Math.round(elRect.width / 2 - wrapperRect.width / 2);
+		}
 		if ( offsetY === true ) {
-			offsetY = Math.round(el.offsetHeight / 2 - this.wrapper.offsetHeight / 2);
+			offsetY = Math.round(elRect.height / 2 - wrapperRect.height / 2);
+		}
 		pos.left -= offsetX || 0;
 		pos.top  -= offsetY || 0;
 		this.scrollTo(pos.left, pos.top, time, easing);
 	},
 	_transitionTime: function (time) {
+		if (!this.options.useTransition) {
+			return;
+		}
 		time = time || 0;
+		var durationProp = utils.style.transitionDuration;
+		if(!durationProp) {
+			return;
+		}
-		this.scrollerStyle[utils.style.transitionDuration] = time + 'ms';
+		this.scrollerStyle[durationProp] = time + 'ms';
 		if ( !time && utils.isBadAndroid ) {
-			this.scrollerStyle[utils.style.transitionDuration] = '0.001s';
+			this.scrollerStyle[durationProp] = '0.0001ms';
+			// remove 0.0001ms
+			var self = this;
+			rAF(function() {
+				if(self.scrollerStyle[durationProp] === '0.0001ms') {
+					self.scrollerStyle[durationProp] = '0s';
+				}
+			});
+		}
 		if ( this.indicators ) {
 			for ( var i = this.indicators.length; i--; ) {
 			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;
 			this.indicators.push( new Indicator(this, indicators[i]) );
+		}
 		// TODO: check if we can use array.map (wide compatibility and performance issues)
 		function _indicatorsMap (fn) {
+			if (that.indicators) {
-			for ( var i = that.indicators.length; i--; ) {
+				for ( var i = that.indicators.length; i--; ) {
-				fn.call(that.indicators[i]);
+					fn.call(that.indicators[i]);
+				}
+			}
+		}
 		if ( this.options.fadeScrollbars ) {
 			this.on('scrollEnd', function () {
 		utils.addEvent(this.wrapper, 'wheel', this);
 		utils.addEvent(this.wrapper, 'mousewheel', this);
 		utils.addEvent(this.wrapper, 'DOMMouseScroll', this);
 		this.on('destroy', function () {
+			clearTimeout(this.wheelTimeout);
+			this.wheelTimeout = null;
 			utils.removeEvent(this.wrapper, 'wheel', this);
 			utils.removeEvent(this.wrapper, 'mousewheel', this);
 			utils.removeEvent(this.wrapper, 'DOMMouseScroll', this);
 		});
 	},
 		if ( !this.enabled ) {
 			return;
+		}
 		e.preventDefault();
-		e.stopPropagation();
 		var wheelDeltaX, wheelDeltaY,
 			newX, newY,
 			that = this;
+		}
 		// Execute the scrollEnd event after 400ms the wheel stopped scrolling
 		clearTimeout(this.wheelTimeout);
 		this.wheelTimeout = setTimeout(function () {
+			if(!that.options.snap) {
-			that._execEvent('scrollEnd');
+				that._execEvent('scrollEnd');
+			}
 			that.wheelTimeout = undefined;
 		}, 400);
 		if ( 'deltaX' in e ) {
 			if (e.deltaMode === 1) {
+		}
 		newX = this.x + Math.round(this.hasHorizontalScroll ? wheelDeltaX : 0);
 		newY = this.y + Math.round(this.hasVerticalScroll ? wheelDeltaY : 0);
+		this.directionX = wheelDeltaX > 0 ? -1 : wheelDeltaX < 0 ? 1 : 0;
+		this.directionY = wheelDeltaY > 0 ? -1 : wheelDeltaY < 0 ? 1 : 0;
 		if ( newX > 0 ) {
 			newX = 0;
 		} else if ( newX < this.maxScrollX ) {
 			newX = this.maxScrollX;
+		}
 				m = 0, n,
 				cx, cy,
 				x = 0, y,
 				stepX = this.options.snapStepX || this.wrapperWidth,
 				stepY = this.options.snapStepY || this.wrapperHeight,
-				el;
+				el,
+				rect;
 			this.pages = [];
 			if ( !this.wrapperWidth || !this.wrapperHeight || !this.scrollerWidth || !this.scrollerHeight ) {
 				return;
 				el = this.options.snap;
 				l = el.length;
 				n = -1;
 				for ( ; i < l; i++ ) {
+					rect = utils.getRect(el[i]);
-					if ( i === 0 || el[i].offsetLeft <= el[i-1].offsetLeft ) {
+					if ( i === 0 || rect.left <= utils.getRect(el[i-1]).left ) {
 						m = 0;
 						n++;
+					}
 					if ( !this.pages[m] ) {
 						this.pages[m] = [];
+					}
-					x = Math.max(-el[i].offsetLeft, this.maxScrollX);
+					x = Math.max(-rect.left, this.maxScrollX);
-					y = Math.max(-el[i].offsetTop, this.maxScrollY);
+					y = Math.max(-rect.top, this.maxScrollY);
-					cx = x - Math.round(el[i].offsetWidth / 2);
+					cx = x - Math.round(rect.width / 2);
-					cy = y - Math.round(el[i].offsetHeight / 2);
+					cy = y - Math.round(rect.height / 2);
 					this.pages[m][n] = {
 						x: x,
 						y: y,
-						width: el[i].offsetWidth,
+						width: rect.width,
-						height: el[i].offsetHeight,
+						height: rect.height,
 						cx: cx,
 						cy: cy
 					};
 					if ( x > this.maxScrollX ) {
 				break;
 			case 'keydown':
 				this._key(e);
 				break;
 			case 'click':
-				if ( !e._constructed ) {
+				if ( this.enabled && !e._constructed ) {
 					e.preventDefault();
 					e.stopPropagation();
+				}
 				break;
+		}
+		}
+	}
 	if ( this.options.fade ) {
 		this.wrapperStyle[utils.style.transform] = this.scroller.translateZ;
+		var durationProp = utils.style.transitionDuration;
+		if(!durationProp) {
+			return;
+		}
-		this.wrapperStyle[utils.style.transitionDuration] = utils.isBadAndroid ? '0.001s' : '0ms';
+		this.wrapperStyle[durationProp] = utils.isBadAndroid ? '0.0001ms' : '0ms';
+		// remove 0.0001ms
+		var self = this;
+		if(utils.isBadAndroid) {
+			rAF(function() {
+				if(self.wrapperStyle[durationProp] === '0.0001ms') {
+					self.wrapperStyle[durationProp] = '0s';
+				}
+			});
+		}
 		this.wrapperStyle.opacity = '0';
+	}
+}
 Indicator.prototype = {
 				break;
+		}
 	},
 	destroy: function () {
+		if ( this.options.fadeScrollbars ) {
+			clearTimeout(this.fadeTimeout);
+			this.fadeTimeout = null;
+		}
 		if ( this.options.interactive ) {
 			utils.removeEvent(this.indicator, 'touchstart', this);
 			utils.removeEvent(this.indicator, utils.prefixPointerEvent('pointerdown'), this);
 			utils.removeEvent(this.indicator, 'mousedown', this);
 			utils.removeEvent(window, 'touchend', this);
 			utils.removeEvent(window, utils.prefixPointerEvent('pointerup'), this);
 			utils.removeEvent(window, 'mouseup', this);
+		}
-		if ( this.options.defaultScrollbars ) {
+		if ( this.options.defaultScrollbars && this.wrapper.parentNode ) {
 			this.wrapper.parentNode.removeChild(this.wrapper);
+		}
 	},
 	_start: function (e) {
+		}
 	},
 	transitionTime: function (time) {
 		time = time || 0;
+		var durationProp = utils.style.transitionDuration;
+		if(!durationProp) {
+			return;
+		}
-		this.indicatorStyle[utils.style.transitionDuration] = time + 'ms';
+		this.indicatorStyle[durationProp] = time + 'ms';
 		if ( !time && utils.isBadAndroid ) {
-			this.indicatorStyle[utils.style.transitionDuration] = '0.001s';
+			this.indicatorStyle[durationProp] = '0.0001ms';
+			// remove 0.0001ms
+			var self = this;
+			rAF(function() {
+				if(self.indicatorStyle[durationProp] === '0.0001ms') {
+					self.indicatorStyle[durationProp] = '0s';
+				}
+			});
+		}
 	},
 	transitionTimingFunction: function (easing) {
 		this.indicatorStyle[utils.style.transitionTimingFunction] = easing;
 					this.wrapper.style.bottom = '2px';
+				}
+			}
+		}
-		var r = this.wrapper.offsetHeight;	// force refresh
+		utils.getRect(this.wrapper);	// 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);
 			} 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 ) {
 IScroll.utils = utils;
 if ( typeof module != 'undefined' && module.exports ) {
 	module.exports = IScroll;
+} else if ( typeof define == 'function' && define.amd ) {
+        define( function () { return IScroll; } );
 } else {
 	window.IScroll = IScroll;
+}
 })(window, document, Math);

Subversion Repositories SmartDukaan

(root)/trunk/DtrMobileAppDashboard/app/webroot/js/iscroll.js – Rev 20685 → 20700