fullcalendar
Version:
FullCalendar Vanilla JS package for rendering a calendar
2,022 lines • 85 kB
JavaScript
import { I as Interaction, b as interactionSettingsToStore, i as interactionSettingsStore } from './b00ce53f.js';
import { a1 as enableCursor, a2 as disableCursor, t as triggerDateSelect, a3 as getDateSpanInstantStartMs, a4 as getDateSpanInstantEndMs, a5 as compareNumbers, Z as buildValidInstanceRange, D as getElEventRange, a6 as getRelevantEvents, u as EventImpl, a7 as applyMutationToEventStore, j as createEmptyEventStore, a as buildEventApis, a8 as addDeltaToRangeEdge, $ as getRangeInstantEndMs, a0 as getRangeInstantStartMs, a9 as preventSelection, aa as preventContextMenu, ab as allowSelection, ac as allowContextMenu, n as mapHash, ad as isDateSpansEqual, ae as buildRangeEdgeOutput, af as diffDates, ag as whenTransitionDone } from './642eba18.js';
import { c as config, i as isDateSelectionValid, a as isInteractionValid, E as ElementDragging } from './f0ab0579.js';
import { g as getAppendableRoot, E as Emitter, b as getEventTargetViaRoot, d as applyStyle, c as computeElIsRtl } from './9e9ef97a.js';
import { c as classNames } from './3b4e987d.js';
import { c as computeRect, a as constrainPoint, i as intersectRects, g as getRectCenter, d as diffPoints, b as getClippingParents, p as pointInsideRect, e as computeInnerRect } from './4fae2a79.js';
import { startOfDay, createDuration, rangeContainsRange } from '@full-ui/headless-calendar';
config.touchMouseIgnoreWait = 500;
let ignoreMouseDepth = 0;
let listenerCnt = 0;
let isWindowTouchMoveCancelled = false;
/*
Uses a "pointer" abstraction, which monitors UI events for both mouse and touch.
Tracks when the pointer "drags" on a certain element, meaning down+move+up.
Also, tracks if there was touch-scrolling.
Also, can prevent touch-scrolling from happening.
Also, can fire pointermove events when scrolling happens underneath, even when no real pointer movement.
emits:
- pointerdown
- pointermove
- pointerup
*/
class PointerDragging {
constructor(containerEl) {
this.subjectEl = null;
// options that can be directly assigned by caller
this.selector = ''; // will cause subjectEl in all emitted events to be this element
this.handleSelector = '';
this.shouldIgnoreMove = false;
this.shouldWatchScroll = true; // for simulating pointermove on scroll
// internal states
this.isDragging = false;
this.isTouchDragging = false;
this.wasTouchScroll = false; // HACK public
// Mouse
// ----------------------------------------------------------------------------------------------------
this.handleMouseDown = (ev) => {
if (!this.shouldIgnoreMouse() &&
isPrimaryMouseButton(ev) &&
this.tryStart(ev)) {
let pev = this.createEventFromMouse(ev, true);
this.emitter.trigger('pointerdown', pev);
this.initScrollWatch(pev);
if (!this.shouldIgnoreMove) {
document.addEventListener('mousemove', this.handleMouseMove);
}
document.addEventListener('mouseup', this.handleMouseUp);
}
};
this.handleMouseMove = (ev) => {
let pev = this.createEventFromMouse(ev);
this.recordCoords(pev);
this.emitter.trigger('pointermove', pev);
};
this.handleMouseUp = (ev) => {
document.removeEventListener('mousemove', this.handleMouseMove);
document.removeEventListener('mouseup', this.handleMouseUp);
this.emitter.trigger('pointerup', this.createEventFromMouse(ev));
this.cleanup(); // call last so that pointerup has access to props
};
// Touch
// ----------------------------------------------------------------------------------------------------
this.handleTouchStart = (ev) => {
if (this.tryStart(ev)) {
this.isTouchDragging = true;
let pev = this.createEventFromTouch(ev, true);
this.emitter.trigger('pointerdown', pev);
this.initScrollWatch(pev);
// unlike mouse, need to attach to target, not document
// https://stackoverflow.com/a/45760014
let targetEl = ev.target;
if (!this.shouldIgnoreMove) {
targetEl.addEventListener('touchmove', this.handleTouchMove);
}
targetEl.addEventListener('touchend', this.handleTouchEnd);
targetEl.addEventListener('touchcancel', this.handleTouchEnd); // treat it as a touch end
// attach a handler to get called when ANY scroll action happens on the page.
// this was impossible to do with normal on/off because 'scroll' doesn't bubble.
// http://stackoverflow.com/a/32954565/96342
window.addEventListener('scroll', this.handleTouchScroll, true);
}
};
this.handleTouchMove = (ev) => {
if (this.isDragging) {
let pev = this.createEventFromTouch(ev);
this.recordCoords(pev);
this.emitter.trigger('pointermove', pev);
}
};
this.handleTouchEnd = (ev) => {
if (this.isDragging) { // done to guard against touchend followed by touchcancel
let targetEl = ev.target;
targetEl.removeEventListener('touchmove', this.handleTouchMove);
targetEl.removeEventListener('touchend', this.handleTouchEnd);
targetEl.removeEventListener('touchcancel', this.handleTouchEnd);
window.removeEventListener('scroll', this.handleTouchScroll, true); // useCaptured=true
this.emitter.trigger('pointerup', this.createEventFromTouch(ev));
this.cleanup(); // call last so that pointerup has access to props
this.isTouchDragging = false;
startIgnoringMouse();
}
};
this.handleTouchScroll = () => {
this.wasTouchScroll = true;
};
this.handleScroll = (ev) => {
if (!this.shouldIgnoreMove) {
let pageX = (window.scrollX - this.prevScrollX) + this.prevPageX;
let pageY = (window.scrollY - this.prevScrollY) + this.prevPageY;
this.emitter.trigger('pointermove', {
origEvent: ev,
isTouch: this.isTouchDragging,
subjectEl: this.subjectEl,
pageX,
pageY,
deltaX: pageX - this.origPageX,
deltaY: pageY - this.origPageY,
});
}
};
this.containerEl = containerEl;
this.emitter = new Emitter();
containerEl.addEventListener('mousedown', this.handleMouseDown);
containerEl.addEventListener('touchstart', this.handleTouchStart, { passive: true });
listenerCreated();
}
destroy() {
this.containerEl.removeEventListener('mousedown', this.handleMouseDown);
this.containerEl.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
listenerDestroyed();
}
cancel() {
if (this.isDragging) {
this.cleanup();
}
}
tryStart(ev) {
let subjectEl = this.querySubjectEl(ev);
let downEl = ev.target;
if (subjectEl &&
(!this.handleSelector || downEl.closest(this.handleSelector))) {
this.subjectEl = subjectEl;
this.isDragging = true; // do this first so cancelTouchScroll will work
this.wasTouchScroll = false;
return true;
}
return false;
}
cleanup() {
isWindowTouchMoveCancelled = false;
this.isDragging = false;
this.subjectEl = null;
// keep wasTouchScroll around for later access
this.destroyScrollWatch();
}
querySubjectEl(ev) {
if (this.selector) {
return ev.target.closest(this.selector);
}
return this.containerEl;
}
shouldIgnoreMouse() {
return ignoreMouseDepth || this.isTouchDragging;
}
// can be called by user of this class, to cancel touch-based scrolling for the current drag
cancelTouchScroll() {
if (this.isDragging) {
isWindowTouchMoveCancelled = true;
}
}
// Scrolling that simulates pointermoves
// ----------------------------------------------------------------------------------------------------
initScrollWatch(ev) {
if (this.shouldWatchScroll) {
this.recordCoords(ev);
window.addEventListener('scroll', this.handleScroll, true); // useCapture=true
}
}
recordCoords(ev) {
if (this.shouldWatchScroll) {
this.prevPageX = ev.pageX;
this.prevPageY = ev.pageY;
this.prevScrollX = window.scrollX;
this.prevScrollY = window.scrollY;
}
}
destroyScrollWatch() {
if (this.shouldWatchScroll) {
window.removeEventListener('scroll', this.handleScroll, true); // useCaptured=true
}
}
// Event Normalization
// ----------------------------------------------------------------------------------------------------
createEventFromMouse(ev, isFirst) {
let deltaX = 0;
let deltaY = 0;
// TODO: repeat code
if (isFirst) {
this.origPageX = ev.pageX;
this.origPageY = ev.pageY;
}
else {
deltaX = ev.pageX - this.origPageX;
deltaY = ev.pageY - this.origPageY;
}
return {
origEvent: ev,
isTouch: false,
subjectEl: this.subjectEl,
pageX: ev.pageX,
pageY: ev.pageY,
deltaX,
deltaY,
};
}
createEventFromTouch(ev, isFirst) {
let touches = ev.touches;
let pageX;
let pageY;
let deltaX = 0;
let deltaY = 0;
// if touch coords available, prefer,
// because FF would give bad ev.pageX ev.pageY
if (touches && touches.length) {
pageX = touches[0].pageX;
pageY = touches[0].pageY;
}
else {
pageX = ev.pageX;
pageY = ev.pageY;
}
// TODO: repeat code
if (isFirst) {
this.origPageX = pageX;
this.origPageY = pageY;
}
else {
deltaX = pageX - this.origPageX;
deltaY = pageY - this.origPageY;
}
return {
origEvent: ev,
isTouch: true,
subjectEl: this.subjectEl,
pageX,
pageY,
deltaX,
deltaY,
};
}
}
// Returns a boolean whether this was a left mouse click and no ctrl key (which means right click on Mac)
function isPrimaryMouseButton(ev) {
return ev.button === 0 && !ev.ctrlKey;
}
// Ignoring fake mouse events generated by touch
// ----------------------------------------------------------------------------------------------------
function startIgnoringMouse() {
ignoreMouseDepth += 1;
setTimeout(() => {
ignoreMouseDepth -= 1;
}, config.touchMouseIgnoreWait);
}
// We want to attach touchmove as early as possible for Safari
// ----------------------------------------------------------------------------------------------------
function listenerCreated() {
listenerCnt += 1;
if (listenerCnt === 1) {
window.addEventListener('touchmove', onWindowTouchMove, { passive: false });
}
}
function listenerDestroyed() {
listenerCnt -= 1;
if (!listenerCnt) {
window.removeEventListener('touchmove', onWindowTouchMove, { passive: false });
}
}
function onWindowTouchMove(ev) {
if (isWindowTouchMoveCancelled) {
ev.preventDefault();
}
}
/*
An effect in which an element follows the movement of a pointer across the screen.
The moving element is a clone of some other element.
Must call start + handleMove + stop.
*/
class ElementMirror {
constructor() {
this.isVisible = false; // must be explicitly enabled
this.sourceEl = null;
this.mirrorEl = null;
this.sourceElRect = null; // screen coords relative to viewport
// options that can be set directly by caller
this.parentNode = document.body; // HIGHLY SUGGESTED to set this to sidestep ShadowDOM issues
this.zIndex = 9999;
this.revertDuration = 0;
this.colorScheme = '';
}
start(sourceEl, pageX, pageY) {
this.sourceEl = sourceEl;
this.sourceElRect = this.sourceEl.getBoundingClientRect();
this.origScreenX = pageX - window.scrollX;
this.origScreenY = pageY - window.scrollY;
this.deltaX = 0;
this.deltaY = 0;
this.updateElPosition();
}
handleMove(pageX, pageY) {
this.deltaX = (pageX - window.scrollX) - this.origScreenX;
this.deltaY = (pageY - window.scrollY) - this.origScreenY;
this.updateElPosition();
}
// can be called before start
setIsVisible(bool) {
if (bool) {
if (!this.isVisible) {
if (this.mirrorEl) {
// important because competes with util.module.css classNames, which are all important
// TODO: attach a util className here instead?
this.mirrorEl.style.setProperty('display', '', 'important');
}
this.isVisible = bool; // needs to happen before updateElPosition
this.updateElPosition(); // because was not updating the position while invisible
}
}
else if (this.isVisible) {
if (this.mirrorEl) {
// important because competes with util.module.css classNames, which are all important
// TODO: attach a util className here instead?
this.mirrorEl.style.setProperty('display', 'none', 'important');
}
this.isVisible = bool;
}
}
// always async
stop(needsRevertAnimation, callback) {
let done = () => {
this.cleanup();
callback();
};
if (needsRevertAnimation &&
this.mirrorEl &&
this.isVisible &&
this.revertDuration && // if 0, transition won't work
(this.deltaX || this.deltaY) // if same coords, transition won't work
) {
this.doRevertAnimation(done, this.revertDuration);
}
else {
setTimeout(done, 0);
}
}
doRevertAnimation(callback, revertDuration) {
let mirrorEl = this.mirrorEl;
let finalSourceElRect = this.sourceEl.getBoundingClientRect(); // because autoscrolling might have happened
mirrorEl.style.transition =
'top ' + revertDuration + 'ms,' +
'left ' + revertDuration + 'ms';
applyStyle(mirrorEl, {
left: finalSourceElRect.left,
top: finalSourceElRect.top,
});
whenTransitionDone(mirrorEl, () => {
mirrorEl.style.transition = '';
callback();
});
}
cleanup() {
if (this.mirrorEl) {
this.mirrorEl.remove();
this.mirrorEl = null;
}
this.sourceEl = null;
}
updateElPosition() {
if (this.sourceEl && this.isVisible) {
applyStyle(this.getMirrorEl(), {
left: this.sourceElRect.left + this.deltaX,
top: this.sourceElRect.top + this.deltaY,
});
}
}
getMirrorEl() {
let sourceElRect = this.sourceElRect;
let mirrorEl = this.mirrorEl;
if (!mirrorEl) {
mirrorEl = this.mirrorEl = this.sourceEl.cloneNode(true); // cloneChildren=true
// we don't want long taps or any mouse interaction causing selection/menus.
// would use preventSelection(), but that prevents selectstart, causing problems.
// TODO: make className for this?
mirrorEl.style.userSelect = 'none';
mirrorEl.style.webkitUserSelect = 'none';
mirrorEl.style.pointerEvents = 'none';
if (this.colorScheme) {
mirrorEl.setAttribute('data-color-scheme', this.colorScheme);
}
mirrorEl.classList.add(classNames.borderBoxRoot);
applyStyle(mirrorEl, {
position: 'fixed',
zIndex: this.zIndex,
visibility: '', // in case original element was hidden by the drag effect
width: sourceElRect.right - sourceElRect.left, // explicit height in case there was a 'right' value
height: sourceElRect.bottom - sourceElRect.top, // explicit width in case there was a 'bottom' value
right: 'auto', // erase and set width instead
bottom: 'auto', // erase and set height instead
margin: 0,
});
this.parentNode.appendChild(mirrorEl);
}
return mirrorEl;
}
}
/* eslint max-classes-per-file: "off" */
/*
An object for getting/setting scroll-related information for an element.
Internally, this is done very differently for window versus DOM element,
so this object serves as a common interface.
*/
class ScrollController {
getMaxScrollTop() {
return this.getScrollHeight() - this.getClientHeight();
}
getMaxScrollLeft() {
return this.getScrollWidth() - this.getClientWidth();
}
canScrollVertically() {
return this.getMaxScrollTop() > 0;
}
canScrollHorizontally() {
return this.getMaxScrollLeft() > 0;
}
canScrollUp() {
return this.getScrollTop() > 0;
}
canScrollDown() {
return this.getScrollTop() < this.getMaxScrollTop();
}
canScrollLeft() {
return this.getScrollLeft() > 0;
}
canScrollRight() {
return this.getScrollLeft() < this.getMaxScrollLeft();
}
}
class ElementScrollController extends ScrollController {
constructor(el) {
super();
this.el = el;
}
getScrollTop() {
return this.el.scrollTop;
}
getScrollLeft() {
return this.el.scrollLeft;
}
setScrollTop(top) {
this.el.scrollTop = top;
}
setScrollLeft(left) {
this.el.scrollLeft = left;
}
getScrollWidth() {
return this.el.scrollWidth;
}
getScrollHeight() {
return this.el.scrollHeight;
}
getClientHeight() {
return this.el.clientHeight;
}
getClientWidth() {
return this.el.clientWidth;
}
}
class WindowScrollController extends ScrollController {
getScrollTop() {
return window.scrollY;
}
getScrollLeft() {
return window.scrollX;
}
setScrollTop(n) {
window.scroll(window.scrollX, n);
}
setScrollLeft(n) {
window.scroll(n, window.scrollY);
}
getScrollWidth() {
return document.documentElement.scrollWidth;
}
getScrollHeight() {
return document.documentElement.scrollHeight;
}
getClientHeight() {
return document.documentElement.clientHeight;
}
getClientWidth() {
return document.documentElement.clientWidth;
}
}
/*
Is a cache for a given element's scroll information (all the info that ScrollController stores)
in addition the "client rectangle" of the element.. the area within the scrollbars.
The cache can be in one of two modes:
- doesListening:false - ignores when the container is scrolled by someone else
- doesListening:true - watch for scrolling and update the cache
*/
class ScrollGeomCache extends ScrollController {
constructor(scrollController, doesListening) {
super();
this.handleScroll = () => {
this.scrollTop = this.scrollController.getScrollTop();
this.scrollLeft = this.scrollController.getScrollLeft();
this.handleScrollChange();
};
this.scrollController = scrollController;
this.doesListening = doesListening;
this.scrollTop = this.origScrollTop = scrollController.getScrollTop();
this.scrollLeft = this.origScrollLeft = scrollController.getScrollLeft();
this.scrollWidth = scrollController.getScrollWidth();
this.scrollHeight = scrollController.getScrollHeight();
this.clientWidth = scrollController.getClientWidth();
this.clientHeight = scrollController.getClientHeight();
this.clientRect = this.computeClientRect(); // do last in case it needs cached values
if (this.doesListening) {
this.getEventTarget().addEventListener('scroll', this.handleScroll);
}
}
destroy() {
if (this.doesListening) {
this.getEventTarget().removeEventListener('scroll', this.handleScroll);
}
}
getScrollTop() {
return this.scrollTop;
}
getScrollLeft() {
return this.scrollLeft;
}
setScrollTop(top) {
this.scrollController.setScrollTop(top);
if (!this.doesListening) {
// we are not relying on the element to normalize out-of-bounds scroll values
// so we need to sanitize ourselves
this.scrollTop = Math.max(Math.min(top, this.getMaxScrollTop()), 0);
this.handleScrollChange();
}
}
setScrollLeft(top) {
this.scrollController.setScrollLeft(top);
if (!this.doesListening) {
// we are not relying on the element to normalize out-of-bounds scroll values
// so we need to sanitize ourselves
this.scrollLeft = Math.max(Math.min(top, this.getMaxScrollLeft()), 0);
this.handleScrollChange();
}
}
getClientWidth() {
return this.clientWidth;
}
getClientHeight() {
return this.clientHeight;
}
getScrollWidth() {
return this.scrollWidth;
}
getScrollHeight() {
return this.scrollHeight;
}
handleScrollChange() {
}
}
class ElementScrollGeomCache extends ScrollGeomCache {
constructor(el, doesListening) {
super(new ElementScrollController(el), doesListening);
}
getEventTarget() {
return this.scrollController.el;
}
computeClientRect() {
return computeInnerRect(this.scrollController.el);
}
}
class WindowScrollGeomCache extends ScrollGeomCache {
constructor(doesListening) {
super(new WindowScrollController(), doesListening);
}
getEventTarget() {
return window;
}
computeClientRect() {
return {
left: this.scrollLeft,
right: this.scrollLeft + this.clientWidth,
top: this.scrollTop,
bottom: this.scrollTop + this.clientHeight,
};
}
// the window is the only scroll object that changes it's rectangle relative
// to the document's topleft as it scrolls
handleScrollChange() {
this.clientRect = this.computeClientRect();
}
}
// If available we are using native "performance" API instead of "Date"
// Read more about it on MDN:
// https://developer.mozilla.org/en-US/docs/Web/API/Performance
const getTime = typeof performance === 'function' ? performance.now : Date.now;
/*
For a pointer interaction, automatically scrolls certain scroll containers when the pointer
approaches the edge.
The caller must call start + handleMove + stop.
*/
class AutoScroller {
constructor() {
// options that can be set by caller
this.isEnabled = true;
this.scrollQuery = [window, `.${classNames.internalScroller}`];
this.edgeThreshold = 50; // pixels
this.maxVelocity = 300; // pixels per second
// internal state
this.pointerScreenX = null;
this.pointerScreenY = null;
this.isAnimating = false;
this.scrollCaches = null;
// protect against the initial pointerdown being too close to an edge and starting the scroll
this.everMovedUp = false;
this.everMovedDown = false;
this.everMovedLeft = false;
this.everMovedRight = false;
this.animate = () => {
if (this.isAnimating) { // wasn't cancelled between animation calls
let edge = this.computeBestEdge(this.pointerScreenX + window.scrollX, this.pointerScreenY + window.scrollY);
if (edge) {
let now = getTime();
this.handleSide(edge, (now - this.msSinceRequest) / 1000);
this.requestAnimation(now);
}
else {
this.isAnimating = false; // will stop animation
}
}
};
}
start(pageX, pageY, scrollStartEl) {
if (this.isEnabled) {
this.scrollCaches = this.buildCaches(scrollStartEl);
this.pointerScreenX = null;
this.pointerScreenY = null;
this.everMovedUp = false;
this.everMovedDown = false;
this.everMovedLeft = false;
this.everMovedRight = false;
this.handleMove(pageX, pageY);
}
}
handleMove(pageX, pageY) {
if (this.isEnabled) {
let pointerScreenX = pageX - window.scrollX;
let pointerScreenY = pageY - window.scrollY;
let yDelta = this.pointerScreenY === null ? 0 : pointerScreenY - this.pointerScreenY;
let xDelta = this.pointerScreenX === null ? 0 : pointerScreenX - this.pointerScreenX;
if (yDelta < 0) {
this.everMovedUp = true;
}
else if (yDelta > 0) {
this.everMovedDown = true;
}
if (xDelta < 0) {
this.everMovedLeft = true;
}
else if (xDelta > 0) {
this.everMovedRight = true;
}
this.pointerScreenX = pointerScreenX;
this.pointerScreenY = pointerScreenY;
if (!this.isAnimating) {
this.isAnimating = true;
this.requestAnimation(getTime());
}
}
}
stop() {
if (this.isEnabled) {
this.isAnimating = false; // will stop animation
for (let scrollCache of this.scrollCaches) {
scrollCache.destroy();
}
this.scrollCaches = null;
}
}
requestAnimation(now) {
this.msSinceRequest = now;
requestAnimationFrame(this.animate);
}
handleSide(edge, seconds) {
let { scrollCache } = edge;
let { edgeThreshold } = this;
let invDistance = edgeThreshold - edge.distance;
let velocity = // the closer to the edge, the faster we scroll
((invDistance * invDistance) / (edgeThreshold * edgeThreshold)) * // quadratic
this.maxVelocity * seconds;
let sign = 1;
switch (edge.name) {
case 'left':
sign = -1;
// falls through
case 'right':
scrollCache.setScrollLeft(scrollCache.getScrollLeft() + velocity * sign);
break;
case 'top':
sign = -1;
// falls through
case 'bottom':
scrollCache.setScrollTop(scrollCache.getScrollTop() + velocity * sign);
break;
}
}
// left/top are relative to document topleft
computeBestEdge(left, top) {
let { edgeThreshold } = this;
let bestSide = null;
let scrollCaches = this.scrollCaches || [];
for (let scrollCache of scrollCaches) {
let rect = scrollCache.clientRect;
let leftDist = left - rect.left;
let rightDist = rect.right - left;
let topDist = top - rect.top;
let bottomDist = rect.bottom - top;
// completely within the rect?
if (leftDist >= 0 && rightDist >= 0 && topDist >= 0 && bottomDist >= 0) {
if (topDist <= edgeThreshold && this.everMovedUp && scrollCache.canScrollUp() &&
(!bestSide || bestSide.distance > topDist)) {
bestSide = { scrollCache, name: 'top', distance: topDist };
}
if (bottomDist <= edgeThreshold && this.everMovedDown && scrollCache.canScrollDown() &&
(!bestSide || bestSide.distance > bottomDist)) {
bestSide = { scrollCache, name: 'bottom', distance: bottomDist };
}
/*
TODO: fix broken RTL scrolling. canScrollLeft always returning false
https://github.com/fullcalendar/fullcalendar/issues/4837
*/
if (leftDist <= edgeThreshold && this.everMovedLeft && scrollCache.canScrollLeft() &&
(!bestSide || bestSide.distance > leftDist)) {
bestSide = { scrollCache, name: 'left', distance: leftDist };
}
if (rightDist <= edgeThreshold && this.everMovedRight && scrollCache.canScrollRight() &&
(!bestSide || bestSide.distance > rightDist)) {
bestSide = { scrollCache, name: 'right', distance: rightDist };
}
}
}
return bestSide;
}
buildCaches(scrollStartEl) {
return this.queryScrollEls(scrollStartEl).map((el) => {
if (el === window) {
return new WindowScrollGeomCache(false); // false = don't listen to user-generated scrolls
}
return new ElementScrollGeomCache(el, false); // false = don't listen to user-generated scrolls
});
}
queryScrollEls(scrollStartEl) {
let els = [];
for (let query of this.scrollQuery) {
if (typeof query === 'object') {
els.push(query);
}
else {
/*
TODO: in the future, always have auto-scroll happen on element where current Hit came from
Ticket: https://github.com/fullcalendar/fullcalendar/issues/4593
*/
els.push(...Array.prototype.slice.call(scrollStartEl.getRootNode().querySelectorAll(query)));
}
}
return els;
}
}
/*
Monitors dragging on an element. Has a number of high-level features:
- minimum distance required before dragging
- minimum wait time ("delay") before dragging
- a mirror element that follows the pointer
*/
class FeaturefulElementDragging extends ElementDragging {
constructor(containerEl, selector) {
super(containerEl);
this.containerEl = containerEl;
// options that can be directly set by caller
// the caller can also set the PointerDragging's options as well
this.delay = null;
this.minDistance = 0;
this.touchScrollAllowed = true; // prevents drag from starting and blocks scrolling during drag
this.mirrorNeedsRevert = false;
this.isInteracting = false; // is the user validly moving the pointer? lasts until pointerup
this.isDragging = false; // is it INTENTFULLY dragging? lasts until after revert animation
this.isDelayEnded = false;
this.isDistanceSurpassed = false;
this.delayTimeoutId = null;
this.onPointerDown = (ev) => {
if (!this.isDragging) { // so new drag doesn't happen while revert animation is going
this.isInteracting = true;
this.isDelayEnded = false;
this.isDistanceSurpassed = false;
this.emitter.trigger('pointerdown', ev);
if (this.isInteracting) { // not cancelled?
preventSelection(document.body);
preventContextMenu(document.body);
// prevent links from being visited if there's an eventual drag.
// also prevents selection in older browsers (maybe?).
// not necessary for touch, besides, browser would complain about passiveness.
if (!ev.isTouch) {
ev.origEvent.preventDefault();
}
// actions related to initiating dragstart+dragmove+dragend...
this.mirror.setIsVisible(false); // reset. caller must set-visible
this.mirror.start(ev.subjectEl, ev.pageX, ev.pageY); // must happen on first pointer down
this.startDelay(ev);
if (!this.minDistance) {
this.handleDistanceSurpassed(ev);
}
}
}
};
this.onPointerMove = (ev) => {
if (this.isInteracting) {
this.emitter.trigger('pointermove', ev);
if (!this.isDistanceSurpassed) {
let minDistance = this.minDistance;
let distanceSq; // current distance from the origin, squared
let { deltaX, deltaY } = ev;
distanceSq = deltaX * deltaX + deltaY * deltaY;
if (distanceSq >= minDistance * minDistance) { // use pythagorean theorem
this.handleDistanceSurpassed(ev);
}
}
if (this.isDragging) {
// a real pointer move? (not one simulated by scrolling)
if (ev.origEvent.type !== 'scroll') {
this.mirror.handleMove(ev.pageX, ev.pageY);
this.autoScroller.handleMove(ev.pageX, ev.pageY);
}
this.emitter.trigger('dragmove', ev);
}
}
};
this.onPointerUp = (ev) => {
if (this.isInteracting) {
this.isInteracting = false;
allowSelection(document.body);
allowContextMenu(document.body);
this.emitter.trigger('pointerup', ev); // can potentially set mirrorNeedsRevert
if (this.isDragging) {
this.autoScroller.stop();
this.tryStopDrag(ev); // which will stop the mirror
}
if (this.delayTimeoutId) {
clearTimeout(this.delayTimeoutId);
this.delayTimeoutId = null;
}
}
};
let pointer = this.pointer = new PointerDragging(containerEl);
pointer.emitter.on('pointerdown', this.onPointerDown);
pointer.emitter.on('pointermove', this.onPointerMove);
pointer.emitter.on('pointerup', this.onPointerUp);
if (selector) {
pointer.selector = selector;
}
this.mirror = new ElementMirror();
this.autoScroller = new AutoScroller();
}
destroy() {
this.pointer.destroy();
// HACK: simulate a pointer-up to end the current drag
// TODO: fire 'dragend' directly and stop interaction. discourage use of pointerup event (b/c might not fire)
this.onPointerUp({});
}
startDelay(ev) {
if (typeof this.delay === 'number') {
this.delayTimeoutId = setTimeout(() => {
this.delayTimeoutId = null;
this.handleDelayEnd(ev);
}, this.delay); // not assignable to number!
}
else {
this.handleDelayEnd(ev);
}
}
handleDelayEnd(ev) {
this.isDelayEnded = true;
this.tryStartDrag(ev);
}
handleDistanceSurpassed(ev) {
this.isDistanceSurpassed = true;
this.tryStartDrag(ev);
}
tryStartDrag(ev) {
if (this.isDelayEnded && this.isDistanceSurpassed) {
if (!this.pointer.wasTouchScroll || this.touchScrollAllowed) {
this.isDragging = true;
this.mirrorNeedsRevert = false;
this.autoScroller.start(ev.pageX, ev.pageY, this.containerEl);
this.emitter.trigger('dragstart', ev);
if (this.touchScrollAllowed === false) {
this.pointer.cancelTouchScroll();
}
}
}
}
tryStopDrag(ev) {
// .stop() is ALWAYS asynchronous, which we NEED because we want all pointerup events
// that come from the document to fire beforehand. much more convenient this way.
this.mirror.stop(this.mirrorNeedsRevert, this.stopDrag.bind(this, ev));
}
stopDrag(ev) {
this.isDragging = false;
this.emitter.trigger('dragend', ev);
}
// fill in the implementations...
/*
Can only be called by pointerdown to prevent drag
*/
cancel() {
if (this.isInteracting) {
this.isInteracting = false;
this.pointer.cancel();
}
}
setMirrorIsVisible(bool) {
this.mirror.setIsVisible(bool);
}
setMirrorNeedsRevert(bool) {
this.mirrorNeedsRevert = bool;
}
setAutoScrollEnabled(bool) {
this.autoScroller.isEnabled = bool;
}
}
/*
When this class is instantiated, it records the offset of an element (relative to the document topleft),
and continues to monitor scrolling, updating the cached coordinates if it needs to.
Does not access the DOM after instantiation, so highly performant.
Also keeps track of all scrolling/overflow:hidden containers that are parents of the given element
and an determine if a given point is inside the combined clipping rectangle.
*/
class OffsetTracker {
constructor(el) {
this.el = el;
this.origRect = computeRect(el);
this.isRtl = computeElIsRtl(el);
// will work fine for divs that have overflow:hidden
this.scrollCaches = getClippingParents(el).map((scrollEl) => new ElementScrollGeomCache(scrollEl, true));
}
destroy() {
for (let scrollCache of this.scrollCaches) {
scrollCache.destroy();
}
}
computeLeft() {
let left = this.origRect.left;
for (let scrollCache of this.scrollCaches) {
left += scrollCache.origScrollLeft - scrollCache.getScrollLeft();
}
return left;
}
computeTop() {
let top = this.origRect.top;
for (let scrollCache of this.scrollCaches) {
top += scrollCache.origScrollTop - scrollCache.getScrollTop();
}
return top;
}
isWithinClipping(pageX, pageY) {
let point = { left: pageX, top: pageY };
for (let scrollCache of this.scrollCaches) {
if (!isIgnoredClipping(scrollCache.getEventTarget()) &&
!pointInsideRect(point, scrollCache.clientRect)) {
return false;
}
}
return true;
}
}
// certain clipping containers should never constrain interactions, like <html> and <body>
// https://github.com/fullcalendar/fullcalendar/issues/3615
function isIgnoredClipping(node) {
let tagName = node.tagName;
return tagName === 'HTML' || tagName === 'BODY';
}
/*
Tracks movement over multiple droppable areas (aka "hits")
that exist in one or more DateComponents.
Relies on an existing draggable.
emits:
- pointerdown
- dragstart
- hitchange - fires initially, even if not over a hit
- pointerup
- (hitchange - again, to null, if ended over a hit)
- dragend
*/
class HitDragging {
constructor(dragging, droppableStore) {
// options that can be set by caller
this.useSubjectCenter = false;
this.requireInitial = true; // if doesn't start out on a hit, won't emit any events
this.disablePointCheck = false;
this.initialHit = null;
this.movingHit = null;
this.finalHit = null; // won't ever be populated if shouldIgnoreMove
this.handlePointerDown = (ev) => {
let { dragging } = this;
this.initialHit = null;
this.movingHit = null;
this.finalHit = null;
this.prepareHits();
this.processFirstCoord(ev);
if (this.initialHit || !this.requireInitial) {
// TODO: fire this before computing processFirstCoord, so listeners can cancel. this gets fired by almost every handler :(
this.emitter.trigger('pointerdown', ev);
}
else {
dragging.cancel();
}
};
this.handleDragStart = (ev) => {
this.emitter.trigger('dragstart', ev);
this.handleMove(ev, true); // force = fire even if initially null
};
this.handleDragMove = (ev) => {
this.emitter.trigger('dragmove', ev);
this.handleMove(ev);
};
this.handlePointerUp = (ev) => {
this.releaseHits();
this.emitter.trigger('pointerup', ev);
};
this.handleDragEnd = (ev) => {
if (this.movingHit) {
this.emitter.trigger('hitupdate', null, true, ev);
}
this.finalHit = this.movingHit;
this.movingHit = null;
this.emitter.trigger('dragend', ev);
};
this.droppableStore = droppableStore;
dragging.emitter.on('pointerdown', this.handlePointerDown);
dragging.emitter.on('dragstart', this.handleDragStart);
dragging.emitter.on('dragmove', this.handleDragMove);
dragging.emitter.on('pointerup', this.handlePointerUp);
dragging.emitter.on('dragend', this.handleDragEnd);
this.dragging = dragging;
this.emitter = new Emitter();
}
// sets initialHit
// sets coordAdjust
processFirstCoord(ev) {
let origPoint = { left: ev.pageX, top: ev.pageY };
let adjustedPoint = origPoint;
let subjectEl = ev.subjectEl;
let subjectRect;
if (subjectEl instanceof HTMLElement) { // i.e. not a Document/ShadowRoot
subjectRect = computeRect(subjectEl);
adjustedPoint = constrainPoint(adjustedPoint, subjectRect);
}
let initialHit = this.initialHit = this.queryHitForOffset(adjustedPoint.left, adjustedPoint.top);
if (initialHit) {
if (this.useSubjectCenter && subjectRect) {
let slicedSubjectRect = intersectRects(subjectRect, initialHit.rect);
if (slicedSubjectRect) {
adjustedPoint = getRectCenter(slicedSubjectRect);
}
}
this.coordAdjust = diffPoints(adjustedPoint, origPoint);
}
else {
this.coordAdjust = { left: 0, top: 0 };
}
}
handleMove(ev, forceHandle) {
let hit = this.queryHitForOffset(ev.pageX + this.coordAdjust.left, ev.pageY + this.coordAdjust.top);
if (forceHandle || !isHitsEqual(this.movingHit, hit)) {
this.movingHit = hit;
this.emitter.trigger('hitupdate', hit, false, ev);
}
}
prepareHits() {
this.offsetTrackers = mapHash(this.droppableStore, (interactionSettings) => {
interactionSettings.component.prepareHits();
return new OffsetTracker(interactionSettings.el);
});
}
releaseHits() {
let { offsetTrackers } = this;
for (let id in offsetTrackers) {
offsetTrackers[id].destroy();
}
this.offsetTrackers = {};
}
queryHitForOffset(offsetLeft, offsetTop) {
let { droppableStore, offsetTrackers } = this;
let bestHit = null;
for (let id in droppableStore) {
let component = droppableStore[id].component;
let offsetTracker = offsetTrackers[id];
if (offsetTracker && // wasn't destroyed mid-drag
offsetTracker.isWithinClipping(offsetLeft, offsetTop)) {
let originLeft = offsetTracker.computeLeft();
let originTop = offsetTracker.computeTop();
let positionLeft = offsetLeft - originLeft;
let positionTop = offsetTop - originTop;
let { origRect } = offsetTracker;
let width = origRect.right - origRect.left;
let height = origRect.bottom - origRect.top;
if (
// must be within the element's bounds
positionLeft >= 0 && positionLeft < width &&
positionTop >= 0 && positionTop < height) {
let hit = component.queryHit(offsetTracker.isRtl, positionLeft, positionTop, width, height);
if (hit && (
// make sure the hit is within activeRange, meaning it's not a dead cell
rangeContainsRange(hit.dateProfile.activeRange, hit.dateSpan.range)) &&
// Ensure the component we are querying for the hit is accessibly my the pointer
// Prevents obscured calendars (ex: under a modal dialog) from accepting hit
// https://github.com/fullcalendar/fullcalendar/issues/5026
(this.disablePointCheck ||
offsetTracker.el.contains(offsetTracker.el.getRootNode().elementFromPoint(
// add-back origins to get coordinate relative to top-left of window viewport
positionLeft + originLeft - window.scrollX, positionTop + originTop - window.scrollY))) &&
(!bestHit || hit.layer > bestHit.layer)) {
hit.componentId = id;
hit.context = component.context;
// TODO: better way to re-orient rectangle
hit.rect.left += originLeft;
hit.rect.right += originLeft;
hit.rect.top += originTop;
hit.rect.bottom += originTop;
bestHit = hit;
}
}
}
}
return bestHit;
}
}
function isHitsEqual(hit0, hit1) {
if (!hit0 && !hit1) {
return true;
}
if (Boolean(hit0) !== Boolean(hit1)) {
return false;
}
return isDateSpansEqual(hit0.dateSpan, hit1.dateSpan);
}
function buildDatePointApiWithContext(dateSpan, context) {
let props = {};
for (let transform of context.pluginHooks.datePointTransforms) {
Object.assign(props, transform(dateSpan, context));
}
Object.assign(props, buildDatePointApi(dateSpan, context.dateEnv));
return props;
}
function buildDatePointApi(span, dateEnv) {
const start = buildRangeEdgeOutput(span.range.start, span.instantStartMs, dateEnv, span.allDay);
return {
date: start.date,
dateStr: start.dateStr,
allDay: span.allDay,
};
}
/*
Monitors when the user clicks on a specific date/time of a component.
A pointerdown+pointerup on the same "hit" constitutes a click.
*/
class DateClicking extends Interaction {
constructor(settings) {
super(settings);
this.handlePointerDown = (pev) => {
let { dragging } = this;
let downEl = pev.origEvent.target;
/*
If no dateClick, allow text on dates to be text-selectable
*/
const canDateClick = this.component.context.emitter.hasHandlers('dateClick') &&
this.component.isValidDateDownEl(downEl);
if (!canDateClick) {
dragging.cancel();
}
};
// won't even fire if moving was ignored
this.handleDragEnd = (ev) => {
let { component } = this;
let { pointer } = this.dragging;
if (!pointer.wasTouchScroll) {
let { initialHit, finalHit } = this.hitDragging;
if (initialHit && finalHit && isHitsEqual(initialHit, finalHit)) {
let { context } = component;
let data = {
...buildDatePointApiWithContext(initialHit.dateSpan, context),
dayEl: initialHit.getDayEl(),
jsEvent: ev.origEvent,
view: context.viewApi || context.calendarApi.view,
};
context.emitter.trigger('dateClick', data);
}
}
};
// we DO want to watch pointer moves because otherwise finalHit won't get populated
this.dragging = new FeaturefulElementDragging(settings.el);
this.dragging.autoScroller.isEnabled = false;
let hitDragging = this.hitDragging = new HitDragging(this.dragging, interactionSettingsToStore(settings));
hitDragging.emitter.on('pointerdown', this.handlePointerDown);
hitDragging.emitter.on('dragend', this.handleDragEnd);
}
destroy() {
this.dragging.destroy();
}
}
/*
Tracks when the user selects a portion of time of a component,
constituted by a drag over date cells, with a possible delay at the beginning of the drag.
*/
class DateSelecting extends Interaction {
constructor(settings) {
super(settings);
this.dragSelection = null;
this.handlePointerDown = (ev) => {
let { component, dragging } = this;
let { options } = component.context;
let canDateSelect = options.selectable &&
component.isValidDateDownEl(ev.origEvent.target);
if (!canDateSelect) {
dragging.cancel();
}
else {
// if touch, require user to hold down
dragging.delay = ev.isTouch ? getComponentTouchDelay$1(component) : null;
}
};
this.handleDragStart = (ev) => {
this.component.context.calendarApi.unselect(ev); // unselect previous selections
};
this.handleHitUpdate = (hit, isFinal) => {
let { context } = this.component;
let dragSelection = null;
let isInvalid = false;
if (hit) {
let initialHit = this.hitDragging.initialHit;
let disallowed = hit.componentId === initialHit.componentId
&& this.isHitComboAllowed
&& !this.isHitComboAllowed(initialHit, hit);
if (!disallowed) {
dragSelection = joinHitsIntoSelection(initialHit, hit, context.pluginHooks.dateSelectionTransformers);
}
if (!dragSelection || !isDateSelectionValid(dragSelection, hit.dateProfile, context)) {
isInvalid = true;
dragSelection = null;
}
}
if (dragSelection) {
context.dispatch({ type: 'SELECT_DATES', selection: dragSelection });
}
else if (!isFinal) { // only unselect if moved away while dragging
context.dispatch({ type: 'UNSELECT_DATES' });
}
if (!isInvalid) {
enableCursor();
}
else {
disableCursor();
}
if (!isFinal) {
this.dragSelection = dragSelection; // only clear if moved away from all hits while dragging
}
};
this.handlePointerUp = (pev) => {
if (this.dragSelection) {
// selection is already rendered, so just need to report selection
triggerDateSelect(this.dragSelection, pev, this.component.context);
this.dragSelection = null;
}
else {
this.component.context.emitter.trigger('_noDateSelect');
}
};
let { component } = settings;
let { options } = component.context;
let dragging = this.dragging = new FeaturefulElementDragging(settings.el);
dragging.touchScrollAllowed = false;
dragging.minDistance = options.selectMinDistance || 0;
dragging.autoScroller.isEnabled = options.dragScroll;
let hitDragging = this.hitDragging = new HitDragging(this.dragging, interactionSettingsToStore(settings));
hitDragging.emitter.on('pointerdown', this.handlePointerDown);
hitDragging.emitter.on('dragstart', this.handleDragStart);
hitDragging.emitter.on('hitupdate', this.handleHitUpdate);
hitDragging.emitter.on('pointerup', this.handlePointerUp);
}
destroy() {
this.dragging.destroy();
}
}
function getComponentTouchDelay$1(component) {
let { options } = component.context;
let delay = options.selectLongPressDelay;
if (delay == null) {
delay = options.longPressDelay;
}
return delay;
}
function joinHitsIntoSelection(hit0, hit1, dateSelectionTransformers) {
let dateSpan0 = hit0.dateSpan;
let dateSpan1 = hit1.dateSpan;
// Only instant-aware components (currently timed timeline axes) may sort by instant, which
// orders repeated civil times during DST fall-back correctly. For civil-only components,
// deriving instants would reorder nonexistent spring-forward times (a civil 02:30 resolves
// to instant 03:30, past a civil 03:00), so their edges must keep the civil marker sort.
let hasInstants = dateSpan0.instantStartMs != null || dateSpan1.instantStartMs != null;
let entries = [
{ date: dateSpan0.range.start, ms: getDateSpanInstantStartMs(dateSpan0, hit0.context.dateEnv) },
{ date: dateSpan0.range.end, ms: getDateSpanInstantEndMs(dateSpan0, hit0.context.dateEnv) },
{ date: dateSpan1.range.start, ms: getDateSpanInstantStartMs(dateSpan1, hit1.context.dateEnv) },
{ date: dateSpan1.range.end, ms: getDateSpanInstantEndMs(dateSpan1, hit1.context.dateEnv) },
];
entries.sort(hasInstants
? (entry0, entry1) => compareNumbers(entry0.ms, entry1.ms)
: (entry0, entry1) => compareNumbers(entry0.date.valueOf(), entry1.date.valueOf()));
let props = {};
for (let transformer of dateSelectionTransformers) {
let res = transformer(hit0, hit1);
if (res === false) {
return null;
}
if (res) {
Object.assign(props, res);
}
}
if (hasInstants) {
const validRange = buildValidInstanceRange({ marker: entries[0].date, instantMs: entries[0].ms }, { marker: entries[3].date, instantMs: entries[3].ms }, hit0.context.dateEnv);
if (!validRange) {
return null;
}
props.range = { start: validRange.start, end: validRange.end };
}
else {
props.range = { start: entries[0].date, end: entries[3].date };
}
props.allDay = dateSpan0.allDay;
if (hasInstants) {
props.instantStartMs = entries[0].ms;
props.instantEndMs = entries[3].ms;
}
return props;
}
/*
When both hits come from an instant-aware component (their dateSpans carry exact instants),
returns the drag distance in absolute ms. Otherwise null, and callers should fall back to
civil-duration diffing.
*/
function computeHitInstantDeltaMs(hit0, hit1) {
const startMs0 = hit0.dateSpan.allDay ? null : hit0.dateSpan.instantStartMs;
const startMs1 = hit1.dateSpan.allDay ? null : hit1.dateSpan.instantStartMs;
if (startMs0 != null && startMs1 != null) {
return startMs1 - startMs0;
}
return null;
}
function computeHitDelta(hit0, hit1, options = {}) {
const instantDeltaMs = computeHitInstantDeltaMs(hit0, hit1);
const date0 = options.date0 || hit0.dateSpan.range.start;
const date1 = options.date1 || hit1.dateSpan.range.start;
return {
delta: instantDeltaMs != null
? createDuration(instantDeltaMs)
: diffDates(date0, date1, hit0.context.dateEnv, options.largeUnit),
instantDeltaMs,
};
}
class EventDragging extends Interaction {
constructor(settings) {
super(settings);
// internal state
this.subjectEl = null;
this.isDragging = false;
this.eventRange = null;
this.relevantEvents = null; // the events being dragged
this.receivingContext = null;
this.validMutation = null;
this.mutatedRelevantEvents = null;
this.handlePointerDown = (ev) => {
let origTarget = ev.origEvent.target;
let { component, dragging } = this;
let { mirror } = dragging;
let { options } = component.context;
let initialContext = component.context;
this.subjectEl = ev.subjectEl;
let eventRange = this.eventRange = getElEventRange(ev.subjectEl);
let eventInstanceId = eventRange.instance.instanceId;
this.relevantEvents = getRelevantEvents(initialContext.getCurrentData().eventStore, eventInstanceId);
dragging.minDistance = ev.isTouch ? 0 : options.eventDragMinDistance;
dragging.delay =
// only do a touch delay if touch and this event hasn't been selected yet
(ev.isTouch && eventInstanceId !== component.props.eventSelection) ?
getComponentTouchDelay(component) :
null;
mirror.parentNode = getAppendableRoot(origTarget);
mirror.revertDuration = options.dragRevertDuration;
mirror.colorScheme = options.colorScheme || '';
let isValid = component.isValidSegDownEl(origTarget) &&
!origTarget.closest(`.${classNames.internalEventResizer}`); // NOT on a resizer
if (!isValid) {
dragging.cancel();
}
else {
// disable dragging for elements that are resizable (ie, selectable)
// but are not draggable
// TODO: merge this with .cancel() ?
this.isDragging = ev.subjectEl
.classList.contains(classNames.internalEventDraggable);
}
};
this.handleDragStart = (ev) => {
let initialContext = this.component.context;
let eventRange = this.eventRange;
let eventInstanceId = eventRange.instance.instanceId;
if (ev.isTouch) {
// need to select a different event?
if (eventInstanceId !== this.component.props.eventSelection) {
initialContext.dispatch({ type: 'SELECT_EVENT', eventInstanceId });
}
}
else {
// if now using mouse, but was previous touch interaction, clear selected event
initialContext.dispatch({ type: 'UNSELECT_EVENT' });
}
if (this.isDragging) {
initialContext.calendarApi.unselect(ev); // unselect *date* selection
initialContext.emitter.trigger('eventDragStart', {
el: this.subjectEl,
event: new EventImpl(initialContext, eventRange.def, eventRange.instance),
jsEvent: ev.origEvent, // Is this always a mouse event? See #4655
view: initialContext.viewApi,
});
}
};
this.handleHitUpdate = (hit, isFinal) => {
if (!this.isDragging) {
return;
}
let relevantEvents = this.relevantEvents;
let initialHit = this.hitDragging.initialHit;
let initialContext = this.component.context;
// states based on new hit
let receivingContext = null;
let mutation = null;
let mutatedRelevantEvents = null;
let isInvalid = false;
let interaction = {
affectedEvents: relevantEvents,
mutatedEvents: createEmptyEventStore(),
isEvent: true,
};
if (hit) {
receivingContext = hit.context;
let receivingOptions = receivingContext.options;
if (initialContext === receivingContext ||
(receivingOptions.editable && receivingOptions.droppable)) {
mutation = computeEventMutation(initialHit, hit, this.eventRange.instance.range.start, receivingContext.getCurrentData().pluginHooks.eventDragMutationMassagers);
if (mutation) {
mutatedRelevantEvents = applyMutationToEventStore(relevantEvents, receivingContext.getCurrentData().eventUiBases, mutation, receivingContext);
interaction.mutatedEvents = mutatedRelevantEvents;
if (!isInteractionValid(interaction, hit.dateProfile, receivingContext)) {
isInvalid = true;
mutation = null;
mutatedRelevantEvents = null;
interaction.mutatedEvents = createEmptyEventStore();
}
}
}
else {
receivingContext = null;
}
}
this.displayDrag(receivingContext, interaction);
if (!isInvalid) {
enableCursor();
}
else {
disableCursor();
}
if (!isFinal) {
if (initialContext === receivingContext && // TODO: write test for this
isHitsEqual(initialHit, hit)) {
mutation = null;
}
this.dragging.setMirrorNeedsRevert(!mutation);
// render the mirror if no already-rendered mirror
// TODO: wish we could somehow wait for dispatch to guarantee render
this.dragging.setMirrorIsVisible(!hit || !this.subjectEl.getRootNode().querySelector(`.${classNames.internalEventMirror}`));
// assign states based on new hit
this.receivingContext = receivingContext;
this.validMutation = mutation;
this.mutatedRelevantEvents = mutatedRelevantEvents;
}
};
this.handlePointerUp = () => {
if (!this.isDragging) {
this.cleanup(); // because handleDragEnd won't fire
}
};
this.handleDragEnd = (ev) => {
if (this.isDragging) {
let initialContext = this.component.context;
let initialView = initialContext.viewApi;
let { receivingContext, validMutation } = this;
let eventDef = this.eventRange.def;
let eventInstance = this.eventRange.instance;
let eventApi = new EventImpl(initialContext, eventDef, eventInstance);
let relevantEvents = this.relevantEvents;
let mutatedRelevantEvents = this.mutatedRelevantEvents;
let { finalHit } = this.hitDragging;
this.clearDrag(); // must happen after revert animation
initialContext.emitter.trigger('eventDragStop', {
el: this.subjectEl,
event: eventApi,
jsEvent: ev.origEvent, // Is this always a mouse event? See #4655
view: initialView,
});
if (validMutation) {
// dropped within same calendar
if (receivingContext === initialContext) {
let updatedEventApi = new EventImpl(initialContext, mutatedRelevantEvents.defs[eventDef.defId], eventInstance ? mutatedRelevantEvents.instances[eventInstance.instanceId] : null);
initialContext.dispatch({
type: 'MERGE_EVENTS',
eventStore: mutatedRelevantEvents,
});
let eventChangeData = {
oldEvent: eventApi,
event: updatedEventApi,
relatedEvents: buildEventApis(mutatedRelevantEvents, initialContext, eventInstance),
revert() {
initialContext.dispatch({
type: 'MERGE_EVENTS',
eventStore: relevantEvents, // the pre-change data
});
},
};
let transformed = {};
for (let transformer of initialContext.getCurrentData().pluginHooks.eventDropTransformers) {
Object.assign(transformed, transformer(validMutation, initialContext));
}
initialContext.emitter.trigger('eventDrop', {
...eventChangeData,
...transformed,
el: ev.subjectEl,
delta: validMutation.datesDelta,
jsEvent: ev.origEvent, // bad
view: initialView,
});
initialContext.emitter.trigger('eventChange', eventChangeData);
// dropped in different calendar
}
else if (receivingContext) {
let eventRemoveData = {
event: eventApi,
relatedEvents: buildEventApis(relevantEvents, initialContext, eventInstance),
revert() {
initialContext.dispatch({
type: 'MERGE_EVENTS',
eventStore: relevantEvents,
});
},
};
initialContext.emitter.trigger('eventLeave', {
...eventRemoveData,
draggedEl: ev.subjectEl,
view: initialView,
});
initialContext.dispatch({
type: 'REMOVE_EVENTS',
eventStore: relevantEvents,
});
initialContext.emitter.trigger('eventRemove', eventRemoveData);
let addedEventDef = mutatedRelevantEvents.defs[eventDef.defId];
let addedEventInstance = mutatedRelevantEvents.instances[eventInstance.instanceId];
let addedEventApi = new EventImpl(receivingContext, addedEventDef, addedEventInstance);
receivingContext.dispatch({
type: 'MERGE_EVENTS',
eventStore: mutatedRelevantEvents,
});
let eventAddData = {
event: addedEventApi,
relatedEvents: buildEventApis(mutatedRelevantEvents, receivingContext, addedEventInstance),
revert() {
receivingContext.dispatch({
type: 'REMOVE_EVENTS',
eventStore: mutatedRelevantEvents,
});
},
};
receivingContext.emitter.trigger('eventAdd', eventAddData);
if (ev.isTouch) {
receivingContext.dispatch({
type: 'SELECT_EVENT',
eventInstanceId: eventInstance.instanceId,
});
}
receivingContext.emitter.trigger('drop', {
...buildDatePointApiWithContext(finalHit.dateSpan, receivingContext),
draggedEl: ev.subjectEl,
jsEvent: ev.origEvent, // Is this always a mouse event? See #4655
view: finalHit.context.viewApi,
});
receivingContext.emitter.trigger('eventReceive', {
...eventAddData,
draggedEl: ev.subjectEl,
view: finalHit.context.viewApi,
});
}
}
else {
initialContext.emitter.trigger('_noEventDrop');
}
}
this.cleanup();
};
let { component } = this;
let { options } = component.context;
let dragging = this.dragging = new FeaturefulElementDragging(settings.el);
dragging.pointer.selector = EventDragging.SELECTOR;
dragging.touchScrollAllowed = false;
dragging.autoScroller.isEnabled = options.dragScroll;
let hitDragging = this.hitDragging = new HitDragging(this.dragging, interactionSettingsStore);
hitDragging.useSubjectCenter = settings.useEventCenter;
hitDragging.emitter.on('pointerdown', this.handlePointerDown);
hitDragging.emitter.on('dragstart', this.handleDragStart);
hitDragging.emitter.on('hitupdate', this.handleHitUpdate);
hitDragging.emitter.on('pointerup', this.handlePointerUp);
hitDragging.emitter.on('dragend', this.handleDragEnd);
}
destroy() {
this.dragging.destroy();
}
// render a drag state on the next receivingCalendar
displayDrag(nextContext, state) {
let initialContext = this.component.context;
let prevContext = this.receivingContext;
// does the previous calendar need to be cleared?
if (prevContext && prevContext !== nextContext) {
// does the initial calendar need to be cleared?
// if so, don't clear all the way. we still need to to hide the affectedEvents
if (prevContext === initialContext) {
prevContext.dispatch({
type: 'SET_EVENT_DRAG',
state: {
affectedEvents: state.affectedEvents,
mutatedEvents: createEmptyEventStore(),
isEvent: true,
},
});
// completely clear the old calendar if it wasn't the initial
}
else {
prevContext.dispatch({ type: 'UNSET_EVENT_DRAG' });
}
}
if (nextContext) {
nextContext.dispatch({ type: 'SET_EVENT_DRAG', state });
}
}
clearDrag() {
let initialCalendar = this.component.context;
let { receivingContext } = this;
if (receivingContext) {
receivingContext.dispatch({ type: 'UNSET_EVENT_DRAG' });
}
// the initial calendar might have an dummy drag state from displayDrag
if (initialCalendar !== receivingContext) {
initialCalendar.dispatch({ type: 'UNSET_EVENT_DRAG' });
}
}
cleanup() {
this.isDragging = false;
this.eventRange = null;
this.relevantEvents = null;
this.receivingContext = null;
this.validMutation = null;
this.mutatedRelevantEvents = null;
}
}
// TODO: test this in IE11
// QUESTION: why do we need it on the resizable???
EventDragging.SELECTOR = `.${classNames.internalEventDraggable}, .${classNames.internalEventResizable}`;
function computeEventMutation(hit0, hit1, eventInstanceStart, massagers) {
let dateSpan0 = hit0.dateSpan;
let dateSpan1 = hit1.dateSpan;
let date0 = dateSpan0.range.start;
let date1 = dateSpan1.range.start;
let standardProps = {};
if (dateSpan0.allDay !== dateSpan1.allDay) {
standardProps.allDay = dateSpan1.allDay;
standardProps.hasEnd = hit1.context.options.allDayMaintainDuration;
if (dateSpan1.allDay) {
// means date1 is already start-of-day,
// but date0 needs to be converted
date0 = startOfDay(eventInstanceStart);
}
else {
// Moving from allDate->timed
// Doesn't matter where on the event the drag began, mutate the event's start-date to date1
date0 = eventInstanceStart;
}
}
const { delta, instantDeltaMs } = computeHitDelta(hit0, hit1, {
date0,
date1,
largeUnit: hit0.componentId === hit1.componentId ? hit0.largeUnit : null,
});
if (delta.milliseconds) { // has hours/minutes/seconds
standardProps.allDay = false;
}
let mutation = {
datesDelta: delta,
...(instantDeltaMs != null ? { instantDatesDeltaMs: instantDeltaMs } : {}),
standardProps,
};
for (let massager of massagers) {
massager(mutation, hit0, hit1);
}
return mutation;
}
function getComponentTouchDelay(component) {
let { options } = component.context;
let delay = options.eventLongPressDelay;
if (delay == null) {
delay = options.longPressDelay;
}
return delay;
}
class EventResizing extends Interaction {
constructor(settings) {
super(settings);
// internal state
this.draggingSegEl = null;
this.draggingEventRange = null; // TODO: rename to resizingSeg? subjectSeg?
this.eventRange = null;
this.relevantEvents = null;
this.validMutation = null;
this.mutatedRelevantEvents = null;
this.handlePointerDown = (ev) => {
let { component } = this;
let segEl = this.querySegEl(ev);
let eventRange = this.eventRange = getElEventRange(segEl);
this.dragging.minDistance = component.context.options.eventDragMinDistance;
const isValid = this.component.isValidSegDownEl(ev.origEvent.target) &&
!(ev.isTouch && this.component.props.eventSelection !== eventRange.instance.instanceId);
if (!isValid) {
this.dragging.cancel();
}
};
this.handleDragStart = (ev) => {
let { context } = this.component;
let eventRange = this.eventRange;
this.relevantEvents = getRelevantEvents(context.getCurrentData().eventStore, this.eventRange.instance.instanceId);
let segEl = this.querySegEl(ev);
this.draggingSegEl = segEl;
this.draggingEventRange = getElEventRange(segEl);
context.calendarApi.unselect();
context.emitter.trigger('eventResizeStart', {
el: segEl,
event: new EventImpl(context, eventRange.def, eventRange.instance),
jsEvent: ev.origEvent, // Is this always a mouse event? See #4655
view: context.viewApi,
});
};
this.handleHitUpdate = (hit, isFinal, ev) => {
let { context } = this.component;
let relevantEvents = this.relevantEvents;
let initialHit = this.hitDragging.initialHit;
let eventInstance = this.eventRange.instance;
let mutation = null;
let mutatedRelevantEvents = null;
let isInvalid = false;
let interaction = {
affectedEvents: relevantEvents,
mutatedEvents: createEmptyEventStore(),
isEvent: true,
};
if (hit) {
let disallowed = hit.componentId === initialHit.componentId
&& this.isHitComboAllowed
&& !this.isHitComboAllowed(initialHit, hit);
if (!disallowed) {
mutation = computeMutation(initialHit, hit, ev.subjectEl.classList.contains(classNames.internalEventResizerStart), eventInstance.range);
}
}
if (mutation) {
mutatedRelevantEvents = applyMutationToEventStore(relevantEvents, context.getCurrentData().eventUiBases, mutation, context);
interaction.mutatedEvents = mutatedRelevantEvents;
if (!isInteractionValid(interaction, hit.dateProfile, context)) {
isInvalid = true;
mutation = null;
mutatedRelevantEvents = null;
interaction.mutatedEvents = null;
}
}
if (mutatedRelevantEvents) {
context.dispatch({
type: 'SET_EVENT_RESIZE',
state: interaction,
});
}
else {
context.dispatch({ type: 'UNSET_EVENT_RESIZE' });
}
if (!isInvalid) {
enableCursor();
}
else {
disableCursor();
}
if (!isFinal) {
if (mutation && isHitsEqual(initialHit, hit)) {
mutation = null;
}
this.validMutation = mutation;
this.mutatedRelevantEvents = mutatedRelevantEvents;
}
};
this.handleDragEnd = (ev) => {
let { context } = this.component;
let eventDef = this.eventRange.def;
let eventInstance = this.eventRange.instance;
let eventApi = new EventImpl(context, eventDef, eventInstance);
let relevantEvents = this.relevantEvents;
let mutatedRelevantEvents = this.mutatedRelevantEvents;
context.emitter.trigger('eventResizeStop', {
el: this.draggingSegEl,
event: eventApi,
jsEvent: ev.origEvent, // Is this always a mouse event? See #4655
view: context.viewApi,
});
if (this.validMutation) {
let updatedEventApi = new EventImpl(context, mutatedRelevantEvents.defs[eventDef.defId], eventInstance ? mutatedRelevantEvents.instances[eventInstance.instanceId] : null);
context.dispatch({
type: 'MERGE_EVENTS',
eventStore: mutatedRelevantEvents,
});
let eventChangeData = {
oldEvent: eventApi,
event: updatedEventApi,
relatedEvents: buildEventApis(mutatedRelevantEvents, context, eventInstance),
revert() {
context.dispatch({
type: 'MERGE_EVENTS',
eventStore: relevantEvents, // the pre-change events
});
},
};
context.emitter.trigger('eventResize', {
...eventChangeData,
el: this.draggingSegEl,
startDelta: this.validMutation.startDelta || createDuration(0),
endDelta: this.validMutation.endDelta || createDuration(0),
jsEvent: ev.origEvent,
view: context.viewApi,
});
context.emitter.trigger('eventChange', eventChangeData);
}
else {
context.emitter.trigger('_noEventResize');
}
// reset all internal state
this.draggingEventRange = null;
this.relevantEvents = null;
this.validMutation = null;
// okay to keep eventInstance around. useful to set it in handlePointerDown
};
let { component } = settings;
let dragging = this.dragging = new FeaturefulElementDragging(settings.el);
dragging.pointer.selector = `.${classNames.internalEventResizer}`;
dragging.touchScrollAllowed = false;
dragging.autoScroller.isEnabled = component.context.options.dragScroll;
let hitDragging = this.hitDragging = new HitDragging(this.dragging, interactionSettingsToStore(settings));
hitDragging.emitter.on('pointerdown', this.handlePointerDown);
hitDragging.emitter.on('dragstart', this.handleDragStart);
hitDragging.emitter.on('hitupdate', this.handleHitUpdate);
hitDragging.emitter.on('dragend', this.handleDragEnd);
}
destroy() {
this.dragging.destroy();
}
querySegEl(ev) {
return ev.subjectEl.closest(`.${classNames.internalEvent}`);
}
}
function computeMutation(hit0, hit1, isFromStart, instanceRange) {
const { context } = hit0;
let date0 = hit0.dateSpan.range.start;
let date1 = hit1.dateSpan.range.start;
const { delta, instantDeltaMs } = computeHitDelta(hit0, hit1, {
date0,
date1,
largeUnit: hit0.largeUnit,
});
// validate with the SAME baseline the mutation will apply with (addDeltaToRangeEdge
// bases instant deltas off the edge's stored instant). on the exact path, real-time
// order is the truth — the mutation re-expresses fold-compressed civil markers itself
if (isFromStart) {
const newStart = addDeltaToRangeEdge(instanceRange.start, instanceRange.instantStartMs, delta, instantDeltaMs ?? undefined, context);
if (newStart.instantMs != null
? newStart.instantMs < getRangeInstantEndMs(instanceRange, context.dateEnv)
: newStart.marker < instanceRange.end) {
return {
startDelta: delta,
...(instantDeltaMs != null ? { instantStartDeltaMs: instantDeltaMs } : {}),
};
}
}
else {
const newEnd = addDeltaToRangeEdge(instanceRange.end, instanceRange.instantEndMs, delta, instantDeltaMs ?? undefined, context);
if (newEnd.instantMs != null
? newEnd.instantMs > getRangeInstantStartMs(instanceRange, context.dateEnv)
: newEnd.marker > instanceRange.start) {
return {
endDelta: delta,
...(instantDeltaMs != null ? { instantEndDeltaMs: instantDeltaMs } : {}),
};
}
}
return null;
}
class UnselectAuto {
constructor(context) {
this.context = context;
this.isRecentPointerDateSelect = false; // wish we could use a selector to detect date selection, but uses hit system
this.matchesCancel = false;
this.matchesEvent = false;
this.onSelect = (selectInfo) => {
if (selectInfo.jsEvent) {
this.isRecentPointerDateSelect = true;
}
};
this.onDocumentPointerDown = (pev) => {
let unselectCancel = this.context.options.unselectCancel;
let downEl = getEventTargetViaRoot(pev.origEvent);
this.matchesCancel = !!downEl.closest(unselectCancel);
this.matchesEvent = !!downEl.closest(EventDragging.SELECTOR); // interaction started on an event?
};
this.onDocumentPointerUp = (pev) => {
let { context } = this;
let { documentPointer } = this;
let calendarState = context.getCurrentData();
// touch-scrolling should never unfocus any type of selection
if (!documentPointer.wasTouchScroll) {
if (calendarState.dateSelection && // an existing date selection?
!this.isRecentPointerDateSelect // a new pointer-initiated date selection since last onDocumentPointerUp?
) {
let unselectAuto = context.options.unselectAuto;
if (unselectAuto && (!unselectAuto || !this.matchesCancel)) {
context.calendarApi.unselect(pev);
}
}
if (calendarState.eventSelection && // an existing event selected?
!this.matchesEvent // interaction DIDN'T start on an event
) {
context.dispatch({ type: 'UNSELECT_EVENT' });
}
}
this.isRecentPointerDateSelect = false;
};
let documentPointer = this.documentPointer = new PointerDragging(document);
documentPointer.shouldIgnoreMove = true;
documentPointer.shouldWatchScroll = false;
documentPointer.emitter.on('pointerdown', this.onDocumentPointerDown);
documentPointer.emitter.on('pointerup', this.onDocumentPointerUp);
/*
TODO: better way to know about whether there was a selection with the pointer
*/
context.emitter.on('select', this.onSelect);
}
destroy() {
this.context.emitter.off('select', this.onSelect);
this.documentPointer.destroy();
}
}
var interactionPlugin = {
name: 'interaction',
componentInteractions: [DateClicking, DateSelecting, EventDragging, EventResizing],
calendarInteractions: [UnselectAuto],
elementDraggingImpl: FeaturefulElementDragging,
};
export { FeaturefulElementDragging as F, HitDragging as H, PointerDragging as P, buildDatePointApiWithContext as b, interactionPlugin as i };