1 | (function (global, factory) {
|
2 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
3 | typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
4 | (global = global || self, factory(global.window = global.window || {}));
|
5 | }(this, (function (exports) { 'use strict';
|
6 |
|
7 | function _inheritsLoose(subClass, superClass) {
|
8 | subClass.prototype = Object.create(superClass.prototype);
|
9 | subClass.prototype.constructor = subClass;
|
10 | subClass.__proto__ = superClass;
|
11 | }
|
12 |
|
13 | function _assertThisInitialized(self) {
|
14 | if (self === void 0) {
|
15 | throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
16 | }
|
17 |
|
18 | return self;
|
19 | }
|
20 |
|
21 | var _doc,
|
22 | _win,
|
23 | _docElement,
|
24 | _body,
|
25 | _divContainer,
|
26 | _svgContainer,
|
27 | _identityMatrix,
|
28 | _transformProp = "transform",
|
29 | _transformOriginProp = _transformProp + "Origin",
|
30 | _hasOffsetBug,
|
31 | _setDoc = function _setDoc(element) {
|
32 | var doc = element.ownerDocument || element;
|
33 |
|
34 | if (!(_transformProp in element.style) && "msTransform" in element.style) {
|
35 | _transformProp = "msTransform";
|
36 | _transformOriginProp = _transformProp + "Origin";
|
37 | }
|
38 |
|
39 | while (doc.parentNode && (doc = doc.parentNode)) {}
|
40 |
|
41 | _win = window;
|
42 | _identityMatrix = new Matrix2D();
|
43 |
|
44 | if (doc) {
|
45 | _doc = doc;
|
46 | _docElement = doc.documentElement;
|
47 | _body = doc.body;
|
48 | var d1 = doc.createElement("div"),
|
49 | d2 = doc.createElement("div");
|
50 |
|
51 | _body.appendChild(d1);
|
52 |
|
53 | d1.appendChild(d2);
|
54 | d1.style.position = "static";
|
55 | d1.style[_transformProp] = "translate3d(0,0,1px)";
|
56 | _hasOffsetBug = d2.offsetParent !== d1;
|
57 |
|
58 | _body.removeChild(d1);
|
59 | }
|
60 |
|
61 | return doc;
|
62 | },
|
63 | _forceNonZeroScale = function _forceNonZeroScale(e) {
|
64 | var a, cache;
|
65 |
|
66 | while (e && e !== _body) {
|
67 | cache = e._gsap;
|
68 |
|
69 | if (cache && !cache.scaleX && !cache.scaleY && cache.renderTransform) {
|
70 | cache.scaleX = cache.scaleY = 1e-4;
|
71 | cache.renderTransform(1, cache);
|
72 | a ? a.push(cache) : a = [cache];
|
73 | }
|
74 |
|
75 | e = e.parentNode;
|
76 | }
|
77 |
|
78 | return a;
|
79 | },
|
80 | _svgTemps = [],
|
81 | _divTemps = [],
|
82 | _getDocScrollTop = function _getDocScrollTop() {
|
83 | return _win.pageYOffset || _doc.scrollTop || _docElement.scrollTop || _body.scrollTop || 0;
|
84 | },
|
85 | _getDocScrollLeft = function _getDocScrollLeft() {
|
86 | return _win.pageXOffset || _doc.scrollLeft || _docElement.scrollLeft || _body.scrollLeft || 0;
|
87 | },
|
88 | _svgOwner = function _svgOwner(element) {
|
89 | return element.ownerSVGElement || ((element.tagName + "").toLowerCase() === "svg" ? element : null);
|
90 | },
|
91 | _isFixed = function _isFixed(element) {
|
92 | if (_win.getComputedStyle(element).position === "fixed") {
|
93 | return true;
|
94 | }
|
95 |
|
96 | element = element.parentNode;
|
97 |
|
98 | if (element && element.nodeType === 1) {
|
99 | return _isFixed(element);
|
100 | }
|
101 | },
|
102 | _createSibling = function _createSibling(element, i) {
|
103 | if (element.parentNode && (_doc || _setDoc(element))) {
|
104 | var svg = _svgOwner(element),
|
105 | ns = svg ? svg.getAttribute("xmlns") || "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml",
|
106 | type = svg ? i ? "rect" : "g" : "div",
|
107 | x = i !== 2 ? 0 : 100,
|
108 | y = i === 3 ? 100 : 0,
|
109 | css = "position:absolute;display:block;pointer-events:none;",
|
110 | e = _doc.createElementNS ? _doc.createElementNS(ns.replace(/^https/, "http"), type) : _doc.createElement(type);
|
111 |
|
112 | if (i) {
|
113 | if (!svg) {
|
114 | if (!_divContainer) {
|
115 | _divContainer = _createSibling(element);
|
116 | _divContainer.style.cssText = css;
|
117 | }
|
118 |
|
119 | e.style.cssText = css + "width:0.1px;height:0.1px;top:" + y + "px;left:" + x + "px";
|
120 |
|
121 | _divContainer.appendChild(e);
|
122 | } else {
|
123 | if (!_svgContainer) {
|
124 | _svgContainer = _createSibling(element);
|
125 | }
|
126 |
|
127 | e.setAttribute("width", 0.01);
|
128 | e.setAttribute("height", 0.01);
|
129 | e.setAttribute("transform", "translate(" + x + "," + y + ")");
|
130 |
|
131 | _svgContainer.appendChild(e);
|
132 | }
|
133 | }
|
134 |
|
135 | return e;
|
136 | }
|
137 |
|
138 | throw "Need document and parent.";
|
139 | },
|
140 | _consolidate = function _consolidate(m) {
|
141 | var c = new Matrix2D(),
|
142 | i = 0;
|
143 |
|
144 | for (; i < m.numberOfItems; i++) {
|
145 | c.multiply(m.getItem(i).matrix);
|
146 | }
|
147 |
|
148 | return c;
|
149 | },
|
150 | _placeSiblings = function _placeSiblings(element, adjustGOffset) {
|
151 | var svg = _svgOwner(element),
|
152 | isRootSVG = element === svg,
|
153 | siblings = svg ? _svgTemps : _divTemps,
|
154 | container,
|
155 | m,
|
156 | b,
|
157 | x,
|
158 | y;
|
159 |
|
160 | if (element === _win) {
|
161 | return element;
|
162 | }
|
163 |
|
164 | if (!siblings.length) {
|
165 | siblings.push(_createSibling(element, 1), _createSibling(element, 2), _createSibling(element, 3));
|
166 | }
|
167 |
|
168 | container = svg ? _svgContainer : _divContainer;
|
169 |
|
170 | if (svg) {
|
171 | b = isRootSVG ? {
|
172 | x: 0,
|
173 | y: 0
|
174 | } : element.getBBox();
|
175 | m = element.transform ? element.transform.baseVal : {};
|
176 |
|
177 | if (m.numberOfItems) {
|
178 | m = m.numberOfItems > 1 ? _consolidate(m) : m.getItem(0).matrix;
|
179 | x = m.a * b.x + m.c * b.y;
|
180 | y = m.b * b.x + m.d * b.y;
|
181 | } else {
|
182 | m = _identityMatrix;
|
183 | x = b.x;
|
184 | y = b.y;
|
185 | }
|
186 |
|
187 | if (adjustGOffset && element.tagName.toLowerCase() === "g") {
|
188 | x = y = 0;
|
189 | }
|
190 |
|
191 | container.setAttribute("transform", "matrix(" + m.a + "," + m.b + "," + m.c + "," + m.d + "," + (m.e + x) + "," + (m.f + y) + ")");
|
192 | (isRootSVG ? svg : element.parentNode).appendChild(container);
|
193 | } else {
|
194 | x = y = 0;
|
195 |
|
196 | if (_hasOffsetBug) {
|
197 | m = element.offsetParent;
|
198 | b = element;
|
199 |
|
200 | while (b && (b = b.parentNode) && b !== m && b.parentNode) {
|
201 | if ((_win.getComputedStyle(b)[_transformProp] + "").length > 4) {
|
202 | x = b.offsetLeft;
|
203 | y = b.offsetTop;
|
204 | b = 0;
|
205 | }
|
206 | }
|
207 | }
|
208 |
|
209 | b = container.style;
|
210 | b.top = element.offsetTop - y + "px";
|
211 | b.left = element.offsetLeft - x + "px";
|
212 | m = _win.getComputedStyle(element);
|
213 | b[_transformProp] = m[_transformProp];
|
214 | b[_transformOriginProp] = m[_transformOriginProp];
|
215 | b.border = m.border;
|
216 | b.borderLeftStyle = m.borderLeftStyle;
|
217 | b.borderTopStyle = m.borderTopStyle;
|
218 | b.borderLeftWidth = m.borderLeftWidth;
|
219 | b.borderTopWidth = m.borderTopWidth;
|
220 | b.position = m.position === "fixed" ? "fixed" : "absolute";
|
221 | element.parentNode.appendChild(container);
|
222 | }
|
223 |
|
224 | return container;
|
225 | },
|
226 | _setMatrix = function _setMatrix(m, a, b, c, d, e, f) {
|
227 | m.a = a;
|
228 | m.b = b;
|
229 | m.c = c;
|
230 | m.d = d;
|
231 | m.e = e;
|
232 | m.f = f;
|
233 | return m;
|
234 | };
|
235 |
|
236 | var Matrix2D = function () {
|
237 | function Matrix2D(a, b, c, d, e, f) {
|
238 | if (a === void 0) {
|
239 | a = 1;
|
240 | }
|
241 |
|
242 | if (b === void 0) {
|
243 | b = 0;
|
244 | }
|
245 |
|
246 | if (c === void 0) {
|
247 | c = 0;
|
248 | }
|
249 |
|
250 | if (d === void 0) {
|
251 | d = 1;
|
252 | }
|
253 |
|
254 | if (e === void 0) {
|
255 | e = 0;
|
256 | }
|
257 |
|
258 | if (f === void 0) {
|
259 | f = 0;
|
260 | }
|
261 |
|
262 | _setMatrix(this, a, b, c, d, e, f);
|
263 | }
|
264 |
|
265 | var _proto = Matrix2D.prototype;
|
266 |
|
267 | _proto.inverse = function inverse() {
|
268 | var a = this.a,
|
269 | b = this.b,
|
270 | c = this.c,
|
271 | d = this.d,
|
272 | e = this.e,
|
273 | f = this.f,
|
274 | determinant = a * d - b * c || 1e-10;
|
275 | return _setMatrix(this, d / determinant, -b / determinant, -c / determinant, a / determinant, (c * f - d * e) / determinant, -(a * f - b * e) / determinant);
|
276 | };
|
277 |
|
278 | _proto.multiply = function multiply(matrix) {
|
279 | var a = this.a,
|
280 | b = this.b,
|
281 | c = this.c,
|
282 | d = this.d,
|
283 | e = this.e,
|
284 | f = this.f,
|
285 | a2 = matrix.a,
|
286 | b2 = matrix.c,
|
287 | c2 = matrix.b,
|
288 | d2 = matrix.d,
|
289 | e2 = matrix.e,
|
290 | f2 = matrix.f;
|
291 | return _setMatrix(this, a2 * a + c2 * c, a2 * b + c2 * d, b2 * a + d2 * c, b2 * b + d2 * d, e + e2 * a + f2 * c, f + e2 * b + f2 * d);
|
292 | };
|
293 |
|
294 | _proto.clone = function clone() {
|
295 | return new Matrix2D(this.a, this.b, this.c, this.d, this.e, this.f);
|
296 | };
|
297 |
|
298 | _proto.equals = function equals(matrix) {
|
299 | var a = this.a,
|
300 | b = this.b,
|
301 | c = this.c,
|
302 | d = this.d,
|
303 | e = this.e,
|
304 | f = this.f;
|
305 | return a === matrix.a && b === matrix.b && c === matrix.c && d === matrix.d && e === matrix.e && f === matrix.f;
|
306 | };
|
307 |
|
308 | _proto.apply = function apply(point, decoratee) {
|
309 | if (decoratee === void 0) {
|
310 | decoratee = {};
|
311 | }
|
312 |
|
313 | var x = point.x,
|
314 | y = point.y,
|
315 | a = this.a,
|
316 | b = this.b,
|
317 | c = this.c,
|
318 | d = this.d,
|
319 | e = this.e,
|
320 | f = this.f;
|
321 | decoratee.x = x * a + y * c + e || 0;
|
322 | decoratee.y = x * b + y * d + f || 0;
|
323 | return decoratee;
|
324 | };
|
325 |
|
326 | return Matrix2D;
|
327 | }();
|
328 | function getGlobalMatrix(element, inverse, adjustGOffset) {
|
329 | if (!element || !element.parentNode || (_doc || _setDoc(element)).documentElement === element) {
|
330 | return new Matrix2D();
|
331 | }
|
332 |
|
333 | var zeroScales = _forceNonZeroScale(element.parentNode),
|
334 | svg = _svgOwner(element),
|
335 | temps = svg ? _svgTemps : _divTemps,
|
336 | container = _placeSiblings(element, adjustGOffset),
|
337 | b1 = temps[0].getBoundingClientRect(),
|
338 | b2 = temps[1].getBoundingClientRect(),
|
339 | b3 = temps[2].getBoundingClientRect(),
|
340 | parent = container.parentNode,
|
341 | isFixed = _isFixed(element),
|
342 | m = new Matrix2D((b2.left - b1.left) / 100, (b2.top - b1.top) / 100, (b3.left - b1.left) / 100, (b3.top - b1.top) / 100, b1.left + (isFixed ? 0 : _getDocScrollLeft()), b1.top + (isFixed ? 0 : _getDocScrollTop()));
|
343 |
|
344 | parent.removeChild(container);
|
345 |
|
346 | if (zeroScales) {
|
347 | b1 = zeroScales.length;
|
348 |
|
349 | while (b1--) {
|
350 | b2 = zeroScales[b1];
|
351 | b2.scaleX = b2.scaleY = 0;
|
352 | b2.renderTransform(1, b2);
|
353 | }
|
354 | }
|
355 |
|
356 | return inverse ? m.inverse() : m;
|
357 | }
|
358 |
|
359 | var gsap,
|
360 | _win$1,
|
361 | _doc$1,
|
362 | _docElement$1,
|
363 | _body$1,
|
364 | _tempDiv,
|
365 | _placeholderDiv,
|
366 | _coreInitted,
|
367 | _checkPrefix,
|
368 | _toArray,
|
369 | _supportsPassive,
|
370 | _isTouchDevice,
|
371 | _touchEventLookup,
|
372 | _dragCount,
|
373 | _isMultiTouching,
|
374 | _isAndroid,
|
375 | InertiaPlugin,
|
376 | _defaultCursor,
|
377 | _supportsPointer,
|
378 | _windowExists = function _windowExists() {
|
379 | return typeof window !== "undefined";
|
380 | },
|
381 | _getGSAP = function _getGSAP() {
|
382 | return gsap || _windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap;
|
383 | },
|
384 | _isFunction = function _isFunction(value) {
|
385 | return typeof value === "function";
|
386 | },
|
387 | _isObject = function _isObject(value) {
|
388 | return typeof value === "object";
|
389 | },
|
390 | _isUndefined = function _isUndefined(value) {
|
391 | return typeof value === "undefined";
|
392 | },
|
393 | _emptyFunc = function _emptyFunc() {
|
394 | return false;
|
395 | },
|
396 | _transformProp$1 = "transform",
|
397 | _transformOriginProp$1 = "transformOrigin",
|
398 | _round = function _round(value) {
|
399 | return Math.round(value * 10000) / 10000;
|
400 | },
|
401 | _isArray = Array.isArray,
|
402 | _createElement = function _createElement(type, ns) {
|
403 | var e = _doc$1.createElementNS ? _doc$1.createElementNS((ns || "http://www.w3.org/1999/xhtml").replace(/^https/, "http"), type) : _doc$1.createElement(type);
|
404 | return e.style ? e : _doc$1.createElement(type);
|
405 | },
|
406 | _RAD2DEG = 180 / Math.PI,
|
407 | _bigNum = 1e20,
|
408 | _identityMatrix$1 = new Matrix2D(),
|
409 | _getTime = Date.now || function () {
|
410 | return new Date().getTime();
|
411 | },
|
412 | _renderQueue = [],
|
413 | _lookup = {},
|
414 | _lookupCount = 0,
|
415 | _clickableTagExp = /^(?:a|input|textarea|button|select)$/i,
|
416 | _lastDragTime = 0,
|
417 | _temp1 = {},
|
418 | _windowProxy = {},
|
419 | _copy = function _copy(obj, factor) {
|
420 | var copy = {},
|
421 | p;
|
422 |
|
423 | for (p in obj) {
|
424 | copy[p] = factor ? obj[p] * factor : obj[p];
|
425 | }
|
426 |
|
427 | return copy;
|
428 | },
|
429 | _extend = function _extend(obj, defaults) {
|
430 | for (var p in defaults) {
|
431 | if (!(p in obj)) {
|
432 | obj[p] = defaults[p];
|
433 | }
|
434 | }
|
435 |
|
436 | return obj;
|
437 | },
|
438 | _renderQueueTick = function _renderQueueTick() {
|
439 | return _renderQueue.forEach(function (func) {
|
440 | return func();
|
441 | });
|
442 | },
|
443 | _addToRenderQueue = function _addToRenderQueue(func) {
|
444 | _renderQueue.push(func);
|
445 |
|
446 | if (_renderQueue.length === 1) {
|
447 | gsap.ticker.add(_renderQueueTick);
|
448 | }
|
449 | },
|
450 | _renderQueueTimeout = function _renderQueueTimeout() {
|
451 | return !_renderQueue.length && gsap.ticker.remove(_renderQueueTick);
|
452 | },
|
453 | _removeFromRenderQueue = function _removeFromRenderQueue(func) {
|
454 | var i = _renderQueue.length;
|
455 |
|
456 | while (i--) {
|
457 | if (_renderQueue[i] === func) {
|
458 | _renderQueue.splice(i, 1);
|
459 | }
|
460 | }
|
461 |
|
462 | gsap.to(_renderQueueTimeout, {
|
463 | overwrite: true,
|
464 | delay: 15,
|
465 | duration: 0,
|
466 | onComplete: _renderQueueTimeout,
|
467 | data: "_draggable"
|
468 | });
|
469 | },
|
470 | _setDefaults = function _setDefaults(obj, defaults) {
|
471 | for (var p in defaults) {
|
472 | if (!(p in obj)) {
|
473 | obj[p] = defaults[p];
|
474 | }
|
475 | }
|
476 |
|
477 | return obj;
|
478 | },
|
479 | _addListener = function _addListener(element, type, func, capture) {
|
480 | if (element.addEventListener) {
|
481 | var touchType = _touchEventLookup[type];
|
482 | capture = capture || (_supportsPassive ? {
|
483 | passive: false
|
484 | } : null);
|
485 | element.addEventListener(touchType || type, func, capture);
|
486 | touchType && type !== touchType && element.addEventListener(type, func, capture);
|
487 | }
|
488 | },
|
489 | _removeListener = function _removeListener(element, type, func) {
|
490 | if (element.removeEventListener) {
|
491 | var touchType = _touchEventLookup[type];
|
492 | element.removeEventListener(touchType || type, func);
|
493 | touchType && type !== touchType && element.removeEventListener(type, func);
|
494 | }
|
495 | },
|
496 | _preventDefault = function _preventDefault(event) {
|
497 | event.preventDefault && event.preventDefault();
|
498 | event.preventManipulation && event.preventManipulation();
|
499 | },
|
500 | _hasTouchID = function _hasTouchID(list, ID) {
|
501 | var i = list.length;
|
502 |
|
503 | while (i--) {
|
504 | if (list[i].identifier === ID) {
|
505 | return true;
|
506 | }
|
507 | }
|
508 | },
|
509 | _onMultiTouchDocumentEnd = function _onMultiTouchDocumentEnd(event) {
|
510 | _isMultiTouching = event.touches && _dragCount < event.touches.length;
|
511 |
|
512 | _removeListener(event.target, "touchend", _onMultiTouchDocumentEnd);
|
513 | },
|
514 | _onMultiTouchDocument = function _onMultiTouchDocument(event) {
|
515 | _isMultiTouching = event.touches && _dragCount < event.touches.length;
|
516 |
|
517 | _addListener(event.target, "touchend", _onMultiTouchDocumentEnd);
|
518 | },
|
519 | _getDocScrollTop$1 = function _getDocScrollTop(doc) {
|
520 | return _win$1.pageYOffset || doc.scrollTop || doc.documentElement.scrollTop || doc.body.scrollTop || 0;
|
521 | },
|
522 | _getDocScrollLeft$1 = function _getDocScrollLeft(doc) {
|
523 | return _win$1.pageXOffset || doc.scrollLeft || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0;
|
524 | },
|
525 | _addScrollListener = function _addScrollListener(e, callback) {
|
526 | _addListener(e, "scroll", callback);
|
527 |
|
528 | if (!_isRoot(e.parentNode)) {
|
529 | _addScrollListener(e.parentNode, callback);
|
530 | }
|
531 | },
|
532 | _removeScrollListener = function _removeScrollListener(e, callback) {
|
533 | _removeListener(e, "scroll", callback);
|
534 |
|
535 | if (!_isRoot(e.parentNode)) {
|
536 | _removeScrollListener(e.parentNode, callback);
|
537 | }
|
538 | },
|
539 | _isRoot = function _isRoot(e) {
|
540 | return !!(!e || e === _docElement$1 || e.nodeType === 9 || e === _doc$1.body || e === _win$1 || !e.nodeType || !e.parentNode);
|
541 | },
|
542 | _getMaxScroll = function _getMaxScroll(element, axis) {
|
543 | var dim = axis === "x" ? "Width" : "Height",
|
544 | scroll = "scroll" + dim,
|
545 | client = "client" + dim;
|
546 | return Math.max(0, _isRoot(element) ? Math.max(_docElement$1[scroll], _body$1[scroll]) - (_win$1["inner" + dim] || _docElement$1[client] || _body$1[client]) : element[scroll] - element[client]);
|
547 | },
|
548 | _recordMaxScrolls = function _recordMaxScrolls(e, skipCurrent) {
|
549 | var x = _getMaxScroll(e, "x"),
|
550 | y = _getMaxScroll(e, "y");
|
551 |
|
552 | if (_isRoot(e)) {
|
553 | e = _windowProxy;
|
554 | } else {
|
555 | _recordMaxScrolls(e.parentNode, skipCurrent);
|
556 | }
|
557 |
|
558 | e._gsMaxScrollX = x;
|
559 | e._gsMaxScrollY = y;
|
560 |
|
561 | if (!skipCurrent) {
|
562 | e._gsScrollX = e.scrollLeft || 0;
|
563 | e._gsScrollY = e.scrollTop || 0;
|
564 | }
|
565 | },
|
566 | _setStyle = function _setStyle(element, property, value) {
|
567 | var style = element.style;
|
568 |
|
569 | if (!style) {
|
570 | return;
|
571 | }
|
572 |
|
573 | if (_isUndefined(style[property])) {
|
574 | property = _checkPrefix(property, element) || property;
|
575 | }
|
576 |
|
577 | if (value == null) {
|
578 | style.removeProperty && style.removeProperty(property.replace(/([A-Z])/g, "-$1").toLowerCase());
|
579 | } else {
|
580 | style[property] = value;
|
581 | }
|
582 | },
|
583 | _getComputedStyle = function _getComputedStyle(element) {
|
584 | return _win$1.getComputedStyle(element instanceof Element ? element : element.host || (element.parentNode || {}).host || element);
|
585 | },
|
586 | _tempRect = {},
|
587 | _parseRect = function _parseRect(e) {
|
588 | if (e === _win$1) {
|
589 | _tempRect.left = _tempRect.top = 0;
|
590 | _tempRect.width = _tempRect.right = _docElement$1.clientWidth || e.innerWidth || _body$1.clientWidth || 0;
|
591 | _tempRect.height = _tempRect.bottom = (e.innerHeight || 0) - 20 < _docElement$1.clientHeight ? _docElement$1.clientHeight : e.innerHeight || _body$1.clientHeight || 0;
|
592 | return _tempRect;
|
593 | }
|
594 |
|
595 | var doc = e.ownerDocument || _doc$1,
|
596 | r = !_isUndefined(e.pageX) ? {
|
597 | left: e.pageX - _getDocScrollLeft$1(doc),
|
598 | top: e.pageY - _getDocScrollTop$1(doc),
|
599 | right: e.pageX - _getDocScrollLeft$1(doc) + 1,
|
600 | bottom: e.pageY - _getDocScrollTop$1(doc) + 1
|
601 | } : !e.nodeType && !_isUndefined(e.left) && !_isUndefined(e.top) ? e : _toArray(e)[0].getBoundingClientRect();
|
602 |
|
603 | if (_isUndefined(r.right) && !_isUndefined(r.width)) {
|
604 | r.right = r.left + r.width;
|
605 | r.bottom = r.top + r.height;
|
606 | } else if (_isUndefined(r.width)) {
|
607 | r = {
|
608 | width: r.right - r.left,
|
609 | height: r.bottom - r.top,
|
610 | right: r.right,
|
611 | left: r.left,
|
612 | bottom: r.bottom,
|
613 | top: r.top
|
614 | };
|
615 | }
|
616 |
|
617 | return r;
|
618 | },
|
619 | _dispatchEvent = function _dispatchEvent(target, type, callbackName) {
|
620 | var vars = target.vars,
|
621 | callback = vars[callbackName],
|
622 | listeners = target._listeners[type],
|
623 | result;
|
624 |
|
625 | if (_isFunction(callback)) {
|
626 | result = callback.apply(vars.callbackScope || target, vars[callbackName + "Params"] || [target.pointerEvent]);
|
627 | }
|
628 |
|
629 | if (listeners && target.dispatchEvent(type) === false) {
|
630 | result = false;
|
631 | }
|
632 |
|
633 | return result;
|
634 | },
|
635 | _getBounds = function _getBounds(target, context) {
|
636 | var e = _toArray(target)[0],
|
637 | top,
|
638 | left,
|
639 | offset;
|
640 |
|
641 | if (!e.nodeType && e !== _win$1) {
|
642 | if (!_isUndefined(target.left)) {
|
643 | offset = {
|
644 | x: 0,
|
645 | y: 0
|
646 | };
|
647 | return {
|
648 | left: target.left - offset.x,
|
649 | top: target.top - offset.y,
|
650 | width: target.width,
|
651 | height: target.height
|
652 | };
|
653 | }
|
654 |
|
655 | left = target.min || target.minX || target.minRotation || 0;
|
656 | top = target.min || target.minY || 0;
|
657 | return {
|
658 | left: left,
|
659 | top: top,
|
660 | width: (target.max || target.maxX || target.maxRotation || 0) - left,
|
661 | height: (target.max || target.maxY || 0) - top
|
662 | };
|
663 | }
|
664 |
|
665 | return _getElementBounds(e, context);
|
666 | },
|
667 | _point1 = {},
|
668 | _getElementBounds = function _getElementBounds(element, context) {
|
669 | context = _toArray(context)[0];
|
670 | var isSVG = element.getBBox && element.ownerSVGElement,
|
671 | doc = element.ownerDocument || _doc$1,
|
672 | left,
|
673 | right,
|
674 | top,
|
675 | bottom,
|
676 | matrix,
|
677 | p1,
|
678 | p2,
|
679 | p3,
|
680 | p4,
|
681 | bbox,
|
682 | width,
|
683 | height,
|
684 | cs,
|
685 | contextParent;
|
686 |
|
687 | if (element === _win$1) {
|
688 | top = _getDocScrollTop$1(doc);
|
689 | left = _getDocScrollLeft$1(doc);
|
690 | right = left + (doc.documentElement.clientWidth || element.innerWidth || doc.body.clientWidth || 0);
|
691 | bottom = top + ((element.innerHeight || 0) - 20 < doc.documentElement.clientHeight ? doc.documentElement.clientHeight : element.innerHeight || doc.body.clientHeight || 0);
|
692 | } else if (context === _win$1 || _isUndefined(context)) {
|
693 | return element.getBoundingClientRect();
|
694 | } else {
|
695 | left = top = 0;
|
696 |
|
697 | if (isSVG) {
|
698 | bbox = element.getBBox();
|
699 | width = bbox.width;
|
700 | height = bbox.height;
|
701 | } else {
|
702 | if (element.viewBox && (bbox = element.viewBox.baseVal)) {
|
703 | left = bbox.x || 0;
|
704 | top = bbox.y || 0;
|
705 | width = bbox.width;
|
706 | height = bbox.height;
|
707 | }
|
708 |
|
709 | if (!width) {
|
710 | cs = _getComputedStyle(element);
|
711 | bbox = cs.boxSizing === "border-box";
|
712 | width = (parseFloat(cs.width) || element.clientWidth || 0) + (bbox ? 0 : parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth));
|
713 | height = (parseFloat(cs.height) || element.clientHeight || 0) + (bbox ? 0 : parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth));
|
714 | }
|
715 | }
|
716 |
|
717 | right = width;
|
718 | bottom = height;
|
719 | }
|
720 |
|
721 | if (element === context) {
|
722 | return {
|
723 | left: left,
|
724 | top: top,
|
725 | width: right - left,
|
726 | height: bottom - top
|
727 | };
|
728 | }
|
729 |
|
730 | matrix = getGlobalMatrix(context, true).multiply(getGlobalMatrix(element));
|
731 | p1 = matrix.apply({
|
732 | x: left,
|
733 | y: top
|
734 | });
|
735 | p2 = matrix.apply({
|
736 | x: right,
|
737 | y: top
|
738 | });
|
739 | p3 = matrix.apply({
|
740 | x: right,
|
741 | y: bottom
|
742 | });
|
743 | p4 = matrix.apply({
|
744 | x: left,
|
745 | y: bottom
|
746 | });
|
747 | left = Math.min(p1.x, p2.x, p3.x, p4.x);
|
748 | top = Math.min(p1.y, p2.y, p3.y, p4.y);
|
749 | contextParent = context.parentNode || {};
|
750 | return {
|
751 | left: left + (contextParent.scrollLeft || 0),
|
752 | top: top + (contextParent.scrollTop || 0),
|
753 | width: Math.max(p1.x, p2.x, p3.x, p4.x) - left,
|
754 | height: Math.max(p1.y, p2.y, p3.y, p4.y) - top
|
755 | };
|
756 | },
|
757 | _parseInertia = function _parseInertia(draggable, snap, max, min, factor, forceZeroVelocity) {
|
758 | var vars = {},
|
759 | a,
|
760 | i,
|
761 | l;
|
762 |
|
763 | if (snap) {
|
764 | if (factor !== 1 && snap instanceof Array) {
|
765 | vars.end = a = [];
|
766 | l = snap.length;
|
767 |
|
768 | if (_isObject(snap[0])) {
|
769 | for (i = 0; i < l; i++) {
|
770 | a[i] = _copy(snap[i], factor);
|
771 | }
|
772 | } else {
|
773 | for (i = 0; i < l; i++) {
|
774 | a[i] = snap[i] * factor;
|
775 | }
|
776 | }
|
777 |
|
778 | max += 1.1;
|
779 | min -= 1.1;
|
780 | } else if (_isFunction(snap)) {
|
781 | vars.end = function (value) {
|
782 | var result = snap.call(draggable, value),
|
783 | copy,
|
784 | p;
|
785 |
|
786 | if (factor !== 1) {
|
787 | if (_isObject(result)) {
|
788 | copy = {};
|
789 |
|
790 | for (p in result) {
|
791 | copy[p] = result[p] * factor;
|
792 | }
|
793 |
|
794 | result = copy;
|
795 | } else {
|
796 | result *= factor;
|
797 | }
|
798 | }
|
799 |
|
800 | return result;
|
801 | };
|
802 | } else {
|
803 | vars.end = snap;
|
804 | }
|
805 | }
|
806 |
|
807 | if (max || max === 0) {
|
808 | vars.max = max;
|
809 | }
|
810 |
|
811 | if (min || min === 0) {
|
812 | vars.min = min;
|
813 | }
|
814 |
|
815 | if (forceZeroVelocity) {
|
816 | vars.velocity = 0;
|
817 | }
|
818 |
|
819 | return vars;
|
820 | },
|
821 | _isClickable = function _isClickable(element) {
|
822 | var data;
|
823 | return !element || !element.getAttribute || element === _body$1 ? false : (data = element.getAttribute("data-clickable")) === "true" || data !== "false" && (element.onclick || _clickableTagExp.test(element.nodeName + "") || element.getAttribute("contentEditable") === "true") ? true : _isClickable(element.parentNode);
|
824 | },
|
825 | _setSelectable = function _setSelectable(elements, selectable) {
|
826 | var i = elements.length,
|
827 | e;
|
828 |
|
829 | while (i--) {
|
830 | e = elements[i];
|
831 | e.ondragstart = e.onselectstart = selectable ? null : _emptyFunc;
|
832 | gsap.set(e, {
|
833 | lazy: true,
|
834 | userSelect: selectable ? "text" : "none"
|
835 | });
|
836 | }
|
837 | },
|
838 | _isFixed$1 = function _isFixed(element) {
|
839 | if (_getComputedStyle(element).position === "fixed") {
|
840 | return true;
|
841 | }
|
842 |
|
843 | element = element.parentNode;
|
844 |
|
845 | if (element && element.nodeType === 1) {
|
846 | return _isFixed(element);
|
847 | }
|
848 | },
|
849 | _supports3D,
|
850 | _addPaddingBR,
|
851 | ScrollProxy = function ScrollProxy(element, vars) {
|
852 | element = gsap.utils.toArray(element)[0];
|
853 | vars = vars || {};
|
854 | var content = document.createElement("div"),
|
855 | style = content.style,
|
856 | node = element.firstChild,
|
857 | offsetTop = 0,
|
858 | offsetLeft = 0,
|
859 | prevTop = element.scrollTop,
|
860 | prevLeft = element.scrollLeft,
|
861 | scrollWidth = element.scrollWidth,
|
862 | scrollHeight = element.scrollHeight,
|
863 | extraPadRight = 0,
|
864 | maxLeft = 0,
|
865 | maxTop = 0,
|
866 | elementWidth,
|
867 | elementHeight,
|
868 | contentHeight,
|
869 | nextNode,
|
870 | transformStart,
|
871 | transformEnd;
|
872 |
|
873 | if (_supports3D && vars.force3D !== false) {
|
874 | transformStart = "translate3d(";
|
875 | transformEnd = "px,0px)";
|
876 | } else if (_transformProp$1) {
|
877 | transformStart = "translate(";
|
878 | transformEnd = "px)";
|
879 | }
|
880 |
|
881 | this.scrollTop = function (value, force) {
|
882 | if (!arguments.length) {
|
883 | return -this.top();
|
884 | }
|
885 |
|
886 | this.top(-value, force);
|
887 | };
|
888 |
|
889 | this.scrollLeft = function (value, force) {
|
890 | if (!arguments.length) {
|
891 | return -this.left();
|
892 | }
|
893 |
|
894 | this.left(-value, force);
|
895 | };
|
896 |
|
897 | this.left = function (value, force) {
|
898 | if (!arguments.length) {
|
899 | return -(element.scrollLeft + offsetLeft);
|
900 | }
|
901 |
|
902 | var dif = element.scrollLeft - prevLeft,
|
903 | oldOffset = offsetLeft;
|
904 |
|
905 | if ((dif > 2 || dif < -2) && !force) {
|
906 | prevLeft = element.scrollLeft;
|
907 | gsap.killTweensOf(this, {
|
908 | left: 1,
|
909 | scrollLeft: 1
|
910 | });
|
911 | this.left(-prevLeft);
|
912 |
|
913 | if (vars.onKill) {
|
914 | vars.onKill();
|
915 | }
|
916 |
|
917 | return;
|
918 | }
|
919 |
|
920 | value = -value;
|
921 |
|
922 | if (value < 0) {
|
923 | offsetLeft = value - 0.5 | 0;
|
924 | value = 0;
|
925 | } else if (value > maxLeft) {
|
926 | offsetLeft = value - maxLeft | 0;
|
927 | value = maxLeft;
|
928 | } else {
|
929 | offsetLeft = 0;
|
930 | }
|
931 |
|
932 | if (offsetLeft || oldOffset) {
|
933 | if (!this._skip) {
|
934 | style[_transformProp$1] = transformStart + -offsetLeft + "px," + -offsetTop + transformEnd;
|
935 | }
|
936 |
|
937 | if (offsetLeft + extraPadRight >= 0) {
|
938 | style.paddingRight = offsetLeft + extraPadRight + "px";
|
939 | }
|
940 | }
|
941 |
|
942 | element.scrollLeft = value | 0;
|
943 | prevLeft = element.scrollLeft;
|
944 | };
|
945 |
|
946 | this.top = function (value, force) {
|
947 | if (!arguments.length) {
|
948 | return -(element.scrollTop + offsetTop);
|
949 | }
|
950 |
|
951 | var dif = element.scrollTop - prevTop,
|
952 | oldOffset = offsetTop;
|
953 |
|
954 | if ((dif > 2 || dif < -2) && !force) {
|
955 | prevTop = element.scrollTop;
|
956 | gsap.killTweensOf(this, {
|
957 | top: 1,
|
958 | scrollTop: 1
|
959 | });
|
960 | this.top(-prevTop);
|
961 |
|
962 | if (vars.onKill) {
|
963 | vars.onKill();
|
964 | }
|
965 |
|
966 | return;
|
967 | }
|
968 |
|
969 | value = -value;
|
970 |
|
971 | if (value < 0) {
|
972 | offsetTop = value - 0.5 | 0;
|
973 | value = 0;
|
974 | } else if (value > maxTop) {
|
975 | offsetTop = value - maxTop | 0;
|
976 | value = maxTop;
|
977 | } else {
|
978 | offsetTop = 0;
|
979 | }
|
980 |
|
981 | if (offsetTop || oldOffset) {
|
982 | if (!this._skip) {
|
983 | style[_transformProp$1] = transformStart + -offsetLeft + "px," + -offsetTop + transformEnd;
|
984 | }
|
985 | }
|
986 |
|
987 | element.scrollTop = value | 0;
|
988 | prevTop = element.scrollTop;
|
989 | };
|
990 |
|
991 | this.maxScrollTop = function () {
|
992 | return maxTop;
|
993 | };
|
994 |
|
995 | this.maxScrollLeft = function () {
|
996 | return maxLeft;
|
997 | };
|
998 |
|
999 | this.disable = function () {
|
1000 | node = content.firstChild;
|
1001 |
|
1002 | while (node) {
|
1003 | nextNode = node.nextSibling;
|
1004 | element.appendChild(node);
|
1005 | node = nextNode;
|
1006 | }
|
1007 |
|
1008 | if (element === content.parentNode) {
|
1009 | element.removeChild(content);
|
1010 | }
|
1011 | };
|
1012 |
|
1013 | this.enable = function () {
|
1014 | node = element.firstChild;
|
1015 |
|
1016 | if (node === content) {
|
1017 | return;
|
1018 | }
|
1019 |
|
1020 | while (node) {
|
1021 | nextNode = node.nextSibling;
|
1022 | content.appendChild(node);
|
1023 | node = nextNode;
|
1024 | }
|
1025 |
|
1026 | element.appendChild(content);
|
1027 | this.calibrate();
|
1028 | };
|
1029 |
|
1030 | this.calibrate = function (force) {
|
1031 | var widthMatches = element.clientWidth === elementWidth,
|
1032 | cs,
|
1033 | x,
|
1034 | y;
|
1035 | prevTop = element.scrollTop;
|
1036 | prevLeft = element.scrollLeft;
|
1037 |
|
1038 | if (widthMatches && element.clientHeight === elementHeight && content.offsetHeight === contentHeight && scrollWidth === element.scrollWidth && scrollHeight === element.scrollHeight && !force) {
|
1039 | return;
|
1040 | }
|
1041 |
|
1042 | if (offsetTop || offsetLeft) {
|
1043 | x = this.left();
|
1044 | y = this.top();
|
1045 | this.left(-element.scrollLeft);
|
1046 | this.top(-element.scrollTop);
|
1047 | }
|
1048 |
|
1049 | cs = _getComputedStyle(element);
|
1050 |
|
1051 | if (!widthMatches || force) {
|
1052 | style.display = "block";
|
1053 | style.width = "auto";
|
1054 | style.paddingRight = "0px";
|
1055 | extraPadRight = Math.max(0, element.scrollWidth - element.clientWidth);
|
1056 |
|
1057 | if (extraPadRight) {
|
1058 | extraPadRight += parseFloat(cs.paddingLeft) + (_addPaddingBR ? parseFloat(cs.paddingRight) : 0);
|
1059 | }
|
1060 | }
|
1061 |
|
1062 | style.display = "inline-block";
|
1063 | style.position = "relative";
|
1064 | style.overflow = "visible";
|
1065 | style.verticalAlign = "top";
|
1066 | style.boxSizing = "content-box";
|
1067 | style.width = "100%";
|
1068 | style.paddingRight = extraPadRight + "px";
|
1069 |
|
1070 | if (_addPaddingBR) {
|
1071 | style.paddingBottom = cs.paddingBottom;
|
1072 | }
|
1073 |
|
1074 | elementWidth = element.clientWidth;
|
1075 | elementHeight = element.clientHeight;
|
1076 | scrollWidth = element.scrollWidth;
|
1077 | scrollHeight = element.scrollHeight;
|
1078 | maxLeft = element.scrollWidth - elementWidth;
|
1079 | maxTop = element.scrollHeight - elementHeight;
|
1080 | contentHeight = content.offsetHeight;
|
1081 | style.display = "block";
|
1082 |
|
1083 | if (x || y) {
|
1084 | this.left(x);
|
1085 | this.top(y);
|
1086 | }
|
1087 | };
|
1088 |
|
1089 | this.content = content;
|
1090 | this.element = element;
|
1091 | this._skip = false;
|
1092 | this.enable();
|
1093 | },
|
1094 | _initCore = function _initCore(required) {
|
1095 | if (_windowExists() && document.body) {
|
1096 | var nav = window && window.navigator;
|
1097 | _win$1 = window;
|
1098 | _doc$1 = document;
|
1099 | _docElement$1 = _doc$1.documentElement;
|
1100 | _body$1 = _doc$1.body;
|
1101 | _tempDiv = _createElement("div");
|
1102 | _supportsPointer = !!window.PointerEvent;
|
1103 | _placeholderDiv = _createElement("div");
|
1104 | _placeholderDiv.style.cssText = "visibility:hidden;height:1px;top:-1px;pointer-events:none;position:relative;clear:both;cursor:grab";
|
1105 | _defaultCursor = _placeholderDiv.style.cursor === "grab" ? "grab" : "move";
|
1106 | _isAndroid = nav && nav.userAgent.toLowerCase().indexOf("android") !== -1;
|
1107 | _isTouchDevice = "ontouchstart" in _docElement$1 && "orientation" in _win$1 || nav && (nav.MaxTouchPoints > 0 || nav.msMaxTouchPoints > 0);
|
1108 |
|
1109 | _addPaddingBR = function () {
|
1110 | var div = _createElement("div"),
|
1111 | child = _createElement("div"),
|
1112 | childStyle = child.style,
|
1113 | parent = _body$1,
|
1114 | val;
|
1115 |
|
1116 | childStyle.display = "inline-block";
|
1117 | childStyle.position = "relative";
|
1118 | div.style.cssText = child.innerHTML = "width:90px;height:40px;padding:10px;overflow:auto;visibility:hidden";
|
1119 | div.appendChild(child);
|
1120 | parent.appendChild(div);
|
1121 | val = child.offsetHeight + 18 > div.scrollHeight;
|
1122 | parent.removeChild(div);
|
1123 | return val;
|
1124 | }();
|
1125 |
|
1126 | _touchEventLookup = function (types) {
|
1127 | var standard = types.split(","),
|
1128 | converted = ("onpointerdown" in _tempDiv ? "pointerdown,pointermove,pointerup,pointercancel" : "onmspointerdown" in _tempDiv ? "MSPointerDown,MSPointerMove,MSPointerUp,MSPointerCancel" : types).split(","),
|
1129 | obj = {},
|
1130 | i = 4;
|
1131 |
|
1132 | while (--i > -1) {
|
1133 | obj[standard[i]] = converted[i];
|
1134 | obj[converted[i]] = standard[i];
|
1135 | }
|
1136 |
|
1137 | try {
|
1138 | _docElement$1.addEventListener("test", null, Object.defineProperty({}, "passive", {
|
1139 | get: function get() {
|
1140 | _supportsPassive = 1;
|
1141 | }
|
1142 | }));
|
1143 | } catch (e) {}
|
1144 |
|
1145 | return obj;
|
1146 | }("touchstart,touchmove,touchend,touchcancel");
|
1147 |
|
1148 | _addListener(_doc$1, "touchcancel", _emptyFunc);
|
1149 |
|
1150 | _addListener(_win$1, "touchmove", _emptyFunc);
|
1151 |
|
1152 | _body$1 && _body$1.addEventListener("touchstart", _emptyFunc);
|
1153 |
|
1154 | _addListener(_doc$1, "contextmenu", function () {
|
1155 | for (var p in _lookup) {
|
1156 | if (_lookup[p].isPressed) {
|
1157 | _lookup[p].endDrag();
|
1158 | }
|
1159 | }
|
1160 | });
|
1161 |
|
1162 | gsap = _coreInitted = _getGSAP();
|
1163 | }
|
1164 |
|
1165 | if (gsap) {
|
1166 | InertiaPlugin = gsap.plugins.inertia;
|
1167 | _checkPrefix = gsap.utils.checkPrefix;
|
1168 | _transformProp$1 = _checkPrefix(_transformProp$1);
|
1169 | _transformOriginProp$1 = _checkPrefix(_transformOriginProp$1);
|
1170 | _toArray = gsap.utils.toArray;
|
1171 | _supports3D = !!_checkPrefix("perspective");
|
1172 | } else if (required) {
|
1173 | console.warn("Please gsap.registerPlugin(Draggable)");
|
1174 | }
|
1175 | };
|
1176 |
|
1177 | var EventDispatcher = function () {
|
1178 | function EventDispatcher(target) {
|
1179 | this._listeners = {};
|
1180 | this.target = target || this;
|
1181 | }
|
1182 |
|
1183 | var _proto = EventDispatcher.prototype;
|
1184 |
|
1185 | _proto.addEventListener = function addEventListener(type, callback) {
|
1186 | var list = this._listeners[type] || (this._listeners[type] = []);
|
1187 |
|
1188 | if (!~list.indexOf(callback)) {
|
1189 | list.push(callback);
|
1190 | }
|
1191 | };
|
1192 |
|
1193 | _proto.removeEventListener = function removeEventListener(type, callback) {
|
1194 | var list = this._listeners[type],
|
1195 | i = list && list.indexOf(callback) || -1;
|
1196 | i > -1 && list.splice(i, 1);
|
1197 | };
|
1198 |
|
1199 | _proto.dispatchEvent = function dispatchEvent(type) {
|
1200 | var _this = this;
|
1201 |
|
1202 | var result;
|
1203 | (this._listeners[type] || []).forEach(function (callback) {
|
1204 | return callback.call(_this, {
|
1205 | type: type,
|
1206 | target: _this.target
|
1207 | }) === false && (result = false);
|
1208 | });
|
1209 | return result;
|
1210 | };
|
1211 |
|
1212 | return EventDispatcher;
|
1213 | }();
|
1214 |
|
1215 | var Draggable = function (_EventDispatcher) {
|
1216 | _inheritsLoose(Draggable, _EventDispatcher);
|
1217 |
|
1218 | function Draggable(target, vars) {
|
1219 | var _this2;
|
1220 |
|
1221 | _this2 = _EventDispatcher.call(this) || this;
|
1222 |
|
1223 | if (!gsap) {
|
1224 | _initCore(1);
|
1225 | }
|
1226 |
|
1227 | target = _toArray(target)[0];
|
1228 |
|
1229 | if (!InertiaPlugin) {
|
1230 | InertiaPlugin = gsap.plugins.inertia;
|
1231 | }
|
1232 |
|
1233 | _this2.vars = vars = _copy(vars || {});
|
1234 | _this2.target = target;
|
1235 | _this2.x = _this2.y = _this2.rotation = 0;
|
1236 | _this2.dragResistance = parseFloat(vars.dragResistance) || 0;
|
1237 | _this2.edgeResistance = isNaN(vars.edgeResistance) ? 1 : parseFloat(vars.edgeResistance) || 0;
|
1238 | _this2.lockAxis = vars.lockAxis;
|
1239 | _this2.autoScroll = vars.autoScroll || 0;
|
1240 | _this2.lockedAxis = null;
|
1241 | _this2.allowEventDefault = !!vars.allowEventDefault;
|
1242 | gsap.getProperty(target, "x");
|
1243 |
|
1244 | var type = (vars.type || "x,y").toLowerCase(),
|
1245 | xyMode = ~type.indexOf("x") || ~type.indexOf("y"),
|
1246 | rotationMode = type.indexOf("rotation") !== -1,
|
1247 | xProp = rotationMode ? "rotation" : xyMode ? "x" : "left",
|
1248 | yProp = xyMode ? "y" : "top",
|
1249 | allowX = !!(~type.indexOf("x") || ~type.indexOf("left") || type === "scroll"),
|
1250 | allowY = !!(~type.indexOf("y") || ~type.indexOf("top") || type === "scroll"),
|
1251 | minimumMovement = vars.minimumMovement || 2,
|
1252 | self = _assertThisInitialized(_this2),
|
1253 | triggers = _toArray(vars.trigger || vars.handle || target),
|
1254 | killProps = {},
|
1255 | dragEndTime = 0,
|
1256 | checkAutoScrollBounds = false,
|
1257 | autoScrollMarginTop = vars.autoScrollMarginTop || 40,
|
1258 | autoScrollMarginRight = vars.autoScrollMarginRight || 40,
|
1259 | autoScrollMarginBottom = vars.autoScrollMarginBottom || 40,
|
1260 | autoScrollMarginLeft = vars.autoScrollMarginLeft || 40,
|
1261 | isClickable = vars.clickableTest || _isClickable,
|
1262 | clickTime = 0,
|
1263 | gsCache = target._gsap || gsap.core.getCache(target),
|
1264 | isFixed = _isFixed$1(target),
|
1265 | getPropAsNum = function getPropAsNum(property, unit) {
|
1266 | return parseFloat(gsCache.get(target, property, unit));
|
1267 | },
|
1268 | ownerDoc = target.ownerDocument || _doc$1,
|
1269 | enabled,
|
1270 | scrollProxy,
|
1271 | startPointerX,
|
1272 | startPointerY,
|
1273 | startElementX,
|
1274 | startElementY,
|
1275 | hasBounds,
|
1276 | hasDragCallback,
|
1277 | hasMoveCallback,
|
1278 | maxX,
|
1279 | minX,
|
1280 | maxY,
|
1281 | minY,
|
1282 | touch,
|
1283 | touchID,
|
1284 | rotationOrigin,
|
1285 | dirty,
|
1286 | old,
|
1287 | snapX,
|
1288 | snapY,
|
1289 | snapXY,
|
1290 | isClicking,
|
1291 | touchEventTarget,
|
1292 | matrix,
|
1293 | interrupted,
|
1294 | allowNativeTouchScrolling,
|
1295 | touchDragAxis,
|
1296 | isDispatching,
|
1297 | clickDispatch,
|
1298 | trustedClickDispatch,
|
1299 | isPreventingDefault,
|
1300 | onContextMenu = function onContextMenu(e) {
|
1301 | _preventDefault(e);
|
1302 |
|
1303 | e.stopImmediatePropagation && e.stopImmediatePropagation();
|
1304 | return false;
|
1305 | },
|
1306 | render = function render(suppressEvents) {
|
1307 | if (self.autoScroll && self.isDragging && (checkAutoScrollBounds || dirty)) {
|
1308 | var e = target,
|
1309 | autoScrollFactor = self.autoScroll * 15,
|
1310 | parent,
|
1311 | isRoot,
|
1312 | rect,
|
1313 | pointerX,
|
1314 | pointerY,
|
1315 | changeX,
|
1316 | changeY,
|
1317 | gap;
|
1318 | checkAutoScrollBounds = false;
|
1319 | _windowProxy.scrollTop = _win$1.pageYOffset != null ? _win$1.pageYOffset : ownerDoc.documentElement.scrollTop != null ? ownerDoc.documentElement.scrollTop : ownerDoc.body.scrollTop;
|
1320 | _windowProxy.scrollLeft = _win$1.pageXOffset != null ? _win$1.pageXOffset : ownerDoc.documentElement.scrollLeft != null ? ownerDoc.documentElement.scrollLeft : ownerDoc.body.scrollLeft;
|
1321 | pointerX = self.pointerX - _windowProxy.scrollLeft;
|
1322 | pointerY = self.pointerY - _windowProxy.scrollTop;
|
1323 |
|
1324 | while (e && !isRoot) {
|
1325 | isRoot = _isRoot(e.parentNode);
|
1326 | parent = isRoot ? _windowProxy : e.parentNode;
|
1327 | rect = isRoot ? {
|
1328 | bottom: Math.max(_docElement$1.clientHeight, _win$1.innerHeight || 0),
|
1329 | right: Math.max(_docElement$1.clientWidth, _win$1.innerWidth || 0),
|
1330 | left: 0,
|
1331 | top: 0
|
1332 | } : parent.getBoundingClientRect();
|
1333 | changeX = changeY = 0;
|
1334 |
|
1335 | if (allowY) {
|
1336 | gap = parent._gsMaxScrollY - parent.scrollTop;
|
1337 |
|
1338 | if (gap < 0) {
|
1339 | changeY = gap;
|
1340 | } else if (pointerY > rect.bottom - autoScrollMarginBottom && gap) {
|
1341 | checkAutoScrollBounds = true;
|
1342 | changeY = Math.min(gap, autoScrollFactor * (1 - Math.max(0, rect.bottom - pointerY) / autoScrollMarginBottom) | 0);
|
1343 | } else if (pointerY < rect.top + autoScrollMarginTop && parent.scrollTop) {
|
1344 | checkAutoScrollBounds = true;
|
1345 | changeY = -Math.min(parent.scrollTop, autoScrollFactor * (1 - Math.max(0, pointerY - rect.top) / autoScrollMarginTop) | 0);
|
1346 | }
|
1347 |
|
1348 | if (changeY) {
|
1349 | parent.scrollTop += changeY;
|
1350 | }
|
1351 | }
|
1352 |
|
1353 | if (allowX) {
|
1354 | gap = parent._gsMaxScrollX - parent.scrollLeft;
|
1355 |
|
1356 | if (gap < 0) {
|
1357 | changeX = gap;
|
1358 | } else if (pointerX > rect.right - autoScrollMarginRight && gap) {
|
1359 | checkAutoScrollBounds = true;
|
1360 | changeX = Math.min(gap, autoScrollFactor * (1 - Math.max(0, rect.right - pointerX) / autoScrollMarginRight) | 0);
|
1361 | } else if (pointerX < rect.left + autoScrollMarginLeft && parent.scrollLeft) {
|
1362 | checkAutoScrollBounds = true;
|
1363 | changeX = -Math.min(parent.scrollLeft, autoScrollFactor * (1 - Math.max(0, pointerX - rect.left) / autoScrollMarginLeft) | 0);
|
1364 | }
|
1365 |
|
1366 | if (changeX) {
|
1367 | parent.scrollLeft += changeX;
|
1368 | }
|
1369 | }
|
1370 |
|
1371 | if (isRoot && (changeX || changeY)) {
|
1372 | _win$1.scrollTo(parent.scrollLeft, parent.scrollTop);
|
1373 |
|
1374 | setPointerPosition(self.pointerX + changeX, self.pointerY + changeY);
|
1375 | }
|
1376 |
|
1377 | e = parent;
|
1378 | }
|
1379 | }
|
1380 |
|
1381 | if (dirty) {
|
1382 | var x = self.x,
|
1383 | y = self.y;
|
1384 |
|
1385 | if (rotationMode) {
|
1386 | self.deltaX = x - parseFloat(gsCache.rotation);
|
1387 | self.rotation = x;
|
1388 | gsCache.rotation = x + "deg";
|
1389 | gsCache.renderTransform(1, gsCache);
|
1390 | } else {
|
1391 | if (scrollProxy) {
|
1392 | if (allowY) {
|
1393 | self.deltaY = y - scrollProxy.top();
|
1394 | scrollProxy.top(y);
|
1395 | }
|
1396 |
|
1397 | if (allowX) {
|
1398 | self.deltaX = x - scrollProxy.left();
|
1399 | scrollProxy.left(x);
|
1400 | }
|
1401 | } else if (xyMode) {
|
1402 | if (allowY) {
|
1403 | self.deltaY = y - parseFloat(gsCache.y);
|
1404 | gsCache.y = y + "px";
|
1405 | }
|
1406 |
|
1407 | if (allowX) {
|
1408 | self.deltaX = x - parseFloat(gsCache.x);
|
1409 | gsCache.x = x + "px";
|
1410 | }
|
1411 |
|
1412 | gsCache.renderTransform(1, gsCache);
|
1413 | } else {
|
1414 | if (allowY) {
|
1415 | self.deltaY = y - parseFloat(target.style.top || 0);
|
1416 | target.style.top = y + "px";
|
1417 | }
|
1418 |
|
1419 | if (allowX) {
|
1420 | self.deltaY = x - parseFloat(target.style.left || 0);
|
1421 | target.style.left = x + "px";
|
1422 | }
|
1423 | }
|
1424 | }
|
1425 |
|
1426 | if (hasDragCallback && !suppressEvents && !isDispatching) {
|
1427 | isDispatching = true;
|
1428 |
|
1429 | if (_dispatchEvent(self, "drag", "onDrag") === false) {
|
1430 | if (allowX) {
|
1431 | self.x -= self.deltaX;
|
1432 | }
|
1433 |
|
1434 | if (allowY) {
|
1435 | self.y -= self.deltaY;
|
1436 | }
|
1437 |
|
1438 | render(true);
|
1439 | }
|
1440 |
|
1441 | isDispatching = false;
|
1442 | }
|
1443 | }
|
1444 |
|
1445 | dirty = false;
|
1446 | },
|
1447 | syncXY = function syncXY(skipOnUpdate, skipSnap) {
|
1448 | var x = self.x,
|
1449 | y = self.y,
|
1450 | snappedValue,
|
1451 | cs;
|
1452 |
|
1453 | if (!target._gsap) {
|
1454 | gsCache = gsap.core.getCache(target);
|
1455 | }
|
1456 |
|
1457 | if (xyMode) {
|
1458 | self.x = parseFloat(gsCache.x);
|
1459 | self.y = parseFloat(gsCache.y);
|
1460 | } else if (rotationMode) {
|
1461 | self.x = self.rotation = parseFloat(gsCache.rotation);
|
1462 | } else if (scrollProxy) {
|
1463 | self.y = scrollProxy.top();
|
1464 | self.x = scrollProxy.left();
|
1465 | } else {
|
1466 | self.y = parseInt(target.style.top || (cs = _getComputedStyle(target)) && cs.top, 10) || 0;
|
1467 | self.x = parseInt(target.style.left || (cs || {}).left, 10) || 0;
|
1468 | }
|
1469 |
|
1470 | if ((snapX || snapY || snapXY) && !skipSnap && (self.isDragging || self.isThrowing)) {
|
1471 | if (snapXY) {
|
1472 | _temp1.x = self.x;
|
1473 | _temp1.y = self.y;
|
1474 | snappedValue = snapXY(_temp1);
|
1475 |
|
1476 | if (snappedValue.x !== self.x) {
|
1477 | self.x = snappedValue.x;
|
1478 | dirty = true;
|
1479 | }
|
1480 |
|
1481 | if (snappedValue.y !== self.y) {
|
1482 | self.y = snappedValue.y;
|
1483 | dirty = true;
|
1484 | }
|
1485 | }
|
1486 |
|
1487 | if (snapX) {
|
1488 | snappedValue = snapX(self.x);
|
1489 |
|
1490 | if (snappedValue !== self.x) {
|
1491 | self.x = snappedValue;
|
1492 |
|
1493 | if (rotationMode) {
|
1494 | self.rotation = snappedValue;
|
1495 | }
|
1496 |
|
1497 | dirty = true;
|
1498 | }
|
1499 | }
|
1500 |
|
1501 | if (snapY) {
|
1502 | snappedValue = snapY(self.y);
|
1503 |
|
1504 | if (snappedValue !== self.y) {
|
1505 | self.y = snappedValue;
|
1506 | }
|
1507 |
|
1508 | dirty = true;
|
1509 | }
|
1510 | }
|
1511 |
|
1512 | if (dirty) {
|
1513 | render(true);
|
1514 | }
|
1515 |
|
1516 | if (!skipOnUpdate) {
|
1517 | self.deltaX = self.x - x;
|
1518 | self.deltaY = self.y - y;
|
1519 |
|
1520 | _dispatchEvent(self, "throwupdate", "onThrowUpdate");
|
1521 | }
|
1522 | },
|
1523 | buildSnapFunc = function buildSnapFunc(snap, min, max, factor) {
|
1524 | if (min == null) {
|
1525 | min = -_bigNum;
|
1526 | }
|
1527 |
|
1528 | if (max == null) {
|
1529 | max = _bigNum;
|
1530 | }
|
1531 |
|
1532 | if (_isFunction(snap)) {
|
1533 | return function (n) {
|
1534 | var edgeTolerance = !self.isPressed ? 1 : 1 - self.edgeResistance;
|
1535 | return snap.call(self, n > max ? max + (n - max) * edgeTolerance : n < min ? min + (n - min) * edgeTolerance : n) * factor;
|
1536 | };
|
1537 | }
|
1538 |
|
1539 | if (_isArray(snap)) {
|
1540 | return function (n) {
|
1541 | var i = snap.length,
|
1542 | closest = 0,
|
1543 | absDif = _bigNum,
|
1544 | val,
|
1545 | dif;
|
1546 |
|
1547 | while (--i > -1) {
|
1548 | val = snap[i];
|
1549 | dif = val - n;
|
1550 |
|
1551 | if (dif < 0) {
|
1552 | dif = -dif;
|
1553 | }
|
1554 |
|
1555 | if (dif < absDif && val >= min && val <= max) {
|
1556 | closest = i;
|
1557 | absDif = dif;
|
1558 | }
|
1559 | }
|
1560 |
|
1561 | return snap[closest];
|
1562 | };
|
1563 | }
|
1564 |
|
1565 | return isNaN(snap) ? function (n) {
|
1566 | return n;
|
1567 | } : function () {
|
1568 | return snap * factor;
|
1569 | };
|
1570 | },
|
1571 | buildPointSnapFunc = function buildPointSnapFunc(snap, minX, maxX, minY, maxY, radius, factor) {
|
1572 | radius = radius && radius < _bigNum ? radius * radius : _bigNum;
|
1573 |
|
1574 | if (_isFunction(snap)) {
|
1575 | return function (point) {
|
1576 | var edgeTolerance = !self.isPressed ? 1 : 1 - self.edgeResistance,
|
1577 | x = point.x,
|
1578 | y = point.y,
|
1579 | result,
|
1580 | dx,
|
1581 | dy;
|
1582 | point.x = x = x > maxX ? maxX + (x - maxX) * edgeTolerance : x < minX ? minX + (x - minX) * edgeTolerance : x;
|
1583 | point.y = y = y > maxY ? maxY + (y - maxY) * edgeTolerance : y < minY ? minY + (y - minY) * edgeTolerance : y;
|
1584 | result = snap.call(self, point);
|
1585 |
|
1586 | if (result !== point) {
|
1587 | point.x = result.x;
|
1588 | point.y = result.y;
|
1589 | }
|
1590 |
|
1591 | if (factor !== 1) {
|
1592 | point.x *= factor;
|
1593 | point.y *= factor;
|
1594 | }
|
1595 |
|
1596 | if (radius < _bigNum) {
|
1597 | dx = point.x - x;
|
1598 | dy = point.y - y;
|
1599 |
|
1600 | if (dx * dx + dy * dy > radius) {
|
1601 | point.x = x;
|
1602 | point.y = y;
|
1603 | }
|
1604 | }
|
1605 |
|
1606 | return point;
|
1607 | };
|
1608 | }
|
1609 |
|
1610 | if (_isArray(snap)) {
|
1611 | return function (p) {
|
1612 | var i = snap.length,
|
1613 | closest = 0,
|
1614 | minDist = _bigNum,
|
1615 | x,
|
1616 | y,
|
1617 | point,
|
1618 | dist;
|
1619 |
|
1620 | while (--i > -1) {
|
1621 | point = snap[i];
|
1622 | x = point.x - p.x;
|
1623 | y = point.y - p.y;
|
1624 | dist = x * x + y * y;
|
1625 |
|
1626 | if (dist < minDist) {
|
1627 | closest = i;
|
1628 | minDist = dist;
|
1629 | }
|
1630 | }
|
1631 |
|
1632 | return minDist <= radius ? snap[closest] : p;
|
1633 | };
|
1634 | }
|
1635 |
|
1636 | return function (n) {
|
1637 | return n;
|
1638 | };
|
1639 | },
|
1640 | calculateBounds = function calculateBounds() {
|
1641 | var bounds, targetBounds, snap, snapIsRaw;
|
1642 | hasBounds = false;
|
1643 |
|
1644 | if (scrollProxy) {
|
1645 | scrollProxy.calibrate();
|
1646 | self.minX = minX = -scrollProxy.maxScrollLeft();
|
1647 | self.minY = minY = -scrollProxy.maxScrollTop();
|
1648 | self.maxX = maxX = self.maxY = maxY = 0;
|
1649 | hasBounds = true;
|
1650 | } else if (!!vars.bounds) {
|
1651 | bounds = _getBounds(vars.bounds, target.parentNode);
|
1652 |
|
1653 | if (rotationMode) {
|
1654 | self.minX = minX = bounds.left;
|
1655 | self.maxX = maxX = bounds.left + bounds.width;
|
1656 | self.minY = minY = self.maxY = maxY = 0;
|
1657 | } else if (!_isUndefined(vars.bounds.maxX) || !_isUndefined(vars.bounds.maxY)) {
|
1658 | bounds = vars.bounds;
|
1659 | self.minX = minX = bounds.minX;
|
1660 | self.minY = minY = bounds.minY;
|
1661 | self.maxX = maxX = bounds.maxX;
|
1662 | self.maxY = maxY = bounds.maxY;
|
1663 | } else {
|
1664 | targetBounds = _getBounds(target, target.parentNode);
|
1665 | self.minX = minX = Math.round(getPropAsNum(xProp, "px") + bounds.left - targetBounds.left - 0.5);
|
1666 | self.minY = minY = Math.round(getPropAsNum(yProp, "px") + bounds.top - targetBounds.top - 0.5);
|
1667 | self.maxX = maxX = Math.round(minX + (bounds.width - targetBounds.width));
|
1668 | self.maxY = maxY = Math.round(minY + (bounds.height - targetBounds.height));
|
1669 | }
|
1670 |
|
1671 | if (minX > maxX) {
|
1672 | self.minX = maxX;
|
1673 | self.maxX = maxX = minX;
|
1674 | minX = self.minX;
|
1675 | }
|
1676 |
|
1677 | if (minY > maxY) {
|
1678 | self.minY = maxY;
|
1679 | self.maxY = maxY = minY;
|
1680 | minY = self.minY;
|
1681 | }
|
1682 |
|
1683 | if (rotationMode) {
|
1684 | self.minRotation = minX;
|
1685 | self.maxRotation = maxX;
|
1686 | }
|
1687 |
|
1688 | hasBounds = true;
|
1689 | }
|
1690 |
|
1691 | if (vars.liveSnap) {
|
1692 | snap = vars.liveSnap === true ? vars.snap || {} : vars.liveSnap;
|
1693 | snapIsRaw = _isArray(snap) || _isFunction(snap);
|
1694 |
|
1695 | if (rotationMode) {
|
1696 | snapX = buildSnapFunc(snapIsRaw ? snap : snap.rotation, minX, maxX, 1);
|
1697 | snapY = null;
|
1698 | } else {
|
1699 | if (snap.points) {
|
1700 | snapXY = buildPointSnapFunc(snapIsRaw ? snap : snap.points, minX, maxX, minY, maxY, snap.radius, scrollProxy ? -1 : 1);
|
1701 | } else {
|
1702 | if (allowX) {
|
1703 | snapX = buildSnapFunc(snapIsRaw ? snap : snap.x || snap.left || snap.scrollLeft, minX, maxX, scrollProxy ? -1 : 1);
|
1704 | }
|
1705 |
|
1706 | if (allowY) {
|
1707 | snapY = buildSnapFunc(snapIsRaw ? snap : snap.y || snap.top || snap.scrollTop, minY, maxY, scrollProxy ? -1 : 1);
|
1708 | }
|
1709 | }
|
1710 | }
|
1711 | }
|
1712 | },
|
1713 | onThrowComplete = function onThrowComplete() {
|
1714 | self.isThrowing = false;
|
1715 |
|
1716 | _dispatchEvent(self, "throwcomplete", "onThrowComplete");
|
1717 | },
|
1718 | onThrowInterrupt = function onThrowInterrupt() {
|
1719 | self.isThrowing = false;
|
1720 | },
|
1721 | animate = function animate(inertia, forceZeroVelocity) {
|
1722 | var snap, snapIsRaw, tween, overshootTolerance;
|
1723 |
|
1724 | if (inertia && InertiaPlugin) {
|
1725 | if (inertia === true) {
|
1726 | snap = vars.snap || vars.liveSnap || {};
|
1727 | snapIsRaw = _isArray(snap) || _isFunction(snap);
|
1728 | inertia = {
|
1729 | resistance: (vars.throwResistance || vars.resistance || 1000) / (rotationMode ? 10 : 1)
|
1730 | };
|
1731 |
|
1732 | if (rotationMode) {
|
1733 | inertia.rotation = _parseInertia(self, snapIsRaw ? snap : snap.rotation, maxX, minX, 1, forceZeroVelocity);
|
1734 | } else {
|
1735 | if (allowX) {
|
1736 | inertia[xProp] = _parseInertia(self, snapIsRaw ? snap : snap.points || snap.x || snap.left, maxX, minX, scrollProxy ? -1 : 1, forceZeroVelocity || self.lockedAxis === "x");
|
1737 | }
|
1738 |
|
1739 | if (allowY) {
|
1740 | inertia[yProp] = _parseInertia(self, snapIsRaw ? snap : snap.points || snap.y || snap.top, maxY, minY, scrollProxy ? -1 : 1, forceZeroVelocity || self.lockedAxis === "y");
|
1741 | }
|
1742 |
|
1743 | if (snap.points || _isArray(snap) && _isObject(snap[0])) {
|
1744 | inertia.linkedProps = xProp + "," + yProp;
|
1745 | inertia.radius = snap.radius;
|
1746 | }
|
1747 | }
|
1748 | }
|
1749 |
|
1750 | self.isThrowing = true;
|
1751 | overshootTolerance = !isNaN(vars.overshootTolerance) ? vars.overshootTolerance : vars.edgeResistance === 1 ? 0 : 1 - self.edgeResistance + 0.2;
|
1752 |
|
1753 | if (!inertia.duration) {
|
1754 | inertia.duration = {
|
1755 | max: Math.max(vars.minDuration || 0, "maxDuration" in vars ? vars.maxDuration : 2),
|
1756 | min: !isNaN(vars.minDuration) ? vars.minDuration : overshootTolerance === 0 || _isObject(inertia) && inertia.resistance > 1000 ? 0 : 0.5,
|
1757 | overshoot: overshootTolerance
|
1758 | };
|
1759 | }
|
1760 |
|
1761 | self.tween = tween = gsap.to(scrollProxy || target, {
|
1762 | inertia: inertia,
|
1763 | data: "_draggable",
|
1764 | onComplete: onThrowComplete,
|
1765 | onInterrupt: onThrowInterrupt,
|
1766 | onUpdate: vars.fastMode ? _dispatchEvent : syncXY,
|
1767 | onUpdateParams: vars.fastMode ? [self, "onthrowupdate", "onThrowUpdate"] : snap && snap.radius ? [false, true] : []
|
1768 | });
|
1769 |
|
1770 | if (!vars.fastMode) {
|
1771 | if (scrollProxy) {
|
1772 | scrollProxy._skip = true;
|
1773 | }
|
1774 |
|
1775 | tween.render(1e9, true, true);
|
1776 | syncXY(true, true);
|
1777 | self.endX = self.x;
|
1778 | self.endY = self.y;
|
1779 |
|
1780 | if (rotationMode) {
|
1781 | self.endRotation = self.x;
|
1782 | }
|
1783 |
|
1784 | tween.play(0);
|
1785 | syncXY(true, true);
|
1786 |
|
1787 | if (scrollProxy) {
|
1788 | scrollProxy._skip = false;
|
1789 | }
|
1790 | }
|
1791 | } else if (hasBounds) {
|
1792 | self.applyBounds();
|
1793 | }
|
1794 | },
|
1795 | updateMatrix = function updateMatrix(shiftStart) {
|
1796 | var start = matrix,
|
1797 | p;
|
1798 | matrix = getGlobalMatrix(target.parentNode, true);
|
1799 |
|
1800 | if (shiftStart && self.isPressed && !matrix.equals(start || new Matrix2D())) {
|
1801 | p = start.inverse().apply({
|
1802 | x: startPointerX,
|
1803 | y: startPointerY
|
1804 | });
|
1805 | matrix.apply(p, p);
|
1806 | startPointerX = p.x;
|
1807 | startPointerY = p.y;
|
1808 | }
|
1809 |
|
1810 | if (matrix.equals(_identityMatrix$1)) {
|
1811 | matrix = null;
|
1812 | }
|
1813 | },
|
1814 | recordStartPositions = function recordStartPositions() {
|
1815 | var edgeTolerance = 1 - self.edgeResistance,
|
1816 | offsetX = isFixed ? _getDocScrollLeft$1(ownerDoc) : 0,
|
1817 | offsetY = isFixed ? _getDocScrollTop$1(ownerDoc) : 0,
|
1818 | parsedOrigin,
|
1819 | x,
|
1820 | y;
|
1821 | updateMatrix(false);
|
1822 |
|
1823 | if (matrix) {
|
1824 | _point1.x = self.pointerX - offsetX;
|
1825 | _point1.y = self.pointerY - offsetY;
|
1826 | matrix.apply(_point1, _point1);
|
1827 | startPointerX = _point1.x;
|
1828 | startPointerY = _point1.y;
|
1829 | }
|
1830 |
|
1831 | if (dirty) {
|
1832 | setPointerPosition(self.pointerX, self.pointerY);
|
1833 | render(true);
|
1834 | }
|
1835 |
|
1836 | if (scrollProxy) {
|
1837 | calculateBounds();
|
1838 | startElementY = scrollProxy.top();
|
1839 | startElementX = scrollProxy.left();
|
1840 | } else {
|
1841 | if (isTweening()) {
|
1842 | syncXY(true, true);
|
1843 | calculateBounds();
|
1844 | } else {
|
1845 | self.applyBounds();
|
1846 | }
|
1847 |
|
1848 | if (rotationMode) {
|
1849 | parsedOrigin = target.ownerSVGElement ? [gsCache.xOrigin - target.getBBox().x, gsCache.yOrigin - target.getBBox().y] : (_getComputedStyle(target)[_transformOriginProp$1] || "0 0").split(" ");
|
1850 | rotationOrigin = self.rotationOrigin = getGlobalMatrix(target).apply({
|
1851 | x: parseFloat(parsedOrigin[0]) || 0,
|
1852 | y: parseFloat(parsedOrigin[1]) || 0
|
1853 | });
|
1854 | syncXY(true, true);
|
1855 | x = self.pointerX - rotationOrigin.x - offsetX;
|
1856 | y = rotationOrigin.y - self.pointerY + offsetY;
|
1857 | startElementX = self.x;
|
1858 | startElementY = self.y = Math.atan2(y, x) * _RAD2DEG;
|
1859 | } else {
|
1860 | startElementY = getPropAsNum(yProp, "px");
|
1861 | startElementX = getPropAsNum(xProp, "px");
|
1862 | }
|
1863 | }
|
1864 |
|
1865 | if (hasBounds && edgeTolerance) {
|
1866 | if (startElementX > maxX) {
|
1867 | startElementX = maxX + (startElementX - maxX) / edgeTolerance;
|
1868 | } else if (startElementX < minX) {
|
1869 | startElementX = minX - (minX - startElementX) / edgeTolerance;
|
1870 | }
|
1871 |
|
1872 | if (!rotationMode) {
|
1873 | if (startElementY > maxY) {
|
1874 | startElementY = maxY + (startElementY - maxY) / edgeTolerance;
|
1875 | } else if (startElementY < minY) {
|
1876 | startElementY = minY - (minY - startElementY) / edgeTolerance;
|
1877 | }
|
1878 | }
|
1879 | }
|
1880 |
|
1881 | self.startX = startElementX;
|
1882 | self.startY = startElementY;
|
1883 | },
|
1884 | isTweening = function isTweening() {
|
1885 | return self.tween && self.tween.isActive();
|
1886 | },
|
1887 | removePlaceholder = function removePlaceholder() {
|
1888 | if (_placeholderDiv.parentNode && !isTweening() && !self.isDragging) {
|
1889 | _placeholderDiv.parentNode.removeChild(_placeholderDiv);
|
1890 | }
|
1891 | },
|
1892 | onPress = function onPress(e, force) {
|
1893 | var i;
|
1894 |
|
1895 | if (!enabled || self.isPressed || !e || (e.type === "mousedown" || e.type === "pointerdown") && !force && _getTime() - clickTime < 30 && _touchEventLookup[self.pointerEvent.type]) {
|
1896 | isPreventingDefault && e && enabled && _preventDefault(e);
|
1897 | return;
|
1898 | }
|
1899 |
|
1900 | interrupted = isTweening();
|
1901 | self.pointerEvent = e;
|
1902 |
|
1903 | if (_touchEventLookup[e.type]) {
|
1904 | touchEventTarget = ~e.type.indexOf("touch") ? e.currentTarget || e.target : ownerDoc;
|
1905 |
|
1906 | _addListener(touchEventTarget, "touchend", onRelease);
|
1907 |
|
1908 | _addListener(touchEventTarget, "touchmove", onMove);
|
1909 |
|
1910 | _addListener(touchEventTarget, "touchcancel", onRelease);
|
1911 |
|
1912 | _addListener(ownerDoc, "touchstart", _onMultiTouchDocument);
|
1913 | } else {
|
1914 | touchEventTarget = null;
|
1915 |
|
1916 | _addListener(ownerDoc, "mousemove", onMove);
|
1917 | }
|
1918 |
|
1919 | touchDragAxis = null;
|
1920 |
|
1921 | if (!_supportsPointer || !touchEventTarget) {
|
1922 | _addListener(ownerDoc, "mouseup", onRelease);
|
1923 |
|
1924 | if (e && e.target) {
|
1925 | _addListener(e.target, "mouseup", onRelease);
|
1926 | }
|
1927 | }
|
1928 |
|
1929 | isClicking = isClickable.call(self, e.target) && vars.dragClickables === false && !force;
|
1930 |
|
1931 | if (isClicking) {
|
1932 | _addListener(e.target, "change", onRelease);
|
1933 |
|
1934 | _dispatchEvent(self, "pressInit", "onPressInit");
|
1935 |
|
1936 | _dispatchEvent(self, "press", "onPress");
|
1937 |
|
1938 | _setSelectable(triggers, true);
|
1939 |
|
1940 | return;
|
1941 | }
|
1942 |
|
1943 | allowNativeTouchScrolling = !touchEventTarget || allowX === allowY || self.vars.allowNativeTouchScrolling === false || self.vars.allowContextMenu && e && (e.ctrlKey || e.which > 2) ? false : allowX ? "y" : "x";
|
1944 | isPreventingDefault = !allowNativeTouchScrolling && !self.allowEventDefault;
|
1945 |
|
1946 | if (isPreventingDefault) {
|
1947 | _preventDefault(e);
|
1948 |
|
1949 | _addListener(_win$1, "touchforcechange", _preventDefault);
|
1950 | }
|
1951 |
|
1952 | if (e.changedTouches) {
|
1953 | e = touch = e.changedTouches[0];
|
1954 | touchID = e.identifier;
|
1955 | } else if (e.pointerId) {
|
1956 | touchID = e.pointerId;
|
1957 | } else {
|
1958 | touch = touchID = null;
|
1959 | }
|
1960 |
|
1961 | _dragCount++;
|
1962 |
|
1963 | _addToRenderQueue(render);
|
1964 |
|
1965 | startPointerY = self.pointerY = e.pageY;
|
1966 | startPointerX = self.pointerX = e.pageX;
|
1967 |
|
1968 | _dispatchEvent(self, "pressInit", "onPressInit");
|
1969 |
|
1970 | if (allowNativeTouchScrolling || self.autoScroll) {
|
1971 | _recordMaxScrolls(target.parentNode);
|
1972 | }
|
1973 |
|
1974 | if (target.parentNode && self.autoScroll && !scrollProxy && !rotationMode && target.parentNode._gsMaxScrollX && !_placeholderDiv.parentNode && !target.getBBox) {
|
1975 | _placeholderDiv.style.width = target.parentNode.scrollWidth + "px";
|
1976 | target.parentNode.appendChild(_placeholderDiv);
|
1977 | }
|
1978 |
|
1979 | recordStartPositions();
|
1980 | self.tween && self.tween.kill();
|
1981 | self.isThrowing = false;
|
1982 | gsap.killTweensOf(scrollProxy || target, killProps, true);
|
1983 | scrollProxy && gsap.killTweensOf(target, {
|
1984 | scrollTo: 1
|
1985 | }, true);
|
1986 | self.tween = self.lockedAxis = null;
|
1987 |
|
1988 | if (vars.zIndexBoost || !rotationMode && !scrollProxy && vars.zIndexBoost !== false) {
|
1989 | target.style.zIndex = Draggable.zIndex++;
|
1990 | }
|
1991 |
|
1992 | self.isPressed = true;
|
1993 | hasDragCallback = !!(vars.onDrag || self._listeners.drag);
|
1994 | hasMoveCallback = !!(vars.onMove || self._listeners.move);
|
1995 |
|
1996 | if (!rotationMode && (vars.cursor !== false || vars.activeCursor)) {
|
1997 | i = triggers.length;
|
1998 |
|
1999 | while (--i > -1) {
|
2000 | gsap.set(triggers[i], {
|
2001 | cursor: vars.activeCursor || vars.cursor || (_defaultCursor === "grab" ? "grabbing" : _defaultCursor)
|
2002 | });
|
2003 | }
|
2004 | }
|
2005 |
|
2006 | _dispatchEvent(self, "press", "onPress");
|
2007 | },
|
2008 | onMove = function onMove(e) {
|
2009 | var originalEvent = e,
|
2010 | touches,
|
2011 | pointerX,
|
2012 | pointerY,
|
2013 | i,
|
2014 | dx,
|
2015 | dy;
|
2016 |
|
2017 | if (!enabled || _isMultiTouching || !self.isPressed || !e) {
|
2018 | isPreventingDefault && e && enabled && _preventDefault(e);
|
2019 | return;
|
2020 | }
|
2021 |
|
2022 | self.pointerEvent = e;
|
2023 | touches = e.changedTouches;
|
2024 |
|
2025 | if (touches) {
|
2026 | e = touches[0];
|
2027 |
|
2028 | if (e !== touch && e.identifier !== touchID) {
|
2029 | i = touches.length;
|
2030 |
|
2031 | while (--i > -1 && (e = touches[i]).identifier !== touchID) {}
|
2032 |
|
2033 | if (i < 0) {
|
2034 | return;
|
2035 | }
|
2036 | }
|
2037 | } else if (e.pointerId && touchID && e.pointerId !== touchID) {
|
2038 | return;
|
2039 | }
|
2040 |
|
2041 | if (touchEventTarget && allowNativeTouchScrolling && !touchDragAxis) {
|
2042 | _point1.x = e.pageX;
|
2043 | _point1.y = e.pageY;
|
2044 | matrix && matrix.apply(_point1, _point1);
|
2045 | pointerX = _point1.x;
|
2046 | pointerY = _point1.y;
|
2047 | dx = Math.abs(pointerX - startPointerX);
|
2048 | dy = Math.abs(pointerY - startPointerY);
|
2049 |
|
2050 | if (dx !== dy && (dx > minimumMovement || dy > minimumMovement) || _isAndroid && allowNativeTouchScrolling === touchDragAxis) {
|
2051 | touchDragAxis = dx > dy && allowX ? "x" : "y";
|
2052 |
|
2053 | if (allowNativeTouchScrolling && touchDragAxis !== allowNativeTouchScrolling) {
|
2054 | _addListener(_win$1, "touchforcechange", _preventDefault);
|
2055 | }
|
2056 |
|
2057 | if (self.vars.lockAxisOnTouchScroll !== false && allowX && allowY) {
|
2058 | self.lockedAxis = touchDragAxis === "x" ? "y" : "x";
|
2059 | _isFunction(self.vars.onLockAxis) && self.vars.onLockAxis.call(self, originalEvent);
|
2060 | }
|
2061 |
|
2062 | if (_isAndroid && allowNativeTouchScrolling === touchDragAxis) {
|
2063 | onRelease(originalEvent);
|
2064 | return;
|
2065 | }
|
2066 | }
|
2067 | }
|
2068 |
|
2069 | if (!self.allowEventDefault && (!allowNativeTouchScrolling || touchDragAxis && allowNativeTouchScrolling !== touchDragAxis) && originalEvent.cancelable !== false) {
|
2070 | _preventDefault(originalEvent);
|
2071 |
|
2072 | isPreventingDefault = true;
|
2073 | } else if (isPreventingDefault) {
|
2074 | isPreventingDefault = false;
|
2075 | }
|
2076 |
|
2077 | if (self.autoScroll) {
|
2078 | checkAutoScrollBounds = true;
|
2079 | }
|
2080 |
|
2081 | setPointerPosition(e.pageX, e.pageY, hasMoveCallback);
|
2082 | },
|
2083 | setPointerPosition = function setPointerPosition(pointerX, pointerY, invokeOnMove) {
|
2084 | var dragTolerance = 1 - self.dragResistance,
|
2085 | edgeTolerance = 1 - self.edgeResistance,
|
2086 | prevPointerX = self.pointerX,
|
2087 | prevPointerY = self.pointerY,
|
2088 | prevStartElementY = startElementY,
|
2089 | prevX = self.x,
|
2090 | prevY = self.y,
|
2091 | prevEndX = self.endX,
|
2092 | prevEndY = self.endY,
|
2093 | prevEndRotation = self.endRotation,
|
2094 | prevDirty = dirty,
|
2095 | xChange,
|
2096 | yChange,
|
2097 | x,
|
2098 | y,
|
2099 | dif,
|
2100 | temp;
|
2101 | self.pointerX = pointerX;
|
2102 | self.pointerY = pointerY;
|
2103 |
|
2104 | if (isFixed) {
|
2105 | pointerX -= _getDocScrollLeft$1(ownerDoc);
|
2106 | pointerY -= _getDocScrollTop$1(ownerDoc);
|
2107 | }
|
2108 |
|
2109 | if (rotationMode) {
|
2110 | y = Math.atan2(rotationOrigin.y - pointerY, pointerX - rotationOrigin.x) * _RAD2DEG;
|
2111 | dif = self.y - y;
|
2112 |
|
2113 | if (dif > 180) {
|
2114 | startElementY -= 360;
|
2115 | self.y = y;
|
2116 | } else if (dif < -180) {
|
2117 | startElementY += 360;
|
2118 | self.y = y;
|
2119 | }
|
2120 |
|
2121 | if (self.x !== startElementX || Math.abs(startElementY - y) > minimumMovement) {
|
2122 | self.y = y;
|
2123 | x = startElementX + (startElementY - y) * dragTolerance;
|
2124 | } else {
|
2125 | x = startElementX;
|
2126 | }
|
2127 | } else {
|
2128 | if (matrix) {
|
2129 | temp = pointerX * matrix.a + pointerY * matrix.c + matrix.e;
|
2130 | pointerY = pointerX * matrix.b + pointerY * matrix.d + matrix.f;
|
2131 | pointerX = temp;
|
2132 | }
|
2133 |
|
2134 | yChange = pointerY - startPointerY;
|
2135 | xChange = pointerX - startPointerX;
|
2136 |
|
2137 | if (yChange < minimumMovement && yChange > -minimumMovement) {
|
2138 | yChange = 0;
|
2139 | }
|
2140 |
|
2141 | if (xChange < minimumMovement && xChange > -minimumMovement) {
|
2142 | xChange = 0;
|
2143 | }
|
2144 |
|
2145 | if ((self.lockAxis || self.lockedAxis) && (xChange || yChange)) {
|
2146 | temp = self.lockedAxis;
|
2147 |
|
2148 | if (!temp) {
|
2149 | self.lockedAxis = temp = allowX && Math.abs(xChange) > Math.abs(yChange) ? "y" : allowY ? "x" : null;
|
2150 |
|
2151 | if (temp && _isFunction(self.vars.onLockAxis)) {
|
2152 | self.vars.onLockAxis.call(self, self.pointerEvent);
|
2153 | }
|
2154 | }
|
2155 |
|
2156 | if (temp === "y") {
|
2157 | yChange = 0;
|
2158 | } else if (temp === "x") {
|
2159 | xChange = 0;
|
2160 | }
|
2161 | }
|
2162 |
|
2163 | x = _round(startElementX + xChange * dragTolerance);
|
2164 | y = _round(startElementY + yChange * dragTolerance);
|
2165 | }
|
2166 |
|
2167 | if ((snapX || snapY || snapXY) && (self.x !== x || self.y !== y && !rotationMode)) {
|
2168 | if (snapXY) {
|
2169 | _temp1.x = x;
|
2170 | _temp1.y = y;
|
2171 | temp = snapXY(_temp1);
|
2172 | x = _round(temp.x);
|
2173 | y = _round(temp.y);
|
2174 | }
|
2175 |
|
2176 | if (snapX) {
|
2177 | x = _round(snapX(x));
|
2178 | }
|
2179 |
|
2180 | if (snapY) {
|
2181 | y = _round(snapY(y));
|
2182 | }
|
2183 | } else if (hasBounds) {
|
2184 | if (x > maxX) {
|
2185 | x = maxX + Math.round((x - maxX) * edgeTolerance);
|
2186 | } else if (x < minX) {
|
2187 | x = minX + Math.round((x - minX) * edgeTolerance);
|
2188 | }
|
2189 |
|
2190 | if (!rotationMode) {
|
2191 | if (y > maxY) {
|
2192 | y = Math.round(maxY + (y - maxY) * edgeTolerance);
|
2193 | } else if (y < minY) {
|
2194 | y = Math.round(minY + (y - minY) * edgeTolerance);
|
2195 | }
|
2196 | }
|
2197 | }
|
2198 |
|
2199 | if (self.x !== x || self.y !== y && !rotationMode) {
|
2200 | if (rotationMode) {
|
2201 | self.endRotation = self.x = self.endX = x;
|
2202 | dirty = true;
|
2203 | } else {
|
2204 | if (allowY) {
|
2205 | self.y = self.endY = y;
|
2206 | dirty = true;
|
2207 | }
|
2208 |
|
2209 | if (allowX) {
|
2210 | self.x = self.endX = x;
|
2211 | dirty = true;
|
2212 | }
|
2213 | }
|
2214 |
|
2215 | if (!invokeOnMove || _dispatchEvent(self, "move", "onMove") !== false) {
|
2216 | if (!self.isDragging && self.isPressed) {
|
2217 | self.isDragging = true;
|
2218 |
|
2219 | _dispatchEvent(self, "dragstart", "onDragStart");
|
2220 | }
|
2221 | } else {
|
2222 | self.pointerX = prevPointerX;
|
2223 | self.pointerY = prevPointerY;
|
2224 | startElementY = prevStartElementY;
|
2225 | self.x = prevX;
|
2226 | self.y = prevY;
|
2227 | self.endX = prevEndX;
|
2228 | self.endY = prevEndY;
|
2229 | self.endRotation = prevEndRotation;
|
2230 | dirty = prevDirty;
|
2231 | }
|
2232 | }
|
2233 | },
|
2234 | onRelease = function onRelease(e, force) {
|
2235 | if (!enabled || !self.isPressed || e && touchID != null && !force && (e.pointerId && e.pointerId !== touchID || e.changedTouches && !_hasTouchID(e.changedTouches, touchID))) {
|
2236 | isPreventingDefault && e && enabled && _preventDefault(e);
|
2237 | return;
|
2238 | }
|
2239 |
|
2240 | self.isPressed = false;
|
2241 | var originalEvent = e,
|
2242 | wasDragging = self.isDragging,
|
2243 | isContextMenuRelease = self.vars.allowContextMenu && e && (e.ctrlKey || e.which > 2),
|
2244 | placeholderDelayedCall = gsap.delayedCall(0.001, removePlaceholder),
|
2245 | touches,
|
2246 | i,
|
2247 | syntheticEvent,
|
2248 | eventTarget,
|
2249 | syntheticClick;
|
2250 |
|
2251 | if (touchEventTarget) {
|
2252 | _removeListener(touchEventTarget, "touchend", onRelease);
|
2253 |
|
2254 | _removeListener(touchEventTarget, "touchmove", onMove);
|
2255 |
|
2256 | _removeListener(touchEventTarget, "touchcancel", onRelease);
|
2257 |
|
2258 | _removeListener(ownerDoc, "touchstart", _onMultiTouchDocument);
|
2259 | } else {
|
2260 | _removeListener(ownerDoc, "mousemove", onMove);
|
2261 | }
|
2262 |
|
2263 | _removeListener(_win$1, "touchforcechange", _preventDefault);
|
2264 |
|
2265 | if (!_supportsPointer || !touchEventTarget) {
|
2266 | _removeListener(ownerDoc, "mouseup", onRelease);
|
2267 |
|
2268 | if (e && e.target) {
|
2269 | _removeListener(e.target, "mouseup", onRelease);
|
2270 | }
|
2271 | }
|
2272 |
|
2273 | dirty = false;
|
2274 |
|
2275 | if (isClicking && !isContextMenuRelease) {
|
2276 | if (e) {
|
2277 | _removeListener(e.target, "change", onRelease);
|
2278 |
|
2279 | self.pointerEvent = originalEvent;
|
2280 | }
|
2281 |
|
2282 | _setSelectable(triggers, false);
|
2283 |
|
2284 | _dispatchEvent(self, "release", "onRelease");
|
2285 |
|
2286 | _dispatchEvent(self, "click", "onClick");
|
2287 |
|
2288 | isClicking = false;
|
2289 | return;
|
2290 | }
|
2291 |
|
2292 | _removeFromRenderQueue(render);
|
2293 |
|
2294 | if (!rotationMode) {
|
2295 | i = triggers.length;
|
2296 |
|
2297 | while (--i > -1) {
|
2298 | _setStyle(triggers[i], "cursor", vars.cursor || (vars.cursor !== false ? _defaultCursor : null));
|
2299 | }
|
2300 | }
|
2301 |
|
2302 | if (wasDragging) {
|
2303 | dragEndTime = _lastDragTime = _getTime();
|
2304 | self.isDragging = false;
|
2305 | }
|
2306 |
|
2307 | _dragCount--;
|
2308 |
|
2309 | if (e) {
|
2310 | touches = e.changedTouches;
|
2311 |
|
2312 | if (touches) {
|
2313 | e = touches[0];
|
2314 |
|
2315 | if (e !== touch && e.identifier !== touchID) {
|
2316 | i = touches.length;
|
2317 |
|
2318 | while (--i > -1 && (e = touches[i]).identifier !== touchID) {}
|
2319 |
|
2320 | if (i < 0) {
|
2321 | return;
|
2322 | }
|
2323 | }
|
2324 | }
|
2325 |
|
2326 | self.pointerEvent = originalEvent;
|
2327 | self.pointerX = e.pageX;
|
2328 | self.pointerY = e.pageY;
|
2329 | }
|
2330 |
|
2331 | if (isContextMenuRelease && originalEvent) {
|
2332 | _preventDefault(originalEvent);
|
2333 |
|
2334 | isPreventingDefault = true;
|
2335 |
|
2336 | _dispatchEvent(self, "release", "onRelease");
|
2337 | } else if (originalEvent && !wasDragging) {
|
2338 | isPreventingDefault = false;
|
2339 |
|
2340 | if (interrupted && (vars.snap || vars.bounds)) {
|
2341 | animate(vars.inertia || vars.throwProps);
|
2342 | }
|
2343 |
|
2344 | _dispatchEvent(self, "release", "onRelease");
|
2345 |
|
2346 | if ((!_isAndroid || originalEvent.type !== "touchmove") && originalEvent.type.indexOf("cancel") === -1) {
|
2347 | _dispatchEvent(self, "click", "onClick");
|
2348 |
|
2349 | if (_getTime() - clickTime < 300) {
|
2350 | _dispatchEvent(self, "doubleclick", "onDoubleClick");
|
2351 | }
|
2352 |
|
2353 | eventTarget = originalEvent.target || target;
|
2354 | clickTime = _getTime();
|
2355 |
|
2356 | syntheticClick = function syntheticClick() {
|
2357 | if (clickTime !== clickDispatch && self.enabled() && !self.isPressed && !originalEvent.defaultPrevented) {
|
2358 | if (eventTarget.click) {
|
2359 | eventTarget.click();
|
2360 | } else if (ownerDoc.createEvent) {
|
2361 | syntheticEvent = ownerDoc.createEvent("MouseEvents");
|
2362 | syntheticEvent.initMouseEvent("click", true, true, _win$1, 1, self.pointerEvent.screenX, self.pointerEvent.screenY, self.pointerX, self.pointerY, false, false, false, false, 0, null);
|
2363 | eventTarget.dispatchEvent(syntheticEvent);
|
2364 | }
|
2365 | }
|
2366 | };
|
2367 |
|
2368 | if (!_isAndroid && !originalEvent.defaultPrevented) {
|
2369 | gsap.delayedCall(0.05, syntheticClick);
|
2370 | }
|
2371 | }
|
2372 | } else {
|
2373 | animate(vars.inertia || vars.throwProps);
|
2374 |
|
2375 | if (!self.allowEventDefault && originalEvent && (vars.dragClickables !== false || !isClickable.call(self, originalEvent.target)) && wasDragging && (!allowNativeTouchScrolling || touchDragAxis && allowNativeTouchScrolling === touchDragAxis) && originalEvent.cancelable !== false) {
|
2376 | isPreventingDefault = true;
|
2377 |
|
2378 | _preventDefault(originalEvent);
|
2379 | } else {
|
2380 | isPreventingDefault = false;
|
2381 | }
|
2382 |
|
2383 | _dispatchEvent(self, "release", "onRelease");
|
2384 | }
|
2385 |
|
2386 | isTweening() && placeholderDelayedCall.duration(self.tween.duration());
|
2387 | wasDragging && _dispatchEvent(self, "dragend", "onDragEnd");
|
2388 | return true;
|
2389 | },
|
2390 | updateScroll = function updateScroll(e) {
|
2391 | if (e && self.isDragging && !scrollProxy) {
|
2392 | var parent = e.target || target.parentNode,
|
2393 | deltaX = parent.scrollLeft - parent._gsScrollX,
|
2394 | deltaY = parent.scrollTop - parent._gsScrollY;
|
2395 |
|
2396 | if (deltaX || deltaY) {
|
2397 | if (matrix) {
|
2398 | startPointerX -= deltaX * matrix.a + deltaY * matrix.c;
|
2399 | startPointerY -= deltaY * matrix.d + deltaX * matrix.b;
|
2400 | } else {
|
2401 | startPointerX -= deltaX;
|
2402 | startPointerY -= deltaY;
|
2403 | }
|
2404 |
|
2405 | parent._gsScrollX += deltaX;
|
2406 | parent._gsScrollY += deltaY;
|
2407 | setPointerPosition(self.pointerX, self.pointerY);
|
2408 | }
|
2409 | }
|
2410 | },
|
2411 | onClick = function onClick(e) {
|
2412 | var time = _getTime(),
|
2413 | recentlyClicked = time - clickTime < 40,
|
2414 | recentlyDragged = time - dragEndTime < 40,
|
2415 | alreadyDispatched = recentlyClicked && clickDispatch === clickTime,
|
2416 | defaultPrevented = self.pointerEvent && self.pointerEvent.defaultPrevented,
|
2417 | alreadyDispatchedTrusted = recentlyClicked && trustedClickDispatch === clickTime,
|
2418 | trusted = e.isTrusted || e.isTrusted == null && recentlyClicked && alreadyDispatched;
|
2419 |
|
2420 | if ((alreadyDispatched || recentlyDragged && self.vars.suppressClickOnDrag !== false) && e.stopImmediatePropagation) {
|
2421 | e.stopImmediatePropagation();
|
2422 | }
|
2423 |
|
2424 | if (recentlyClicked && !(self.pointerEvent && self.pointerEvent.defaultPrevented) && (!alreadyDispatched || trusted && !alreadyDispatchedTrusted)) {
|
2425 | if (trusted && alreadyDispatched) {
|
2426 | trustedClickDispatch = clickTime;
|
2427 | }
|
2428 |
|
2429 | clickDispatch = clickTime;
|
2430 | return;
|
2431 | }
|
2432 |
|
2433 | if (self.isPressed || recentlyDragged || recentlyClicked) {
|
2434 | if (!trusted || !e.detail || !recentlyClicked || defaultPrevented) {
|
2435 | _preventDefault(e);
|
2436 | }
|
2437 | }
|
2438 | },
|
2439 | localizePoint = function localizePoint(p) {
|
2440 | return matrix ? {
|
2441 | x: p.x * matrix.a + p.y * matrix.c + matrix.e,
|
2442 | y: p.x * matrix.b + p.y * matrix.d + matrix.f
|
2443 | } : {
|
2444 | x: p.x,
|
2445 | y: p.y
|
2446 | };
|
2447 | };
|
2448 |
|
2449 | old = Draggable.get(target);
|
2450 | old && old.kill();
|
2451 |
|
2452 | _this2.startDrag = function (event, align) {
|
2453 | var r1, r2, p1, p2;
|
2454 | onPress(event || self.pointerEvent, true);
|
2455 |
|
2456 | if (align && !self.hitTest(event || self.pointerEvent)) {
|
2457 | r1 = _parseRect(event || self.pointerEvent);
|
2458 | r2 = _parseRect(target);
|
2459 | p1 = localizePoint({
|
2460 | x: r1.left + r1.width / 2,
|
2461 | y: r1.top + r1.height / 2
|
2462 | });
|
2463 | p2 = localizePoint({
|
2464 | x: r2.left + r2.width / 2,
|
2465 | y: r2.top + r2.height / 2
|
2466 | });
|
2467 | startPointerX -= p1.x - p2.x;
|
2468 | startPointerY -= p1.y - p2.y;
|
2469 | }
|
2470 |
|
2471 | if (!self.isDragging) {
|
2472 | self.isDragging = true;
|
2473 |
|
2474 | _dispatchEvent(self, "dragstart", "onDragStart");
|
2475 | }
|
2476 | };
|
2477 |
|
2478 | _this2.drag = onMove;
|
2479 |
|
2480 | _this2.endDrag = function (e) {
|
2481 | return onRelease(e || self.pointerEvent, true);
|
2482 | };
|
2483 |
|
2484 | _this2.timeSinceDrag = function () {
|
2485 | return self.isDragging ? 0 : (_getTime() - dragEndTime) / 1000;
|
2486 | };
|
2487 |
|
2488 | _this2.timeSinceClick = function () {
|
2489 | return (_getTime() - clickTime) / 1000;
|
2490 | };
|
2491 |
|
2492 | _this2.hitTest = function (target, threshold) {
|
2493 | return Draggable.hitTest(self.target, target, threshold);
|
2494 | };
|
2495 |
|
2496 | _this2.getDirection = function (from, diagonalThreshold) {
|
2497 | var mode = from === "velocity" && InertiaPlugin ? from : _isObject(from) && !rotationMode ? "element" : "start",
|
2498 | xChange,
|
2499 | yChange,
|
2500 | ratio,
|
2501 | direction,
|
2502 | r1,
|
2503 | r2;
|
2504 |
|
2505 | if (mode === "element") {
|
2506 | r1 = _parseRect(self.target);
|
2507 | r2 = _parseRect(from);
|
2508 | }
|
2509 |
|
2510 | xChange = mode === "start" ? self.x - startElementX : mode === "velocity" ? InertiaPlugin.getVelocity(target, xProp) : r1.left + r1.width / 2 - (r2.left + r2.width / 2);
|
2511 |
|
2512 | if (rotationMode) {
|
2513 | return xChange < 0 ? "counter-clockwise" : "clockwise";
|
2514 | } else {
|
2515 | diagonalThreshold = diagonalThreshold || 2;
|
2516 | yChange = mode === "start" ? self.y - startElementY : mode === "velocity" ? InertiaPlugin.getVelocity(target, yProp) : r1.top + r1.height / 2 - (r2.top + r2.height / 2);
|
2517 | ratio = Math.abs(xChange / yChange);
|
2518 | direction = ratio < 1 / diagonalThreshold ? "" : xChange < 0 ? "left" : "right";
|
2519 |
|
2520 | if (ratio < diagonalThreshold) {
|
2521 | if (direction !== "") {
|
2522 | direction += "-";
|
2523 | }
|
2524 |
|
2525 | direction += yChange < 0 ? "up" : "down";
|
2526 | }
|
2527 | }
|
2528 |
|
2529 | return direction;
|
2530 | };
|
2531 |
|
2532 | _this2.applyBounds = function (newBounds, sticky) {
|
2533 | var x, y, forceZeroVelocity, e, parent, isRoot;
|
2534 |
|
2535 | if (newBounds && vars.bounds !== newBounds) {
|
2536 | vars.bounds = newBounds;
|
2537 | return self.update(true, sticky);
|
2538 | }
|
2539 |
|
2540 | syncXY(true);
|
2541 | calculateBounds();
|
2542 |
|
2543 | if (hasBounds && !isTweening()) {
|
2544 | x = self.x;
|
2545 | y = self.y;
|
2546 |
|
2547 | if (x > maxX) {
|
2548 | x = maxX;
|
2549 | } else if (x < minX) {
|
2550 | x = minX;
|
2551 | }
|
2552 |
|
2553 | if (y > maxY) {
|
2554 | y = maxY;
|
2555 | } else if (y < minY) {
|
2556 | y = minY;
|
2557 | }
|
2558 |
|
2559 | if (self.x !== x || self.y !== y) {
|
2560 | forceZeroVelocity = true;
|
2561 | self.x = self.endX = x;
|
2562 |
|
2563 | if (rotationMode) {
|
2564 | self.endRotation = x;
|
2565 | } else {
|
2566 | self.y = self.endY = y;
|
2567 | }
|
2568 |
|
2569 | dirty = true;
|
2570 | render(true);
|
2571 |
|
2572 | if (self.autoScroll && !self.isDragging) {
|
2573 | _recordMaxScrolls(target.parentNode);
|
2574 |
|
2575 | e = target;
|
2576 | _windowProxy.scrollTop = _win$1.pageYOffset != null ? _win$1.pageYOffset : ownerDoc.documentElement.scrollTop != null ? ownerDoc.documentElement.scrollTop : ownerDoc.body.scrollTop;
|
2577 | _windowProxy.scrollLeft = _win$1.pageXOffset != null ? _win$1.pageXOffset : ownerDoc.documentElement.scrollLeft != null ? ownerDoc.documentElement.scrollLeft : ownerDoc.body.scrollLeft;
|
2578 |
|
2579 | while (e && !isRoot) {
|
2580 | isRoot = _isRoot(e.parentNode);
|
2581 | parent = isRoot ? _windowProxy : e.parentNode;
|
2582 |
|
2583 | if (allowY && parent.scrollTop > parent._gsMaxScrollY) {
|
2584 | parent.scrollTop = parent._gsMaxScrollY;
|
2585 | }
|
2586 |
|
2587 | if (allowX && parent.scrollLeft > parent._gsMaxScrollX) {
|
2588 | parent.scrollLeft = parent._gsMaxScrollX;
|
2589 | }
|
2590 |
|
2591 | e = parent;
|
2592 | }
|
2593 | }
|
2594 | }
|
2595 |
|
2596 | if (self.isThrowing && (forceZeroVelocity || self.endX > maxX || self.endX < minX || self.endY > maxY || self.endY < minY)) {
|
2597 | animate(vars.inertia || vars.throwProps, forceZeroVelocity);
|
2598 | }
|
2599 | }
|
2600 |
|
2601 | return self;
|
2602 | };
|
2603 |
|
2604 | _this2.update = function (applyBounds, sticky, ignoreExternalChanges) {
|
2605 | var x = self.x,
|
2606 | y = self.y;
|
2607 | updateMatrix(!sticky);
|
2608 |
|
2609 | if (applyBounds) {
|
2610 | self.applyBounds();
|
2611 | } else {
|
2612 | if (dirty && ignoreExternalChanges) {
|
2613 | render(true);
|
2614 | }
|
2615 |
|
2616 | syncXY(true);
|
2617 | }
|
2618 |
|
2619 | if (sticky) {
|
2620 | setPointerPosition(self.pointerX, self.pointerY);
|
2621 | dirty && render(true);
|
2622 | }
|
2623 |
|
2624 | if (self.isPressed && !sticky && (allowX && Math.abs(x - self.x) > 0.01 || allowY && Math.abs(y - self.y) > 0.01 && !rotationMode)) {
|
2625 | recordStartPositions();
|
2626 | }
|
2627 |
|
2628 | if (self.autoScroll) {
|
2629 | _recordMaxScrolls(target.parentNode, self.isDragging);
|
2630 |
|
2631 | checkAutoScrollBounds = self.isDragging;
|
2632 | render(true);
|
2633 |
|
2634 | _removeScrollListener(target, updateScroll);
|
2635 |
|
2636 | _addScrollListener(target, updateScroll);
|
2637 | }
|
2638 |
|
2639 | return self;
|
2640 | };
|
2641 |
|
2642 | _this2.enable = function (type) {
|
2643 | var setVars = {
|
2644 | lazy: true
|
2645 | },
|
2646 | id,
|
2647 | i,
|
2648 | trigger;
|
2649 |
|
2650 | if (!rotationMode && vars.cursor !== false) {
|
2651 | setVars.cursor = vars.cursor || _defaultCursor;
|
2652 | }
|
2653 |
|
2654 | if (gsap.utils.checkPrefix("touchCallout")) {
|
2655 | setVars.touchCallout = "none";
|
2656 | }
|
2657 |
|
2658 | setVars.touchAction = allowX === allowY ? "none" : vars.allowNativeTouchScrolling || vars.allowEventDefault ? "manipulation" : allowX ? "pan-y" : "pan-x";
|
2659 |
|
2660 | if (type !== "soft") {
|
2661 | i = triggers.length;
|
2662 |
|
2663 | while (--i > -1) {
|
2664 | trigger = triggers[i];
|
2665 | _supportsPointer || _addListener(trigger, "mousedown", onPress);
|
2666 |
|
2667 | _addListener(trigger, "touchstart", onPress);
|
2668 |
|
2669 | _addListener(trigger, "click", onClick, true);
|
2670 |
|
2671 | gsap.set(trigger, setVars);
|
2672 |
|
2673 | if (trigger.getBBox && trigger.ownerSVGElement) {
|
2674 | gsap.set(trigger.ownerSVGElement, {
|
2675 | touchAction: allowX === allowY ? "none" : vars.allowNativeTouchScrolling || vars.allowEventDefault ? "manipulation" : allowX ? "pan-y" : "pan-x"
|
2676 | });
|
2677 | }
|
2678 |
|
2679 | vars.allowContextMenu || _addListener(trigger, "contextmenu", onContextMenu);
|
2680 | }
|
2681 |
|
2682 | _setSelectable(triggers, false);
|
2683 | }
|
2684 |
|
2685 | _addScrollListener(target, updateScroll);
|
2686 |
|
2687 | enabled = true;
|
2688 |
|
2689 | if (InertiaPlugin && type !== "soft") {
|
2690 | InertiaPlugin.track(scrollProxy || target, xyMode ? "x,y" : rotationMode ? "rotation" : "top,left");
|
2691 | }
|
2692 |
|
2693 | target._gsDragID = id = "d" + _lookupCount++;
|
2694 | _lookup[id] = self;
|
2695 |
|
2696 | if (scrollProxy) {
|
2697 | scrollProxy.enable();
|
2698 | scrollProxy.element._gsDragID = id;
|
2699 | }
|
2700 |
|
2701 | (vars.bounds || rotationMode) && recordStartPositions();
|
2702 | vars.bounds && self.applyBounds();
|
2703 | return self;
|
2704 | };
|
2705 |
|
2706 | _this2.disable = function (type) {
|
2707 | var dragging = self.isDragging,
|
2708 | i,
|
2709 | trigger;
|
2710 |
|
2711 | if (!rotationMode) {
|
2712 | i = triggers.length;
|
2713 |
|
2714 | while (--i > -1) {
|
2715 | _setStyle(triggers[i], "cursor", null);
|
2716 | }
|
2717 | }
|
2718 |
|
2719 | if (type !== "soft") {
|
2720 | i = triggers.length;
|
2721 |
|
2722 | while (--i > -1) {
|
2723 | trigger = triggers[i];
|
2724 |
|
2725 | _setStyle(trigger, "touchCallout", null);
|
2726 |
|
2727 | _setStyle(trigger, "touchAction", null);
|
2728 |
|
2729 | _removeListener(trigger, "mousedown", onPress);
|
2730 |
|
2731 | _removeListener(trigger, "touchstart", onPress);
|
2732 |
|
2733 | _removeListener(trigger, "click", onClick);
|
2734 |
|
2735 | _removeListener(trigger, "contextmenu", onContextMenu);
|
2736 | }
|
2737 |
|
2738 | _setSelectable(triggers, true);
|
2739 |
|
2740 | if (touchEventTarget) {
|
2741 | _removeListener(touchEventTarget, "touchcancel", onRelease);
|
2742 |
|
2743 | _removeListener(touchEventTarget, "touchend", onRelease);
|
2744 |
|
2745 | _removeListener(touchEventTarget, "touchmove", onMove);
|
2746 | }
|
2747 |
|
2748 | _removeListener(ownerDoc, "mouseup", onRelease);
|
2749 |
|
2750 | _removeListener(ownerDoc, "mousemove", onMove);
|
2751 | }
|
2752 |
|
2753 | _removeScrollListener(target, updateScroll);
|
2754 |
|
2755 | enabled = false;
|
2756 |
|
2757 | if (InertiaPlugin && type !== "soft") {
|
2758 | InertiaPlugin.untrack(scrollProxy || target, xyMode ? "x,y" : rotationMode ? "rotation" : "top,left");
|
2759 | }
|
2760 |
|
2761 | if (scrollProxy) {
|
2762 | scrollProxy.disable();
|
2763 | }
|
2764 |
|
2765 | _removeFromRenderQueue(render);
|
2766 |
|
2767 | self.isDragging = self.isPressed = isClicking = false;
|
2768 |
|
2769 | if (dragging) {
|
2770 | _dispatchEvent(self, "dragend", "onDragEnd");
|
2771 | }
|
2772 |
|
2773 | return self;
|
2774 | };
|
2775 |
|
2776 | _this2.enabled = function (value, type) {
|
2777 | return arguments.length ? value ? self.enable(type) : self.disable(type) : enabled;
|
2778 | };
|
2779 |
|
2780 | _this2.kill = function () {
|
2781 | self.isThrowing = false;
|
2782 |
|
2783 | if (self.tween) {
|
2784 | self.tween.kill();
|
2785 | }
|
2786 |
|
2787 | self.disable();
|
2788 | gsap.set(triggers, {
|
2789 | clearProps: "userSelect"
|
2790 | });
|
2791 | delete _lookup[target._gsDragID];
|
2792 | return self;
|
2793 | };
|
2794 |
|
2795 | if (~type.indexOf("scroll")) {
|
2796 | scrollProxy = _this2.scrollProxy = new ScrollProxy(target, _extend({
|
2797 | onKill: function onKill() {
|
2798 | if (self.isPressed) {
|
2799 | onRelease(null);
|
2800 | }
|
2801 | }
|
2802 | }, vars));
|
2803 | target.style.overflowY = allowY && !_isTouchDevice ? "auto" : "hidden";
|
2804 | target.style.overflowX = allowX && !_isTouchDevice ? "auto" : "hidden";
|
2805 | target = scrollProxy.content;
|
2806 | }
|
2807 |
|
2808 | if (rotationMode) {
|
2809 | killProps.rotation = 1;
|
2810 | } else {
|
2811 | if (allowX) {
|
2812 | killProps[xProp] = 1;
|
2813 | }
|
2814 |
|
2815 | if (allowY) {
|
2816 | killProps[yProp] = 1;
|
2817 | }
|
2818 | }
|
2819 |
|
2820 | gsCache.force3D = "force3D" in vars ? vars.force3D : true;
|
2821 |
|
2822 | _this2.enable();
|
2823 |
|
2824 | return _this2;
|
2825 | }
|
2826 |
|
2827 | Draggable.register = function register(core) {
|
2828 | gsap = core;
|
2829 |
|
2830 | _initCore();
|
2831 | };
|
2832 |
|
2833 | Draggable.create = function create(targets, vars) {
|
2834 | if (!_coreInitted) {
|
2835 | _initCore(true);
|
2836 | }
|
2837 |
|
2838 | return _toArray(targets).map(function (target) {
|
2839 | return new Draggable(target, vars);
|
2840 | });
|
2841 | };
|
2842 |
|
2843 | Draggable.get = function get(target) {
|
2844 | return _lookup[(_toArray(target)[0] || {})._gsDragID];
|
2845 | };
|
2846 |
|
2847 | Draggable.timeSinceDrag = function timeSinceDrag() {
|
2848 | return (_getTime() - _lastDragTime) / 1000;
|
2849 | };
|
2850 |
|
2851 | Draggable.hitTest = function hitTest(obj1, obj2, threshold) {
|
2852 | if (obj1 === obj2) {
|
2853 | return false;
|
2854 | }
|
2855 |
|
2856 | var r1 = _parseRect(obj1),
|
2857 | r2 = _parseRect(obj2),
|
2858 | top = r1.top,
|
2859 | left = r1.left,
|
2860 | right = r1.right,
|
2861 | bottom = r1.bottom,
|
2862 | width = r1.width,
|
2863 | height = r1.height,
|
2864 | isOutside = r2.left > right || r2.right < left || r2.top > bottom || r2.bottom < top,
|
2865 | overlap,
|
2866 | area,
|
2867 | isRatio;
|
2868 |
|
2869 | if (isOutside || !threshold) {
|
2870 | return !isOutside;
|
2871 | }
|
2872 |
|
2873 | isRatio = (threshold + "").indexOf("%") !== -1;
|
2874 | threshold = parseFloat(threshold) || 0;
|
2875 | overlap = {
|
2876 | left: Math.max(left, r2.left),
|
2877 | top: Math.max(top, r2.top)
|
2878 | };
|
2879 | overlap.width = Math.min(right, r2.right) - overlap.left;
|
2880 | overlap.height = Math.min(bottom, r2.bottom) - overlap.top;
|
2881 |
|
2882 | if (overlap.width < 0 || overlap.height < 0) {
|
2883 | return false;
|
2884 | }
|
2885 |
|
2886 | if (isRatio) {
|
2887 | threshold *= 0.01;
|
2888 | area = overlap.width * overlap.height;
|
2889 | return area >= width * height * threshold || area >= r2.width * r2.height * threshold;
|
2890 | }
|
2891 |
|
2892 | return overlap.width > threshold && overlap.height > threshold;
|
2893 | };
|
2894 |
|
2895 | return Draggable;
|
2896 | }(EventDispatcher);
|
2897 |
|
2898 | _setDefaults(Draggable.prototype, {
|
2899 | pointerX: 0,
|
2900 | pointerY: 0,
|
2901 | startX: 0,
|
2902 | startY: 0,
|
2903 | deltaX: 0,
|
2904 | deltaY: 0,
|
2905 | isDragging: false,
|
2906 | isPressed: false
|
2907 | });
|
2908 |
|
2909 | Draggable.zIndex = 1000;
|
2910 | Draggable.version = "3.5.1";
|
2911 | _getGSAP() && gsap.registerPlugin(Draggable);
|
2912 |
|
2913 | exports.Draggable = Draggable;
|
2914 | exports.default = Draggable;
|
2915 |
|
2916 | if (typeof(window) === 'undefined' || window !== exports) {Object.defineProperty(exports, '__esModule', { value: true });} else {delete window.default;}
|
2917 |
|
2918 | })));
|