greensock-rails 1.15.1.0 → 1.16.0.0

data/vendor/assets/javascripts/greensock/utils/Draggable.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.11.0
- * DATE: 2015-01-20
+ * VERSION: 0.12.0
+ * DATE: 2015-03-01
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * Requires TweenLite and CSSPlugin version 1.11.0 or later (TweenMax contains both TweenLite and CSSPlugin). ThrowPropsPlugin is required for momentum-based continuation of movement after the mouse/touch is released (ThrowPropsPlugin is a membership benefit of Club GreenSock - http://www.greensock.com/club/).
@@ -31,7 +31,8 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			_RAD2DEG = 180 / Math.PI,
 			_max = 999999999999999,
 			_getTime = Date.now || function() {return new Date().getTime();},
-			_isOldIE = (!_doc.addEventListener && _doc.all),
+			_isOldIE = !!(!_doc.addEventListener && _doc.all),
+			_placeholderDiv = _doc.createElement("div"),
 			_renderQueue = [],
 			_lookup = {}, //when a Draggable is created, the target gets a unique _gsDragID property that allows gets associated with the Draggable instance for quick lookups in Draggable.get(). This avoids circular references that could cause gc problems.
 			_lookupCount = 0,
@@ -40,6 +41,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			_prefix,
 			_isMultiTouching,
 			_lastDragTime = 0,
+			_windowProxy = {}, //memory/performance optimizatin - we reuse this object during autoScroll to store window-related bounds/offsets.
 			_slice = function(a) { //don't use Array.prototype.slice.call(target, 0) because that doesn't work in IE8 with a NodeList that's returned by querySelectorAll()
 				if (typeof(a) === "string") {
 					a = TweenLite.selector(a);
@@ -97,6 +99,42 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			_getDocScrollLeft = function() {
 				return (window.pageXOffset != null) ? window.pageXOffset : (_doc.scrollLeft != null) ? _doc.scrollLeft : _docElement.scrollLeft || _doc.body.scrollLeft || 0;
 			},
+			_addScrollListener = function(e, callback) {
+				_addListener(e, "scroll", callback);
+				if (!_isRoot(e.parentNode)) {
+					_addScrollListener(e.parentNode, callback);
+				}
+			},
+			_removeScrollListener = function(e, callback) {
+				_removeListener(e, "scroll", callback);
+				if (!_isRoot(e.parentNode)) {
+					_removeScrollListener(e.parentNode, callback);
+				}
+			},
+			_isRoot = function (e) {
+				return !!(!e || e === _docElement || e === _doc || e === _doc.body || e === window || !e.nodeType || !e.parentNode);
+			},
+			_getMaxScroll = function(element, axis) {
+				var dim = (axis === "x") ? "Width" : "Height",
+					scroll = "scroll" + dim,
+					client = "client" + dim,
+					body = _doc.body;
+				return Math.max(0, _isRoot(element) ? Math.max(_docElement[scroll], body[scroll]) - (window["inner" + dim] || _docElement[client] || body[client]) : element[scroll] - element[client]);
+			},
+			_recordMaxScrolls = function(e) { //records _gsMaxScrollX and _gsMaxScrollY properties for the element and all ancestors up the chain so that we can cap it, otherwise dragging beyond the edges with autoScroll on can endlessly scroll.
+				var isRoot = _isRoot(e),
+					x = _getMaxScroll(e, "x"),
+					y = _getMaxScroll(e, "y");
+				if (isRoot) {
+					e = _windowProxy;
+				} else {
+					_recordMaxScrolls(e.parentNode);
+				}
+				e._gsMaxScrollX = x;
+				e._gsMaxScrollY = y;
+				e._gsScrollX = e.scrollLeft || 0;
+				e._gsScrollY = e.scrollTop || 0;
+			},
 
 			//just used for IE8 and earlier to normalize events and populate pageX/pageY
 			_populateIEEvent = function(e, preventDefault) {
@@ -196,7 +234,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				if (_getStyle(t, "position", true) !== "absolute") { return 0; }
 				var dim = ((p === "left") ? "Left" : "Top"),
 					v = _getStyle(t, "margin" + dim, true);
-				return t["offset" + dim] - (_convertToPixels(t, p, parseFloat(v), v.replace(_suffixExp, "")) || 0);
+				return t["offset" + dim] - (_convertToPixels(t, p, parseFloat(v), (v + "").replace(_suffixExp, "")) || 0);
 			},
 
 			_getStyle = function(element, prop, keepUnits) {
@@ -267,22 +305,49 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				svg.appendChild(e);
 				return svg;
 			}()),
-			_getSVGOffsets = function(e) { //SVG elements don't always report offsetTop/offsetLeft/offsetParent at all (I'm looking at you, Firefox 29), so we have to do some work to manufacture those values.
+			_SVGElement = window.SVGElement,
+			_isSVG = function(e) {
+				return !!(_SVGElement && typeof(e.getBBox) === "function" && e.getCTM && (!e.parentNode || (e.parentNode.getBBox && e.parentNode.getCTM)));
+			},
+			_svgAttributes = ["class","viewBox","width","height","xml:space"],
+			_getSVGOffsets = function(e) { //SVG elements don't always report offsetTop/offsetLeft/offsetParent at all (I'm looking at you, Firefox 29), so we have to do some work to manufacture those values. You can pass any SVG element and it'll spit back an object with offsetTop, offsetLeft, offsetParent, scaleX, and scaleY properties. We need the scaleX and scaleY to handle the way SVG can resize itself based on the container.
 				if (!e.getBoundingClientRect || !e.parentNode) {
-					return {offsetTop:0, offsetLeft:0, offsetParent:_docElement};
+					return {offsetTop:0, offsetLeft:0, scaleX:1, scaleY:1, offsetParent:_docElement};
+				}
+				if (e._gsSVGData && e._gsSVGData.lastUpdate === TweenLite.ticker.frame) {
+					return e._gsSVGData;
 				}
 				var curElement = e,
 					prevCSS = e.style.cssText,
-					eRect, parentRect, offsetParent;
+					data = e._gsSVGData = e._gsSVGData || {},
+					eRect, parentRect, offsetParent, rRect, i, a;
+				if ((e.nodeName + "").toLowerCase() !== "svg" && e.getBBox) { //if it's a nested/child SVG element, we must find the parent SVG canvas and measure the offset from there.
+					curElement = e.parentNode;
+					eRect = e.getBBox();
+					while (curElement && (curElement.nodeName + "").toLowerCase() !== "svg") {
+						curElement = curElement.parentNode;
+					}
+					data = _getSVGOffsets(curElement);
+					return {offsetTop:eRect.y * data.scaleY, offsetLeft:eRect.x * data.scaleX, scaleX:data.scaleX, scaleY:data.scaleY, offsetParent:curElement || _docElement};
+				}
 				while (!curElement.offsetParent && curElement.parentNode) {
 					curElement = curElement.parentNode;
 				}
-				e.parentNode.insertBefore(_dummySVGRect, e); //Firefox measures things based NOT on the <svg> itself, but on the bounds of the child elements, so we add a dummy SVG object temporarily in the original one's spot which has a 1x1 <rect> in the upper left corner to make sure we're getting accurate results.
+				e.parentNode.insertBefore(_dummySVGRect, e); //Firefox measures things based NOT on the <svg> itself, but on the bounds of the child elements, so we add a dummy SVG object temporarily in the original one's spot which has a 10x10 <rect> in the upper left corner to make sure we're getting accurate results.
 				e.parentNode.removeChild(e);
 				_dummySVGRect.style.cssText = prevCSS;
 				_dummySVGRect.style[_transformProp] = "none";
-				_dummySVGRect.setAttribute("class", e.getAttribute("class"));
+				i = _svgAttributes.length;
+				while (--i > -1) {
+					a = e.getAttribute(_svgAttributes[i]);
+					if (a) {
+						_dummySVGRect.setAttribute(_svgAttributes[i], a);
+					} else {
+						_dummySVGRect.removeAttribute(_svgAttributes[i]);
+					}
+				}
 				eRect = _dummySVGRect.getBoundingClientRect();
+				rRect = _dummySVGRect.firstChild.getBoundingClientRect();
 				offsetParent = curElement.offsetParent;
 				if (offsetParent) {
 					if (offsetParent === _doc.body && _docElement) {
@@ -294,7 +359,13 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				}
 				_dummySVGRect.parentNode.insertBefore(e, _dummySVGRect);
 				e.parentNode.removeChild(_dummySVGRect);
-				return {offsetLeft:eRect.left - parentRect.left, offsetTop:eRect.top - parentRect.top, offsetParent:curElement.offsetParent || _docElement};
+				data.scaleX = rRect.width / 10;
+				data.scaleY = rRect.height / 10;
+				data.offsetLeft = eRect.left - parentRect.left;
+				data.offsetTop = eRect.top - parentRect.top;
+				data.offsetParent = curElement.offsetParent || _docElement;
+				data.lastUpdate = TweenLite.ticker.frame;
+				return data;
 			},
 			_getOffsetTransformOrigin = function(e, decoratee) {
 				decoratee = decoratee || {};
@@ -312,8 +383,21 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				if (x === "center" || isNaN(parseFloat(x))) { //remember, the user could flip-flop the values and say "bottom center" or "center bottom", etc. "center" is ambiguous because it could be used to describe horizontal or vertical, hence the isNaN(). If there's an "=" sign in the value, it's relative.
 					x = "50%";
 				}
-				decoratee.x = ((x.indexOf("%") !== -1) ? e.offsetWidth * parseFloat(x) / 100 : parseFloat(x));
-				decoratee.y = ((y.indexOf("%") !== -1) ? e.offsetHeight * parseFloat(y) / 100 : parseFloat(y));
+				if (e.getBBox && _isSVG(e)) { //SVG elements must be handled in a special way because their origins are calculated from the parent SVG canvas origin
+					if (!e._gsTransform) {
+						TweenLite.set(e, {x:"+=0"}); //forces creation of the _gsTransform where we store all the transform components including xOrigin and yOrigin for SVG elements, as of GSAP 1.15.0 which also takes care of calculating the origin from the upper left corner of the SVG canvas.
+						if (e._gsTransform.xOrigin === undefined) {
+							console.log("Draggable requires at least GSAP 1.16.0");
+						}
+					}
+					v = e.getBBox();
+					a = _getSVGOffsets(e);
+					decoratee.x = (e._gsTransform.xOrigin - v.x) * a.scaleX;
+					decoratee.y = (e._gsTransform.yOrigin - v.y) * a.scaleY;
+				} else {
+					decoratee.x = ((x.indexOf("%") !== -1) ? e.offsetWidth * parseFloat(x) / 100 : parseFloat(x));
+					decoratee.y = ((y.indexOf("%") !== -1) ? e.offsetHeight * parseFloat(y) / 100 : parseFloat(y));
+				}
 				return decoratee;
 			},
 			_getOffset2DMatrix = function(e, offsetOrigin, parentOffsetOrigin) {
@@ -329,7 +413,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				}
 				if (offsetOrigin) {
 					parent = e.parentNode;
-					offsets = (e.offsetLeft === undefined && e.nodeName.toLowerCase() === "svg") ? _getSVGOffsets(e) : e;
+					offsets = ((e.getBBox && _isSVG(e)) || (e.offsetLeft === undefined && (e.nodeName + "").toLowerCase() === "svg")) ? _getSVGOffsets(e) : e;
 					offsetParent = offsets.offsetParent;
 					isRoot = (parent === _docElement || parent === _doc.body);
 
@@ -524,6 +608,8 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						for (i = 0; i < l; i++) {
 							a[i] = snap[i] * factor;
 						}
+						max += 1.1; //allow 1.1 pixels of wiggle room when snapping in order to work around some browser inconsistencies in the way bounds are reported which can make them roughly a pixel off. For example, if "snap:[-$('#menu').width(), 0]" was defined and #menu had a wrapper that was used as the bounds, some browsers would be one pixel off, making the minimum -752 for example when snap was [-753,0], thus instead of snapping to -753, it would snap to 0 since -753 was below the minimum.
+						min -= 1.1;
 					} else if (typeof(snap) === "function") {
 						vars.end = function(value) {
 							return snap.call(draggable, value) * factor; //we need to ensure that we can scope the function call to the Draggable instance itself so that users can access important values like maxX, minX, maxY, minY, x, and y from within that function.
@@ -544,9 +630,19 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				return vars;
 			},
 
-			_isClickable = function(e) { //sometimes it's convenient to mark an element as clickable by adding a data-clickable="true" attribute (in which case we won't preventDefault() the mouse/touch event). This method checks if the element is an <a>, <input>, or <button> or has an onclick or has the data-clickable attribute set to true (or any of its parent elements).
+			_isClickable = function(e) { //sometimes it's convenient to mark an element as clickable by adding a data-clickable="true" attribute (in which case we won't preventDefault() the mouse/touch event). This method checks if the element is an <a>, <input>, or <button> or has an onclick or has the data-clickable or contentEditable attribute set to true (or any of its parent elements).
 				var data;
-				return (!e || !e.getAttribute || e.nodeName === "BODY") ? false : ((data = e.getAttribute("data-clickable")) === "true" || (data !== "false" && (e.onclick || _clickableTagExp.test(e.nodeName + "")))) ? true : _isClickable(e.parentNode);
+				return (!e || !e.getAttribute || e.nodeName === "BODY") ? false : ((data = e.getAttribute("data-clickable")) === "true" || (data !== "false" && (e.onclick || _clickableTagExp.test(e.nodeName + "") || e.getAttribute("contentEditable") === "true"))) ? true : _isClickable(e.parentNode);
+			},
+
+			_setSelectable = function(elements, selectable) {
+				var i = elements.length,
+					e;
+				while (--i > -1) {
+					e = elements[i];
+					e.ondragstart = e.onselectstart = selectable ? null : _emptyFunc;
+					_setStyle(e, "userSelect", (selectable ? "text" : "none"));
+				}
 			},
 
 			_addPaddingBR,
@@ -757,6 +853,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 					style.display = "inline-block";
 					style.position = "relative";
 					style.overflow = "visible";
+					style.verticalAlign = "top";
 					style.width = "100%";
 					style.paddingRight = extraPadRight + "px";
 					//some browsers neglect to factor in the bottom padding when calculating the scrollHeight, so we need to add that padding to the content when that happens. Allow a 2px margin for error
@@ -773,6 +870,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 					maxLeft = element.scrollWidth - elementWidth;
 					maxTop = element.scrollHeight - elementHeight;
 					contentHeight = content.offsetHeight;
+					style.display = "block";
 					if (x || y) {
 						this.left(x);
 						this.top(y);
@@ -801,10 +899,12 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				this.dragResistance = parseFloat(vars.dragResistance) || 0;
 				this.edgeResistance = isNaN(vars.edgeResistance) ? 1 : parseFloat(vars.edgeResistance) || 0;
 				this.lockAxis = vars.lockAxis;
+				this.autoScroll = vars.autoScroll || 0;
+				this.lockedAxis = null;
 				var type = (vars.type || (_isOldIE ? "top,left" : "x,y")).toLowerCase(),
 					xyMode = (type.indexOf("x") !== -1 || type.indexOf("y") !== -1),
 					rotationMode = (type.indexOf("rotation") !== -1),
-					xProp = xyMode ? "x" : "left",
+					xProp = rotationMode ? "rotation" : xyMode ? "x" : "left",
 					yProp = xyMode ? "y" : "top",
 					allowX = (type.indexOf("x") !== -1 || type.indexOf("left") !== -1 || type === "scroll"),
 					allowY = (type.indexOf("y") !== -1 || type.indexOf("top") !== -1 || type === "scroll"),
@@ -813,10 +913,59 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 					triggers = _slice(vars.trigger || vars.handle || target),
 					killProps = {},
 					dragEndTime = 0,
-					enabled, scrollProxy, startMouseX, startMouseY, startElementX, startElementY, hasBounds, hasDragCallback, maxX, minX, maxY, minY, tempVars, cssVars, touch, touchID, rotationOrigin, dirty, old, snapX, snapY, isClicking, touchEventTarget, lockedAxis, matrix, interrupted,
+					checkAutoScrollBounds = false,
+					isClickable = vars.clickableTest || _isClickable,
+					enabled, scrollProxy, startPointerX, startPointerY, startElementX, startElementY, hasBounds, hasDragCallback, maxX, minX, maxY, minY, tempVars, cssVars, touch, touchID, rotationOrigin, dirty, old, snapX, snapY, isClicking, touchEventTarget, matrix, interrupted, clickTime, startScrollTop, startScrollLeft, applyObj,
 
 					//this method gets called on every tick of TweenLite.ticker which allows us to synchronize the renders to the core engine (which is typically synchronized with the display refresh via requestAnimationFrame). This is an optimization - it's better than applying the values inside the "mousemove" or "touchmove" event handler which may get called many times inbetween refreshes.
 					render = function(suppressEvents) {
+						if (self.autoScroll && self.isDragging && (dirty || checkAutoScrollBounds)) {
+							var e = target,
+								autoScrollFactor = self.autoScroll * 15, //multiplying by 15 just gives us a better "feel" speed-wise.
+								parent, isRoot, rect, pointerX, pointerY, changeX, changeY, gap;
+							checkAutoScrollBounds = false;
+							_windowProxy.scrollTop = ((window.pageYOffset != null) ? window.pageYOffset : (_docElement.scrollTop != null) ? _docElement.scrollTop : _doc.body.scrollTop);
+							_windowProxy.scrollLeft = ((window.pageXOffset != null) ? window.pageXOffset : (_docElement.scrollLeft != null) ? _docElement.scrollLeft : _doc.body.scrollLeft);
+							pointerX = self.pointerX - _windowProxy.scrollLeft;
+							pointerY = self.pointerY - _windowProxy.scrollTop;
+							while (e && !isRoot) { //walk up the chain and sense wherever the pointer is within 40px of an edge that's scrollable.
+								isRoot = _isRoot(e.parentNode);
+								parent = isRoot ? _windowProxy : e.parentNode;
+								rect = isRoot ? {bottom:Math.max(_docElement.clientHeight, window.innerHeight || 0), right: Math.max(_docElement.clientWidth, window.innerWidth || 0), left:0, top:0} : parent.getBoundingClientRect();
+								changeX = changeY = 0;
+								if (allowY) {
+									if (pointerY > rect.bottom - 40 && (gap = parent._gsMaxScrollY - parent.scrollTop)) {
+										checkAutoScrollBounds = true;
+										changeY = Math.min(gap, (autoScrollFactor * (1 - Math.max(0, (rect.bottom - pointerY)) / 40)) | 0);
+									} else if (pointerY < rect.top + 40 && parent.scrollTop) {
+										checkAutoScrollBounds = true;
+										changeY = -Math.min(parent.scrollTop, (autoScrollFactor * (1 - Math.max(0, (pointerY - rect.top)) / 40)) | 0);
+									}
+									if (changeY) {
+										parent.scrollTop += changeY;
+									}
+								}
+
+								if (allowX) {
+									if (pointerX > rect.right - 40 && (gap = parent._gsMaxScrollX - parent.scrollLeft)) {
+										checkAutoScrollBounds = true;
+										changeX = Math.min(gap, (autoScrollFactor * (1 - Math.max(0, (rect.right - pointerX)) / 40)) | 0);
+									} else if (pointerX < rect.left + 40 && parent.scrollLeft) {
+										checkAutoScrollBounds = true;
+										changeX = -Math.min(parent.scrollLeft, (autoScrollFactor * (1 - Math.max(0, (pointerX - rect.left)) / 40)) | 0);
+									}
+									if (changeX) {
+										parent.scrollLeft += changeX;
+									}
+								}
+
+								if (isRoot && (changeX || changeY)) {
+									window.scrollTo(parent.scrollLeft, parent.scrollTop);
+									setPointerPosition(self.pointerX + changeX, self.pointerY + changeY);
+								}
+								e = parent;
+							}
+						}
 						if (dirty) {
 							var x = self.x,
 								y = self.y,
@@ -828,8 +977,8 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 								y = 0;
 							}
 							if (rotationMode) {
-								cssVars.rotation = self.rotation = self.x;
-								TweenLite.set(target, tempVars);
+								applyObj.data.rotation = self.rotation = x;
+								applyObj.setRatio(1); //note: instead of doing TweenLite.set(), as a performance optimization we skip right to the method that renders the transforms inside CSSPlugin. For old versions of IE, though, we do a normal TweenLite.set() to leverage its ability to re-reroute to an IE-specific 2D renderer.
 							} else {
 								if (scrollProxy) {
 									if (allowY) {
@@ -840,12 +989,12 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 									}
 								} else if (xyMode) {
 									if (allowY) {
-										cssVars.y = y;
+										applyObj.data.y = y;
 									}
 									if (allowX) {
-										cssVars.x = x;
+										applyObj.data.x = x;
 									}
-									TweenLite.set(target, tempVars);
+									applyObj.setRatio(1); //note: instead of doing TweenLite.set(), as a performance optimization we skip right to the method that renders the transforms inside CSSPlugin. For old versions of IE, though, we do a normal TweenLite.set() to leverage its ability to re-reroute to an IE-specific 2D renderer.
 								} else {
 									if (allowY) {
 										target.style.top = y + "px";
@@ -865,16 +1014,13 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 					//copies the x/y from the element (whether that be transforms, top/left, or ScrollProxy's top/left) to the Draggable's x and y (and rotation if necessary) properties so that they reflect reality and it also (optionally) applies any snapping necessary. This is used by the ThrowPropsPlugin tween in an onUpdate to ensure things are synced and snapped.
 					syncXY = function(skipOnUpdate, skipSnap) {
 						var snappedValue;
+						if (!target._gsTransform && (xyMode || rotationMode)) { //just in case the _gsTransform got wiped, like if the user called clearProps on the transform or something (very rare), doing an x tween forces a re-parsing of the transforms and population of the _gsTransform.
+							TweenLite.set(target, {x:"+=0"});
+						}
 						if (xyMode) {
-							if (!target._gsTransform) { //just in case the _gsTransform got wiped, like if the user called clearProps on the transform or something (very rare), doing an x tween forces a re-parsing of the transforms and population of the _gsTransform.
-								TweenLite.set(target, {x:"+=0"});
-							}
 							self.y = target._gsTransform.y;
 							self.x = target._gsTransform.x;
 						} else if (rotationMode) {
-							if (!target._gsTransform) { //just in case the _gsTransform got wiped, like if the user called clearProps on the transform or something (very rare), doing an x tween forces a re-parsing of the transforms and population of the _gsTransform.
-								TweenLite.set(target, {x:"+=0"});
-							}
 							self.x = self.rotation = target._gsTransform.rotation;
 						} else if (scrollProxy) {
 							self.y = scrollProxy.top();
@@ -983,10 +1129,10 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 									throwProps.rotation = _parseThrowProps(self, snapIsRaw ? snap : snap.rotation, maxX, minX, 1, forceZeroVelocity);
 								} else {
 									if (allowX) {
-										throwProps[xProp] = _parseThrowProps(self, snapIsRaw ? snap : snap.x || snap.left || snap.scrollLeft, maxX, minX, scrollProxy ? -1 : 1, forceZeroVelocity || (self.lockAxis && lockedAxis === "x"));
+										throwProps[xProp] = _parseThrowProps(self, snapIsRaw ? snap : snap.x || snap.left || snap.scrollLeft, maxX, minX, scrollProxy ? -1 : 1, forceZeroVelocity || (self.lockAxis && self.lockedAxis === "x"));
 									}
 									if (allowY) {
-										throwProps[yProp] = _parseThrowProps(self, snapIsRaw ? snap : snap.y || snap.top || snap.scrollTop, maxY, minY, scrollProxy ? -1 : 1, forceZeroVelocity || (self.lockAxis && lockedAxis === "y"));
+										throwProps[yProp] = _parseThrowProps(self, snapIsRaw ? snap : snap.y || snap.top || snap.scrollTop, maxY, minY, scrollProxy ? -1 : 1, forceZeroVelocity || (self.lockAxis && self.lockedAxis === "y"));
 									}
 								}
 							}
@@ -1040,8 +1186,10 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 								rotationOrigin = _localToGlobal(target, {x:0, y:0});
 								syncXY(true, true);
 								startElementX = self.x; //starting rotation (x always refers to rotation in type:"rotation", measured in degrees)
-								startElementY = self.y = Math.atan2(rotationOrigin.y - startMouseY, startMouseX - rotationOrigin.x) * _RAD2DEG;
+								startElementY = self.y = Math.atan2(rotationOrigin.y - startPointerY, startPointerX - rotationOrigin.x) * _RAD2DEG;
 							} else {
+								startScrollTop = target.parentNode ? target.parentNode.scrollTop || 0 : 0;
+								startScrollLeft = target.parentNode ? target.parentNode.scrollLeft || 0 : 0;
 								startElementY = _getStyle(target, yProp); //record the starting top and left values so that we can just add the mouse's movement to them later.
 								startElementX = _getStyle(target, xProp);
 							}
@@ -1116,14 +1264,19 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 
 						}
 						_addListener(_doc, "mouseup", onRelease);
-						isClicking = (_isClickable(e.target) && !vars.dragClickables);
+						if (e && e.target) {
+							_addListener(e.target, "mouseup", onRelease); //we also have to listen directly on the element because some browsers don't bubble up the event to the _doc on elements with contentEditable="true"
+						}
+						isClicking = (isClickable.call(self, e.target) && !vars.dragClickables);
 						if (isClicking) {
 							_addListener(e.target, "change", onRelease); //in some browsers, when you mousedown on a <select> element, no mouseup gets dispatched! So we listen for a "change" event instead.
+							_dispatchEvent(self, "press", "onPress");
+							_setSelectable(triggers, true); //accommodates things like inputs and elements with contentEditable="true" (otherwise user couldn't drag to select text)
 							return;
 						}
 						if (_isOldIE) {
 							e = _populateIEEvent(e, true);
-						} else if (scrollProxy && !(e.touches && e.touches.length > _dragCount + 1)) { //in some mobile browsers, e.preventDefault() when pressing on a link (or element with an onclick) will cause the link not to work. Only preventDefault() on scroll-type interactions, otherwise things like touch checkboxes and inputs don't work.
+						} else { //if (scrollProxy && !(e.touches && e.touches.length > _dragCount + 1)) { //in some mobile browsers, e.preventDefault() when pressing on a link (or element with an onclick) will cause the link not to work. Only preventDefault() on scroll-type interactions, otherwise things like touch checkboxes and inputs don't work.
 							e.preventDefault();
 							if (e.preventManipulation) {
 								e.preventManipulation();  //for some Microsoft browsers
@@ -1139,13 +1292,20 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						}
 						_dragCount++;
 						_addToRenderQueue(render); //causes the Draggable to render on each "tick" of TweenLite.ticker (performance optimization - updating values in a mousemove can cause them to happen too frequently, like multiple times between frame redraws which is wasteful, and it also prevents values from updating properly in IE8)
-						startMouseY = self.pointerY = e.pageY; //record the starting x and y so that we can calculate the movement from the original in _onMouseMove
-						startMouseX = self.pointerX = e.pageX;
+						startPointerY = self.pointerY = e.pageY; //record the starting x and y so that we can calculate the movement from the original in _onMouseMove
+						startPointerX = self.pointerX = e.pageX;
+						if (self.autoScroll && !rotationMode && !scrollProxy && target.parentNode && !target.getBBox) {
+							_recordMaxScrolls(target.parentNode);
+							if (target.parentNode._gsMaxScrollX && !_placeholderDiv.parentNode) { //add a placeholder div to prevent the parent container from collapsing when the user drags the element left.
+								_placeholderDiv.style.width = (target.parentNode.scrollWidth) + "px";
+								target.parentNode.appendChild(_placeholderDiv);
+							}
+						}
 						recordStartPositions();
 						if (matrix) {
-							temp = startMouseX * matrix[0] + startMouseY * matrix[2] + matrix[4];
-							startMouseY = startMouseX * matrix[1] + startMouseY * matrix[3] + matrix[5];
-							startMouseX = temp;
+							temp = startPointerX * matrix[0] + startPointerY * matrix[2] + matrix[4];
+							startPointerY = startPointerX * matrix[1] + startPointerY * matrix[3] + matrix[5];
+							startPointerX = temp;
 						}
 						if (self.tween) {
 							self.tween.kill();
@@ -1154,7 +1314,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						if (scrollProxy) {
 							TweenLite.killTweensOf(target, true, {scrollTo:1}); //just in case the original target's scroll position is being tweened somewhere else.
 						}
-						self.tween = lockedAxis = null;
+						self.tween = self.lockedAxis = null;
 						if (vars.zIndexBoost || (!rotationMode && !scrollProxy && vars.zIndexBoost !== false)) {
 							target.style.zIndex = Draggable.zIndex++;
 						}
@@ -1171,7 +1331,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 
 					//called every time the mouse/touch moves
 					onMove = function(e) {
-						if (!enabled || _isMultiTouching || !self.isPressed) {
+						if (!enabled || _isMultiTouching || !self.isPressed || !e) {
 							return;
 						}
 						if (_isOldIE) {
@@ -1184,9 +1344,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						}
 						self.pointerEvent = e;
 						var touches = e.changedTouches,
-							dragTolerance = 1 - self.dragResistance,
-							edgeTolerance = 1 - self.edgeResistance,
-							xChange, yChange, x, y, i, dif, mouseX, mouseY, temp;
+							i;
 						if (touches) { //touch events store the data slightly differently
 							e = touches[0];
 							if (e !== touch && e.identifier !== touchID) { //Usually changedTouches[0] will be what we're looking for, but in case it's not, look through the rest of the array...(and Android browsers don't reuse the event like iOS)
@@ -1199,11 +1357,22 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						} else if (e.pointerId && touchID && e.pointerId !== touchID) { //for some Microsoft browsers, we must attach the listener to the doc rather than the trigger so that when the finger moves outside the bounds of the trigger, things still work. So if the event we're receiving has a pointerId that doesn't match the touchID, ignore it (for multi-touch)
 							return;
 						}
-						mouseX = self.pointerX = e.pageX;
-						mouseY = self.pointerY = e.pageY;
+						if (self.autoScroll) {
+							checkAutoScrollBounds = true;
+						}
+						setPointerPosition(e.pageX, e.pageY);
+					},
+
+					setPointerPosition = function(pointerX, pointerY) {
+						var dragTolerance = 1 - self.dragResistance,
+							edgeTolerance = 1 - self.edgeResistance,
+							xChange, yChange, x, y, dif, temp;
+
+						self.pointerX = pointerX;
+						self.pointerY = pointerY;
 
 						if (rotationMode) {
-							y = Math.atan2(rotationOrigin.y - e.pageY, e.pageX - rotationOrigin.x) * _RAD2DEG;
+							y = Math.atan2(rotationOrigin.y - pointerY, pointerX - rotationOrigin.x) * _RAD2DEG;
 							dif = self.y - y;
 							self.y = y;
 							if (dif > 180) {
@@ -1215,12 +1384,12 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 
 						} else {
 							if (matrix) {
-								temp = mouseX * matrix[0] + mouseY * matrix[2] + matrix[4];
-								mouseY = mouseX * matrix[1] + mouseY * matrix[3] + matrix[5];
-								mouseX = temp;
+								temp = pointerX * matrix[0] + pointerY * matrix[2] + matrix[4];
+								pointerY = pointerX * matrix[1] + pointerY * matrix[3] + matrix[5];
+								pointerX = temp;
 							}
-							yChange = (mouseY - startMouseY);
-							xChange = (mouseX - startMouseX);
+							yChange = (pointerY - startPointerY);
+							xChange = (pointerX - startPointerX);
 							if (yChange < minimumMovement && yChange > -minimumMovement) {
 								yChange = 0;
 							}
@@ -1228,12 +1397,12 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 								xChange = 0;
 							}
 							if (self.lockAxis && (xChange || yChange)) {
-								if (lockedAxis === "y" || (!lockedAxis && Math.abs(xChange) > Math.abs(yChange) && allowX)) {
+								if (self.lockedAxis === "y" || (!self.lockedAxis && Math.abs(xChange) > Math.abs(yChange) && allowX)) {
 									yChange = 0;
-									lockedAxis = "y";
+									self.lockedAxis = "y";
 								} else if (allowY) {
 									xChange = 0;
-									lockedAxis = "x";
+									self.lockedAxis = "x";
 								}
 							}
 							x = startElementX + xChange * dragTolerance;
@@ -1288,7 +1457,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						self.isPressed = false;
 						var originalEvent = e,
 							wasDragging = self.isDragging,
-							touches, i, syntheticEvent;
+							touches, i, syntheticEvent, eventTarget;
 						if (touchEventTarget) {
 							_removeListener(touchEventTarget, "touchend", onRelease);
 							_removeListener(touchEventTarget, "touchmove", onMove);
@@ -1298,11 +1467,18 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 							_removeListener(_doc, "mousemove", onMove);
 						}
 						_removeListener(_doc, "mouseup", onRelease);
+						if (e && e.target) {
+							_removeListener(e.target, "mouseup", onRelease);
+						}
 						dirty = false;
+						if (_placeholderDiv.parentNode) { //_placeholderDiv just props open auto-scrolling containers so they don't collapse as the user drags left/up.
+							_placeholderDiv.parentNode.removeChild(_placeholderDiv);
+						}
 						if (isClicking) {
 							if (e) {
 								_removeListener(e.target, "change", onRelease);
 							}
+							_setSelectable(triggers, false);
 							_dispatchEvent(self, "release", "onRelease");
 							_dispatchEvent(self, "click", "onClick");
 							isClicking = false;
@@ -1345,16 +1521,18 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 							}
 							_dispatchEvent(self, "release", "onRelease");
 							_dispatchEvent(self, "click", "onClick");
-							if (originalEvent.target.click) { //some browsers (like mobile Safari) don't properly trigger the click event
-								originalEvent.target.click();
+							eventTarget = originalEvent.target || originalEvent.srcElement || target; //old IE uses srcElement
+							if (eventTarget.click) { //some browsers (like mobile Safari) don't properly trigger the click event
+								eventTarget.click();
 							} else if (_doc.createEvent) {
 								syntheticEvent = _doc.createEvent("MouseEvents");
 								syntheticEvent.initEvent("click", true, true);
-								originalEvent.target.dispatchEvent(syntheticEvent);
+								eventTarget.dispatchEvent(syntheticEvent);
 							}
+							clickTime = _getTime();
 						} else {
 							animate(vars.throwProps); //will skip if throwProps isn't defined or ThrowPropsPlugin isn't loaded.
-							if (!_isOldIE && originalEvent && (vars.dragClickables || !_isClickable(originalEvent.target)) && wasDragging) {
+							if (!_isOldIE && originalEvent && (vars.dragClickables || !isClickable.call(self, originalEvent.target)) && wasDragging) {
 								originalEvent.preventDefault();
 								if (originalEvent.preventManipulation) {
 									originalEvent.preventManipulation();  //for some Microsoft browsers
@@ -1368,10 +1546,30 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						return true;
 					},
 
+					updateScroll = function(e) {
+						if (e && self.isDragging) {
+							var parent = e.target || e.srcElement || target.parentNode,
+								deltaX = parent.scrollLeft - parent._gsScrollX,
+								deltaY = parent.scrollTop - parent._gsScrollY;
+							if (deltaX || deltaY) {
+								startPointerX -= deltaX;
+								startPointerY -= deltaY;
+								parent._gsScrollX += deltaX;
+								parent._gsScrollY += deltaY;
+								setPointerPosition(self.pointerX, self.pointerY);
+							}
+						}
+					},
+
 					onClick = function(e) {
-						if (self.isPressed || _getTime() - dragEndTime < 20) {
+						var time = _getTime(),
+							recentlyClicked = time - clickTime < 40;
+						if (self.isPressed || time - dragEndTime < 20 || recentlyClicked) {
 							if (e.preventDefault) {
 								e.preventDefault();
+								if (recentlyClicked) {
+									e.stopImmediatePropagation(); //otherwise some browsers bubble up click events, creating a duplicate.
+								}
 							} else {
 								e.returnValue = false;
 							}
@@ -1405,6 +1603,32 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 					return Draggable.hitTest(self.target, target, threshold);
 				};
 
+				this.getDirection = function(from, diagonalThreshold) { //from can be "start" (default), "velocity", or an element
+					var mode = (from === "velocity" && ThrowPropsPlugin) ? from : (typeof(from) === "object" && !rotationMode) ? "element" : "start",
+						xChange, yChange, ratio, direction, r1, r2;
+					if (mode === "element") {
+						r1 = _parseRect(self.target);
+						r2 = _parseRect(from);
+					}
+					xChange = (mode === "start") ? self.x - startElementX : (mode === "velocity") ? ThrowPropsPlugin.getVelocity(this.target, xProp) : (r1.left + r1.width / 2) - (r2.left + r2.width / 2);
+					if (rotationMode) {
+						return xChange < 0 ? "counter-clockwise" : "clockwise";
+					} else {
+						diagonalThreshold = diagonalThreshold || 2;
+						yChange = (mode === "start") ? self.y - startElementY : (mode === "velocity") ? ThrowPropsPlugin.getVelocity(this.target, yProp) : (r1.top + r1.height / 2) - (r2.top + r2.height / 2);
+						ratio = Math.abs(xChange / yChange);
+						direction = (ratio < 1 / diagonalThreshold) ? "" : (xChange < 0) ? "left" : "right";
+						if (ratio < diagonalThreshold) {
+							if (direction !== "") {
+								direction += "-";
+							}
+							direction += (yChange < 0) ? "up" : "down";
+						}
+					}
+					return direction;
+				};
+
+
 				this.applyBounds = function(newBounds) {
 					var x, y;
 					if (newBounds && vars.bounds !== newBounds) {
@@ -1446,9 +1670,13 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 					var x = self.x,
 						y = self.y;
 					updateMatrix();
+					updateScroll();
 					if (applyBounds) {
 						self.applyBounds();
 					} else {
+						if (dirty) {
+							render();
+						}
 						syncXY(true);
 					}
 					if (self.isPressed && ((allowX && Math.abs(x - self.x) > 0.01) || (allowY && (Math.abs(y - self.y) > 0.01 && !rotationMode)))) {
@@ -1469,12 +1697,12 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 							if (!rotationMode) {
 								_setStyle(trigger, "cursor", vars.cursor || "move");
 							}
-							trigger.ondragstart = trigger.onselectstart = _emptyFunc; //prevent text selection (and prevent IE from dragging images)
-							_setStyle(trigger, "userSelect", "none");
 							_setStyle(trigger, "touchCallout", "none");
 							_setStyle(trigger, "touchAction", "none");
 						}
+						_setSelectable(triggers, false);
 					}
+					_addScrollListener(self.target, updateScroll);
 					enabled = true;
 					if (ThrowPropsPlugin && type !== "soft") {
 						ThrowPropsPlugin.track(scrollProxy || target, (xyMode ? "x,y" : rotationMode ? "rotation" : "top,left"));
@@ -1488,6 +1716,12 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						scrollProxy.element._gsDragID = id;
 					}
 					TweenLite.set(target, {x:"+=0"}); //simply ensures that there's a _gsTransform on the element.
+					applyObj = {
+						t:target,
+						data:_isOldIE ? cssVars : target._gsTransform,
+						tween:{},
+						setRatio:(_isOldIE ? function() { TweenLite.set(target, tempVars); } : CSSPlugin._internals.set3DTransformRatio)
+					};
 					this.update(true);
 					return self;
 				};
@@ -1505,14 +1739,13 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						i = triggers.length;
 						while (--i > -1) {
 							trigger = triggers[i];
-							trigger.ondragstart = trigger.onselectstart = null;
-							_setStyle(trigger, "userSelect", "text");
 							_setStyle(trigger, "touchCallout", "default");
 							_setStyle(trigger, "MSTouchAction", "auto");
 							_removeListener(trigger, "mousedown", onPress);
 							_removeListener(trigger, "touchstart", onPress);
 							_removeListener(trigger, "click", onClick);
 						}
+						_setSelectable(triggers, true);
 						if (touchEventTarget) {
 							_removeListener(touchEventTarget, "touchcancel", onRelease);
 							_removeListener(touchEventTarget, "touchend", onRelease);
@@ -1521,6 +1754,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						_removeListener(_doc, "mouseup", onRelease);
 						_removeListener(_doc, "mousemove", onMove);
 					}
+					_removeScrollListener(target, updateScroll);
 					enabled = false;
 					if (ThrowPropsPlugin && type !== "soft") {
 						ThrowPropsPlugin.untrack(scrollProxy || target, (xyMode ? "x,y" : rotationMode ? "rotation" : "top,left"));
@@ -1588,7 +1822,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 		p.constructor = Draggable;
 		p.pointerX = p.pointerY = 0;
 		p.isDragging = p.isPressed = false;
-		Draggable.version = "0.11.0";
+		Draggable.version = "0.12.0";
 		Draggable.zIndex = 1000;
 
 		_addListener(_doc, "touchcancel", function() {
@@ -1634,7 +1868,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			return r;
 		};
 
-		Draggable.hitTest = function(obj1, obj2, threshold) { //
+		Draggable.hitTest = function(obj1, obj2, threshold) {
 			if (obj1 === obj2) {
 				return false;
 			}
@@ -1661,6 +1895,8 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			return (overlap.width > threshold && overlap.height > threshold);
 		};
 
+		_placeholderDiv.style.cssText = "visibility:hidden; height:1px; top:-1px; pointer-events:none; position:relative; clear:both;";
+
 		return Draggable;
 
 	}, true);