From 719be8da0e4b02e616a0d617393279474a85ab60 Mon Sep 17 00:00:00 2001 From: Jack Doyle Date: Thu, 13 Aug 2020 15:58:19 -0500 Subject: [PATCH] 3.5.0 - NEW: ScrollTrigger.clearMatchMedia() clears out matchMedia() breakpoints that were previously set via ScrollTrigger.matchMedia(). It doesn't kill the ScrollTriggers or animations themselves - it just no longer triggers anything at that break point. - NEW: gsap.ticker.deltaRatio() method gives a ratio of the change since the last tick based on a target fps (defaults to 60fps). For example, if the ticker is running at EXACTLY 60fps, that means each tick would be roughly 16.67 milliseconds apart, thus the default .deltaRatio() would be 1 (though that rarely happens perfectly). If you call gsap.ticker.deltaRatio(120) meaning you want the ratio based on 120fps, it would return 2 in this scenario. If 33ms elapsed since the previous tick, gsap.ticker.deltaRatio(60) would return roughly 2 because the delta is about TWICE what a normal 60fps rate would be. This makes it easy to do things like gsap.ticker.add(() => obj.rotation += 1 * gsap.ticker.deltaRatio()) and have it animate at the same rate no matter what the refresh rate of the browser/ticker is. - NEW: you can set pinType: "fixed" in order to force ScrollTrigger to use position: fixed while pinning an element (which it normally does only if the scroller is the body/documentElement). - NEW: added support for animating Typed Arrays via EndArrayPlugin (which is in the GSAP core). See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray - IMPROVED: when setting a scrollTrigger on a gsap.timeline(), it had to wait for 1 tick before refreshing (because timelines are empty initially and only have a duration after being populated) but now you can manually call refresh() after populating the timeline so that it doesn't need to wait for that tick. This can help in some edge cases like the one here https://greensock.com/forums/topic/24973-issues-with-reinitializing-scrolltrigger/ - IMPROVED: better performance for creating a timeline with hundreds/thousands of tweens, particularly when most don't extend the overall duration. - IMPROVED: you can alter the duration of a tween inside of an onRepeat and as long as its parent timeline's smoothChildTiming property is set to true, it'll smoothly update. See https://greensock.com/forums/topic/24721-struggling-with-random-duration/?tab=comments#comment-120427 - IMPROVED: complex string-based eases that include parameters can now parse spaces without breaking, and even one set of nested parenthesis like "expoScale(25, 1, back.out(0.5))". See https://greensock.com/forums/topic/25008-delay-before-text-zooming-in - IMPROVED: ScrollTrigger's pinSpacing is disabled by default the pinned element's parent has display: flex, but now you can force pinSpacing with pinSpacing: true in that case. - FIXED: defining a value like "random([100, 20, -100])" for a tween, where there's an Array-based value in the string, didn't work properly. This was only the case for the string-based version - you could still use gsap.utils.random(), but now the string-based version works. See https://greensock.com/forums/topic/24901-using-gsaps-new-random-feature/ - FIXED: if you try animating to a CSS property that's undefined, like gsap.to(... {x: undefined}), it will be ignored now. See https://greensock.com/forums/topic/24905-undefined-in-params-breaks-animation-regression-between-311-and-320/ - FIXED: ScrollToPlugin factored in any offsetY or offsetX AFTER the max scroll position rather than before it, thus the viewport wasn't large enough to accommodate the initial scrollTo (without the offset), it would calculate the maximum and THEN subtract the offset, leading to an odd result. See https://github.com/greensock/GSAP/issues/402 - FIXED: if a ScrollTrigger has pinReparent: true, in certain cases it could alter the text color while pinned. See https://greensock.com/forums/topic/24908-scrolltrigger-pinreparent-styles/ - FIXED: a "fix" in 3.4.2 for working around collapsing margins was to automatically set overflow: hidden on the pinned element if there was no overflow (no scrolling), but in some rare cases that can have unintended consequences. Like in https://codepen.io/GreenSock/pen/1e42c7a73bfa409d2cf1e184e7a4248d the content becomes hidden while scrolling because of that "fix", so we rolled it back in 3.4.3 in favor of having people fix collapsing margins via their CSS setup instead. Setting overflow to hidden or auto is just one potential solution. A border-top: 1px solid transparent is another. But frankly collapsing margins don't seem to be a very common issue anyway. - FIXED: when a Draggable was applied to elements with position: fixed, their positioning could be rendered incorrectly if you altered the scroll while dragging. See https://greensock.com/forums/topic/24996-what-changed-from-version-32-to-make-this-not-work/ - FIXED: regression in 3.4.0 could cause a fromTo() tween not to render the starting state correctly if reversed quickly. See https://greensock.com/forums/topic/25014-scrolltrigger-scroll-issue-toggle-actions/ - FIXED: worked around an issue with the Web Components polyfill that caused Draggable not to work in IE11. See https://greensock.com/forums/topic/25000-draggable-stops-working-in-ie11-with-webcomponentsjs/ - FIXED: when a ScrollTrigger has once: true, its toggleClass should only toggle once (adding), so refreshing a page that's already scrolled down should result in the elements ABOVE that spot having the class toggled on, but it was toggling them off since those ScrollTriggers were technically past their "end". See https://greensock.com/forums/topic/25023-scrolltrigger-oncetrue-toggleclass-elements-above-are-not-triggered/ - FIXED: doing a motionPath animation on a generic object could result in errors. See https://github.com/greensock/GSAP/issues/370 - FIXED: a very rare edge case could cause a repeating animation to fire an onRepeat and/or do a repeatRefresh on the very last render (end). - FIXED: regression in 3.2.0 caused tweens that had reversed: true in their vars object not to render correctly. - FIXED: if a from() or fromTo() tween was inserted into the very beginning of a timeline that was reversed, the initial state may not render correctly. See https://greensock.com/forums/topic/25067-toggle-animation/ - FIXED: if you set up ScrollTriggers in one matchMedia() function that used a different orientation (vertical/horizontal) on the same scroller than in another (in other words, horizontal: true was set on one but not the other), the scroll position may not be updated properly on the subsequent call. See https://greensock.com/forums/topic/25071-scrolltrigger-horizontal-vs-vertical/ - FIXED: worked around a browser issue in Safari that could cause snapping in ScrollTrigger to be jerky in some cases, and/or it could get stuck (not land at the correct snapping spot). - FIXED: Physics2DPlugin and PhysicsPropsPlugin could render incorrect values if you used a "friction" value **and** a very long duration and reversed the animation after it was quite far along. - FIXED: Physics2DPlugin and PhysicsPropsPlugin could appear to visually pulse when using very low timeScale values. - FIXED: in a very rare circumstance, ScrollTrigger could throw an error. See https://greensock.com/forums/topic/25106-locomotivescroll-and-scrolltrigger-error-when-onleaveback-and-locoscrollscrollto/ - FIXED: a few TypeScript definitions, like https://github.com/greensock/GSAP/issues/406 - FIXED: if you set once: true on a ScrollTrigger and then refreshed a page after having already scrolled past the end of that ScrollTrigger, its associated animation may not play. See https://greensock.com/forums/topic/24436-scrolltrigger-how-to-start-animations-when-user-scrolls-from-bottom-to-top/ --- README.md | 2 +- dist/CSSRulePlugin.js | 4 +- dist/CSSRulePlugin.min.js | 4 +- dist/CSSRulePlugin.min.js.map | 2 +- dist/Draggable.js | 32 ++-- dist/Draggable.min.js | 4 +- dist/Draggable.min.js.map | 2 +- dist/EasePack.js | 4 +- dist/EasePack.min.js | 4 +- dist/EasePack.min.js.map | 2 +- dist/EaselPlugin.js | 4 +- dist/EaselPlugin.min.js | 4 +- dist/EaselPlugin.min.js.map | 2 +- dist/MotionPathPlugin.js | 8 +- dist/MotionPathPlugin.min.js | 4 +- dist/MotionPathPlugin.min.js.map | 2 +- dist/PixiPlugin.js | 4 +- dist/PixiPlugin.min.js | 4 +- dist/PixiPlugin.min.js.map | 2 +- dist/ScrollToPlugin.js | 12 +- dist/ScrollToPlugin.min.js | 4 +- dist/ScrollToPlugin.min.js.map | 2 +- dist/ScrollTrigger.js | 106 +++++------ dist/ScrollTrigger.min.js | 4 +- dist/ScrollTrigger.min.js.map | 2 +- dist/TextPlugin.js | 4 +- dist/TextPlugin.min.js | 4 +- dist/TextPlugin.min.js.map | 2 +- dist/gsap.js | 305 ++++++++++++------------------- dist/gsap.min.js | 4 +- dist/gsap.min.js.map | 2 +- esm/CSSPlugin.js | 22 +-- esm/CSSRulePlugin.js | 4 +- esm/Draggable.js | 36 ++-- esm/EasePack.js | 4 +- esm/EaselPlugin.js | 4 +- esm/MotionPathPlugin.js | 8 +- esm/PixiPlugin.js | 4 +- esm/ScrollToPlugin.js | 12 +- esm/ScrollTrigger.js | 110 +++++------ esm/TextPlugin.js | 4 +- esm/gsap-core.js | 291 ++++++++++++----------------- esm/utils/matrix.js | 2 +- esm/utils/paths.js | 2 +- esm/utils/strings.js | 2 +- package.json | 2 +- src/CSSPlugin.js | 20 +- src/CSSRulePlugin.js | 4 +- src/Draggable.js | 30 +-- src/EasePack.js | 4 +- src/EaselPlugin.js | 4 +- src/MotionPathPlugin.js | 8 +- src/PixiPlugin.js | 4 +- src/ScrollToPlugin.js | 10 +- src/ScrollTrigger.js | 96 +++++----- src/TextPlugin.js | 4 +- src/gsap-core.js | 255 +++++++++++--------------- src/utils/matrix.js | 2 +- src/utils/paths.js | 2 +- src/utils/strings.js | 2 +- types/gsap-core.d.ts | 1 + types/scroll-trigger.d.ts | 16 +- 62 files changed, 676 insertions(+), 838 deletions(-) diff --git a/README.md b/README.md index 793fe5699..cc78c3fe0 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ View the full documentation here, inclu ### CDN ```html - + ``` Click the green "Get GSAP Now" button at greensock.com for more options and installation instructions, including CDN URLs for various plugins. diff --git a/dist/CSSRulePlugin.js b/dist/CSSRulePlugin.js index cad812375..3367ce1b5 100644 --- a/dist/CSSRulePlugin.js +++ b/dist/CSSRulePlugin.js @@ -5,7 +5,7 @@ }(this, (function (exports) { 'use strict'; /*! - * CSSRulePlugin 3.4.2 + * CSSRulePlugin 3.5.0 * https://greensock.com * * @license Copyright 2008-2020, GreenSock. All rights reserved. @@ -51,7 +51,7 @@ }; var CSSRulePlugin = { - version: "3.4.2", + version: "3.5.0", name: "cssRule", init: function init(target, value, tween, index, targets) { if (!_checkRegister() || typeof target.cssText === "undefined") { diff --git a/dist/CSSRulePlugin.min.js b/dist/CSSRulePlugin.min.js index baeccad03..39fec809e 100644 --- a/dist/CSSRulePlugin.min.js +++ b/dist/CSSRulePlugin.min.js @@ -1,5 +1,5 @@ /*! - * CSSRulePlugin 3.4.2 + * CSSRulePlugin 3.5.0 * https://greensock.com * * @license Copyright 2020, GreenSock. All rights reserved. @@ -7,5 +7,5 @@ * @author: Jack Doyle, jack@greensock.com */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function h(){return"undefined"!=typeof window}function i(){return t||h()&&(t=window.gsap)&&t.registerPlugin&&t}function j(){return n||(s(),o||console.warn("Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)")),n}var t,n,c,o,s=function _initCore(e){t=e||i(),h()&&(c=document),t&&(o=t.plugins.css)&&(n=1)},r={version:"3.4.2",name:"cssRule",init:function init(e,t,n,i,s){if(!j()||void 0===e.cssText)return!1;var r=e._gsProxy=e._gsProxy||c.createElement("div");this.ss=e,this.style=r.style,r.style.cssText=e.cssText,o.prototype.init.call(this,r,t,n,i,s)},render:function render(e,t){for(var n,i=t._pt,s=t.style,r=t.ss;i;)i.r(e,i.d),i=i._next;for(n=s.length;-1<--n;)r[s[n]]=s[s[n]]},getRule:function getRule(e){j();var t,n,i,s,r=c.all?"rules":"cssRules",o=c.styleSheets,l=o.length,u=":"===e.charAt(0);for(e=(u?"":",")+e.split("::").join(":").toLowerCase()+",",u&&(s=[]);l--;){try{if(!(n=o[l][r]))continue;t=n.length}catch(e){console.warn(e);continue}for(;-1<--t;)if((i=n[t]).selectorText&&-1!==(","+i.selectorText.split("::").join(":").toLowerCase()+",").indexOf(e)){if(!u)return i.style;s.push(i.style)}}return s},register:s};i()&&t.registerPlugin(r),e.CSSRulePlugin=r,e.default=r;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}}); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function h(){return"undefined"!=typeof window}function i(){return t||h()&&(t=window.gsap)&&t.registerPlugin&&t}function j(){return n||(s(),o||console.warn("Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)")),n}var t,n,c,o,s=function _initCore(e){t=e||i(),h()&&(c=document),t&&(o=t.plugins.css)&&(n=1)},r={version:"3.5.0",name:"cssRule",init:function init(e,t,n,i,s){if(!j()||void 0===e.cssText)return!1;var r=e._gsProxy=e._gsProxy||c.createElement("div");this.ss=e,this.style=r.style,r.style.cssText=e.cssText,o.prototype.init.call(this,r,t,n,i,s)},render:function render(e,t){for(var n,i=t._pt,s=t.style,r=t.ss;i;)i.r(e,i.d),i=i._next;for(n=s.length;-1<--n;)r[s[n]]=s[s[n]]},getRule:function getRule(e){j();var t,n,i,s,r=c.all?"rules":"cssRules",o=c.styleSheets,l=o.length,u=":"===e.charAt(0);for(e=(u?"":",")+e.split("::").join(":").toLowerCase()+",",u&&(s=[]);l--;){try{if(!(n=o[l][r]))continue;t=n.length}catch(e){console.warn(e);continue}for(;-1<--t;)if((i=n[t]).selectorText&&-1!==(","+i.selectorText.split("::").join(":").toLowerCase()+",").indexOf(e)){if(!u)return i.style;s.push(i.style)}}return s},register:s};i()&&t.registerPlugin(r),e.CSSRulePlugin=r,e.default=r;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}}); diff --git a/dist/CSSRulePlugin.min.js.map b/dist/CSSRulePlugin.min.js.map index c7c7054e8..c29b34b08 100644 --- a/dist/CSSRulePlugin.min.js.map +++ b/dist/CSSRulePlugin.min.js.map @@ -1 +1 @@ -{"version":3,"file":"CSSRulePlugin.min.js","sources":["../src/CSSRulePlugin.js"],"sourcesContent":["/*!\n * CSSRulePlugin 3.4.2\n * https://greensock.com\n *\n * @license Copyright 2008-2020, GreenSock. All rights reserved.\n * Subject to the terms at https://greensock.com/standard-license or for\n * Club GreenSock members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n*/\n/* eslint-disable */\n\nlet gsap, _coreInitted, _win, _doc, CSSPlugin,\n\t_windowExists = () => typeof(window) !== \"undefined\",\n\t_getGSAP = () => gsap || (_windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap),\n\t_checkRegister = () => {\n\t\tif (!_coreInitted) {\n\t\t\t_initCore();\n\t\t\tif (!CSSPlugin) {\n\t\t\t\tconsole.warn(\"Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)\");\n\t\t\t}\n\t\t}\n\t\treturn _coreInitted;\n\t},\n\t_initCore = core => {\n\t\tgsap = core || _getGSAP();\n\t\tif (_windowExists()) {\n\t\t\t_win = window;\n\t\t\t_doc = document;\n\t\t}\n\t\tif (gsap) {\n\t\t\tCSSPlugin = gsap.plugins.css;\n\t\t\tif (CSSPlugin) {\n\t\t\t\t_coreInitted = 1;\n\t\t\t}\n\t\t}\n\t};\n\n\nexport const CSSRulePlugin = {\n\tversion: \"3.4.2\",\n\tname: \"cssRule\",\n\tinit(target, value, tween, index, targets) {\n\t\tif (!_checkRegister() || typeof(target.cssText) === \"undefined\") {\n\t\t\treturn false;\n\t\t}\n\t\tlet div = target._gsProxy = target._gsProxy || _doc.createElement(\"div\");\n\t\tthis.ss = target;\n\t\tthis.style = div.style;\n\t\tdiv.style.cssText = target.cssText;\n\t\tCSSPlugin.prototype.init.call(this, div, value, tween, index, targets); //we just offload all the work to the regular CSSPlugin and then copy the cssText back over to the rule in the render() method. This allows us to have all of the updates to CSSPlugin automatically flow through to CSSRulePlugin instead of having to maintain both\n\t},\n\trender(ratio, data) {\n\t\tlet pt = data._pt,\n\t\t\tstyle = data.style,\n\t\t\tss = data.ss,\n\t\t\ti;\n\t\twhile (pt) {\n\t\t\tpt.r(ratio, pt.d);\n\t\t\tpt = pt._next;\n\t\t}\n\t\ti = style.length;\n\t\twhile (--i > -1) {\n\t\t\tss[style[i]] = style[style[i]];\n\t\t}\n\t},\n\tgetRule(selector) {\n\t\t_checkRegister();\n\t\tlet ruleProp = _doc.all ? \"rules\" : \"cssRules\",\n\t\t\tstyleSheets = _doc.styleSheets,\n\t\t\ti = styleSheets.length,\n\t\t\tpseudo = (selector.charAt(0) === \":\"),\n\t\t\tj, curSS, cs, a;\n\t\tselector = (pseudo ? \"\" : \",\") + selector.split(\"::\").join(\":\").toLowerCase() + \",\"; //note: old versions of IE report tag name selectors as upper case, so we just change everything to lowercase.\n\t\tif (pseudo) {\n\t\t\ta = [];\n\t\t}\n\t\twhile (i--) {\n\t\t\t//Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch.\n\t\t\ttry {\n\t\t\t\tcurSS = styleSheets[i][ruleProp];\n\t\t\t\tif (!curSS) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tj = curSS.length;\n\t\t\t} catch (e) {\n\t\t\t\tconsole.warn(e);\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\twhile (--j > -1) {\n\t\t\t\tcs = curSS[j];\n\t\t\t\tif (cs.selectorText && (\",\" + cs.selectorText.split(\"::\").join(\":\").toLowerCase() + \",\").indexOf(selector) !== -1) { //note: IE adds an extra \":\" to pseudo selectors, so .myClass:after becomes .myClass::after, so we need to strip the extra one out.\n\t\t\t\t\tif (pseudo) {\n\t\t\t\t\t\ta.push(cs.style);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn cs.style;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn a;\n\t},\n\tregister: _initCore\n};\n\n_getGSAP() && gsap.registerPlugin(CSSRulePlugin);\n\nexport { CSSRulePlugin as default };"],"names":["_windowExists","window","_getGSAP","gsap","registerPlugin","_checkRegister","_coreInitted","_initCore","CSSPlugin","console","warn","_doc","core","document","plugins","css","CSSRulePlugin","version","name","init","target","value","tween","index","targets","cssText","div","_gsProxy","createElement","ss","style","prototype","call","this","render","ratio","data","i","pt","_pt","r","d","_next","length","getRule","selector","j","curSS","cs","a","ruleProp","all","styleSheets","pseudo","charAt","split","join","toLowerCase","e","selectorText","indexOf","push","register"],"mappings":";;;;;;;;;6MAYiB,SAAhBA,UAAyC,oBAAZC,OAClB,SAAXC,WAAiBC,GAASH,MAAoBG,EAAOF,OAAOE,OAASA,EAAKC,gBAAkBD,EAC3E,SAAjBE,WACMC,IACJC,IACKC,GACJC,QAAQC,KAAK,yDAGRJ,MAVLH,EAAMG,EAAoBK,EAAMH,EAYnCD,EAAY,SAAZA,UAAYK,GACXT,EAAOS,GAAQV,IACXF,MAEHW,EAAOE,UAEJV,IACHK,EAAYL,EAAKW,QAAQC,OAExBT,EAAe,IAMNU,EAAgB,CAC5BC,QAAS,QACTC,KAAM,UACNC,mBAAKC,EAAQC,EAAOC,EAAOC,EAAOC,OAC5BnB,UAA+C,IAApBe,EAAOK,eAC/B,MAEJC,EAAMN,EAAOO,SAAWP,EAAOO,UAAYhB,EAAKiB,cAAc,YAC7DC,GAAKT,OACLU,MAAQJ,EAAII,MACjBJ,EAAII,MAAML,QAAUL,EAAOK,QAC3BjB,EAAUuB,UAAUZ,KAAKa,KAAKC,KAAMP,EAAKL,EAAOC,EAAOC,EAAOC,IAE/DU,uBAAOC,EAAOC,WAIZC,EAHGC,EAAKF,EAAKG,IACbT,EAAQM,EAAKN,MACbD,EAAKO,EAAKP,GAEJS,GACNA,EAAGE,EAAEL,EAAOG,EAAGG,GACfH,EAAKA,EAAGI,UAETL,EAAIP,EAAMa,QACI,IAALN,GACRR,EAAGC,EAAMO,IAAMP,EAAMA,EAAMO,KAG7BO,yBAAQC,GACPxC,QAKCyC,EAAGC,EAAOC,EAAIC,EAJXC,EAAWvC,EAAKwC,IAAM,QAAU,WACnCC,EAAczC,EAAKyC,YACnBf,EAAIe,EAAYT,OAChBU,EAAiC,MAAvBR,EAASS,OAAO,OAE3BT,GAAYQ,EAAS,GAAK,KAAOR,EAASU,MAAM,MAAMC,KAAK,KAAKC,cAAgB,IAC5EJ,IACHJ,EAAI,IAEEZ,KAAK,UAGVU,EAAQK,EAAYf,GAAGa,aAIvBJ,EAAIC,EAAMJ,OACT,MAAOe,GACRjD,QAAQC,KAAKgD,kBAGA,IAALZ,OACRE,EAAKD,EAAMD,IACJa,eAAyG,KAAxF,IAAMX,EAAGW,aAAaJ,MAAM,MAAMC,KAAK,KAAKC,cAAgB,KAAKG,QAAQf,GAAkB,KAC9GQ,SAGIL,EAAGlB,MAFVmB,EAAEY,KAAKb,EAAGlB,eAOPmB,GAERa,SAAUvD,GAGXL,KAAcC,EAAKC,eAAeY"} \ No newline at end of file +{"version":3,"file":"CSSRulePlugin.min.js","sources":["../src/CSSRulePlugin.js"],"sourcesContent":["/*!\n * CSSRulePlugin 3.5.0\n * https://greensock.com\n *\n * @license Copyright 2008-2020, GreenSock. All rights reserved.\n * Subject to the terms at https://greensock.com/standard-license or for\n * Club GreenSock members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n*/\n/* eslint-disable */\n\nlet gsap, _coreInitted, _win, _doc, CSSPlugin,\n\t_windowExists = () => typeof(window) !== \"undefined\",\n\t_getGSAP = () => gsap || (_windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap),\n\t_checkRegister = () => {\n\t\tif (!_coreInitted) {\n\t\t\t_initCore();\n\t\t\tif (!CSSPlugin) {\n\t\t\t\tconsole.warn(\"Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)\");\n\t\t\t}\n\t\t}\n\t\treturn _coreInitted;\n\t},\n\t_initCore = core => {\n\t\tgsap = core || _getGSAP();\n\t\tif (_windowExists()) {\n\t\t\t_win = window;\n\t\t\t_doc = document;\n\t\t}\n\t\tif (gsap) {\n\t\t\tCSSPlugin = gsap.plugins.css;\n\t\t\tif (CSSPlugin) {\n\t\t\t\t_coreInitted = 1;\n\t\t\t}\n\t\t}\n\t};\n\n\nexport const CSSRulePlugin = {\n\tversion: \"3.5.0\",\n\tname: \"cssRule\",\n\tinit(target, value, tween, index, targets) {\n\t\tif (!_checkRegister() || typeof(target.cssText) === \"undefined\") {\n\t\t\treturn false;\n\t\t}\n\t\tlet div = target._gsProxy = target._gsProxy || _doc.createElement(\"div\");\n\t\tthis.ss = target;\n\t\tthis.style = div.style;\n\t\tdiv.style.cssText = target.cssText;\n\t\tCSSPlugin.prototype.init.call(this, div, value, tween, index, targets); //we just offload all the work to the regular CSSPlugin and then copy the cssText back over to the rule in the render() method. This allows us to have all of the updates to CSSPlugin automatically flow through to CSSRulePlugin instead of having to maintain both\n\t},\n\trender(ratio, data) {\n\t\tlet pt = data._pt,\n\t\t\tstyle = data.style,\n\t\t\tss = data.ss,\n\t\t\ti;\n\t\twhile (pt) {\n\t\t\tpt.r(ratio, pt.d);\n\t\t\tpt = pt._next;\n\t\t}\n\t\ti = style.length;\n\t\twhile (--i > -1) {\n\t\t\tss[style[i]] = style[style[i]];\n\t\t}\n\t},\n\tgetRule(selector) {\n\t\t_checkRegister();\n\t\tlet ruleProp = _doc.all ? \"rules\" : \"cssRules\",\n\t\t\tstyleSheets = _doc.styleSheets,\n\t\t\ti = styleSheets.length,\n\t\t\tpseudo = (selector.charAt(0) === \":\"),\n\t\t\tj, curSS, cs, a;\n\t\tselector = (pseudo ? \"\" : \",\") + selector.split(\"::\").join(\":\").toLowerCase() + \",\"; //note: old versions of IE report tag name selectors as upper case, so we just change everything to lowercase.\n\t\tif (pseudo) {\n\t\t\ta = [];\n\t\t}\n\t\twhile (i--) {\n\t\t\t//Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch.\n\t\t\ttry {\n\t\t\t\tcurSS = styleSheets[i][ruleProp];\n\t\t\t\tif (!curSS) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tj = curSS.length;\n\t\t\t} catch (e) {\n\t\t\t\tconsole.warn(e);\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\twhile (--j > -1) {\n\t\t\t\tcs = curSS[j];\n\t\t\t\tif (cs.selectorText && (\",\" + cs.selectorText.split(\"::\").join(\":\").toLowerCase() + \",\").indexOf(selector) !== -1) { //note: IE adds an extra \":\" to pseudo selectors, so .myClass:after becomes .myClass::after, so we need to strip the extra one out.\n\t\t\t\t\tif (pseudo) {\n\t\t\t\t\t\ta.push(cs.style);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn cs.style;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn a;\n\t},\n\tregister: _initCore\n};\n\n_getGSAP() && gsap.registerPlugin(CSSRulePlugin);\n\nexport { CSSRulePlugin as default };"],"names":["_windowExists","window","_getGSAP","gsap","registerPlugin","_checkRegister","_coreInitted","_initCore","CSSPlugin","console","warn","_doc","core","document","plugins","css","CSSRulePlugin","version","name","init","target","value","tween","index","targets","cssText","div","_gsProxy","createElement","ss","style","prototype","call","this","render","ratio","data","i","pt","_pt","r","d","_next","length","getRule","selector","j","curSS","cs","a","ruleProp","all","styleSheets","pseudo","charAt","split","join","toLowerCase","e","selectorText","indexOf","push","register"],"mappings":";;;;;;;;;6MAYiB,SAAhBA,UAAyC,oBAAZC,OAClB,SAAXC,WAAiBC,GAASH,MAAoBG,EAAOF,OAAOE,OAASA,EAAKC,gBAAkBD,EAC3E,SAAjBE,WACMC,IACJC,IACKC,GACJC,QAAQC,KAAK,yDAGRJ,MAVLH,EAAMG,EAAoBK,EAAMH,EAYnCD,EAAY,SAAZA,UAAYK,GACXT,EAAOS,GAAQV,IACXF,MAEHW,EAAOE,UAEJV,IACHK,EAAYL,EAAKW,QAAQC,OAExBT,EAAe,IAMNU,EAAgB,CAC5BC,QAAS,QACTC,KAAM,UACNC,mBAAKC,EAAQC,EAAOC,EAAOC,EAAOC,OAC5BnB,UAA+C,IAApBe,EAAOK,eAC/B,MAEJC,EAAMN,EAAOO,SAAWP,EAAOO,UAAYhB,EAAKiB,cAAc,YAC7DC,GAAKT,OACLU,MAAQJ,EAAII,MACjBJ,EAAII,MAAML,QAAUL,EAAOK,QAC3BjB,EAAUuB,UAAUZ,KAAKa,KAAKC,KAAMP,EAAKL,EAAOC,EAAOC,EAAOC,IAE/DU,uBAAOC,EAAOC,WAIZC,EAHGC,EAAKF,EAAKG,IACbT,EAAQM,EAAKN,MACbD,EAAKO,EAAKP,GAEJS,GACNA,EAAGE,EAAEL,EAAOG,EAAGG,GACfH,EAAKA,EAAGI,UAETL,EAAIP,EAAMa,QACI,IAALN,GACRR,EAAGC,EAAMO,IAAMP,EAAMA,EAAMO,KAG7BO,yBAAQC,GACPxC,QAKCyC,EAAGC,EAAOC,EAAIC,EAJXC,EAAWvC,EAAKwC,IAAM,QAAU,WACnCC,EAAczC,EAAKyC,YACnBf,EAAIe,EAAYT,OAChBU,EAAiC,MAAvBR,EAASS,OAAO,OAE3BT,GAAYQ,EAAS,GAAK,KAAOR,EAASU,MAAM,MAAMC,KAAK,KAAKC,cAAgB,IAC5EJ,IACHJ,EAAI,IAEEZ,KAAK,UAGVU,EAAQK,EAAYf,GAAGa,aAIvBJ,EAAIC,EAAMJ,OACT,MAAOe,GACRjD,QAAQC,KAAKgD,kBAGA,IAALZ,OACRE,EAAKD,EAAMD,IACJa,eAAyG,KAAxF,IAAMX,EAAGW,aAAaJ,MAAM,MAAMC,KAAK,KAAKC,cAAgB,KAAKG,QAAQf,GAAkB,KAC9GQ,SAGIL,EAAGlB,MAFVmB,EAAEY,KAAKb,EAAGlB,eAOPmB,GAERa,SAAUvD,GAGXL,KAAcC,EAAKC,eAAeY"} \ No newline at end of file diff --git a/dist/Draggable.js b/dist/Draggable.js index a373b21ac..b7783edd5 100644 --- a/dist/Draggable.js +++ b/dist/Draggable.js @@ -1125,7 +1125,7 @@ _touchEventLookup = function (types) { var standard = types.split(","), - converted = (!_isUndefined(_tempDiv.onpointerdown) ? "pointerdown,pointermove,pointerup,pointercancel" : !_isUndefined(_tempDiv.onmspointerdown) ? "MSPointerDown,MSPointerMove,MSPointerUp,MSPointerCancel" : types).split(","), + converted = ("onpointerdown" in _tempDiv ? "pointerdown,pointermove,pointerup,pointercancel" : "onmspointerdown" in _tempDiv ? "MSPointerDown,MSPointerMove,MSPointerUp,MSPointerCancel" : types).split(","), obj = {}, i = 4; @@ -1813,14 +1813,16 @@ }, recordStartPositions = function recordStartPositions() { var edgeTolerance = 1 - self.edgeResistance, + offsetX = isFixed ? _getDocScrollLeft$1(ownerDoc) : 0, + offsetY = isFixed ? _getDocScrollTop$1(ownerDoc) : 0, parsedOrigin, x, y; updateMatrix(false); if (matrix) { - _point1.x = self.pointerX; - _point1.y = self.pointerY; + _point1.x = self.pointerX - offsetX; + _point1.y = self.pointerY - offsetY; matrix.apply(_point1, _point1); startPointerX = _point1.x; startPointerY = _point1.y; @@ -1850,14 +1852,8 @@ y: parseFloat(parsedOrigin[1]) || 0 }); syncXY(true, true); - x = self.pointerX - rotationOrigin.x; - y = rotationOrigin.y - self.pointerY; - - if (isFixed) { - x -= _getDocScrollLeft$1(ownerDoc); - y += _getDocScrollTop$1(ownerDoc); - } - + x = self.pointerX - rotationOrigin.x - offsetX; + y = rotationOrigin.y - self.pointerY + offsetY; startElementX = self.x; startElementY = self.y = Math.atan2(y, x) * _RAD2DEG; } else { @@ -2082,7 +2078,7 @@ checkAutoScrollBounds = true; } - setPointerPosition(e.pageX - (isFixed && rotationMode ? _getDocScrollLeft$1(ownerDoc) : 0), e.pageY - (isFixed && rotationMode ? _getDocScrollTop$1(ownerDoc) : 0), hasMoveCallback); + setPointerPosition(e.pageX, e.pageY, hasMoveCallback); }, setPointerPosition = function setPointerPosition(pointerX, pointerY, invokeOnMove) { var dragTolerance = 1 - self.dragResistance, @@ -2105,6 +2101,11 @@ self.pointerX = pointerX; self.pointerY = pointerY; + if (isFixed) { + pointerX -= _getDocScrollLeft$1(ownerDoc); + pointerY -= _getDocScrollTop$1(ownerDoc); + } + if (rotationMode) { y = Math.atan2(rotationOrigin.y - pointerY, pointerX - rotationOrigin.x) * _RAD2DEG; dif = self.y - y; @@ -2446,10 +2447,7 @@ }; old = Draggable.get(target); - - if (old) { - old.kill(); - } + old && old.kill(); _this2.startDrag = function (event, align) { var r1, r2, p1, p2; @@ -2909,7 +2907,7 @@ }); Draggable.zIndex = 1000; - Draggable.version = "3.4.2"; + Draggable.version = "3.5.0"; _getGSAP() && gsap.registerPlugin(Draggable); exports.Draggable = Draggable; diff --git a/dist/Draggable.min.js b/dist/Draggable.min.js index 6154c663d..b542b7e65 100644 --- a/dist/Draggable.min.js +++ b/dist/Draggable.min.js @@ -1,5 +1,5 @@ /*! - * Draggable 3.4.2 + * Draggable 3.5.0 * https://greensock.com * * @license Copyright 2020, GreenSock. All rights reserved. @@ -7,5 +7,5 @@ * @author: Jack Doyle, jack@greensock.com */ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function v(e,t){if(e.parentNode&&(p||w(e))){var n=S(e),o=n?n.getAttribute("xmlns")||"http://www.w3.org/2000/svg":"http://www.w3.org/1999/xhtml",r=n?t?"rect":"g":"div",i=2!==t?0:100,a=3===t?100:0,l="position:absolute;display:block;pointer-events:none;",s=p.createElementNS?p.createElementNS(o.replace(/^https/,"http"),r):p.createElement(r);return t&&(n?(h=h||v(e),s.setAttribute("width",.01),s.setAttribute("height",.01),s.setAttribute("transform","translate("+i+","+a+")"),h.appendChild(s)):(u||((u=v(e)).style.cssText=l),s.style.cssText=l+"width:0.1px;height:0.1px;top:"+a+"px;left:"+i+"px",u.appendChild(s))),s}throw"Need document and parent."}function y(e,t,n,o,r,i,a){return e.a=t,e.b=n,e.c=o,e.d=r,e.e=i,e.f=a,e}var p,d,r,i,u,h,f,g,t,x="transform",m=x+"Origin",w=function _setDoc(e){var t=e.ownerDocument||e;!(x in e.style)&&"msTransform"in e.style&&(m=(x="msTransform")+"Origin");for(;t.parentNode&&(t=t.parentNode););if(d=window,f=new fe,t){r=(p=t).documentElement,i=t.body;var n=t.createElement("div"),o=t.createElement("div");i.appendChild(n),n.appendChild(o),n.style.position="static",n.style[x]="translate3d(0,0,1px)",g=o.offsetParent!==n,i.removeChild(n)}return t},b=function _forceNonZeroScale(e){for(var t,n;e&&e!==i;)(n=e._gsap)&&!n.scaleX&&!n.scaleY&&n.renderTransform&&(n.scaleX=n.scaleY=1e-4,n.renderTransform(1,n),t?t.push(n):t=[n]),e=e.parentNode;return t},D=[],L=[],M=function _getDocScrollTop(){return d.pageYOffset||p.scrollTop||r.scrollTop||i.scrollTop||0},E=function _getDocScrollLeft(){return d.pageXOffset||p.scrollLeft||r.scrollLeft||i.scrollLeft||0},S=function _svgOwner(e){return e.ownerSVGElement||("svg"===(e.tagName+"").toLowerCase()?e:null)},P=function _isFixed(e){return"fixed"===d.getComputedStyle(e).position||((e=e.parentNode)&&1===e.nodeType?_isFixed(e):void 0)},k=function _placeSiblings(e,t){var n,o,r,i,a,l=S(e),s=e===l,c=l?D:L;if(e===d)return e;if(c.length||c.push(v(e,1),v(e,2),v(e,3)),n=l?h:u,l)r=s?{x:0,y:0}:e.getBBox(),a=(o=e.transform?e.transform.baseVal:{}).numberOfItems?(i=(o=1o.scrollHeight,a.removeChild(o),B=n,Te=function(e){for(var t=e.split(","),n=(X(s.onpointerdown)?X(s.onmspointerdown)?e:"MSPointerDown,MSPointerMove,MSPointerUp,MSPointerCancel":"pointerdown,pointermove,pointerup,pointercancel").split(","),o={},r=4;-1<--r;)o[t[r]]=n[r],o[n[r]]=t[r];try{ve.addEventListener("test",null,Object.defineProperty({},"passive",{get:function get(){N=1}}))}catch(e){}return o}("touchstart,touchmove,touchend,touchcancel"),ua(me,"touchcancel",Y),ua(xe,"touchmove",Y),l&&l.addEventListener("touchstart",Y),ua(me,"contextmenu",function(){for(var e in Re)Re[e].isPressed&&Re[e].endDrag()}),ge=c=U()}var n,o,r,i,a;ge?(Ee=ge.plugins.inertia,C=ge.utils.checkPrefix,O=C(O),Ye=C(Ye),we=ge.utils.toArray,R=!!C("perspective")):e&&console.warn("Please gsap.registerPlugin(Draggable)")}var ge,xe,me,ve,l,s,ye,c,C,we,N,be,Te,De,Le,Me,Ee,Xe,Se,R,B,n,O="transform",Ye="transformOrigin",_e=Array.isArray,Pe=180/Math.PI,ke=1e20,a=new fe,Ce=Date.now||function(){return(new Date).getTime()},Ne=[],Re={},Be=0,o=/^(?:a|input|textarea|button|select)$/i,Oe=0,Ae={},Ie={},We=function _isRoot(e){return!(e&&e!==ve&&9!==e.nodeType&&e!==me.body&&e!==xe&&e.nodeType&&e.parentNode)},A={},Fe={},I=function _getElementBounds(e,t){t=we(t)[0];var n,o,r,i,a,l,s,c,d,u,p,h,f,g,x=e.getBBox&&e.ownerSVGElement,m=e.ownerDocument||me;if(e===xe)r=Aa(m),o=(n=Ba(m))+(m.documentElement.clientWidth||e.innerWidth||m.body.clientWidth||0),i=r+((e.innerHeight||0)-20d||l.rightu||l.bottom=l.width*l.height*n:o.width>n&&o.height>n))},Draggable);function Draggable(h,u){var e;e=He.call(this)||this,ge||Wa(1),h=we(h)[0],Ee=Ee||ge.plugins.inertia,e.vars=u=na(u||{}),e.target=h,e.x=e.y=e.rotation=0,e.dragResistance=parseFloat(u.dragResistance)||0,e.edgeResistance=isNaN(u.edgeResistance)?1:parseFloat(u.edgeResistance)||0,e.lockAxis=u.lockAxis,e.autoScroll=u.autoScroll||0,e.lockedAxis=null,e.allowEventDefault=!!u.allowEventDefault,ge.getProperty(h,"x");function Bg(e,t){return parseFloat(le.get(h,e,t))}function gh(e){return wa(e),e.stopImmediatePropagation&&e.stopImmediatePropagation(),!1}function hh(e){if(Z.autoScroll&&Z.isDragging&&(ee||k)){var t,n,o,r,i,a,l,s,c=h,d=15*Z.autoScroll;for(ee=!1,Ie.scrollTop=null!=xe.pageYOffset?xe.pageYOffset:null!=ce.documentElement.scrollTop?ce.documentElement.scrollTop:ce.body.scrollTop,Ie.scrollLeft=null!=xe.pageXOffset?xe.pageXOffset:null!=ce.documentElement.scrollLeft?ce.documentElement.scrollLeft:ce.body.scrollLeft,r=Z.pointerX-Ie.scrollLeft,i=Z.pointerY-Ie.scrollTop;c&&!n;)t=(n=We(c.parentNode))?Ie:c.parentNode,o=n?{bottom:Math.max(ve.clientHeight,xe.innerHeight||0),right:Math.max(ve.clientWidth,xe.innerWidth||0),left:0,top:0}:t.getBoundingClientRect(),a=l=0,U&&((s=t._gsMaxScrollY-t.scrollTop)<0?l=s:i>o.bottom-oe&&s?(ee=!0,l=Math.min(s,d*(1-Math.max(0,o.bottom-i)/oe)|0)):io.right-ne&&s?(ee=!0,a=Math.min(s,d*(1-Math.max(0,o.right-r)/ne)|0)):rQ?(Z.y=a,T+(D-a)*c):T):(B&&(s=e*B.a+t*B.c+B.e,t=e*B.b+t*B.d+B.f,e=s),(r=t-b)Math.abs(r)?"y":U?"x":null,s&&V(Z.vars.onLockAxis)&&Z.vars.onLockAxis.call(Z,Z.pointerEvent)),"y"===s?r=0:"x"===s&&(o=0)),i=_(T+o*c),a=_(D+r*c)),(C||N||R)&&(Z.x!==i||Z.y!==a&&!K)?(R&&(Ae.x=i,Ae.y=a,s=R(Ae),i=_(s.x),a=_(s.y)),C&&(i=_(C(i))),N&&(a=_(N(a)))):L&&(Ma._gsMaxScrollY&&(a.scrollTop=a._gsMaxScrollY),q&&a.scrollLeft>a._gsMaxScrollX&&(a.scrollLeft=a._gsMaxScrollX),i=a;Z.isThrowing&&(r||Z.endX>M||Z.endXS||Z.endYo.scrollHeight,a.removeChild(o),B=n,Te=function(e){for(var t=e.split(","),n=(("onpointerdown"in s?"pointerdown,pointermove,pointerup,pointercancel":"onmspointerdown"in s?"MSPointerDown,MSPointerMove,MSPointerUp,MSPointerCancel":e).split(",")),o={},r=4;-1<--r;)o[t[r]]=n[r],o[n[r]]=t[r];try{ve.addEventListener("test",null,Object.defineProperty({},"passive",{get:function get(){N=1}}))}catch(e){}return o}("touchstart,touchmove,touchend,touchcancel"),ua(me,"touchcancel",Y),ua(xe,"touchmove",Y),l&&l.addEventListener("touchstart",Y),ua(me,"contextmenu",function(){for(var e in Re)Re[e].isPressed&&Re[e].endDrag()}),ge=c=U()}var n,o,r,i,a;ge?(Ee=ge.plugins.inertia,C=ge.utils.checkPrefix,O=C(O),Ye=C(Ye),we=ge.utils.toArray,R=!!C("perspective")):e&&console.warn("Please gsap.registerPlugin(Draggable)")}var ge,xe,me,ve,l,s,ye,c,C,we,N,be,Te,De,Le,Me,Ee,Xe,Se,R,B,n,O="transform",Ye="transformOrigin",_e=Array.isArray,Pe=180/Math.PI,ke=1e20,a=new fe,Ce=Date.now||function(){return(new Date).getTime()},Ne=[],Re={},Be=0,o=/^(?:a|input|textarea|button|select)$/i,Oe=0,Ae={},Ie={},We=function _isRoot(e){return!(e&&e!==ve&&9!==e.nodeType&&e!==me.body&&e!==xe&&e.nodeType&&e.parentNode)},A={},Fe={},I=function _getElementBounds(e,t){t=we(t)[0];var n,o,r,i,a,l,s,c,d,u,p,h,f,g,x=e.getBBox&&e.ownerSVGElement,m=e.ownerDocument||me;if(e===xe)r=Aa(m),o=(n=Ba(m))+(m.documentElement.clientWidth||e.innerWidth||m.body.clientWidth||0),i=r+((e.innerHeight||0)-20d||l.rightu||l.bottom=l.width*l.height*n:o.width>n&&o.height>n))},Draggable);function Draggable(h,u){var e;e=He.call(this)||this,ge||Wa(1),h=we(h)[0],Ee=Ee||ge.plugins.inertia,e.vars=u=na(u||{}),e.target=h,e.x=e.y=e.rotation=0,e.dragResistance=parseFloat(u.dragResistance)||0,e.edgeResistance=isNaN(u.edgeResistance)?1:parseFloat(u.edgeResistance)||0,e.lockAxis=u.lockAxis,e.autoScroll=u.autoScroll||0,e.lockedAxis=null,e.allowEventDefault=!!u.allowEventDefault,ge.getProperty(h,"x");function Bg(e,t){return parseFloat(le.get(h,e,t))}function gh(e){return wa(e),e.stopImmediatePropagation&&e.stopImmediatePropagation(),!1}function hh(e){if(Z.autoScroll&&Z.isDragging&&(ee||k)){var t,n,o,r,i,a,l,s,c=h,d=15*Z.autoScroll;for(ee=!1,Ie.scrollTop=null!=xe.pageYOffset?xe.pageYOffset:null!=ce.documentElement.scrollTop?ce.documentElement.scrollTop:ce.body.scrollTop,Ie.scrollLeft=null!=xe.pageXOffset?xe.pageXOffset:null!=ce.documentElement.scrollLeft?ce.documentElement.scrollLeft:ce.body.scrollLeft,r=Z.pointerX-Ie.scrollLeft,i=Z.pointerY-Ie.scrollTop;c&&!n;)t=(n=We(c.parentNode))?Ie:c.parentNode,o=n?{bottom:Math.max(ve.clientHeight,xe.innerHeight||0),right:Math.max(ve.clientWidth,xe.innerWidth||0),left:0,top:0}:t.getBoundingClientRect(),a=l=0,U&&((s=t._gsMaxScrollY-t.scrollTop)<0?l=s:i>o.bottom-oe&&s?(ee=!0,l=Math.min(s,d*(1-Math.max(0,o.bottom-i)/oe)|0)):io.right-ne&&s?(ee=!0,a=Math.min(s,d*(1-Math.max(0,o.right-r)/ne)|0)):rQ?(Z.y=a,T+(D-a)*c):T):(B&&(s=e*B.a+t*B.c+B.e,t=e*B.b+t*B.d+B.f,e=s),(r=t-b)Math.abs(r)?"y":U?"x":null,s&&V(Z.vars.onLockAxis)&&Z.vars.onLockAxis.call(Z,Z.pointerEvent)),"y"===s?r=0:"x"===s&&(o=0)),i=_(T+o*c),a=_(D+r*c)),(C||N||R)&&(Z.x!==i||Z.y!==a&&!K)?(R&&(Ae.x=i,Ae.y=a,s=R(Ae),i=_(s.x),a=_(s.y)),C&&(i=_(C(i))),N&&(a=_(N(a)))):L&&(Ma._gsMaxScrollY&&(a.scrollTop=a._gsMaxScrollY),q&&a.scrollLeft>a._gsMaxScrollX&&(a.scrollLeft=a._gsMaxScrollX),i=a;Z.isThrowing&&(r||Z.endX>M||Z.endXS||Z.endY {\n\t\tlet doc = element.ownerDocument || element;\n\t\tif (!(_transformProp in element.style) && \"msTransform\" in element.style) { //to improve compatibility with old Microsoft browsers\n\t\t\t_transformProp = \"msTransform\";\n\t\t\t_transformOriginProp = _transformProp + \"Origin\";\n\t\t}\n\t\twhile (doc.parentNode && (doc = doc.parentNode)) {\t}\n\t\t_win = window;\n\t\t_identityMatrix = new Matrix2D();\n\t\tif (doc) {\n\t\t\t_doc = doc;\n\t\t\t_docElement = doc.documentElement;\n\t\t\t_body = doc.body;\n\t\t\t// now test for the offset reporting bug. Use feature detection instead of browser sniffing to make things more bulletproof and future-proof. Hopefully Safari will fix their bug soon but it's 2020 and it's still not fixed.\n\t\t\tlet d1 = doc.createElement(\"div\"),\n\t\t\t\td2 = doc.createElement(\"div\");\n\t\t\t_body.appendChild(d1);\n\t\t\td1.appendChild(d2);\n\t\t\td1.style.position = \"static\";\n\t\t\td1.style[_transformProp] = \"translate3d(0,0,1px)\";\n\t\t\t_hasOffsetBug = (d2.offsetParent !== d1);\n\t\t\t_body.removeChild(d1);\n\t\t}\n\t\treturn doc;\n\t},\n\t_forceNonZeroScale = e => { // walks up the element's ancestors and finds any that had their scale set to 0 via GSAP, and changes them to 0.0001 to ensure that measurements work\n\t\tlet a, cache;\n\t\twhile (e && e !== _body) {\n\t\t\tcache = e._gsap;\n\t\t\tif (cache && !cache.scaleX && !cache.scaleY && cache.renderTransform) {\n\t\t\t\tcache.scaleX = cache.scaleY = 1e-4;\n\t\t\t\tcache.renderTransform(1, cache);\n\t\t\t\ta ? a.push(cache) : (a = [cache]);\n\t\t\t}\n\t\t\te = e.parentNode;\n\t\t}\n\t\treturn a;\n\t},\n\t// possible future addition: pass an element to _forceDisplay() and it'll walk up all its ancestors and make sure anything with display: none is set to display: block, and if there's no parentNode, it'll add it to the body. It returns an Array that you can then feed to _revertDisplay() to have it revert all the changes it made.\n\t// _forceDisplay = e => {\n\t// \tlet a = [],\n\t// \t\tparent;\n\t// \twhile (e && e !== _body) {\n\t// \t\tparent = e.parentNode;\n\t// \t\t(_win.getComputedStyle(e).display === \"none\" || !parent) && a.push(e, e.style.display, parent) && (e.style.display = \"block\");\n\t// \t\tparent || _body.appendChild(e);\n\t// \t\te = parent;\n\t// \t}\n\t// \treturn a;\n\t// },\n\t// _revertDisplay = a => {\n\t// \tfor (let i = 0; i < a.length; i+=3) {\n\t// \t\ta[i+1] ? (a[i].style.display = a[i+1]) : a[i].style.removeProperty(\"display\");\n\t// \t\ta[i+2] || a[i].parentNode.removeChild(a[i]);\n\t// \t}\n\t// },\n\t_svgTemps = [], //we create 3 elements for SVG, and 3 for other DOM elements and cache them for performance reasons. They get nested in _divContainer and _svgContainer so that just one element is added to the DOM on each successive attempt. Again, performance is key.\n\t_divTemps = [],\n\t_getDocScrollTop = () => _win.pageYOffset || _doc.scrollTop || _docElement.scrollTop || _body.scrollTop || 0,\n\t_getDocScrollLeft = () => _win.pageXOffset || _doc.scrollLeft || _docElement.scrollLeft || _body.scrollLeft || 0,\n\t_svgOwner = element => element.ownerSVGElement || ((element.tagName + \"\").toLowerCase() === \"svg\" ? element : null),\n\t_isFixed = element => {\n\t\tif (_win.getComputedStyle(element).position === \"fixed\") {\n\t\t\treturn true;\n\t\t}\n\t\telement = element.parentNode;\n\t\tif (element && element.nodeType === 1) { // avoid document fragments which will throw an error.\n\t\t\treturn _isFixed(element);\n\t\t}\n\t},\n\t_createSibling = (element, i) => {\n\t\tif (element.parentNode && (_doc || _setDoc(element))) {\n\t\t\tlet svg = _svgOwner(element),\n\t\t\t\tns = svg ? (svg.getAttribute(\"xmlns\") || \"http://www.w3.org/2000/svg\") : \"http://www.w3.org/1999/xhtml\",\n\t\t\t\ttype = svg ? (i ? \"rect\" : \"g\") : \"div\",\n\t\t\t\tx = i !== 2 ? 0 : 100,\n\t\t\t\ty = i === 3 ? 100 : 0,\n\t\t\t\tcss = \"position:absolute;display:block;pointer-events:none;\",\n\t\t\t\te = _doc.createElementNS ? _doc.createElementNS(ns.replace(/^https/, \"http\"), type) : _doc.createElement(type);\n\t\t\tif (i) {\n\t\t\t\tif (!svg) {\n\t\t\t\t\tif (!_divContainer) {\n\t\t\t\t\t\t_divContainer = _createSibling(element);\n\t\t\t\t\t\t_divContainer.style.cssText = css;\n\t\t\t\t\t}\n\t\t\t\t\te.style.cssText = css + \"width:0.1px;height:0.1px;top:\" + y + \"px;left:\" + x + \"px\";\n\t\t\t\t\t_divContainer.appendChild(e);\n\n\t\t\t\t} else {\n\t\t\t\t\tif (!_svgContainer) {\n\t\t\t\t\t\t_svgContainer = _createSibling(element);\n\t\t\t\t\t}\n\t\t\t\t\te.setAttribute(\"width\", 0.01);\n\t\t\t\t\te.setAttribute(\"height\", 0.01);\n\t\t\t\t\te.setAttribute(\"transform\", \"translate(\" + x + \",\" + y + \")\");\n\t\t\t\t\t_svgContainer.appendChild(e);\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn e;\n\t\t}\n\t\tthrow \"Need document and parent.\";\n\t},\n\t_consolidate = m => { // replaces SVGTransformList.consolidate() because a bug in Firefox causes it to break pointer events. See https://greensock.com/forums/topic/23248-touch-is-not-working-on-draggable-in-firefox-windows-v324/?tab=comments#comment-109800\n\t\tlet c = new Matrix2D(),\n\t\t\ti = 0;\n\t\tfor (; i < m.numberOfItems; i++) {\n\t\t\tc.multiply(m.getItem(i).matrix);\n\t\t}\n\t\treturn c;\n\t},\n\t_placeSiblings = (element, adjustGOffset) => {\n\t\tlet svg = _svgOwner(element),\n\t\t\tisRootSVG = element === svg,\n\t\t\tsiblings = svg ? _svgTemps : _divTemps,\n\t\t\tcontainer, m, b, x, y;\n\t\tif (element === _win) {\n\t\t\treturn element;\n\t\t}\n\t\tif (!siblings.length) {\n\t\t\tsiblings.push(_createSibling(element, 1), _createSibling(element, 2), _createSibling(element, 3));\n\t\t}\n\t\tcontainer = svg ? _svgContainer : _divContainer;\n\t\tif (svg) {\n\t\t\tb = isRootSVG ? {x:0, y:0} : element.getBBox();\n\t\t\tm = element.transform ? element.transform.baseVal : {}; // IE11 doesn't follow the spec.\n\t\t\tif (m.numberOfItems) {\n\t\t\t\tm = m.numberOfItems > 1 ? _consolidate(m) : m.getItem(0).matrix; // don't call m.consolidate().matrix because a bug in Firefox makes pointer events not work when consolidate() is called on the same tick as getBoundingClientRect()! See https://greensock.com/forums/topic/23248-touch-is-not-working-on-draggable-in-firefox-windows-v324/?tab=comments#comment-109800\n\t\t\t\tx = m.a * b.x + m.c * b.y;\n\t\t\t\ty = m.b * b.x + m.d * b.y;\n\t\t\t} else {\n\t\t\t\tm = _identityMatrix;\n\t\t\t\tx = b.x;\n\t\t\t\ty = b.y;\n\t\t\t}\n\t\t\tif (adjustGOffset && element.tagName.toLowerCase() === \"g\") {\n\t\t\t\tx = y = 0;\n\t\t\t}\n\t\t\tcontainer.setAttribute(\"transform\", \"matrix(\" + m.a + \",\" + m.b + \",\" + m.c + \",\" + m.d + \",\" + (m.e + x) + \",\" + (m.f + y) + \")\");\n\t\t\t(isRootSVG ? svg : element.parentNode).appendChild(container);\n\t\t} else {\n\t\t\tx = y = 0;\n\t\t\tif (_hasOffsetBug) { // some browsers (like Safari) have a bug that causes them to misreport offset values. When an ancestor element has a transform applied, it's supposed to treat it as if it's position: relative (new context). Safari botches this, so we need to find the closest ancestor (between the element and its offsetParent) that has a transform applied and if one is found, grab its offsetTop/Left and subtract them to compensate.\n\t\t\t\tm = element.offsetParent;\n\t\t\t\tb = element;\n\t\t\t\twhile (b && (b = b.parentNode) && b !== m && b.parentNode) {\n\t\t\t\t\tif ((_win.getComputedStyle(b)[_transformProp] + \"\").length > 4) {\n\t\t\t\t\t\tx = b.offsetLeft;\n\t\t\t\t\t\ty = b.offsetTop;\n\t\t\t\t\t\tb = 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tb = container.style;\n\t\t\tb.top = (element.offsetTop - y) + \"px\";\n\t\t\tb.left = (element.offsetLeft - x) + \"px\";\n\t\t\tm = _win.getComputedStyle(element);\n\t\t\tb[_transformProp] = m[_transformProp];\n\t\t\tb[_transformOriginProp] = m[_transformOriginProp];\n\t\t\tb.border = m.border;\n\t\t\tb.borderLeftStyle = m.borderLeftStyle;\n\t\t\tb.borderTopStyle = m.borderTopStyle;\n\t\t\tb.borderLeftWidth = m.borderLeftWidth;\n\t\t\tb.borderTopWidth = m.borderTopWidth;\n\t\t\tb.position = m.position === \"fixed\" ? \"fixed\" : \"absolute\";\n\t\t\telement.parentNode.appendChild(container);\n\t\t}\n\t\treturn container;\n\t},\n\t_setMatrix = (m, a, b, c, d, e, f) => {\n\t\tm.a = a;\n\t\tm.b = b;\n\t\tm.c = c;\n\t\tm.d = d;\n\t\tm.e = e;\n\t\tm.f = f;\n\t\treturn m;\n\t};\n\nexport class Matrix2D {\n\tconstructor(a=1, b=0, c=0, d=1, e=0, f=0) {\n\t\t_setMatrix(this, a, b, c, d, e, f);\n\t}\n\n\tinverse() {\n\t\tlet {a, b, c, d, e, f} = this,\n\t\t\tdeterminant = (a * d - b * c) || 1e-10;\n\t\treturn _setMatrix(\n\t\t\tthis,\n\t\t\td / determinant,\n\t\t\t-b / determinant,\n\t\t\t-c / determinant,\n\t\t\ta / determinant,\n\t\t\t(c * f - d * e) / determinant,\n\t\t\t-(a * f - b * e) / determinant\n\t\t);\n\t}\n\n\tmultiply(matrix) {\n\t\tlet {a, b, c, d, e, f} = this,\n\t\t\ta2 = matrix.a,\n\t\t\tb2 = matrix.c,\n\t\t\tc2 = matrix.b,\n\t\t\td2 = matrix.d,\n\t\t\te2 = matrix.e,\n\t\t\tf2 = matrix.f;\n\t\treturn _setMatrix(this,\n\t\t\ta2 * a + c2 * c,\n\t\t\ta2 * b + c2 * d,\n\t\t\tb2 * a + d2 * c,\n\t\t\tb2 * b + d2 * d,\n\t\t\te + e2 * a + f2 * c,\n\t\t\tf + e2 * b + f2 * d);\n\t}\n\n\tclone() {\n\t\treturn new Matrix2D(this.a, this.b, this.c, this.d, this.e, this.f);\n\t}\n\n\tequals(matrix) {\n\t\tlet {a, b, c, d, e, f} = this;\n\t\treturn (a === matrix.a && b === matrix.b && c === matrix.c && d === matrix.d && e === matrix.e && f === matrix.f);\n\t}\n\n\tapply(point, decoratee={}) {\n\t\tlet {x, y} = point,\n\t\t\t{a, b, c, d, e, f} = this;\n\t\tdecoratee.x = (x * a + y * c + e) || 0;\n\t\tdecoratee.y = (x * b + y * d + f) || 0;\n\t\treturn decoratee;\n\t}\n\n}\n\n//feed in an element and it'll return a 2D matrix (optionally inverted) so that you can translate between coordinate spaces.\n// Inverting lets you translate a global point into a local coordinate space. No inverting lets you go the other way.\n// We needed this to work around various browser bugs, like Firefox doesn't accurately report getScreenCTM() when there\n// are transforms applied to ancestor elements.\n// The matrix math to convert any x/y coordinate is as follows, which is wrapped in a convenient apply() method of Matrix2D above:\n// tx = m.a * x + m.c * y + m.e\n// ty = m.b * x + m.d * y + m.f\nexport function getGlobalMatrix(element, inverse, adjustGOffset) { // adjustGOffset is typically used only when grabbing an element's PARENT's global matrix, and it ignores the x/y offset of any SVG elements because they behave in a special way.\n\tif (!element || !element.parentNode || (_doc || _setDoc(element)).documentElement === element) {\n\t\treturn new Matrix2D();\n\t}\n\tlet zeroScales = _forceNonZeroScale(element.parentNode),\n\t\tsvg = _svgOwner(element),\n\t\ttemps = svg ? _svgTemps : _divTemps,\n\t\tcontainer = _placeSiblings(element, adjustGOffset),\n\t\tb1 = temps[0].getBoundingClientRect(),\n\t\tb2 = temps[1].getBoundingClientRect(),\n\t\tb3 = temps[2].getBoundingClientRect(),\n\t\tparent = container.parentNode,\n\t\tisFixed = _isFixed(element),\n\t\tm = new Matrix2D(\n\t\t\t(b2.left - b1.left) / 100,\n\t\t\t(b2.top - b1.top) / 100,\n\t\t\t(b3.left - b1.left) / 100,\n\t\t\t(b3.top - b1.top) / 100,\n\t\t\tb1.left + (isFixed ? 0 : _getDocScrollLeft()),\n\t\t\tb1.top + (isFixed ? 0 : _getDocScrollTop())\n\t\t);\n\tparent.removeChild(container);\n\tif (zeroScales) {\n\t\tb1 = zeroScales.length;\n\t\twhile (b1--) {\n\t\t\tb2 = zeroScales[b1];\n\t\t\tb2.scaleX = b2.scaleY = 0;\n\t\t\tb2.renderTransform(1, b2);\n\t\t}\n\t}\n\treturn inverse ? m.inverse() : m;\n}\n\n// export function getMatrix(element) {\n// \t_doc || _setDoc(element);\n// \tlet m = (_win.getComputedStyle(element)[_transformProp] + \"\").substr(7).match(/[-.]*\\d+[.e\\-+]*\\d*[e\\-\\+]*\\d*/g),\n// \t\tis2D = m && m.length === 6;\n// \treturn !m || m.length < 6 ? new Matrix2D() : new Matrix2D(+m[0], +m[1], +m[is2D ? 2 : 4], +m[is2D ? 3 : 5], +m[is2D ? 4 : 12], +m[is2D ? 5 : 13]);\n// }","/*!\n * Draggable 3.4.2\n * https://greensock.com\n *\n * @license Copyright 2008-2020, GreenSock. All rights reserved.\n * Subject to the terms at https://greensock.com/standard-license or for\n * Club GreenSock members, the agreement issued with that membership.\n * @author: Jack Doyle, jack@greensock.com\n */\n/* eslint-disable */\n\nimport { getGlobalMatrix, Matrix2D } from \"./utils/matrix.js\";\n\nlet gsap, _win, _doc, _docElement, _body, _tempDiv, _placeholderDiv, _coreInitted, _checkPrefix, _toArray, _supportsPassive, _isTouchDevice, _touchEventLookup, _dragCount, _isMultiTouching, _isAndroid, InertiaPlugin, _defaultCursor, _supportsPointer,\n\t_windowExists = () => typeof(window) !== \"undefined\",\n\t_getGSAP = () => gsap || (_windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap),\n\t_isFunction = value => typeof(value) === \"function\",\n\t_isObject = value => typeof(value) === \"object\",\n\t_isUndefined = value => typeof(value) === \"undefined\",\n\t_emptyFunc = () => false,\n\t_transformProp = \"transform\",\n\t_transformOriginProp = \"transformOrigin\",\n\t_round = value => Math.round(value * 10000) / 10000,\n\t_isArray = Array.isArray,\n\t_createElement = (type, ns) => {\n\t\tlet e = _doc.createElementNS ? _doc.createElementNS((ns || \"http://www.w3.org/1999/xhtml\").replace(/^https/, \"http\"), type) : _doc.createElement(type); //some servers swap in https for http in the namespace which can break things, making \"style\" inaccessible.\n\t\treturn e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/).\n\t},\n\t_RAD2DEG = 180 / Math.PI,\n\t_bigNum = 1e20,\n\t_identityMatrix = new Matrix2D(),\n\t_getTime = Date.now || (() => new Date().getTime()),\n\t_renderQueue = [],\n\t_lookup = {}, //when a Draggable is created, the target gets a unique _gsDragID property that allows gets associated with the Draggable instance for quick lookups in Draggable.get(). This avoids circular references that could cause gc problems.\n\t_lookupCount = 0,\n\t_clickableTagExp = /^(?:a|input|textarea|button|select)$/i,\n\t_lastDragTime = 0,\n\t_temp1 = {}, // a simple object we reuse and populate (usually x/y properties) to conserve memory and improve performance.\n\t_windowProxy = {}, //memory/performance optimization - we reuse this object during autoScroll to store window-related bounds/offsets.\n\t_copy = (obj, factor) => {\n\t\tlet copy = {}, p;\n\t\tfor (p in obj) {\n\t\t\tcopy[p] = factor ? obj[p] * factor : obj[p];\n\t\t}\n\t\treturn copy;\n\t},\n\t_extend = (obj, defaults) => {\n\t\tfor (let p in defaults) {\n\t\t\tif (!(p in obj)) {\n\t\t\t\tobj[p] = defaults[p];\n\t\t\t}\n\t\t}\n\t\treturn obj;\n\t},\n\t_renderQueueTick = () => _renderQueue.forEach(func => func()),\n\t_addToRenderQueue = func => {\n\t\t_renderQueue.push(func);\n\t\tif (_renderQueue.length === 1) {\n\t\t\tgsap.ticker.add(_renderQueueTick);\n\t\t}\n\t},\n\t_renderQueueTimeout = () => !_renderQueue.length && gsap.ticker.remove(_renderQueueTick),\n\t_removeFromRenderQueue = func => {\n\t\tlet i = _renderQueue.length;\n\t\twhile (i--) {\n\t\t\tif (_renderQueue[i] === func) {\n\t\t\t\t_renderQueue.splice(i, 1);\n\t\t\t}\n\t\t}\n\t\tgsap.to(_renderQueueTimeout, {overwrite:true, delay:15, duration:0, onComplete:_renderQueueTimeout, data:\"_draggable\"}); //remove the \"tick\" listener only after the render queue is empty for 15 seconds (to improve performance). Adding/removing it constantly for every click/touch wouldn't deliver optimal speed, and we also don't want the ticker to keep calling the render method when things are idle for long periods of time (we want to improve battery life on mobile devices).\n\t},\n\t_setDefaults = (obj, defaults) => {\n\t\tfor (let p in defaults) {\n\t\t\tif (!(p in obj)) {\n\t\t\t\tobj[p] = defaults[p];\n\t\t\t}\n\t\t}\n\t\treturn obj;\n\t},\n\t_addListener = (element, type, func, capture) => {\n\t\tif (element.addEventListener) {\n\t\t\tlet touchType = _touchEventLookup[type];\n\t\t\tcapture = capture || (_supportsPassive ? {passive: false} : null);\n\t\t\telement.addEventListener(touchType || type, func, capture);\n\t\t\t(touchType && type !== touchType) && element.addEventListener(type, func, capture);//some browsers actually support both, so must we. But pointer events cover all.\n\t\t}\n\t},\n\t_removeListener = (element, type, func) => {\n\t\tif (element.removeEventListener) {\n\t\t\tlet touchType = _touchEventLookup[type];\n\t\t\telement.removeEventListener(touchType || type, func);\n\t\t\t(touchType && type !== touchType) && element.removeEventListener(type, func);\n\t\t}\n\t},\n\t_preventDefault = event => {\n\t\tevent.preventDefault && event.preventDefault();\n\t\tevent.preventManipulation && event.preventManipulation(); //for some Microsoft browsers\n\t},\n\t_hasTouchID = (list, ID) => {\n\t\tlet i = list.length;\n\t\twhile (i--) {\n\t\t\tif (list[i].identifier === ID) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t},\n\t_onMultiTouchDocumentEnd = event => {\n\t\t_isMultiTouching = (event.touches && _dragCount < event.touches.length);\n\t\t_removeListener(event.target, \"touchend\", _onMultiTouchDocumentEnd);\n\t},\n\n\t_onMultiTouchDocument = event => {\n\t\t_isMultiTouching = (event.touches && _dragCount < event.touches.length);\n\t\t_addListener(event.target, \"touchend\", _onMultiTouchDocumentEnd);\n\t},\n\t_getDocScrollTop = doc => _win.pageYOffset || doc.scrollTop || doc.documentElement.scrollTop || doc.body.scrollTop || 0,\n\t_getDocScrollLeft = doc => _win.pageXOffset || doc.scrollLeft || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0,\n\t_addScrollListener = (e, callback) => {\n\t\t_addListener(e, \"scroll\", callback);\n\t\tif (!_isRoot(e.parentNode)) {\n\t\t\t_addScrollListener(e.parentNode, callback);\n\t\t}\n\t},\n\t_removeScrollListener = (e, callback) => {\n\t\t_removeListener(e, \"scroll\", callback);\n\t\tif (!_isRoot(e.parentNode)) {\n\t\t\t_removeScrollListener(e.parentNode, callback);\n\t\t}\n\t},\n\t_isRoot = e => !!(!e || e === _docElement || e.nodeType === 9 || e === _doc.body || e === _win || !e.nodeType || !e.parentNode),\n\t_getMaxScroll = (element, axis) => {\n\t\tlet dim = (axis === \"x\") ? \"Width\" : \"Height\",\n\t\t\tscroll = \"scroll\" + dim,\n\t\t\tclient = \"client\" + dim;\n\t\treturn Math.max(0, _isRoot(element) ? Math.max(_docElement[scroll], _body[scroll]) - (_win[\"inner\" + dim] || _docElement[client] || _body[client]) : element[scroll] - element[client]);\n\t},\n\t_recordMaxScrolls = (e, skipCurrent) => { //records _gsMaxScrollX and _gsMaxScrollY properties for the element and all ancestors up the chain so that we can cap it, otherwise dragging beyond the edges with autoScroll on can endlessly scroll.\n\t\tlet x = _getMaxScroll(e, \"x\"),\n\t\t\ty = _getMaxScroll(e, \"y\");\n\t\tif (_isRoot(e)) {\n\t\t\te = _windowProxy;\n\t\t} else {\n\t\t\t_recordMaxScrolls(e.parentNode, skipCurrent);\n\t\t}\n\t\te._gsMaxScrollX = x;\n\t\te._gsMaxScrollY = y;\n\t\tif (!skipCurrent) {\n\t\t\te._gsScrollX = e.scrollLeft || 0;\n\t\t\te._gsScrollY = e.scrollTop || 0;\n\t\t}\n\t},\n\t_setStyle = (element, property, value) => {\n\t\tlet style = element.style;\n\t\tif (!style) {\n\t\t\treturn;\n\t\t}\n\t\tif (_isUndefined(style[property])) {\n\t\t\tproperty = _checkPrefix(property, element) || property;\n\t\t}\n\t\tif (value == null) {\n\t\t\tstyle.removeProperty && style.removeProperty(property.replace(/([A-Z])/g, \"-$1\").toLowerCase());\n\t\t} else {\n\t\t\tstyle[property] = value;\n\t\t}\n\t},\n\t_getComputedStyle = element => _win.getComputedStyle((element instanceof Element) ? element : element.host || (element.parentNode || {}).host || element), //the \"host\" stuff helps to accommodate ShadowDom objects.\n\n\t_tempRect = {}, //reuse to reduce garbage collection tasks\n\t_parseRect = e => { //accepts a DOM element, a mouse event, or a rectangle object and returns the corresponding rectangle with left, right, width, height, top, and bottom properties\n\t\tif (e === _win) {\n\t\t\t_tempRect.left = _tempRect.top = 0;\n\t\t\t_tempRect.width = _tempRect.right = _docElement.clientWidth || e.innerWidth || _body.clientWidth || 0;\n\t\t\t_tempRect.height = _tempRect.bottom = ((e.innerHeight || 0) - 20 < _docElement.clientHeight) ? _docElement.clientHeight : e.innerHeight || _body.clientHeight || 0;\n\t\t\treturn _tempRect;\n\t\t}\n\t\tlet doc = e.ownerDocument || _doc,\n\t\t\tr = !_isUndefined(e.pageX) ? {left: e.pageX - _getDocScrollLeft(doc), top: e.pageY - _getDocScrollTop(doc), right: e.pageX - _getDocScrollLeft(doc) + 1, bottom: e.pageY - _getDocScrollTop(doc) + 1} : (!e.nodeType && !_isUndefined(e.left) && !_isUndefined(e.top)) ? e : _toArray(e)[0].getBoundingClientRect();\n\t\tif (_isUndefined(r.right) && !_isUndefined(r.width)) {\n\t\t\tr.right = r.left + r.width;\n\t\t\tr.bottom = r.top + r.height;\n\t\t} else if (_isUndefined(r.width)) { //some browsers don't include width and height properties. We can't just set them directly on r because some browsers throw errors, so create a new generic object.\n\t\t\tr = {width: r.right - r.left, height: r.bottom - r.top, right: r.right, left: r.left, bottom: r.bottom, top: r.top};\n\t\t}\n\t\treturn r;\n\t},\n\n\t_dispatchEvent = (target, type, callbackName) => {\n\t\tlet vars = target.vars,\n\t\t\tcallback = vars[callbackName],\n\t\t\tlisteners = target._listeners[type],\n\t\t\tresult;\n\t\tif (_isFunction(callback)) {\n\t\t\tresult = callback.apply(vars.callbackScope || target, vars[callbackName + \"Params\"] || [target.pointerEvent]);\n\t\t}\n\t\tif (listeners && target.dispatchEvent(type) === false) {\n\t\t\tresult = false;\n\t\t}\n\t\treturn result;\n\t},\n\t_getBounds = (target, context) => { //accepts any of the following: a DOM element, jQuery object, selector text, or an object defining bounds as {top, left, width, height} or {minX, maxX, minY, maxY}. Returns an object with left, top, width, and height properties.\n\t\tlet e = _toArray(target)[0],\n\t\t\ttop, left, offset;\n\t\tif (!e.nodeType && e !== _win) {\n\t\t\tif (!_isUndefined(target.left)) {\n\t\t\t\toffset = {x:0, y:0}; //_getOffsetTransformOrigin(context); //the bounds should be relative to the origin\n\t\t\t\treturn {left: target.left - offset.x, top: target.top - offset.y, width: target.width, height: target.height};\n\t\t\t}\n\t\t\tleft = target.min || target.minX || target.minRotation || 0;\n\t\t\ttop = target.min || target.minY || 0;\n\t\t\treturn {left:left, top:top, width:(target.max || target.maxX || target.maxRotation || 0) - left, height:(target.max || target.maxY || 0) - top};\n\t\t}\n\t\treturn _getElementBounds(e, context);\n\t},\n\t_point1 = {}, //we reuse to minimize garbage collection tasks.\n\t_getElementBounds = (element, context) => {\n\t\tcontext = _toArray(context)[0];\n\t\tlet isSVG = (element.getBBox && element.ownerSVGElement),\n\t\t\tdoc = element.ownerDocument || _doc,\n\t\t\tleft, right, top, bottom, matrix, p1, p2, p3, p4, bbox, width, height, cs, contextParent;\n\t\tif (element === _win) {\n\t\t\ttop = _getDocScrollTop(doc);\n\t\t\tleft = _getDocScrollLeft(doc);\n\t\t\tright = left + (doc.documentElement.clientWidth || element.innerWidth || doc.body.clientWidth || 0);\n\t\t\tbottom = top + (((element.innerHeight || 0) - 20 < doc.documentElement.clientHeight) ? doc.documentElement.clientHeight : element.innerHeight || doc.body.clientHeight || 0); //some browsers (like Firefox) ignore absolutely positioned elements, and collapse the height of the documentElement, so it could be 8px, for example, if you have just an absolutely positioned div. In that case, we use the innerHeight to resolve this.\n\t\t} else if (context === _win || _isUndefined(context)) {\n\t\t\treturn element.getBoundingClientRect();\n\t\t} else {\n\t\t\tleft = top = 0;\n\t\t\tif (isSVG) {\n\t\t\t\tbbox = element.getBBox();\n\t\t\t\twidth = bbox.width;\n\t\t\t\theight = bbox.height;\n\t\t\t} else {\n\t\t\t\tif (element.viewBox && (bbox = element.viewBox.baseVal)) {\n\t\t\t\t\tleft = bbox.x || 0;\n\t\t\t\t\ttop = bbox.y || 0;\n\t\t\t\t\twidth = bbox.width;\n\t\t\t\t\theight = bbox.height;\n\t\t\t\t}\n\t\t\t\tif (!width) {\n\t\t\t\t\tcs = _getComputedStyle(element);\n\t\t\t\t\tbbox = cs.boxSizing === \"border-box\";\n\t\t\t\t\twidth = (parseFloat(cs.width) || element.clientWidth || 0) + (bbox ? 0 : parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth));\n\t\t\t\t\theight = (parseFloat(cs.height) || element.clientHeight || 0) + (bbox ? 0 : parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth));\n\t\t\t\t}\n\t\t\t}\n\t\t\tright = width;\n\t\t\tbottom = height;\n\t\t}\n\t\tif (element === context) {\n\t\t\treturn {left:left, top:top, width: right - left, height: bottom - top};\n\t\t}\n\t\tmatrix = getGlobalMatrix(context, true).multiply(getGlobalMatrix(element));\n\t\tp1 = matrix.apply({x:left, y:top});\n\t\tp2 = matrix.apply({x:right, y:top});\n\t\tp3 = matrix.apply({x:right, y:bottom});\n\t\tp4 = matrix.apply({x:left, y:bottom});\n\t\tleft = Math.min(p1.x, p2.x, p3.x, p4.x);\n\t\ttop = Math.min(p1.y, p2.y, p3.y, p4.y);\n\t\tcontextParent = context.parentNode || {};\n\t\treturn {left: left + (contextParent.scrollLeft || 0), top: top + (contextParent.scrollTop || 0), width: Math.max(p1.x, p2.x, p3.x, p4.x) - left, height: Math.max(p1.y, p2.y, p3.y, p4.y) - top};\n\t},\n\t_parseInertia = (draggable, snap, max, min, factor, forceZeroVelocity) => {\n\t\tlet vars = {},\n\t\t\ta, i, l;\n\t\tif (snap) {\n\t\t\tif (factor !== 1 && snap instanceof Array) { //some data must be altered to make sense, like if the user passes in an array of rotational values in degrees, we must convert it to radians. Or for scrollLeft and scrollTop, we invert the values.\n\t\t\t\tvars.end = a = [];\n\t\t\t\tl = snap.length;\n\t\t\t\tif (_isObject(snap[0])) { //if the array is populated with objects, like points ({x:100, y:200}), make copies before multiplying by the factor, otherwise we'll mess up the originals and the user may reuse it elsewhere.\n\t\t\t\t\tfor (i = 0; i < l; i++) {\n\t\t\t\t\t\ta[i] = _copy(snap[i], factor);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tfor (i = 0; i < l; i++) {\n\t\t\t\t\t\ta[i] = snap[i] * factor;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tmax += 1.1; //allow 1.1 pixels of wiggle room when snapping in order to work around some browser inconsistencies in the way bounds are reported which can make them roughly a pixel off. For example, if \"snap:[-$('#menu').width(), 0]\" was defined and #menu had a wrapper that was used as the bounds, some browsers would be one pixel off, making the minimum -752 for example when snap was [-753,0], thus instead of snapping to -753, it would snap to 0 since -753 was below the minimum.\n\t\t\t\tmin -= 1.1;\n\t\t\t} else if (_isFunction(snap)) {\n\t\t\t\tvars.end = value => {\n\t\t\t\t\tlet result = snap.call(draggable, value),\n\t\t\t\t\t\tcopy, p;\n\t\t\t\t\tif (factor !== 1) {\n\t\t\t\t\t\tif (_isObject(result)) {\n\t\t\t\t\t\t\tcopy = {};\n\t\t\t\t\t\t\tfor (p in result) {\n\t\t\t\t\t\t\t\tcopy[p] = result[p] * factor;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tresult = copy;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tresult *= factor;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn result; //we need to ensure that we can scope the function call to the Draggable instance itself so that users can access important values like maxX, minX, maxY, minY, x, and y from within that function.\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tvars.end = snap;\n\t\t\t}\n\t\t}\n\t\tif (max || max === 0) {\n\t\t\tvars.max = max;\n\t\t}\n\t\tif (min || min === 0) {\n\t\t\tvars.min = min;\n\t\t}\n\t\tif (forceZeroVelocity) {\n\t\t\tvars.velocity = 0;\n\t\t}\n\t\treturn vars;\n\t},\n\t_isClickable = element => { //sometimes it's convenient to mark an element as clickable by adding a data-clickable=\"true\" attribute (in which case we won't preventDefault() the mouse/touch event). This method checks if the element is an , , or