/*! * VERSION: 0.10.0 * DATE: 2014-02-20 * UPDATES AND DOCS AT: http://www.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/). * * @license Copyright (c) 2008-2014, GreenSock. All rights reserved. * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for * Club GreenSock members, the software agreement that was issued with your membership. * * @author: Jack Doyle, jack@greensock.com */ (window._gsQueue || (window._gsQueue = [])).push( function() { "use strict"; window._gsDefine("utils.Draggable", ["events.EventDispatcher","TweenLite"], function(EventDispatcher, TweenLite) { var _tempVarsXY = {css:{}}, //speed optimization - we reuse the same vars object for x/y TweenLite.set() calls to minimize garbage collection tasks and improve performance. _tempVarsX = {css:{}}, _tempVarsY = {css:{}}, _tempVarsRotation = {css:{}}, _tempEvent = {}, //for populating with pageX/pageY in old versions of IE _doc = document, _docElement = _doc.documentElement || {}, _emptyArray = [], _emptyFunc = function() { return false; }, _RAD2DEG = 180 / Math.PI, _max = 999999999999999, _getTime = Date.now || function() {return new Date().getTime();}, _isOldIE = (_doc.all && !_doc.addEventListener), _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, _clickableTagExp = /^(?:a|input|textarea|button|select)$/i, _dragCount = 0, //total number of elements currently being dragged _prefix, _isMultiTouching, _lastDragTime = 0, ThrowPropsPlugin, _renderQueueTick = function() { var i = _renderQueue.length; while (--i > -1) { _renderQueue[i](); } }, _addToRenderQueue = function(func) { _renderQueue.push(func); if (_renderQueue.length === 1) { TweenLite.ticker.addEventListener("tick", _renderQueueTick); } }, _removeFromRenderQueue = function(func) { var i = _renderQueue.length; while (--i > -1) { if (_renderQueue[i] === func) { _renderQueue.splice(i, 1); } } TweenLite.to(_renderQueueTimeout, 0, {overwrite:"all", delay:15, onComplete:_renderQueueTimeout}); //remove the "tick" listener only after the render queue is empty for 15 seconds (to improve performance). Adding/removing it constantly for every click/touch wouldn't deliver optimal speed, and we also don't want the ticker to keep calling the render method when things are idle for long periods of time (we want to improve battery life on mobile devices). }, _renderQueueTimeout = function() { if (!_renderQueue.length) { TweenLite.ticker.removeEventListener("tick", _renderQueueTick); } }, _extend = function(obj, defaults) { var p; for (p in defaults) { if (obj[p] === undefined) { obj[p] = defaults[p]; } } return obj; }, //just used for IE8 and earlier to normalize events and populate pageX/pageY _populateIEEvent = function(e, preventDefault) { e = e || window.event; _tempEvent.pageX = e.clientX + _doc.body.scrollLeft + _docElement.scrollLeft; _tempEvent.pageY = e.clientY + _doc.body.scrollTop + _docElement.scrollTop; if (preventDefault) { e.returnValue = false; } return _tempEvent; }, //grabs the first element it finds (and we include the window as an element), so if it's selector text, it'll feed that value to TweenLite.selector, if it's a jQuery object or some other selector engine's result, it'll grab the first one, and same for an array. If the value doesn't contain a DOM element, it'll just return null. _unwrapElement = function(value) { if (!value) { return value; } if (typeof(value) === "string") { value = TweenLite.selector(value); } if (value.length && value !== window && value[0] && value[0].style && !value.nodeType) { value = value[0]; } return (value === window || (value.nodeType && value.style)) ? value : null; }, _checkPrefix = function(e, p) { var s = e.style, capped, i, a; if (s[p] === undefined) { a = ["O","Moz","ms","Ms","Webkit"]; i = 5; capped = p.charAt(0).toUpperCase() + p.substr(1); while (--i > -1 && s[a[i]+capped] === undefined) { } if (i < 0) { return ""; } _prefix = (i === 3) ? "ms" : a[i]; p = _prefix + capped; } return p; }, _setStyle = function(e, p, value) { var s = e.style; if (s[p] === undefined) { p = _checkPrefix(e, p); } if (value == null) { if (s.removeProperty) { s.removeProperty(p.replace(/([A-Z])/g, "-$1").toLowerCase()); } else { //note: old versions of IE use "removeAttribute()" instead of "removeProperty()" s.removeAttribute(p); } } else if (s[p] !== undefined) { s[p] = value; } }, _getComputedStyle = _doc.defaultView ? _doc.defaultView.getComputedStyle : _emptyFunc, _horizExp = /(?:Left|Right|Width)/i, _suffixExp = /(?:\d|\-|\+|=|#|\.)*/g, _convertToPixels = function(t, p, v, sfx, recurse) { if (sfx === "px" || !sfx) { return v; } if (sfx === "auto" || !v) { return 0; } var horiz = _horizExp.test(p), node = t, style = _tempDiv.style, neg = (v < 0), pix; if (neg) { v = -v; } if (sfx === "%" && p.indexOf("border") !== -1) { pix = (v / 100) * (horiz ? t.clientWidth : t.clientHeight); } else { style.cssText = "border:0 solid red;position:" + _getStyle(t, "position", true) + ";line-height:0;"; if (sfx === "%" || !node.appendChild) { node = t.parentNode || _doc.body; style[(horiz ? "width" : "height")] = v + sfx; } else { style[(horiz ? "borderLeftWidth" : "borderTopWidth")] = v + sfx; } node.appendChild(_tempDiv); pix = parseFloat(_tempDiv[(horiz ? "offsetWidth" : "offsetHeight")]); node.removeChild(_tempDiv); if (pix === 0 && !recurse) { pix = _convertToPixels(t, p, v, sfx, true); } } return neg ? -pix : pix; }, _calculateOffset = function(t, p) { //for figuring out "top" or "left" in px when it's "auto". We need to factor in margin with the offsetLeft/offsetTop 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); }, _getStyle = function(element, prop, keepUnits) { var rv = (element._gsTransform || {})[prop], cs; if (rv || rv === 0) { return rv; } else if (element.style[prop]) { rv = element.style[prop]; } else if ((cs = _getComputedStyle(element))) { rv = cs.getPropertyValue(prop.replace(/([A-Z])/g, "-$1").toLowerCase()); rv = (rv || cs.length) ? rv : cs[prop]; //Opera behaves VERY strangely - length is usually 0 and cs[prop] is the only way to get accurate results EXCEPT when checking for -o-transform which only works with cs.getPropertyValue()! } else if (element.currentStyle) { rv = element.currentStyle[prop]; } if (rv === "auto" && (prop === "top" || prop === "left")) { rv = _calculateOffset(element, prop); } return keepUnits ? rv : parseFloat(rv) || 0; }, _dispatchEvent = function(instance, type, callbackName) { var vars = instance.vars, callback = vars[callbackName], listeners = instance._listeners[type]; if (typeof(callback) === "function") { callback.apply(vars[callbackName + "Scope"] || instance, vars[callbackName + "Params"] || [instance.pointerEvent]); } if (listeners) { instance.dispatchEvent(type); } }, _getBounds = function(obj, context) { //accepts any of the following: a DOM element, jQuery object, selector text, or an object defining bounds as {top, left, width, height} or {minX, maxX, minY, maxY}. Returns an object with left, top, width, and height properties. var e = _unwrapElement(obj), top, left, offset; if (!e) { if (obj.left !== undefined) { offset = _getOffsetTransformOrigin(context); //the bounds should be relative to the origin return {left: obj.left - offset.x, top: obj.top - offset.y, width: obj.width, height: obj.height}; } left = obj.min || obj.minX || obj.minRotation || 0; top = obj.min || obj.minY || 0; return {left:left, top:top, width:(obj.max || obj.maxX || obj.maxRotation || 0) - left, height:(obj.max || obj.maxY || 0) - top}; } return _getElementBounds(e, context); }, _tempDiv = _doc.createElement("div"), _supports3D = (_checkPrefix(_tempDiv, "perspective") !== ""), // start matrix and point conversion methods... _originProp = _checkPrefix(_tempDiv, "transformOrigin").replace(/^ms/g, "Ms").replace(/([A-Z])/g, "-$1").toLowerCase(), _transformProp = _checkPrefix(_tempDiv, "transform"), _transformCSSProp = _transformProp.replace(/^ms/g, "Ms").replace(/([A-Z])/g, "-$1").toLowerCase(), _point1 = {}, //we reuse _point1 and _point2 objects inside matrix and point conversion methods to conserve memory and minimize garbage collection tasks. _point2 = {}, _hasReparentBug, //we'll set this inside the _getOffset2DMatrix() method after the body has loaded. _getOffsetTransformOrigin = function(e, decoratee) { decoratee = decoratee || {}; if (!e || e === document.body || !e.parentNode) { return {x:0, y:0}; } var cs = _getComputedStyle(e), v = (_originProp && cs) ? cs.getPropertyValue(_originProp) : "50% 50%", a = v.split(" "), x = (v.indexOf("left") !== -1) ? "0%" : (v.indexOf("right") !== -1) ? "100%" : a[0], y = (v.indexOf("top") !== -1) ? "0%" : (v.indexOf("bottom") !== -1) ? "100%" : a[1]; if (y === "center" || y == null) { y = "50%"; } 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)); return decoratee; }, _getOffset2DMatrix = function(e, offsetOrigin, parentOffsetOrigin) { var cs, m; if (e === window || !e || !e.parentNode) { return [1,0,0,1,0,0]; } cs = _getComputedStyle(e); m = cs ? cs.getPropertyValue(_transformCSSProp) : e.currentStyle ? e.currentStyle[_transformProp] : "1,0,0,1,0,0"; m = (m + "").match(/(?:\-|\b)[\d\-\.e]+\b/g) || [1,0,0,1,0,0]; if (m.length > 6) { m = [m[0], m[1], m[4], m[5], m[12], m[13]]; } if (offsetOrigin) { m[4] = Number(m[4]) + offsetOrigin.x + e.offsetLeft - parentOffsetOrigin.x; m[5] = Number(m[5]) + offsetOrigin.y + e.offsetTop - parentOffsetOrigin.y; //some browsers (like Chrome 31) have a bug that causes the offsetParent not to report correctly when a transform is applied to an element's parent, so the offsetTop and offsetLeft are measured from the parent instead of whatever the offsetParent reports as. For example, put an absolutely-positioned child div inside a position:static parent, then check the child's offsetTop before and after you apply a transform, like rotate(1deg). You'll see that it changes, but the offsetParent doesn't. So we must sense this condition here (and we can only do it after the body has loaded, as browsers don't accurately report offsets otherwise) and set a variable that we can easily reference later. if (_hasReparentBug === undefined && _doc.body && _transformProp) { _hasReparentBug = (function() { var parent = _doc.createElement("div"), child = _doc.createElement("div"), oldOffsetParent, value; child.style.position = "absolute"; _doc.body.appendChild(parent); parent.appendChild(child); oldOffsetParent = child.offsetParent; parent.style[_transformProp] = "rotate(1deg)"; value = (child.offsetParent === oldOffsetParent); _doc.body.removeChild(parent); return value; }()); } if (e.parentNode && e.parentNode.offsetParent === e.offsetParent && (!_hasReparentBug || _getOffset2DMatrix(e.parentNode).join("") === "100100")) { m[4] -= e.parentNode.offsetLeft; m[5] -= e.parentNode.offsetTop; } } return m; }, _getConcatenatedMatrix = function(e, invert) { //note: we keep reusing _point1 and _point2 in order to minimize memory usage and garbage collection chores. var originOffset = _getOffsetTransformOrigin(e, _point1), parentOriginOffset = _getOffsetTransformOrigin(e.parentNode, _point2), m = _getOffset2DMatrix(e, originOffset, parentOriginOffset), a, b, c, d, tx, ty, m2, determinant; while ((e = e.parentNode) && e.parentNode && e !== document.body) { originOffset = parentOriginOffset; parentOriginOffset = _getOffsetTransformOrigin(e.parentNode, (originOffset === _point1) ? _point2 : _point1); m2 = _getOffset2DMatrix(e, originOffset, parentOriginOffset); a = m[0]; b = m[1]; c = m[2]; d = m[3]; tx = m[4]; ty = m[5]; m[0] = a * m2[0] + b * m2[2]; m[1] = a * m2[1] + b * m2[3]; m[2] = c * m2[0] + d * m2[2]; m[3] = c * m2[1] + d * m2[3]; m[4] = tx * m2[0] + ty * m2[2] + m2[4]; m[5] = tx * m2[1] + ty * m2[3] + m2[5]; } if (invert) { a = m[0]; b = m[1]; c = m[2]; d = m[3]; tx = m[4]; ty = m[5]; determinant = (a * d - b * c); m[0] = d / determinant; m[1] = -b / determinant; m[2] = -c / determinant; m[3] = a / determinant; m[4] = (c * ty - d * tx) / determinant; m[5] = -(a * ty - b * tx) / determinant; } return m; }, _localToGlobal = function(e, p, decoratee) { var m = _getConcatenatedMatrix(e), x = p.x, y = p.y; decoratee = (decoratee === true) ? p : decoratee || {}; decoratee.x = x * m[0] + y * m[2] + m[4]; decoratee.y = x * m[1] + y * m[3] + m[5]; return decoratee; }, _localizePoint = function(p, localToGlobal, globalToLocal) { var x = p.x * localToGlobal[0] + p.y * localToGlobal[2] + localToGlobal[4], y = p.x * localToGlobal[1] + p.y * localToGlobal[3] + localToGlobal[5]; p.x = x * globalToLocal[0] + y * globalToLocal[2] + globalToLocal[4]; p.y = x * globalToLocal[1] + y * globalToLocal[3] + globalToLocal[5]; return p; }, _getElementBounds = function(e, context) { var origin, left, right, top, bottom, mLocalToGlobal, mGlobalToLocal, p1, p2, p3, p4; if (e === window) { top = (e.pageYOffset != null) ? e.pageYOffset : (_doc.scrollTop != null) ? _doc.scrollTop : _docElement.scrollTop || _doc.body.scrollTop || 0; left = (e.pageXOffset != null) ? e.pageXOffset : (_doc.scrollLeft != null) ? _doc.scrollLeft : _docElement.scrollLeft || _doc.body.scrollLeft || 0; right = left + (_docElement.clientWidth || e.innerWidth || _doc.body.clientWidth || 0); bottom = top + ((e.innerHeight - 20 < _docElement.clientHeight) ? _docElement.clientHeight : e.innerHeight || _doc.body.clientHeight || 0); //some browsers (like Firefox) ignore absolutely positioned elements, and collapse the height of the documentElement, so it could be 8px, for example, if you have just an absolutely positioned div. In that case, we use the innerHeight to resolve this. } else { origin = _getOffsetTransformOrigin(e); left = -origin.x; right = left + e.offsetWidth; top = -origin.y; bottom = top + e.offsetHeight; } if (e === context) { return {left:left, top:top, width: right - left, height: bottom - top}; } mLocalToGlobal = _getConcatenatedMatrix(e); mGlobalToLocal = _getConcatenatedMatrix(context, true); p1 = _localizePoint({x:left, y:top}, mLocalToGlobal, mGlobalToLocal); p2 = _localizePoint({x:right, y:top}, mLocalToGlobal, mGlobalToLocal); p3 = _localizePoint({x:right, y:bottom}, mLocalToGlobal, mGlobalToLocal); p4 = _localizePoint({x:left, y:bottom}, mLocalToGlobal, mGlobalToLocal); left = Math.min(p1.x, p2.x, p3.x, p4.x); top = Math.min(p1.y, p2.y, p3.y, p4.y); return {left:left, top:top, width:Math.max(p1.x, p2.x, p3.x, p4.x) - left, height:Math.max(p1.y, p2.y, p3.y, p4.y) - top}; }, // end matrix and point conversion methods _isArrayLike = function(e) { return (e.length && e[0] && ((e[0].nodeType && e[0].style && !e.nodeType) || (e[0].length && e[0][0]))) ? true : false; //could be an array of jQuery objects too, so accommodate that. }, _flattenArray = function(a) { var result = [], l = a.length, i, e, j; for (i = 0; i < l; i++) { e = a[i]; if (_isArrayLike(e)) { j = e.length; for (j = 0; j < e.length; j++) { result.push(e[j]); } } else { result.push(e); } } return result; }, _isTouchDevice = (("ontouchstart" in _docElement) && ("orientation" in window)), _touchEventLookup = (function(types) { //we create an object that makes it easy to translate touch event types into their "pointer" counterparts if we're in a browser that uses those instead. Like IE10 uses "MSPointerDown" instead of "touchstart", for example. var standard = types.split(","), converted = ((_tempDiv.onpointerdown !== undefined) ? "pointerdown,pointermove,pointerup,pointercancel" : (_tempDiv.onmspointerdown !== undefined) ? "MSPointerDown,MSPointerMove,MSPointerUp,MSPointerCancel" : types).split(","), obj = {}, i = 7; while (--i > -1) { obj[standard[i]] = converted[i]; obj[converted[i]] = standard[i]; } return obj; }("touchstart,touchmove,touchend,touchcancel")), _addListener = function(element, type, func) { if (element.addEventListener) { element.addEventListener(_touchEventLookup[type] || type, func, false); } else if (element.attachEvent) { element.attachEvent("on" + type, func); } }, _removeListener = function(element, type, func) { if (element.removeEventListener) { element.removeEventListener(_touchEventLookup[type] || type, func); } else if (element.detachEvent) { element.detachEvent("on" + type, func); } }, _onMultiTouchDocumentEnd = function(e) { _isMultiTouching = (e.touches && _dragCount < e.touches.length); _removeListener(e.target, "touchend", _onMultiTouchDocumentEnd); }, _onMultiTouchDocument = function(e) { _isMultiTouching = (e.touches && _dragCount < e.touches.length); _addListener(e.target, "touchend", _onMultiTouchDocumentEnd); }, _parseThrowProps = function(draggable, snap, max, min, factor, forceZeroVelocity) { var vars = {}, a, i, l; if (snap) { if (factor !== 1 && snap instanceof Array) { //some data must be altered to make sense, like if the user passes in an array of rotational values in degrees, we must convert it to radians. Or for scrollLeft and scrollTop, we invert the values. vars.end = a = []; l = snap.length; for (i = 0; i < l; i++) { a[i] = snap[i] * factor; } } 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. }; } else { vars.end = snap; } } if (max || max === 0) { vars.max = max; } if (min || min === 0) { vars.min = min; } if (forceZeroVelocity) { vars.velocity = 0; } 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 , , or