index.global.js 97 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141
  1. /*!
  2. FullCalendar Interaction Plugin v6.1.14
  3. Docs & License: https://fullcalendar.io/docs/editable
  4. (c) 2024 Adam Shaw
  5. */
  6. FullCalendar.Interaction = (function (exports, core, internal) {
  7. 'use strict';
  8. internal.config.touchMouseIgnoreWait = 500;
  9. let ignoreMouseDepth = 0;
  10. let listenerCnt = 0;
  11. let isWindowTouchMoveCancelled = false;
  12. /*
  13. Uses a "pointer" abstraction, which monitors UI events for both mouse and touch.
  14. Tracks when the pointer "drags" on a certain element, meaning down+move+up.
  15. Also, tracks if there was touch-scrolling.
  16. Also, can prevent touch-scrolling from happening.
  17. Also, can fire pointermove events when scrolling happens underneath, even when no real pointer movement.
  18. emits:
  19. - pointerdown
  20. - pointermove
  21. - pointerup
  22. */
  23. class PointerDragging {
  24. constructor(containerEl) {
  25. this.subjectEl = null;
  26. // options that can be directly assigned by caller
  27. this.selector = ''; // will cause subjectEl in all emitted events to be this element
  28. this.handleSelector = '';
  29. this.shouldIgnoreMove = false;
  30. this.shouldWatchScroll = true; // for simulating pointermove on scroll
  31. // internal states
  32. this.isDragging = false;
  33. this.isTouchDragging = false;
  34. this.wasTouchScroll = false;
  35. // Mouse
  36. // ----------------------------------------------------------------------------------------------------
  37. this.handleMouseDown = (ev) => {
  38. if (!this.shouldIgnoreMouse() &&
  39. isPrimaryMouseButton(ev) &&
  40. this.tryStart(ev)) {
  41. let pev = this.createEventFromMouse(ev, true);
  42. this.emitter.trigger('pointerdown', pev);
  43. this.initScrollWatch(pev);
  44. if (!this.shouldIgnoreMove) {
  45. document.addEventListener('mousemove', this.handleMouseMove);
  46. }
  47. document.addEventListener('mouseup', this.handleMouseUp);
  48. }
  49. };
  50. this.handleMouseMove = (ev) => {
  51. let pev = this.createEventFromMouse(ev);
  52. this.recordCoords(pev);
  53. this.emitter.trigger('pointermove', pev);
  54. };
  55. this.handleMouseUp = (ev) => {
  56. document.removeEventListener('mousemove', this.handleMouseMove);
  57. document.removeEventListener('mouseup', this.handleMouseUp);
  58. this.emitter.trigger('pointerup', this.createEventFromMouse(ev));
  59. this.cleanup(); // call last so that pointerup has access to props
  60. };
  61. // Touch
  62. // ----------------------------------------------------------------------------------------------------
  63. this.handleTouchStart = (ev) => {
  64. if (this.tryStart(ev)) {
  65. this.isTouchDragging = true;
  66. let pev = this.createEventFromTouch(ev, true);
  67. this.emitter.trigger('pointerdown', pev);
  68. this.initScrollWatch(pev);
  69. // unlike mouse, need to attach to target, not document
  70. // https://stackoverflow.com/a/45760014
  71. let targetEl = ev.target;
  72. if (!this.shouldIgnoreMove) {
  73. targetEl.addEventListener('touchmove', this.handleTouchMove);
  74. }
  75. targetEl.addEventListener('touchend', this.handleTouchEnd);
  76. targetEl.addEventListener('touchcancel', this.handleTouchEnd); // treat it as a touch end
  77. // attach a handler to get called when ANY scroll action happens on the page.
  78. // this was impossible to do with normal on/off because 'scroll' doesn't bubble.
  79. // http://stackoverflow.com/a/32954565/96342
  80. window.addEventListener('scroll', this.handleTouchScroll, true);
  81. }
  82. };
  83. this.handleTouchMove = (ev) => {
  84. let pev = this.createEventFromTouch(ev);
  85. this.recordCoords(pev);
  86. this.emitter.trigger('pointermove', pev);
  87. };
  88. this.handleTouchEnd = (ev) => {
  89. if (this.isDragging) { // done to guard against touchend followed by touchcancel
  90. let targetEl = ev.target;
  91. targetEl.removeEventListener('touchmove', this.handleTouchMove);
  92. targetEl.removeEventListener('touchend', this.handleTouchEnd);
  93. targetEl.removeEventListener('touchcancel', this.handleTouchEnd);
  94. window.removeEventListener('scroll', this.handleTouchScroll, true); // useCaptured=true
  95. this.emitter.trigger('pointerup', this.createEventFromTouch(ev));
  96. this.cleanup(); // call last so that pointerup has access to props
  97. this.isTouchDragging = false;
  98. startIgnoringMouse();
  99. }
  100. };
  101. this.handleTouchScroll = () => {
  102. this.wasTouchScroll = true;
  103. };
  104. this.handleScroll = (ev) => {
  105. if (!this.shouldIgnoreMove) {
  106. let pageX = (window.scrollX - this.prevScrollX) + this.prevPageX;
  107. let pageY = (window.scrollY - this.prevScrollY) + this.prevPageY;
  108. this.emitter.trigger('pointermove', {
  109. origEvent: ev,
  110. isTouch: this.isTouchDragging,
  111. subjectEl: this.subjectEl,
  112. pageX,
  113. pageY,
  114. deltaX: pageX - this.origPageX,
  115. deltaY: pageY - this.origPageY,
  116. });
  117. }
  118. };
  119. this.containerEl = containerEl;
  120. this.emitter = new internal.Emitter();
  121. containerEl.addEventListener('mousedown', this.handleMouseDown);
  122. containerEl.addEventListener('touchstart', this.handleTouchStart, { passive: true });
  123. listenerCreated();
  124. }
  125. destroy() {
  126. this.containerEl.removeEventListener('mousedown', this.handleMouseDown);
  127. this.containerEl.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
  128. listenerDestroyed();
  129. }
  130. tryStart(ev) {
  131. let subjectEl = this.querySubjectEl(ev);
  132. let downEl = ev.target;
  133. if (subjectEl &&
  134. (!this.handleSelector || internal.elementClosest(downEl, this.handleSelector))) {
  135. this.subjectEl = subjectEl;
  136. this.isDragging = true; // do this first so cancelTouchScroll will work
  137. this.wasTouchScroll = false;
  138. return true;
  139. }
  140. return false;
  141. }
  142. cleanup() {
  143. isWindowTouchMoveCancelled = false;
  144. this.isDragging = false;
  145. this.subjectEl = null;
  146. // keep wasTouchScroll around for later access
  147. this.destroyScrollWatch();
  148. }
  149. querySubjectEl(ev) {
  150. if (this.selector) {
  151. return internal.elementClosest(ev.target, this.selector);
  152. }
  153. return this.containerEl;
  154. }
  155. shouldIgnoreMouse() {
  156. return ignoreMouseDepth || this.isTouchDragging;
  157. }
  158. // can be called by user of this class, to cancel touch-based scrolling for the current drag
  159. cancelTouchScroll() {
  160. if (this.isDragging) {
  161. isWindowTouchMoveCancelled = true;
  162. }
  163. }
  164. // Scrolling that simulates pointermoves
  165. // ----------------------------------------------------------------------------------------------------
  166. initScrollWatch(ev) {
  167. if (this.shouldWatchScroll) {
  168. this.recordCoords(ev);
  169. window.addEventListener('scroll', this.handleScroll, true); // useCapture=true
  170. }
  171. }
  172. recordCoords(ev) {
  173. if (this.shouldWatchScroll) {
  174. this.prevPageX = ev.pageX;
  175. this.prevPageY = ev.pageY;
  176. this.prevScrollX = window.scrollX;
  177. this.prevScrollY = window.scrollY;
  178. }
  179. }
  180. destroyScrollWatch() {
  181. if (this.shouldWatchScroll) {
  182. window.removeEventListener('scroll', this.handleScroll, true); // useCaptured=true
  183. }
  184. }
  185. // Event Normalization
  186. // ----------------------------------------------------------------------------------------------------
  187. createEventFromMouse(ev, isFirst) {
  188. let deltaX = 0;
  189. let deltaY = 0;
  190. // TODO: repeat code
  191. if (isFirst) {
  192. this.origPageX = ev.pageX;
  193. this.origPageY = ev.pageY;
  194. }
  195. else {
  196. deltaX = ev.pageX - this.origPageX;
  197. deltaY = ev.pageY - this.origPageY;
  198. }
  199. return {
  200. origEvent: ev,
  201. isTouch: false,
  202. subjectEl: this.subjectEl,
  203. pageX: ev.pageX,
  204. pageY: ev.pageY,
  205. deltaX,
  206. deltaY,
  207. };
  208. }
  209. createEventFromTouch(ev, isFirst) {
  210. let touches = ev.touches;
  211. let pageX;
  212. let pageY;
  213. let deltaX = 0;
  214. let deltaY = 0;
  215. // if touch coords available, prefer,
  216. // because FF would give bad ev.pageX ev.pageY
  217. if (touches && touches.length) {
  218. pageX = touches[0].pageX;
  219. pageY = touches[0].pageY;
  220. }
  221. else {
  222. pageX = ev.pageX;
  223. pageY = ev.pageY;
  224. }
  225. // TODO: repeat code
  226. if (isFirst) {
  227. this.origPageX = pageX;
  228. this.origPageY = pageY;
  229. }
  230. else {
  231. deltaX = pageX - this.origPageX;
  232. deltaY = pageY - this.origPageY;
  233. }
  234. return {
  235. origEvent: ev,
  236. isTouch: true,
  237. subjectEl: this.subjectEl,
  238. pageX,
  239. pageY,
  240. deltaX,
  241. deltaY,
  242. };
  243. }
  244. }
  245. // Returns a boolean whether this was a left mouse click and no ctrl key (which means right click on Mac)
  246. function isPrimaryMouseButton(ev) {
  247. return ev.button === 0 && !ev.ctrlKey;
  248. }
  249. // Ignoring fake mouse events generated by touch
  250. // ----------------------------------------------------------------------------------------------------
  251. function startIgnoringMouse() {
  252. ignoreMouseDepth += 1;
  253. setTimeout(() => {
  254. ignoreMouseDepth -= 1;
  255. }, internal.config.touchMouseIgnoreWait);
  256. }
  257. // We want to attach touchmove as early as possible for Safari
  258. // ----------------------------------------------------------------------------------------------------
  259. function listenerCreated() {
  260. listenerCnt += 1;
  261. if (listenerCnt === 1) {
  262. window.addEventListener('touchmove', onWindowTouchMove, { passive: false });
  263. }
  264. }
  265. function listenerDestroyed() {
  266. listenerCnt -= 1;
  267. if (!listenerCnt) {
  268. window.removeEventListener('touchmove', onWindowTouchMove, { passive: false });
  269. }
  270. }
  271. function onWindowTouchMove(ev) {
  272. if (isWindowTouchMoveCancelled) {
  273. ev.preventDefault();
  274. }
  275. }
  276. /*
  277. An effect in which an element follows the movement of a pointer across the screen.
  278. The moving element is a clone of some other element.
  279. Must call start + handleMove + stop.
  280. */
  281. class ElementMirror {
  282. constructor() {
  283. this.isVisible = false; // must be explicitly enabled
  284. this.sourceEl = null;
  285. this.mirrorEl = null;
  286. this.sourceElRect = null; // screen coords relative to viewport
  287. // options that can be set directly by caller
  288. this.parentNode = document.body; // HIGHLY SUGGESTED to set this to sidestep ShadowDOM issues
  289. this.zIndex = 9999;
  290. this.revertDuration = 0;
  291. }
  292. start(sourceEl, pageX, pageY) {
  293. this.sourceEl = sourceEl;
  294. this.sourceElRect = this.sourceEl.getBoundingClientRect();
  295. this.origScreenX = pageX - window.scrollX;
  296. this.origScreenY = pageY - window.scrollY;
  297. this.deltaX = 0;
  298. this.deltaY = 0;
  299. this.updateElPosition();
  300. }
  301. handleMove(pageX, pageY) {
  302. this.deltaX = (pageX - window.scrollX) - this.origScreenX;
  303. this.deltaY = (pageY - window.scrollY) - this.origScreenY;
  304. this.updateElPosition();
  305. }
  306. // can be called before start
  307. setIsVisible(bool) {
  308. if (bool) {
  309. if (!this.isVisible) {
  310. if (this.mirrorEl) {
  311. this.mirrorEl.style.display = '';
  312. }
  313. this.isVisible = bool; // needs to happen before updateElPosition
  314. this.updateElPosition(); // because was not updating the position while invisible
  315. }
  316. }
  317. else if (this.isVisible) {
  318. if (this.mirrorEl) {
  319. this.mirrorEl.style.display = 'none';
  320. }
  321. this.isVisible = bool;
  322. }
  323. }
  324. // always async
  325. stop(needsRevertAnimation, callback) {
  326. let done = () => {
  327. this.cleanup();
  328. callback();
  329. };
  330. if (needsRevertAnimation &&
  331. this.mirrorEl &&
  332. this.isVisible &&
  333. this.revertDuration && // if 0, transition won't work
  334. (this.deltaX || this.deltaY) // if same coords, transition won't work
  335. ) {
  336. this.doRevertAnimation(done, this.revertDuration);
  337. }
  338. else {
  339. setTimeout(done, 0);
  340. }
  341. }
  342. doRevertAnimation(callback, revertDuration) {
  343. let mirrorEl = this.mirrorEl;
  344. let finalSourceElRect = this.sourceEl.getBoundingClientRect(); // because autoscrolling might have happened
  345. mirrorEl.style.transition =
  346. 'top ' + revertDuration + 'ms,' +
  347. 'left ' + revertDuration + 'ms';
  348. internal.applyStyle(mirrorEl, {
  349. left: finalSourceElRect.left,
  350. top: finalSourceElRect.top,
  351. });
  352. internal.whenTransitionDone(mirrorEl, () => {
  353. mirrorEl.style.transition = '';
  354. callback();
  355. });
  356. }
  357. cleanup() {
  358. if (this.mirrorEl) {
  359. internal.removeElement(this.mirrorEl);
  360. this.mirrorEl = null;
  361. }
  362. this.sourceEl = null;
  363. }
  364. updateElPosition() {
  365. if (this.sourceEl && this.isVisible) {
  366. internal.applyStyle(this.getMirrorEl(), {
  367. left: this.sourceElRect.left + this.deltaX,
  368. top: this.sourceElRect.top + this.deltaY,
  369. });
  370. }
  371. }
  372. getMirrorEl() {
  373. let sourceElRect = this.sourceElRect;
  374. let mirrorEl = this.mirrorEl;
  375. if (!mirrorEl) {
  376. mirrorEl = this.mirrorEl = this.sourceEl.cloneNode(true); // cloneChildren=true
  377. // we don't want long taps or any mouse interaction causing selection/menus.
  378. // would use preventSelection(), but that prevents selectstart, causing problems.
  379. mirrorEl.style.userSelect = 'none';
  380. mirrorEl.style.webkitUserSelect = 'none';
  381. mirrorEl.style.pointerEvents = 'none';
  382. mirrorEl.classList.add('fc-event-dragging');
  383. internal.applyStyle(mirrorEl, {
  384. position: 'fixed',
  385. zIndex: this.zIndex,
  386. visibility: '',
  387. boxSizing: 'border-box',
  388. width: sourceElRect.right - sourceElRect.left,
  389. height: sourceElRect.bottom - sourceElRect.top,
  390. right: 'auto',
  391. bottom: 'auto',
  392. margin: 0,
  393. });
  394. this.parentNode.appendChild(mirrorEl);
  395. }
  396. return mirrorEl;
  397. }
  398. }
  399. /*
  400. Is a cache for a given element's scroll information (all the info that ScrollController stores)
  401. in addition the "client rectangle" of the element.. the area within the scrollbars.
  402. The cache can be in one of two modes:
  403. - doesListening:false - ignores when the container is scrolled by someone else
  404. - doesListening:true - watch for scrolling and update the cache
  405. */
  406. class ScrollGeomCache extends internal.ScrollController {
  407. constructor(scrollController, doesListening) {
  408. super();
  409. this.handleScroll = () => {
  410. this.scrollTop = this.scrollController.getScrollTop();
  411. this.scrollLeft = this.scrollController.getScrollLeft();
  412. this.handleScrollChange();
  413. };
  414. this.scrollController = scrollController;
  415. this.doesListening = doesListening;
  416. this.scrollTop = this.origScrollTop = scrollController.getScrollTop();
  417. this.scrollLeft = this.origScrollLeft = scrollController.getScrollLeft();
  418. this.scrollWidth = scrollController.getScrollWidth();
  419. this.scrollHeight = scrollController.getScrollHeight();
  420. this.clientWidth = scrollController.getClientWidth();
  421. this.clientHeight = scrollController.getClientHeight();
  422. this.clientRect = this.computeClientRect(); // do last in case it needs cached values
  423. if (this.doesListening) {
  424. this.getEventTarget().addEventListener('scroll', this.handleScroll);
  425. }
  426. }
  427. destroy() {
  428. if (this.doesListening) {
  429. this.getEventTarget().removeEventListener('scroll', this.handleScroll);
  430. }
  431. }
  432. getScrollTop() {
  433. return this.scrollTop;
  434. }
  435. getScrollLeft() {
  436. return this.scrollLeft;
  437. }
  438. setScrollTop(top) {
  439. this.scrollController.setScrollTop(top);
  440. if (!this.doesListening) {
  441. // we are not relying on the element to normalize out-of-bounds scroll values
  442. // so we need to sanitize ourselves
  443. this.scrollTop = Math.max(Math.min(top, this.getMaxScrollTop()), 0);
  444. this.handleScrollChange();
  445. }
  446. }
  447. setScrollLeft(top) {
  448. this.scrollController.setScrollLeft(top);
  449. if (!this.doesListening) {
  450. // we are not relying on the element to normalize out-of-bounds scroll values
  451. // so we need to sanitize ourselves
  452. this.scrollLeft = Math.max(Math.min(top, this.getMaxScrollLeft()), 0);
  453. this.handleScrollChange();
  454. }
  455. }
  456. getClientWidth() {
  457. return this.clientWidth;
  458. }
  459. getClientHeight() {
  460. return this.clientHeight;
  461. }
  462. getScrollWidth() {
  463. return this.scrollWidth;
  464. }
  465. getScrollHeight() {
  466. return this.scrollHeight;
  467. }
  468. handleScrollChange() {
  469. }
  470. }
  471. class ElementScrollGeomCache extends ScrollGeomCache {
  472. constructor(el, doesListening) {
  473. super(new internal.ElementScrollController(el), doesListening);
  474. }
  475. getEventTarget() {
  476. return this.scrollController.el;
  477. }
  478. computeClientRect() {
  479. return internal.computeInnerRect(this.scrollController.el);
  480. }
  481. }
  482. class WindowScrollGeomCache extends ScrollGeomCache {
  483. constructor(doesListening) {
  484. super(new internal.WindowScrollController(), doesListening);
  485. }
  486. getEventTarget() {
  487. return window;
  488. }
  489. computeClientRect() {
  490. return {
  491. left: this.scrollLeft,
  492. right: this.scrollLeft + this.clientWidth,
  493. top: this.scrollTop,
  494. bottom: this.scrollTop + this.clientHeight,
  495. };
  496. }
  497. // the window is the only scroll object that changes it's rectangle relative
  498. // to the document's topleft as it scrolls
  499. handleScrollChange() {
  500. this.clientRect = this.computeClientRect();
  501. }
  502. }
  503. // If available we are using native "performance" API instead of "Date"
  504. // Read more about it on MDN:
  505. // https://developer.mozilla.org/en-US/docs/Web/API/Performance
  506. const getTime = typeof performance === 'function' ? performance.now : Date.now;
  507. /*
  508. For a pointer interaction, automatically scrolls certain scroll containers when the pointer
  509. approaches the edge.
  510. The caller must call start + handleMove + stop.
  511. */
  512. class AutoScroller {
  513. constructor() {
  514. // options that can be set by caller
  515. this.isEnabled = true;
  516. this.scrollQuery = [window, '.fc-scroller'];
  517. this.edgeThreshold = 50; // pixels
  518. this.maxVelocity = 300; // pixels per second
  519. // internal state
  520. this.pointerScreenX = null;
  521. this.pointerScreenY = null;
  522. this.isAnimating = false;
  523. this.scrollCaches = null;
  524. // protect against the initial pointerdown being too close to an edge and starting the scroll
  525. this.everMovedUp = false;
  526. this.everMovedDown = false;
  527. this.everMovedLeft = false;
  528. this.everMovedRight = false;
  529. this.animate = () => {
  530. if (this.isAnimating) { // wasn't cancelled between animation calls
  531. let edge = this.computeBestEdge(this.pointerScreenX + window.scrollX, this.pointerScreenY + window.scrollY);
  532. if (edge) {
  533. let now = getTime();
  534. this.handleSide(edge, (now - this.msSinceRequest) / 1000);
  535. this.requestAnimation(now);
  536. }
  537. else {
  538. this.isAnimating = false; // will stop animation
  539. }
  540. }
  541. };
  542. }
  543. start(pageX, pageY, scrollStartEl) {
  544. if (this.isEnabled) {
  545. this.scrollCaches = this.buildCaches(scrollStartEl);
  546. this.pointerScreenX = null;
  547. this.pointerScreenY = null;
  548. this.everMovedUp = false;
  549. this.everMovedDown = false;
  550. this.everMovedLeft = false;
  551. this.everMovedRight = false;
  552. this.handleMove(pageX, pageY);
  553. }
  554. }
  555. handleMove(pageX, pageY) {
  556. if (this.isEnabled) {
  557. let pointerScreenX = pageX - window.scrollX;
  558. let pointerScreenY = pageY - window.scrollY;
  559. let yDelta = this.pointerScreenY === null ? 0 : pointerScreenY - this.pointerScreenY;
  560. let xDelta = this.pointerScreenX === null ? 0 : pointerScreenX - this.pointerScreenX;
  561. if (yDelta < 0) {
  562. this.everMovedUp = true;
  563. }
  564. else if (yDelta > 0) {
  565. this.everMovedDown = true;
  566. }
  567. if (xDelta < 0) {
  568. this.everMovedLeft = true;
  569. }
  570. else if (xDelta > 0) {
  571. this.everMovedRight = true;
  572. }
  573. this.pointerScreenX = pointerScreenX;
  574. this.pointerScreenY = pointerScreenY;
  575. if (!this.isAnimating) {
  576. this.isAnimating = true;
  577. this.requestAnimation(getTime());
  578. }
  579. }
  580. }
  581. stop() {
  582. if (this.isEnabled) {
  583. this.isAnimating = false; // will stop animation
  584. for (let scrollCache of this.scrollCaches) {
  585. scrollCache.destroy();
  586. }
  587. this.scrollCaches = null;
  588. }
  589. }
  590. requestAnimation(now) {
  591. this.msSinceRequest = now;
  592. requestAnimationFrame(this.animate);
  593. }
  594. handleSide(edge, seconds) {
  595. let { scrollCache } = edge;
  596. let { edgeThreshold } = this;
  597. let invDistance = edgeThreshold - edge.distance;
  598. let velocity = // the closer to the edge, the faster we scroll
  599. ((invDistance * invDistance) / (edgeThreshold * edgeThreshold)) * // quadratic
  600. this.maxVelocity * seconds;
  601. let sign = 1;
  602. switch (edge.name) {
  603. case 'left':
  604. sign = -1;
  605. // falls through
  606. case 'right':
  607. scrollCache.setScrollLeft(scrollCache.getScrollLeft() + velocity * sign);
  608. break;
  609. case 'top':
  610. sign = -1;
  611. // falls through
  612. case 'bottom':
  613. scrollCache.setScrollTop(scrollCache.getScrollTop() + velocity * sign);
  614. break;
  615. }
  616. }
  617. // left/top are relative to document topleft
  618. computeBestEdge(left, top) {
  619. let { edgeThreshold } = this;
  620. let bestSide = null;
  621. let scrollCaches = this.scrollCaches || [];
  622. for (let scrollCache of scrollCaches) {
  623. let rect = scrollCache.clientRect;
  624. let leftDist = left - rect.left;
  625. let rightDist = rect.right - left;
  626. let topDist = top - rect.top;
  627. let bottomDist = rect.bottom - top;
  628. // completely within the rect?
  629. if (leftDist >= 0 && rightDist >= 0 && topDist >= 0 && bottomDist >= 0) {
  630. if (topDist <= edgeThreshold && this.everMovedUp && scrollCache.canScrollUp() &&
  631. (!bestSide || bestSide.distance > topDist)) {
  632. bestSide = { scrollCache, name: 'top', distance: topDist };
  633. }
  634. if (bottomDist <= edgeThreshold && this.everMovedDown && scrollCache.canScrollDown() &&
  635. (!bestSide || bestSide.distance > bottomDist)) {
  636. bestSide = { scrollCache, name: 'bottom', distance: bottomDist };
  637. }
  638. /*
  639. TODO: fix broken RTL scrolling. canScrollLeft always returning false
  640. https://github.com/fullcalendar/fullcalendar/issues/4837
  641. */
  642. if (leftDist <= edgeThreshold && this.everMovedLeft && scrollCache.canScrollLeft() &&
  643. (!bestSide || bestSide.distance > leftDist)) {
  644. bestSide = { scrollCache, name: 'left', distance: leftDist };
  645. }
  646. if (rightDist <= edgeThreshold && this.everMovedRight && scrollCache.canScrollRight() &&
  647. (!bestSide || bestSide.distance > rightDist)) {
  648. bestSide = { scrollCache, name: 'right', distance: rightDist };
  649. }
  650. }
  651. }
  652. return bestSide;
  653. }
  654. buildCaches(scrollStartEl) {
  655. return this.queryScrollEls(scrollStartEl).map((el) => {
  656. if (el === window) {
  657. return new WindowScrollGeomCache(false); // false = don't listen to user-generated scrolls
  658. }
  659. return new ElementScrollGeomCache(el, false); // false = don't listen to user-generated scrolls
  660. });
  661. }
  662. queryScrollEls(scrollStartEl) {
  663. let els = [];
  664. for (let query of this.scrollQuery) {
  665. if (typeof query === 'object') {
  666. els.push(query);
  667. }
  668. else {
  669. /*
  670. TODO: in the future, always have auto-scroll happen on element where current Hit came from
  671. Ticket: https://github.com/fullcalendar/fullcalendar/issues/4593
  672. */
  673. els.push(...Array.prototype.slice.call(scrollStartEl.getRootNode().querySelectorAll(query)));
  674. }
  675. }
  676. return els;
  677. }
  678. }
  679. /*
  680. Monitors dragging on an element. Has a number of high-level features:
  681. - minimum distance required before dragging
  682. - minimum wait time ("delay") before dragging
  683. - a mirror element that follows the pointer
  684. */
  685. class FeaturefulElementDragging extends internal.ElementDragging {
  686. constructor(containerEl, selector) {
  687. super(containerEl);
  688. this.containerEl = containerEl;
  689. // options that can be directly set by caller
  690. // the caller can also set the PointerDragging's options as well
  691. this.delay = null;
  692. this.minDistance = 0;
  693. this.touchScrollAllowed = true; // prevents drag from starting and blocks scrolling during drag
  694. this.mirrorNeedsRevert = false;
  695. this.isInteracting = false; // is the user validly moving the pointer? lasts until pointerup
  696. this.isDragging = false; // is it INTENTFULLY dragging? lasts until after revert animation
  697. this.isDelayEnded = false;
  698. this.isDistanceSurpassed = false;
  699. this.delayTimeoutId = null;
  700. this.onPointerDown = (ev) => {
  701. if (!this.isDragging) { // so new drag doesn't happen while revert animation is going
  702. this.isInteracting = true;
  703. this.isDelayEnded = false;
  704. this.isDistanceSurpassed = false;
  705. internal.preventSelection(document.body);
  706. internal.preventContextMenu(document.body);
  707. // prevent links from being visited if there's an eventual drag.
  708. // also prevents selection in older browsers (maybe?).
  709. // not necessary for touch, besides, browser would complain about passiveness.
  710. if (!ev.isTouch) {
  711. ev.origEvent.preventDefault();
  712. }
  713. this.emitter.trigger('pointerdown', ev);
  714. if (this.isInteracting && // not destroyed via pointerdown handler
  715. !this.pointer.shouldIgnoreMove) {
  716. // actions related to initiating dragstart+dragmove+dragend...
  717. this.mirror.setIsVisible(false); // reset. caller must set-visible
  718. this.mirror.start(ev.subjectEl, ev.pageX, ev.pageY); // must happen on first pointer down
  719. this.startDelay(ev);
  720. if (!this.minDistance) {
  721. this.handleDistanceSurpassed(ev);
  722. }
  723. }
  724. }
  725. };
  726. this.onPointerMove = (ev) => {
  727. if (this.isInteracting) {
  728. this.emitter.trigger('pointermove', ev);
  729. if (!this.isDistanceSurpassed) {
  730. let minDistance = this.minDistance;
  731. let distanceSq; // current distance from the origin, squared
  732. let { deltaX, deltaY } = ev;
  733. distanceSq = deltaX * deltaX + deltaY * deltaY;
  734. if (distanceSq >= minDistance * minDistance) { // use pythagorean theorem
  735. this.handleDistanceSurpassed(ev);
  736. }
  737. }
  738. if (this.isDragging) {
  739. // a real pointer move? (not one simulated by scrolling)
  740. if (ev.origEvent.type !== 'scroll') {
  741. this.mirror.handleMove(ev.pageX, ev.pageY);
  742. this.autoScroller.handleMove(ev.pageX, ev.pageY);
  743. }
  744. this.emitter.trigger('dragmove', ev);
  745. }
  746. }
  747. };
  748. this.onPointerUp = (ev) => {
  749. if (this.isInteracting) {
  750. this.isInteracting = false;
  751. internal.allowSelection(document.body);
  752. internal.allowContextMenu(document.body);
  753. this.emitter.trigger('pointerup', ev); // can potentially set mirrorNeedsRevert
  754. if (this.isDragging) {
  755. this.autoScroller.stop();
  756. this.tryStopDrag(ev); // which will stop the mirror
  757. }
  758. if (this.delayTimeoutId) {
  759. clearTimeout(this.delayTimeoutId);
  760. this.delayTimeoutId = null;
  761. }
  762. }
  763. };
  764. let pointer = this.pointer = new PointerDragging(containerEl);
  765. pointer.emitter.on('pointerdown', this.onPointerDown);
  766. pointer.emitter.on('pointermove', this.onPointerMove);
  767. pointer.emitter.on('pointerup', this.onPointerUp);
  768. if (selector) {
  769. pointer.selector = selector;
  770. }
  771. this.mirror = new ElementMirror();
  772. this.autoScroller = new AutoScroller();
  773. }
  774. destroy() {
  775. this.pointer.destroy();
  776. // HACK: simulate a pointer-up to end the current drag
  777. // TODO: fire 'dragend' directly and stop interaction. discourage use of pointerup event (b/c might not fire)
  778. this.onPointerUp({});
  779. }
  780. startDelay(ev) {
  781. if (typeof this.delay === 'number') {
  782. this.delayTimeoutId = setTimeout(() => {
  783. this.delayTimeoutId = null;
  784. this.handleDelayEnd(ev);
  785. }, this.delay); // not assignable to number!
  786. }
  787. else {
  788. this.handleDelayEnd(ev);
  789. }
  790. }
  791. handleDelayEnd(ev) {
  792. this.isDelayEnded = true;
  793. this.tryStartDrag(ev);
  794. }
  795. handleDistanceSurpassed(ev) {
  796. this.isDistanceSurpassed = true;
  797. this.tryStartDrag(ev);
  798. }
  799. tryStartDrag(ev) {
  800. if (this.isDelayEnded && this.isDistanceSurpassed) {
  801. if (!this.pointer.wasTouchScroll || this.touchScrollAllowed) {
  802. this.isDragging = true;
  803. this.mirrorNeedsRevert = false;
  804. this.autoScroller.start(ev.pageX, ev.pageY, this.containerEl);
  805. this.emitter.trigger('dragstart', ev);
  806. if (this.touchScrollAllowed === false) {
  807. this.pointer.cancelTouchScroll();
  808. }
  809. }
  810. }
  811. }
  812. tryStopDrag(ev) {
  813. // .stop() is ALWAYS asynchronous, which we NEED because we want all pointerup events
  814. // that come from the document to fire beforehand. much more convenient this way.
  815. this.mirror.stop(this.mirrorNeedsRevert, this.stopDrag.bind(this, ev));
  816. }
  817. stopDrag(ev) {
  818. this.isDragging = false;
  819. this.emitter.trigger('dragend', ev);
  820. }
  821. // fill in the implementations...
  822. setIgnoreMove(bool) {
  823. this.pointer.shouldIgnoreMove = bool;
  824. }
  825. setMirrorIsVisible(bool) {
  826. this.mirror.setIsVisible(bool);
  827. }
  828. setMirrorNeedsRevert(bool) {
  829. this.mirrorNeedsRevert = bool;
  830. }
  831. setAutoScrollEnabled(bool) {
  832. this.autoScroller.isEnabled = bool;
  833. }
  834. }
  835. /*
  836. When this class is instantiated, it records the offset of an element (relative to the document topleft),
  837. and continues to monitor scrolling, updating the cached coordinates if it needs to.
  838. Does not access the DOM after instantiation, so highly performant.
  839. Also keeps track of all scrolling/overflow:hidden containers that are parents of the given element
  840. and an determine if a given point is inside the combined clipping rectangle.
  841. */
  842. class OffsetTracker {
  843. constructor(el) {
  844. this.el = el;
  845. this.origRect = internal.computeRect(el);
  846. // will work fine for divs that have overflow:hidden
  847. this.scrollCaches = internal.getClippingParents(el).map((scrollEl) => new ElementScrollGeomCache(scrollEl, true));
  848. }
  849. destroy() {
  850. for (let scrollCache of this.scrollCaches) {
  851. scrollCache.destroy();
  852. }
  853. }
  854. computeLeft() {
  855. let left = this.origRect.left;
  856. for (let scrollCache of this.scrollCaches) {
  857. left += scrollCache.origScrollLeft - scrollCache.getScrollLeft();
  858. }
  859. return left;
  860. }
  861. computeTop() {
  862. let top = this.origRect.top;
  863. for (let scrollCache of this.scrollCaches) {
  864. top += scrollCache.origScrollTop - scrollCache.getScrollTop();
  865. }
  866. return top;
  867. }
  868. isWithinClipping(pageX, pageY) {
  869. let point = { left: pageX, top: pageY };
  870. for (let scrollCache of this.scrollCaches) {
  871. if (!isIgnoredClipping(scrollCache.getEventTarget()) &&
  872. !internal.pointInsideRect(point, scrollCache.clientRect)) {
  873. return false;
  874. }
  875. }
  876. return true;
  877. }
  878. }
  879. // certain clipping containers should never constrain interactions, like <html> and <body>
  880. // https://github.com/fullcalendar/fullcalendar/issues/3615
  881. function isIgnoredClipping(node) {
  882. let tagName = node.tagName;
  883. return tagName === 'HTML' || tagName === 'BODY';
  884. }
  885. /*
  886. Tracks movement over multiple droppable areas (aka "hits")
  887. that exist in one or more DateComponents.
  888. Relies on an existing draggable.
  889. emits:
  890. - pointerdown
  891. - dragstart
  892. - hitchange - fires initially, even if not over a hit
  893. - pointerup
  894. - (hitchange - again, to null, if ended over a hit)
  895. - dragend
  896. */
  897. class HitDragging {
  898. constructor(dragging, droppableStore) {
  899. // options that can be set by caller
  900. this.useSubjectCenter = false;
  901. this.requireInitial = true; // if doesn't start out on a hit, won't emit any events
  902. this.disablePointCheck = false;
  903. this.initialHit = null;
  904. this.movingHit = null;
  905. this.finalHit = null; // won't ever be populated if shouldIgnoreMove
  906. this.handlePointerDown = (ev) => {
  907. let { dragging } = this;
  908. this.initialHit = null;
  909. this.movingHit = null;
  910. this.finalHit = null;
  911. this.prepareHits();
  912. this.processFirstCoord(ev);
  913. if (this.initialHit || !this.requireInitial) {
  914. dragging.setIgnoreMove(false);
  915. // TODO: fire this before computing processFirstCoord, so listeners can cancel. this gets fired by almost every handler :(
  916. this.emitter.trigger('pointerdown', ev);
  917. }
  918. else {
  919. dragging.setIgnoreMove(true);
  920. }
  921. };
  922. this.handleDragStart = (ev) => {
  923. this.emitter.trigger('dragstart', ev);
  924. this.handleMove(ev, true); // force = fire even if initially null
  925. };
  926. this.handleDragMove = (ev) => {
  927. this.emitter.trigger('dragmove', ev);
  928. this.handleMove(ev);
  929. };
  930. this.handlePointerUp = (ev) => {
  931. this.releaseHits();
  932. this.emitter.trigger('pointerup', ev);
  933. };
  934. this.handleDragEnd = (ev) => {
  935. if (this.movingHit) {
  936. this.emitter.trigger('hitupdate', null, true, ev);
  937. }
  938. this.finalHit = this.movingHit;
  939. this.movingHit = null;
  940. this.emitter.trigger('dragend', ev);
  941. };
  942. this.droppableStore = droppableStore;
  943. dragging.emitter.on('pointerdown', this.handlePointerDown);
  944. dragging.emitter.on('dragstart', this.handleDragStart);
  945. dragging.emitter.on('dragmove', this.handleDragMove);
  946. dragging.emitter.on('pointerup', this.handlePointerUp);
  947. dragging.emitter.on('dragend', this.handleDragEnd);
  948. this.dragging = dragging;
  949. this.emitter = new internal.Emitter();
  950. }
  951. // sets initialHit
  952. // sets coordAdjust
  953. processFirstCoord(ev) {
  954. let origPoint = { left: ev.pageX, top: ev.pageY };
  955. let adjustedPoint = origPoint;
  956. let subjectEl = ev.subjectEl;
  957. let subjectRect;
  958. if (subjectEl instanceof HTMLElement) { // i.e. not a Document/ShadowRoot
  959. subjectRect = internal.computeRect(subjectEl);
  960. adjustedPoint = internal.constrainPoint(adjustedPoint, subjectRect);
  961. }
  962. let initialHit = this.initialHit = this.queryHitForOffset(adjustedPoint.left, adjustedPoint.top);
  963. if (initialHit) {
  964. if (this.useSubjectCenter && subjectRect) {
  965. let slicedSubjectRect = internal.intersectRects(subjectRect, initialHit.rect);
  966. if (slicedSubjectRect) {
  967. adjustedPoint = internal.getRectCenter(slicedSubjectRect);
  968. }
  969. }
  970. this.coordAdjust = internal.diffPoints(adjustedPoint, origPoint);
  971. }
  972. else {
  973. this.coordAdjust = { left: 0, top: 0 };
  974. }
  975. }
  976. handleMove(ev, forceHandle) {
  977. let hit = this.queryHitForOffset(ev.pageX + this.coordAdjust.left, ev.pageY + this.coordAdjust.top);
  978. if (forceHandle || !isHitsEqual(this.movingHit, hit)) {
  979. this.movingHit = hit;
  980. this.emitter.trigger('hitupdate', hit, false, ev);
  981. }
  982. }
  983. prepareHits() {
  984. this.offsetTrackers = internal.mapHash(this.droppableStore, (interactionSettings) => {
  985. interactionSettings.component.prepareHits();
  986. return new OffsetTracker(interactionSettings.el);
  987. });
  988. }
  989. releaseHits() {
  990. let { offsetTrackers } = this;
  991. for (let id in offsetTrackers) {
  992. offsetTrackers[id].destroy();
  993. }
  994. this.offsetTrackers = {};
  995. }
  996. queryHitForOffset(offsetLeft, offsetTop) {
  997. let { droppableStore, offsetTrackers } = this;
  998. let bestHit = null;
  999. for (let id in droppableStore) {
  1000. let component = droppableStore[id].component;
  1001. let offsetTracker = offsetTrackers[id];
  1002. if (offsetTracker && // wasn't destroyed mid-drag
  1003. offsetTracker.isWithinClipping(offsetLeft, offsetTop)) {
  1004. let originLeft = offsetTracker.computeLeft();
  1005. let originTop = offsetTracker.computeTop();
  1006. let positionLeft = offsetLeft - originLeft;
  1007. let positionTop = offsetTop - originTop;
  1008. let { origRect } = offsetTracker;
  1009. let width = origRect.right - origRect.left;
  1010. let height = origRect.bottom - origRect.top;
  1011. if (
  1012. // must be within the element's bounds
  1013. positionLeft >= 0 && positionLeft < width &&
  1014. positionTop >= 0 && positionTop < height) {
  1015. let hit = component.queryHit(positionLeft, positionTop, width, height);
  1016. if (hit && (
  1017. // make sure the hit is within activeRange, meaning it's not a dead cell
  1018. internal.rangeContainsRange(hit.dateProfile.activeRange, hit.dateSpan.range)) &&
  1019. // Ensure the component we are querying for the hit is accessibly my the pointer
  1020. // Prevents obscured calendars (ex: under a modal dialog) from accepting hit
  1021. // https://github.com/fullcalendar/fullcalendar/issues/5026
  1022. (this.disablePointCheck ||
  1023. offsetTracker.el.contains(document.elementFromPoint(
  1024. // add-back origins to get coordinate relative to top-left of window viewport
  1025. positionLeft + originLeft - window.scrollX, positionTop + originTop - window.scrollY))) &&
  1026. (!bestHit || hit.layer > bestHit.layer)) {
  1027. hit.componentId = id;
  1028. hit.context = component.context;
  1029. // TODO: better way to re-orient rectangle
  1030. hit.rect.left += originLeft;
  1031. hit.rect.right += originLeft;
  1032. hit.rect.top += originTop;
  1033. hit.rect.bottom += originTop;
  1034. bestHit = hit;
  1035. }
  1036. }
  1037. }
  1038. }
  1039. return bestHit;
  1040. }
  1041. }
  1042. function isHitsEqual(hit0, hit1) {
  1043. if (!hit0 && !hit1) {
  1044. return true;
  1045. }
  1046. if (Boolean(hit0) !== Boolean(hit1)) {
  1047. return false;
  1048. }
  1049. return internal.isDateSpansEqual(hit0.dateSpan, hit1.dateSpan);
  1050. }
  1051. function buildDatePointApiWithContext(dateSpan, context) {
  1052. let props = {};
  1053. for (let transform of context.pluginHooks.datePointTransforms) {
  1054. Object.assign(props, transform(dateSpan, context));
  1055. }
  1056. Object.assign(props, buildDatePointApi(dateSpan, context.dateEnv));
  1057. return props;
  1058. }
  1059. function buildDatePointApi(span, dateEnv) {
  1060. return {
  1061. date: dateEnv.toDate(span.range.start),
  1062. dateStr: dateEnv.formatIso(span.range.start, { omitTime: span.allDay }),
  1063. allDay: span.allDay,
  1064. };
  1065. }
  1066. /*
  1067. Monitors when the user clicks on a specific date/time of a component.
  1068. A pointerdown+pointerup on the same "hit" constitutes a click.
  1069. */
  1070. class DateClicking extends internal.Interaction {
  1071. constructor(settings) {
  1072. super(settings);
  1073. this.handlePointerDown = (pev) => {
  1074. let { dragging } = this;
  1075. let downEl = pev.origEvent.target;
  1076. // do this in pointerdown (not dragend) because DOM might be mutated by the time dragend is fired
  1077. dragging.setIgnoreMove(!this.component.isValidDateDownEl(downEl));
  1078. };
  1079. // won't even fire if moving was ignored
  1080. this.handleDragEnd = (ev) => {
  1081. let { component } = this;
  1082. let { pointer } = this.dragging;
  1083. if (!pointer.wasTouchScroll) {
  1084. let { initialHit, finalHit } = this.hitDragging;
  1085. if (initialHit && finalHit && isHitsEqual(initialHit, finalHit)) {
  1086. let { context } = component;
  1087. let arg = Object.assign(Object.assign({}, buildDatePointApiWithContext(initialHit.dateSpan, context)), { dayEl: initialHit.dayEl, jsEvent: ev.origEvent, view: context.viewApi || context.calendarApi.view });
  1088. context.emitter.trigger('dateClick', arg);
  1089. }
  1090. }
  1091. };
  1092. // we DO want to watch pointer moves because otherwise finalHit won't get populated
  1093. this.dragging = new FeaturefulElementDragging(settings.el);
  1094. this.dragging.autoScroller.isEnabled = false;
  1095. let hitDragging = this.hitDragging = new HitDragging(this.dragging, internal.interactionSettingsToStore(settings));
  1096. hitDragging.emitter.on('pointerdown', this.handlePointerDown);
  1097. hitDragging.emitter.on('dragend', this.handleDragEnd);
  1098. }
  1099. destroy() {
  1100. this.dragging.destroy();
  1101. }
  1102. }
  1103. /*
  1104. Tracks when the user selects a portion of time of a component,
  1105. constituted by a drag over date cells, with a possible delay at the beginning of the drag.
  1106. */
  1107. class DateSelecting extends internal.Interaction {
  1108. constructor(settings) {
  1109. super(settings);
  1110. this.dragSelection = null;
  1111. this.handlePointerDown = (ev) => {
  1112. let { component, dragging } = this;
  1113. let { options } = component.context;
  1114. let canSelect = options.selectable &&
  1115. component.isValidDateDownEl(ev.origEvent.target);
  1116. // don't bother to watch expensive moves if component won't do selection
  1117. dragging.setIgnoreMove(!canSelect);
  1118. // if touch, require user to hold down
  1119. dragging.delay = ev.isTouch ? getComponentTouchDelay$1(component) : null;
  1120. };
  1121. this.handleDragStart = (ev) => {
  1122. this.component.context.calendarApi.unselect(ev); // unselect previous selections
  1123. };
  1124. this.handleHitUpdate = (hit, isFinal) => {
  1125. let { context } = this.component;
  1126. let dragSelection = null;
  1127. let isInvalid = false;
  1128. if (hit) {
  1129. let initialHit = this.hitDragging.initialHit;
  1130. let disallowed = hit.componentId === initialHit.componentId
  1131. && this.isHitComboAllowed
  1132. && !this.isHitComboAllowed(initialHit, hit);
  1133. if (!disallowed) {
  1134. dragSelection = joinHitsIntoSelection(initialHit, hit, context.pluginHooks.dateSelectionTransformers);
  1135. }
  1136. if (!dragSelection || !internal.isDateSelectionValid(dragSelection, hit.dateProfile, context)) {
  1137. isInvalid = true;
  1138. dragSelection = null;
  1139. }
  1140. }
  1141. if (dragSelection) {
  1142. context.dispatch({ type: 'SELECT_DATES', selection: dragSelection });
  1143. }
  1144. else if (!isFinal) { // only unselect if moved away while dragging
  1145. context.dispatch({ type: 'UNSELECT_DATES' });
  1146. }
  1147. if (!isInvalid) {
  1148. internal.enableCursor();
  1149. }
  1150. else {
  1151. internal.disableCursor();
  1152. }
  1153. if (!isFinal) {
  1154. this.dragSelection = dragSelection; // only clear if moved away from all hits while dragging
  1155. }
  1156. };
  1157. this.handlePointerUp = (pev) => {
  1158. if (this.dragSelection) {
  1159. // selection is already rendered, so just need to report selection
  1160. internal.triggerDateSelect(this.dragSelection, pev, this.component.context);
  1161. this.dragSelection = null;
  1162. }
  1163. };
  1164. let { component } = settings;
  1165. let { options } = component.context;
  1166. let dragging = this.dragging = new FeaturefulElementDragging(settings.el);
  1167. dragging.touchScrollAllowed = false;
  1168. dragging.minDistance = options.selectMinDistance || 0;
  1169. dragging.autoScroller.isEnabled = options.dragScroll;
  1170. let hitDragging = this.hitDragging = new HitDragging(this.dragging, internal.interactionSettingsToStore(settings));
  1171. hitDragging.emitter.on('pointerdown', this.handlePointerDown);
  1172. hitDragging.emitter.on('dragstart', this.handleDragStart);
  1173. hitDragging.emitter.on('hitupdate', this.handleHitUpdate);
  1174. hitDragging.emitter.on('pointerup', this.handlePointerUp);
  1175. }
  1176. destroy() {
  1177. this.dragging.destroy();
  1178. }
  1179. }
  1180. function getComponentTouchDelay$1(component) {
  1181. let { options } = component.context;
  1182. let delay = options.selectLongPressDelay;
  1183. if (delay == null) {
  1184. delay = options.longPressDelay;
  1185. }
  1186. return delay;
  1187. }
  1188. function joinHitsIntoSelection(hit0, hit1, dateSelectionTransformers) {
  1189. let dateSpan0 = hit0.dateSpan;
  1190. let dateSpan1 = hit1.dateSpan;
  1191. let ms = [
  1192. dateSpan0.range.start,
  1193. dateSpan0.range.end,
  1194. dateSpan1.range.start,
  1195. dateSpan1.range.end,
  1196. ];
  1197. ms.sort(internal.compareNumbers);
  1198. let props = {};
  1199. for (let transformer of dateSelectionTransformers) {
  1200. let res = transformer(hit0, hit1);
  1201. if (res === false) {
  1202. return null;
  1203. }
  1204. if (res) {
  1205. Object.assign(props, res);
  1206. }
  1207. }
  1208. props.range = { start: ms[0], end: ms[3] };
  1209. props.allDay = dateSpan0.allDay;
  1210. return props;
  1211. }
  1212. class EventDragging extends internal.Interaction {
  1213. constructor(settings) {
  1214. super(settings);
  1215. // internal state
  1216. this.subjectEl = null;
  1217. this.subjectSeg = null; // the seg being selected/dragged
  1218. this.isDragging = false;
  1219. this.eventRange = null;
  1220. this.relevantEvents = null; // the events being dragged
  1221. this.receivingContext = null;
  1222. this.validMutation = null;
  1223. this.mutatedRelevantEvents = null;
  1224. this.handlePointerDown = (ev) => {
  1225. let origTarget = ev.origEvent.target;
  1226. let { component, dragging } = this;
  1227. let { mirror } = dragging;
  1228. let { options } = component.context;
  1229. let initialContext = component.context;
  1230. this.subjectEl = ev.subjectEl;
  1231. let subjectSeg = this.subjectSeg = internal.getElSeg(ev.subjectEl);
  1232. let eventRange = this.eventRange = subjectSeg.eventRange;
  1233. let eventInstanceId = eventRange.instance.instanceId;
  1234. this.relevantEvents = internal.getRelevantEvents(initialContext.getCurrentData().eventStore, eventInstanceId);
  1235. dragging.minDistance = ev.isTouch ? 0 : options.eventDragMinDistance;
  1236. dragging.delay =
  1237. // only do a touch delay if touch and this event hasn't been selected yet
  1238. (ev.isTouch && eventInstanceId !== component.props.eventSelection) ?
  1239. getComponentTouchDelay(component) :
  1240. null;
  1241. if (options.fixedMirrorParent) {
  1242. mirror.parentNode = options.fixedMirrorParent;
  1243. }
  1244. else {
  1245. mirror.parentNode = internal.elementClosest(origTarget, '.fc');
  1246. }
  1247. mirror.revertDuration = options.dragRevertDuration;
  1248. let isValid = component.isValidSegDownEl(origTarget) &&
  1249. !internal.elementClosest(origTarget, '.fc-event-resizer'); // NOT on a resizer
  1250. dragging.setIgnoreMove(!isValid);
  1251. // disable dragging for elements that are resizable (ie, selectable)
  1252. // but are not draggable
  1253. this.isDragging = isValid &&
  1254. ev.subjectEl.classList.contains('fc-event-draggable');
  1255. };
  1256. this.handleDragStart = (ev) => {
  1257. let initialContext = this.component.context;
  1258. let eventRange = this.eventRange;
  1259. let eventInstanceId = eventRange.instance.instanceId;
  1260. if (ev.isTouch) {
  1261. // need to select a different event?
  1262. if (eventInstanceId !== this.component.props.eventSelection) {
  1263. initialContext.dispatch({ type: 'SELECT_EVENT', eventInstanceId });
  1264. }
  1265. }
  1266. else {
  1267. // if now using mouse, but was previous touch interaction, clear selected event
  1268. initialContext.dispatch({ type: 'UNSELECT_EVENT' });
  1269. }
  1270. if (this.isDragging) {
  1271. initialContext.calendarApi.unselect(ev); // unselect *date* selection
  1272. initialContext.emitter.trigger('eventDragStart', {
  1273. el: this.subjectEl,
  1274. event: new internal.EventImpl(initialContext, eventRange.def, eventRange.instance),
  1275. jsEvent: ev.origEvent,
  1276. view: initialContext.viewApi,
  1277. });
  1278. }
  1279. };
  1280. this.handleHitUpdate = (hit, isFinal) => {
  1281. if (!this.isDragging) {
  1282. return;
  1283. }
  1284. let relevantEvents = this.relevantEvents;
  1285. let initialHit = this.hitDragging.initialHit;
  1286. let initialContext = this.component.context;
  1287. // states based on new hit
  1288. let receivingContext = null;
  1289. let mutation = null;
  1290. let mutatedRelevantEvents = null;
  1291. let isInvalid = false;
  1292. let interaction = {
  1293. affectedEvents: relevantEvents,
  1294. mutatedEvents: internal.createEmptyEventStore(),
  1295. isEvent: true,
  1296. };
  1297. if (hit) {
  1298. receivingContext = hit.context;
  1299. let receivingOptions = receivingContext.options;
  1300. if (initialContext === receivingContext ||
  1301. (receivingOptions.editable && receivingOptions.droppable)) {
  1302. mutation = computeEventMutation(initialHit, hit, this.eventRange.instance.range.start, receivingContext.getCurrentData().pluginHooks.eventDragMutationMassagers);
  1303. if (mutation) {
  1304. mutatedRelevantEvents = internal.applyMutationToEventStore(relevantEvents, receivingContext.getCurrentData().eventUiBases, mutation, receivingContext);
  1305. interaction.mutatedEvents = mutatedRelevantEvents;
  1306. if (!internal.isInteractionValid(interaction, hit.dateProfile, receivingContext)) {
  1307. isInvalid = true;
  1308. mutation = null;
  1309. mutatedRelevantEvents = null;
  1310. interaction.mutatedEvents = internal.createEmptyEventStore();
  1311. }
  1312. }
  1313. }
  1314. else {
  1315. receivingContext = null;
  1316. }
  1317. }
  1318. this.displayDrag(receivingContext, interaction);
  1319. if (!isInvalid) {
  1320. internal.enableCursor();
  1321. }
  1322. else {
  1323. internal.disableCursor();
  1324. }
  1325. if (!isFinal) {
  1326. if (initialContext === receivingContext && // TODO: write test for this
  1327. isHitsEqual(initialHit, hit)) {
  1328. mutation = null;
  1329. }
  1330. this.dragging.setMirrorNeedsRevert(!mutation);
  1331. // render the mirror if no already-rendered mirror
  1332. // TODO: wish we could somehow wait for dispatch to guarantee render
  1333. this.dragging.setMirrorIsVisible(!hit || !this.subjectEl.getRootNode().querySelector('.fc-event-mirror'));
  1334. // assign states based on new hit
  1335. this.receivingContext = receivingContext;
  1336. this.validMutation = mutation;
  1337. this.mutatedRelevantEvents = mutatedRelevantEvents;
  1338. }
  1339. };
  1340. this.handlePointerUp = () => {
  1341. if (!this.isDragging) {
  1342. this.cleanup(); // because handleDragEnd won't fire
  1343. }
  1344. };
  1345. this.handleDragEnd = (ev) => {
  1346. if (this.isDragging) {
  1347. let initialContext = this.component.context;
  1348. let initialView = initialContext.viewApi;
  1349. let { receivingContext, validMutation } = this;
  1350. let eventDef = this.eventRange.def;
  1351. let eventInstance = this.eventRange.instance;
  1352. let eventApi = new internal.EventImpl(initialContext, eventDef, eventInstance);
  1353. let relevantEvents = this.relevantEvents;
  1354. let mutatedRelevantEvents = this.mutatedRelevantEvents;
  1355. let { finalHit } = this.hitDragging;
  1356. this.clearDrag(); // must happen after revert animation
  1357. initialContext.emitter.trigger('eventDragStop', {
  1358. el: this.subjectEl,
  1359. event: eventApi,
  1360. jsEvent: ev.origEvent,
  1361. view: initialView,
  1362. });
  1363. if (validMutation) {
  1364. // dropped within same calendar
  1365. if (receivingContext === initialContext) {
  1366. let updatedEventApi = new internal.EventImpl(initialContext, mutatedRelevantEvents.defs[eventDef.defId], eventInstance ? mutatedRelevantEvents.instances[eventInstance.instanceId] : null);
  1367. initialContext.dispatch({
  1368. type: 'MERGE_EVENTS',
  1369. eventStore: mutatedRelevantEvents,
  1370. });
  1371. let eventChangeArg = {
  1372. oldEvent: eventApi,
  1373. event: updatedEventApi,
  1374. relatedEvents: internal.buildEventApis(mutatedRelevantEvents, initialContext, eventInstance),
  1375. revert() {
  1376. initialContext.dispatch({
  1377. type: 'MERGE_EVENTS',
  1378. eventStore: relevantEvents, // the pre-change data
  1379. });
  1380. },
  1381. };
  1382. let transformed = {};
  1383. for (let transformer of initialContext.getCurrentData().pluginHooks.eventDropTransformers) {
  1384. Object.assign(transformed, transformer(validMutation, initialContext));
  1385. }
  1386. initialContext.emitter.trigger('eventDrop', Object.assign(Object.assign(Object.assign({}, eventChangeArg), transformed), { el: ev.subjectEl, delta: validMutation.datesDelta, jsEvent: ev.origEvent, view: initialView }));
  1387. initialContext.emitter.trigger('eventChange', eventChangeArg);
  1388. // dropped in different calendar
  1389. }
  1390. else if (receivingContext) {
  1391. let eventRemoveArg = {
  1392. event: eventApi,
  1393. relatedEvents: internal.buildEventApis(relevantEvents, initialContext, eventInstance),
  1394. revert() {
  1395. initialContext.dispatch({
  1396. type: 'MERGE_EVENTS',
  1397. eventStore: relevantEvents,
  1398. });
  1399. },
  1400. };
  1401. initialContext.emitter.trigger('eventLeave', Object.assign(Object.assign({}, eventRemoveArg), { draggedEl: ev.subjectEl, view: initialView }));
  1402. initialContext.dispatch({
  1403. type: 'REMOVE_EVENTS',
  1404. eventStore: relevantEvents,
  1405. });
  1406. initialContext.emitter.trigger('eventRemove', eventRemoveArg);
  1407. let addedEventDef = mutatedRelevantEvents.defs[eventDef.defId];
  1408. let addedEventInstance = mutatedRelevantEvents.instances[eventInstance.instanceId];
  1409. let addedEventApi = new internal.EventImpl(receivingContext, addedEventDef, addedEventInstance);
  1410. receivingContext.dispatch({
  1411. type: 'MERGE_EVENTS',
  1412. eventStore: mutatedRelevantEvents,
  1413. });
  1414. let eventAddArg = {
  1415. event: addedEventApi,
  1416. relatedEvents: internal.buildEventApis(mutatedRelevantEvents, receivingContext, addedEventInstance),
  1417. revert() {
  1418. receivingContext.dispatch({
  1419. type: 'REMOVE_EVENTS',
  1420. eventStore: mutatedRelevantEvents,
  1421. });
  1422. },
  1423. };
  1424. receivingContext.emitter.trigger('eventAdd', eventAddArg);
  1425. if (ev.isTouch) {
  1426. receivingContext.dispatch({
  1427. type: 'SELECT_EVENT',
  1428. eventInstanceId: eventInstance.instanceId,
  1429. });
  1430. }
  1431. receivingContext.emitter.trigger('drop', Object.assign(Object.assign({}, buildDatePointApiWithContext(finalHit.dateSpan, receivingContext)), { draggedEl: ev.subjectEl, jsEvent: ev.origEvent, view: finalHit.context.viewApi }));
  1432. receivingContext.emitter.trigger('eventReceive', Object.assign(Object.assign({}, eventAddArg), { draggedEl: ev.subjectEl, view: finalHit.context.viewApi }));
  1433. }
  1434. }
  1435. else {
  1436. initialContext.emitter.trigger('_noEventDrop');
  1437. }
  1438. }
  1439. this.cleanup();
  1440. };
  1441. let { component } = this;
  1442. let { options } = component.context;
  1443. let dragging = this.dragging = new FeaturefulElementDragging(settings.el);
  1444. dragging.pointer.selector = EventDragging.SELECTOR;
  1445. dragging.touchScrollAllowed = false;
  1446. dragging.autoScroller.isEnabled = options.dragScroll;
  1447. let hitDragging = this.hitDragging = new HitDragging(this.dragging, internal.interactionSettingsStore);
  1448. hitDragging.useSubjectCenter = settings.useEventCenter;
  1449. hitDragging.emitter.on('pointerdown', this.handlePointerDown);
  1450. hitDragging.emitter.on('dragstart', this.handleDragStart);
  1451. hitDragging.emitter.on('hitupdate', this.handleHitUpdate);
  1452. hitDragging.emitter.on('pointerup', this.handlePointerUp);
  1453. hitDragging.emitter.on('dragend', this.handleDragEnd);
  1454. }
  1455. destroy() {
  1456. this.dragging.destroy();
  1457. }
  1458. // render a drag state on the next receivingCalendar
  1459. displayDrag(nextContext, state) {
  1460. let initialContext = this.component.context;
  1461. let prevContext = this.receivingContext;
  1462. // does the previous calendar need to be cleared?
  1463. if (prevContext && prevContext !== nextContext) {
  1464. // does the initial calendar need to be cleared?
  1465. // if so, don't clear all the way. we still need to to hide the affectedEvents
  1466. if (prevContext === initialContext) {
  1467. prevContext.dispatch({
  1468. type: 'SET_EVENT_DRAG',
  1469. state: {
  1470. affectedEvents: state.affectedEvents,
  1471. mutatedEvents: internal.createEmptyEventStore(),
  1472. isEvent: true,
  1473. },
  1474. });
  1475. // completely clear the old calendar if it wasn't the initial
  1476. }
  1477. else {
  1478. prevContext.dispatch({ type: 'UNSET_EVENT_DRAG' });
  1479. }
  1480. }
  1481. if (nextContext) {
  1482. nextContext.dispatch({ type: 'SET_EVENT_DRAG', state });
  1483. }
  1484. }
  1485. clearDrag() {
  1486. let initialCalendar = this.component.context;
  1487. let { receivingContext } = this;
  1488. if (receivingContext) {
  1489. receivingContext.dispatch({ type: 'UNSET_EVENT_DRAG' });
  1490. }
  1491. // the initial calendar might have an dummy drag state from displayDrag
  1492. if (initialCalendar !== receivingContext) {
  1493. initialCalendar.dispatch({ type: 'UNSET_EVENT_DRAG' });
  1494. }
  1495. }
  1496. cleanup() {
  1497. this.subjectSeg = null;
  1498. this.isDragging = false;
  1499. this.eventRange = null;
  1500. this.relevantEvents = null;
  1501. this.receivingContext = null;
  1502. this.validMutation = null;
  1503. this.mutatedRelevantEvents = null;
  1504. }
  1505. }
  1506. // TODO: test this in IE11
  1507. // QUESTION: why do we need it on the resizable???
  1508. EventDragging.SELECTOR = '.fc-event-draggable, .fc-event-resizable';
  1509. function computeEventMutation(hit0, hit1, eventInstanceStart, massagers) {
  1510. let dateSpan0 = hit0.dateSpan;
  1511. let dateSpan1 = hit1.dateSpan;
  1512. let date0 = dateSpan0.range.start;
  1513. let date1 = dateSpan1.range.start;
  1514. let standardProps = {};
  1515. if (dateSpan0.allDay !== dateSpan1.allDay) {
  1516. standardProps.allDay = dateSpan1.allDay;
  1517. standardProps.hasEnd = hit1.context.options.allDayMaintainDuration;
  1518. if (dateSpan1.allDay) {
  1519. // means date1 is already start-of-day,
  1520. // but date0 needs to be converted
  1521. date0 = internal.startOfDay(eventInstanceStart);
  1522. }
  1523. else {
  1524. // Moving from allDate->timed
  1525. // Doesn't matter where on the event the drag began, mutate the event's start-date to date1
  1526. date0 = eventInstanceStart;
  1527. }
  1528. }
  1529. let delta = internal.diffDates(date0, date1, hit0.context.dateEnv, hit0.componentId === hit1.componentId ?
  1530. hit0.largeUnit :
  1531. null);
  1532. if (delta.milliseconds) { // has hours/minutes/seconds
  1533. standardProps.allDay = false;
  1534. }
  1535. let mutation = {
  1536. datesDelta: delta,
  1537. standardProps,
  1538. };
  1539. for (let massager of massagers) {
  1540. massager(mutation, hit0, hit1);
  1541. }
  1542. return mutation;
  1543. }
  1544. function getComponentTouchDelay(component) {
  1545. let { options } = component.context;
  1546. let delay = options.eventLongPressDelay;
  1547. if (delay == null) {
  1548. delay = options.longPressDelay;
  1549. }
  1550. return delay;
  1551. }
  1552. class EventResizing extends internal.Interaction {
  1553. constructor(settings) {
  1554. super(settings);
  1555. // internal state
  1556. this.draggingSegEl = null;
  1557. this.draggingSeg = null; // TODO: rename to resizingSeg? subjectSeg?
  1558. this.eventRange = null;
  1559. this.relevantEvents = null;
  1560. this.validMutation = null;
  1561. this.mutatedRelevantEvents = null;
  1562. this.handlePointerDown = (ev) => {
  1563. let { component } = this;
  1564. let segEl = this.querySegEl(ev);
  1565. let seg = internal.getElSeg(segEl);
  1566. let eventRange = this.eventRange = seg.eventRange;
  1567. this.dragging.minDistance = component.context.options.eventDragMinDistance;
  1568. // if touch, need to be working with a selected event
  1569. this.dragging.setIgnoreMove(!this.component.isValidSegDownEl(ev.origEvent.target) ||
  1570. (ev.isTouch && this.component.props.eventSelection !== eventRange.instance.instanceId));
  1571. };
  1572. this.handleDragStart = (ev) => {
  1573. let { context } = this.component;
  1574. let eventRange = this.eventRange;
  1575. this.relevantEvents = internal.getRelevantEvents(context.getCurrentData().eventStore, this.eventRange.instance.instanceId);
  1576. let segEl = this.querySegEl(ev);
  1577. this.draggingSegEl = segEl;
  1578. this.draggingSeg = internal.getElSeg(segEl);
  1579. context.calendarApi.unselect();
  1580. context.emitter.trigger('eventResizeStart', {
  1581. el: segEl,
  1582. event: new internal.EventImpl(context, eventRange.def, eventRange.instance),
  1583. jsEvent: ev.origEvent,
  1584. view: context.viewApi,
  1585. });
  1586. };
  1587. this.handleHitUpdate = (hit, isFinal, ev) => {
  1588. let { context } = this.component;
  1589. let relevantEvents = this.relevantEvents;
  1590. let initialHit = this.hitDragging.initialHit;
  1591. let eventInstance = this.eventRange.instance;
  1592. let mutation = null;
  1593. let mutatedRelevantEvents = null;
  1594. let isInvalid = false;
  1595. let interaction = {
  1596. affectedEvents: relevantEvents,
  1597. mutatedEvents: internal.createEmptyEventStore(),
  1598. isEvent: true,
  1599. };
  1600. if (hit) {
  1601. let disallowed = hit.componentId === initialHit.componentId
  1602. && this.isHitComboAllowed
  1603. && !this.isHitComboAllowed(initialHit, hit);
  1604. if (!disallowed) {
  1605. mutation = computeMutation(initialHit, hit, ev.subjectEl.classList.contains('fc-event-resizer-start'), eventInstance.range);
  1606. }
  1607. }
  1608. if (mutation) {
  1609. mutatedRelevantEvents = internal.applyMutationToEventStore(relevantEvents, context.getCurrentData().eventUiBases, mutation, context);
  1610. interaction.mutatedEvents = mutatedRelevantEvents;
  1611. if (!internal.isInteractionValid(interaction, hit.dateProfile, context)) {
  1612. isInvalid = true;
  1613. mutation = null;
  1614. mutatedRelevantEvents = null;
  1615. interaction.mutatedEvents = null;
  1616. }
  1617. }
  1618. if (mutatedRelevantEvents) {
  1619. context.dispatch({
  1620. type: 'SET_EVENT_RESIZE',
  1621. state: interaction,
  1622. });
  1623. }
  1624. else {
  1625. context.dispatch({ type: 'UNSET_EVENT_RESIZE' });
  1626. }
  1627. if (!isInvalid) {
  1628. internal.enableCursor();
  1629. }
  1630. else {
  1631. internal.disableCursor();
  1632. }
  1633. if (!isFinal) {
  1634. if (mutation && isHitsEqual(initialHit, hit)) {
  1635. mutation = null;
  1636. }
  1637. this.validMutation = mutation;
  1638. this.mutatedRelevantEvents = mutatedRelevantEvents;
  1639. }
  1640. };
  1641. this.handleDragEnd = (ev) => {
  1642. let { context } = this.component;
  1643. let eventDef = this.eventRange.def;
  1644. let eventInstance = this.eventRange.instance;
  1645. let eventApi = new internal.EventImpl(context, eventDef, eventInstance);
  1646. let relevantEvents = this.relevantEvents;
  1647. let mutatedRelevantEvents = this.mutatedRelevantEvents;
  1648. context.emitter.trigger('eventResizeStop', {
  1649. el: this.draggingSegEl,
  1650. event: eventApi,
  1651. jsEvent: ev.origEvent,
  1652. view: context.viewApi,
  1653. });
  1654. if (this.validMutation) {
  1655. let updatedEventApi = new internal.EventImpl(context, mutatedRelevantEvents.defs[eventDef.defId], eventInstance ? mutatedRelevantEvents.instances[eventInstance.instanceId] : null);
  1656. context.dispatch({
  1657. type: 'MERGE_EVENTS',
  1658. eventStore: mutatedRelevantEvents,
  1659. });
  1660. let eventChangeArg = {
  1661. oldEvent: eventApi,
  1662. event: updatedEventApi,
  1663. relatedEvents: internal.buildEventApis(mutatedRelevantEvents, context, eventInstance),
  1664. revert() {
  1665. context.dispatch({
  1666. type: 'MERGE_EVENTS',
  1667. eventStore: relevantEvents, // the pre-change events
  1668. });
  1669. },
  1670. };
  1671. context.emitter.trigger('eventResize', Object.assign(Object.assign({}, eventChangeArg), { el: this.draggingSegEl, startDelta: this.validMutation.startDelta || internal.createDuration(0), endDelta: this.validMutation.endDelta || internal.createDuration(0), jsEvent: ev.origEvent, view: context.viewApi }));
  1672. context.emitter.trigger('eventChange', eventChangeArg);
  1673. }
  1674. else {
  1675. context.emitter.trigger('_noEventResize');
  1676. }
  1677. // reset all internal state
  1678. this.draggingSeg = null;
  1679. this.relevantEvents = null;
  1680. this.validMutation = null;
  1681. // okay to keep eventInstance around. useful to set it in handlePointerDown
  1682. };
  1683. let { component } = settings;
  1684. let dragging = this.dragging = new FeaturefulElementDragging(settings.el);
  1685. dragging.pointer.selector = '.fc-event-resizer';
  1686. dragging.touchScrollAllowed = false;
  1687. dragging.autoScroller.isEnabled = component.context.options.dragScroll;
  1688. let hitDragging = this.hitDragging = new HitDragging(this.dragging, internal.interactionSettingsToStore(settings));
  1689. hitDragging.emitter.on('pointerdown', this.handlePointerDown);
  1690. hitDragging.emitter.on('dragstart', this.handleDragStart);
  1691. hitDragging.emitter.on('hitupdate', this.handleHitUpdate);
  1692. hitDragging.emitter.on('dragend', this.handleDragEnd);
  1693. }
  1694. destroy() {
  1695. this.dragging.destroy();
  1696. }
  1697. querySegEl(ev) {
  1698. return internal.elementClosest(ev.subjectEl, '.fc-event');
  1699. }
  1700. }
  1701. function computeMutation(hit0, hit1, isFromStart, instanceRange) {
  1702. let dateEnv = hit0.context.dateEnv;
  1703. let date0 = hit0.dateSpan.range.start;
  1704. let date1 = hit1.dateSpan.range.start;
  1705. let delta = internal.diffDates(date0, date1, dateEnv, hit0.largeUnit);
  1706. if (isFromStart) {
  1707. if (dateEnv.add(instanceRange.start, delta) < instanceRange.end) {
  1708. return { startDelta: delta };
  1709. }
  1710. }
  1711. else if (dateEnv.add(instanceRange.end, delta) > instanceRange.start) {
  1712. return { endDelta: delta };
  1713. }
  1714. return null;
  1715. }
  1716. class UnselectAuto {
  1717. constructor(context) {
  1718. this.context = context;
  1719. this.isRecentPointerDateSelect = false; // wish we could use a selector to detect date selection, but uses hit system
  1720. this.matchesCancel = false;
  1721. this.matchesEvent = false;
  1722. this.onSelect = (selectInfo) => {
  1723. if (selectInfo.jsEvent) {
  1724. this.isRecentPointerDateSelect = true;
  1725. }
  1726. };
  1727. this.onDocumentPointerDown = (pev) => {
  1728. let unselectCancel = this.context.options.unselectCancel;
  1729. let downEl = internal.getEventTargetViaRoot(pev.origEvent);
  1730. this.matchesCancel = !!internal.elementClosest(downEl, unselectCancel);
  1731. this.matchesEvent = !!internal.elementClosest(downEl, EventDragging.SELECTOR); // interaction started on an event?
  1732. };
  1733. this.onDocumentPointerUp = (pev) => {
  1734. let { context } = this;
  1735. let { documentPointer } = this;
  1736. let calendarState = context.getCurrentData();
  1737. // touch-scrolling should never unfocus any type of selection
  1738. if (!documentPointer.wasTouchScroll) {
  1739. if (calendarState.dateSelection && // an existing date selection?
  1740. !this.isRecentPointerDateSelect // a new pointer-initiated date selection since last onDocumentPointerUp?
  1741. ) {
  1742. let unselectAuto = context.options.unselectAuto;
  1743. if (unselectAuto && (!unselectAuto || !this.matchesCancel)) {
  1744. context.calendarApi.unselect(pev);
  1745. }
  1746. }
  1747. if (calendarState.eventSelection && // an existing event selected?
  1748. !this.matchesEvent // interaction DIDN'T start on an event
  1749. ) {
  1750. context.dispatch({ type: 'UNSELECT_EVENT' });
  1751. }
  1752. }
  1753. this.isRecentPointerDateSelect = false;
  1754. };
  1755. let documentPointer = this.documentPointer = new PointerDragging(document);
  1756. documentPointer.shouldIgnoreMove = true;
  1757. documentPointer.shouldWatchScroll = false;
  1758. documentPointer.emitter.on('pointerdown', this.onDocumentPointerDown);
  1759. documentPointer.emitter.on('pointerup', this.onDocumentPointerUp);
  1760. /*
  1761. TODO: better way to know about whether there was a selection with the pointer
  1762. */
  1763. context.emitter.on('select', this.onSelect);
  1764. }
  1765. destroy() {
  1766. this.context.emitter.off('select', this.onSelect);
  1767. this.documentPointer.destroy();
  1768. }
  1769. }
  1770. const OPTION_REFINERS = {
  1771. fixedMirrorParent: internal.identity,
  1772. };
  1773. const LISTENER_REFINERS = {
  1774. dateClick: internal.identity,
  1775. eventDragStart: internal.identity,
  1776. eventDragStop: internal.identity,
  1777. eventDrop: internal.identity,
  1778. eventResizeStart: internal.identity,
  1779. eventResizeStop: internal.identity,
  1780. eventResize: internal.identity,
  1781. drop: internal.identity,
  1782. eventReceive: internal.identity,
  1783. eventLeave: internal.identity,
  1784. };
  1785. /*
  1786. Given an already instantiated draggable object for one-or-more elements,
  1787. Interprets any dragging as an attempt to drag an events that lives outside
  1788. of a calendar onto a calendar.
  1789. */
  1790. class ExternalElementDragging {
  1791. constructor(dragging, suppliedDragMeta) {
  1792. this.receivingContext = null;
  1793. this.droppableEvent = null; // will exist for all drags, even if create:false
  1794. this.suppliedDragMeta = null;
  1795. this.dragMeta = null;
  1796. this.handleDragStart = (ev) => {
  1797. this.dragMeta = this.buildDragMeta(ev.subjectEl);
  1798. };
  1799. this.handleHitUpdate = (hit, isFinal, ev) => {
  1800. let { dragging } = this.hitDragging;
  1801. let receivingContext = null;
  1802. let droppableEvent = null;
  1803. let isInvalid = false;
  1804. let interaction = {
  1805. affectedEvents: internal.createEmptyEventStore(),
  1806. mutatedEvents: internal.createEmptyEventStore(),
  1807. isEvent: this.dragMeta.create,
  1808. };
  1809. if (hit) {
  1810. receivingContext = hit.context;
  1811. if (this.canDropElOnCalendar(ev.subjectEl, receivingContext)) {
  1812. droppableEvent = computeEventForDateSpan(hit.dateSpan, this.dragMeta, receivingContext);
  1813. interaction.mutatedEvents = internal.eventTupleToStore(droppableEvent);
  1814. isInvalid = !internal.isInteractionValid(interaction, hit.dateProfile, receivingContext);
  1815. if (isInvalid) {
  1816. interaction.mutatedEvents = internal.createEmptyEventStore();
  1817. droppableEvent = null;
  1818. }
  1819. }
  1820. }
  1821. this.displayDrag(receivingContext, interaction);
  1822. // show mirror if no already-rendered mirror element OR if we are shutting down the mirror (?)
  1823. // TODO: wish we could somehow wait for dispatch to guarantee render
  1824. dragging.setMirrorIsVisible(isFinal || !droppableEvent || !document.querySelector('.fc-event-mirror'));
  1825. if (!isInvalid) {
  1826. internal.enableCursor();
  1827. }
  1828. else {
  1829. internal.disableCursor();
  1830. }
  1831. if (!isFinal) {
  1832. dragging.setMirrorNeedsRevert(!droppableEvent);
  1833. this.receivingContext = receivingContext;
  1834. this.droppableEvent = droppableEvent;
  1835. }
  1836. };
  1837. this.handleDragEnd = (pev) => {
  1838. let { receivingContext, droppableEvent } = this;
  1839. this.clearDrag();
  1840. if (receivingContext && droppableEvent) {
  1841. let finalHit = this.hitDragging.finalHit;
  1842. let finalView = finalHit.context.viewApi;
  1843. let dragMeta = this.dragMeta;
  1844. receivingContext.emitter.trigger('drop', Object.assign(Object.assign({}, buildDatePointApiWithContext(finalHit.dateSpan, receivingContext)), { draggedEl: pev.subjectEl, jsEvent: pev.origEvent, view: finalView }));
  1845. if (dragMeta.create) {
  1846. let addingEvents = internal.eventTupleToStore(droppableEvent);
  1847. receivingContext.dispatch({
  1848. type: 'MERGE_EVENTS',
  1849. eventStore: addingEvents,
  1850. });
  1851. if (pev.isTouch) {
  1852. receivingContext.dispatch({
  1853. type: 'SELECT_EVENT',
  1854. eventInstanceId: droppableEvent.instance.instanceId,
  1855. });
  1856. }
  1857. // signal that an external event landed
  1858. receivingContext.emitter.trigger('eventReceive', {
  1859. event: new internal.EventImpl(receivingContext, droppableEvent.def, droppableEvent.instance),
  1860. relatedEvents: [],
  1861. revert() {
  1862. receivingContext.dispatch({
  1863. type: 'REMOVE_EVENTS',
  1864. eventStore: addingEvents,
  1865. });
  1866. },
  1867. draggedEl: pev.subjectEl,
  1868. view: finalView,
  1869. });
  1870. }
  1871. }
  1872. this.receivingContext = null;
  1873. this.droppableEvent = null;
  1874. };
  1875. let hitDragging = this.hitDragging = new HitDragging(dragging, internal.interactionSettingsStore);
  1876. hitDragging.requireInitial = false; // will start outside of a component
  1877. hitDragging.emitter.on('dragstart', this.handleDragStart);
  1878. hitDragging.emitter.on('hitupdate', this.handleHitUpdate);
  1879. hitDragging.emitter.on('dragend', this.handleDragEnd);
  1880. this.suppliedDragMeta = suppliedDragMeta;
  1881. }
  1882. buildDragMeta(subjectEl) {
  1883. if (typeof this.suppliedDragMeta === 'object') {
  1884. return internal.parseDragMeta(this.suppliedDragMeta);
  1885. }
  1886. if (typeof this.suppliedDragMeta === 'function') {
  1887. return internal.parseDragMeta(this.suppliedDragMeta(subjectEl));
  1888. }
  1889. return getDragMetaFromEl(subjectEl);
  1890. }
  1891. displayDrag(nextContext, state) {
  1892. let prevContext = this.receivingContext;
  1893. if (prevContext && prevContext !== nextContext) {
  1894. prevContext.dispatch({ type: 'UNSET_EVENT_DRAG' });
  1895. }
  1896. if (nextContext) {
  1897. nextContext.dispatch({ type: 'SET_EVENT_DRAG', state });
  1898. }
  1899. }
  1900. clearDrag() {
  1901. if (this.receivingContext) {
  1902. this.receivingContext.dispatch({ type: 'UNSET_EVENT_DRAG' });
  1903. }
  1904. }
  1905. canDropElOnCalendar(el, receivingContext) {
  1906. let dropAccept = receivingContext.options.dropAccept;
  1907. if (typeof dropAccept === 'function') {
  1908. return dropAccept.call(receivingContext.calendarApi, el);
  1909. }
  1910. if (typeof dropAccept === 'string' && dropAccept) {
  1911. return Boolean(internal.elementMatches(el, dropAccept));
  1912. }
  1913. return true;
  1914. }
  1915. }
  1916. // Utils for computing event store from the DragMeta
  1917. // ----------------------------------------------------------------------------------------------------
  1918. function computeEventForDateSpan(dateSpan, dragMeta, context) {
  1919. let defProps = Object.assign({}, dragMeta.leftoverProps);
  1920. for (let transform of context.pluginHooks.externalDefTransforms) {
  1921. Object.assign(defProps, transform(dateSpan, dragMeta));
  1922. }
  1923. let { refined, extra } = internal.refineEventDef(defProps, context);
  1924. let def = internal.parseEventDef(refined, extra, dragMeta.sourceId, dateSpan.allDay, context.options.forceEventDuration || Boolean(dragMeta.duration), // hasEnd
  1925. context);
  1926. let start = dateSpan.range.start;
  1927. // only rely on time info if drop zone is all-day,
  1928. // otherwise, we already know the time
  1929. if (dateSpan.allDay && dragMeta.startTime) {
  1930. start = context.dateEnv.add(start, dragMeta.startTime);
  1931. }
  1932. let end = dragMeta.duration ?
  1933. context.dateEnv.add(start, dragMeta.duration) :
  1934. internal.getDefaultEventEnd(dateSpan.allDay, start, context);
  1935. let instance = internal.createEventInstance(def.defId, { start, end });
  1936. return { def, instance };
  1937. }
  1938. // Utils for extracting data from element
  1939. // ----------------------------------------------------------------------------------------------------
  1940. function getDragMetaFromEl(el) {
  1941. let str = getEmbeddedElData(el, 'event');
  1942. let obj = str ?
  1943. JSON.parse(str) :
  1944. { create: false }; // if no embedded data, assume no event creation
  1945. return internal.parseDragMeta(obj);
  1946. }
  1947. internal.config.dataAttrPrefix = '';
  1948. function getEmbeddedElData(el, name) {
  1949. let prefix = internal.config.dataAttrPrefix;
  1950. let prefixedName = (prefix ? prefix + '-' : '') + name;
  1951. return el.getAttribute('data-' + prefixedName) || '';
  1952. }
  1953. /*
  1954. Makes an element (that is *external* to any calendar) draggable.
  1955. Can pass in data that determines how an event will be created when dropped onto a calendar.
  1956. Leverages FullCalendar's internal drag-n-drop functionality WITHOUT a third-party drag system.
  1957. */
  1958. class ExternalDraggable {
  1959. constructor(el, settings = {}) {
  1960. this.handlePointerDown = (ev) => {
  1961. let { dragging } = this;
  1962. let { minDistance, longPressDelay } = this.settings;
  1963. dragging.minDistance =
  1964. minDistance != null ?
  1965. minDistance :
  1966. (ev.isTouch ? 0 : internal.BASE_OPTION_DEFAULTS.eventDragMinDistance);
  1967. dragging.delay =
  1968. ev.isTouch ? // TODO: eventually read eventLongPressDelay instead vvv
  1969. (longPressDelay != null ? longPressDelay : internal.BASE_OPTION_DEFAULTS.longPressDelay) :
  1970. 0;
  1971. };
  1972. this.handleDragStart = (ev) => {
  1973. if (ev.isTouch &&
  1974. this.dragging.delay &&
  1975. ev.subjectEl.classList.contains('fc-event')) {
  1976. this.dragging.mirror.getMirrorEl().classList.add('fc-event-selected');
  1977. }
  1978. };
  1979. this.settings = settings;
  1980. let dragging = this.dragging = new FeaturefulElementDragging(el);
  1981. dragging.touchScrollAllowed = false;
  1982. if (settings.itemSelector != null) {
  1983. dragging.pointer.selector = settings.itemSelector;
  1984. }
  1985. if (settings.appendTo != null) {
  1986. dragging.mirror.parentNode = settings.appendTo; // TODO: write tests
  1987. }
  1988. dragging.emitter.on('pointerdown', this.handlePointerDown);
  1989. dragging.emitter.on('dragstart', this.handleDragStart);
  1990. new ExternalElementDragging(dragging, settings.eventData); // eslint-disable-line no-new
  1991. }
  1992. destroy() {
  1993. this.dragging.destroy();
  1994. }
  1995. }
  1996. /*
  1997. Detects when a *THIRD-PARTY* drag-n-drop system interacts with elements.
  1998. The third-party system is responsible for drawing the visuals effects of the drag.
  1999. This class simply monitors for pointer movements and fires events.
  2000. It also has the ability to hide the moving element (the "mirror") during the drag.
  2001. */
  2002. class InferredElementDragging extends internal.ElementDragging {
  2003. constructor(containerEl) {
  2004. super(containerEl);
  2005. this.shouldIgnoreMove = false;
  2006. this.mirrorSelector = '';
  2007. this.currentMirrorEl = null;
  2008. this.handlePointerDown = (ev) => {
  2009. this.emitter.trigger('pointerdown', ev);
  2010. if (!this.shouldIgnoreMove) {
  2011. // fire dragstart right away. does not support delay or min-distance
  2012. this.emitter.trigger('dragstart', ev);
  2013. }
  2014. };
  2015. this.handlePointerMove = (ev) => {
  2016. if (!this.shouldIgnoreMove) {
  2017. this.emitter.trigger('dragmove', ev);
  2018. }
  2019. };
  2020. this.handlePointerUp = (ev) => {
  2021. this.emitter.trigger('pointerup', ev);
  2022. if (!this.shouldIgnoreMove) {
  2023. // fire dragend right away. does not support a revert animation
  2024. this.emitter.trigger('dragend', ev);
  2025. }
  2026. };
  2027. let pointer = this.pointer = new PointerDragging(containerEl);
  2028. pointer.emitter.on('pointerdown', this.handlePointerDown);
  2029. pointer.emitter.on('pointermove', this.handlePointerMove);
  2030. pointer.emitter.on('pointerup', this.handlePointerUp);
  2031. }
  2032. destroy() {
  2033. this.pointer.destroy();
  2034. }
  2035. setIgnoreMove(bool) {
  2036. this.shouldIgnoreMove = bool;
  2037. }
  2038. setMirrorIsVisible(bool) {
  2039. if (bool) {
  2040. // restore a previously hidden element.
  2041. // use the reference in case the selector class has already been removed.
  2042. if (this.currentMirrorEl) {
  2043. this.currentMirrorEl.style.visibility = '';
  2044. this.currentMirrorEl = null;
  2045. }
  2046. }
  2047. else {
  2048. let mirrorEl = this.mirrorSelector
  2049. // TODO: somehow query FullCalendars WITHIN shadow-roots
  2050. ? document.querySelector(this.mirrorSelector)
  2051. : null;
  2052. if (mirrorEl) {
  2053. this.currentMirrorEl = mirrorEl;
  2054. mirrorEl.style.visibility = 'hidden';
  2055. }
  2056. }
  2057. }
  2058. }
  2059. /*
  2060. Bridges third-party drag-n-drop systems with FullCalendar.
  2061. Must be instantiated and destroyed by caller.
  2062. */
  2063. class ThirdPartyDraggable {
  2064. constructor(containerOrSettings, settings) {
  2065. let containerEl = document;
  2066. if (
  2067. // wish we could just test instanceof EventTarget, but doesn't work in IE11
  2068. containerOrSettings === document ||
  2069. containerOrSettings instanceof Element) {
  2070. containerEl = containerOrSettings;
  2071. settings = settings || {};
  2072. }
  2073. else {
  2074. settings = (containerOrSettings || {});
  2075. }
  2076. let dragging = this.dragging = new InferredElementDragging(containerEl);
  2077. if (typeof settings.itemSelector === 'string') {
  2078. dragging.pointer.selector = settings.itemSelector;
  2079. }
  2080. else if (containerEl === document) {
  2081. dragging.pointer.selector = '[data-event]';
  2082. }
  2083. if (typeof settings.mirrorSelector === 'string') {
  2084. dragging.mirrorSelector = settings.mirrorSelector;
  2085. }
  2086. let externalDragging = new ExternalElementDragging(dragging, settings.eventData);
  2087. // The hit-detection system requires that the dnd-mirror-element be pointer-events:none,
  2088. // but this can't be guaranteed for third-party draggables, so disable
  2089. externalDragging.hitDragging.disablePointCheck = true;
  2090. }
  2091. destroy() {
  2092. this.dragging.destroy();
  2093. }
  2094. }
  2095. var plugin = core.createPlugin({
  2096. name: '@fullcalendar/interaction',
  2097. componentInteractions: [DateClicking, DateSelecting, EventDragging, EventResizing],
  2098. calendarInteractions: [UnselectAuto],
  2099. elementDraggingImpl: FeaturefulElementDragging,
  2100. optionRefiners: OPTION_REFINERS,
  2101. listenerRefiners: LISTENER_REFINERS,
  2102. });
  2103. core.globalPlugins.push(plugin);
  2104. exports.Draggable = ExternalDraggable;
  2105. exports.ThirdPartyDraggable = ThirdPartyDraggable;
  2106. exports["default"] = plugin;
  2107. Object.defineProperty(exports, '__esModule', { value: true });
  2108. return exports;
  2109. })({}, FullCalendar, FullCalendar.Internal);