@event-calendar/interaction - npm Package Compare versions

Comparing version 0.19.0 to 1.0.0

index.js

 import { SvelteComponent, init, safe_not_equal, noop, listen, is_function, run_all, component_subscribe, globals, set_store_value, bubble, subscribe, empty, insert, detach, element, attr, create_component, space, mount_component, transition_in, group_outros, transition_out, check_outros, destroy_component, binding_callbacks } from 'svelte/internal';
 import { getContext } from 'svelte';
-import { ancestor, addDuration, cloneDate, addDay, rect, createDuration, toEventWithLocalDates, toISOString, toViewWithLocalDates, cloneEvent, assign } from '@event-calendar/common';
+import { max, min, cloneDate, addDuration, getElementWithPayload, getPayload, ancestor, createDuration, subtractDuration, toEventWithLocalDates, toISOString, toViewWithLocalDates, cloneEvent, assign, toLocalDate, rect, addDay, floor } from '@event-calendar/common';
 
-function traverseTimeGrid(dayEl) {
-    let colEl = child(ancestor(dayEl, 1), 1);
-    let bodyEl = ancestor(dayEl, 3);
-    let col = pos(dayEl) - 1;
-
-    return [colEl, bodyEl, col];
-}
-
-function traverseResourceTimeGrid(dayEl, datesAboveResources) {
-    let colEl = child(child(ancestor(dayEl, 2), 1), 0);
-    let resourceEl = ancestor(dayEl, 1);
-    let bodyEl = ancestor(resourceEl, 3);
-    let col = pos(dayEl);
-    let resourceCol = pos(resourceEl) - 1;
-
-    return datesAboveResources ? [colEl, bodyEl, resourceCol, col] : [colEl, bodyEl, col, resourceCol];
-}
-
-function traverseDayGrid(dayEl) {
-    let daysEl = ancestor(dayEl, 1);
-    let contentEl = ancestor(daysEl, 1);
-    let colEl = child(child(contentEl, 0), 0);
-    let bodyEl = ancestor(contentEl, 1);
-    let col = pos(dayEl);
-    let row = pos(daysEl);
-
-    return [colEl, bodyEl, col, row, contentEl.children];
-}
-
-function child(el, pos) {
-    return el.children[pos];
-}
-
-function pos(el) {
-    let result = 0;
-    while ((el = el.previousElementSibling)) {
-        ++result;
-    }
-    return result;
-}
-
 let busy = false;
@@ -57,12 +16,8 @@ function animate(fn) {
 
-function limit(value, max) {
-    return Math.max(0, Math.min(max, value));
+function limit(value, minLimit, maxLimit) {
+    return max(minLimit, min(maxLimit, value));
 }
 
-function floor(value) {
-    return Math.floor(value);
-}
+/* packages/interaction/src/Action.svelte generated by Svelte v3.58.0 */
 
-/* packages/interaction/src/Action.svelte generated by Svelte v3.55.1 */
-
 const { window: window_1 } = globals;
@@ -79,14 +34,14 @@
 				dispose = [
-					listen(window_1, "pointermove", /*handlePointerMove*/ ctx[31]),
-					listen(window_1, "pointerup", /*handlePointerUp*/ ctx[32]),
-					listen(window_1, "pointercancel", /*handlePointerUp*/ ctx[32]),
+					listen(window_1, "pointermove", /*handlePointerMove*/ ctx[28]),
+					listen(window_1, "pointerup", /*handlePointerUp*/ ctx[29]),
+					listen(window_1, "pointercancel", /*handlePointerUp*/ ctx[29]),
 					listen(window_1, "scroll", /*handleScroll*/ ctx[0]),
 					listen(window_1, "selectstart", function () {
-						if (is_function(createPreventDefaultHandler(/*selectstart_handler*/ ctx[40]))) createPreventDefaultHandler(/*selectstart_handler*/ ctx[40]).apply(this, arguments);
+						if (is_function(createPreventDefaultHandler(/*selectstart_handler*/ ctx[36]))) createPreventDefaultHandler(/*selectstart_handler*/ ctx[36]).apply(this, arguments);
 					}),
 					listen(window_1, "contextmenu", function () {
-						if (is_function(createPreventDefaultHandler(/*contextmenu_handler*/ ctx[41]))) createPreventDefaultHandler(/*contextmenu_handler*/ ctx[41]).apply(this, arguments);
+						if (is_function(createPreventDefaultHandler(/*contextmenu_handler*/ ctx[37]))) createPreventDefaultHandler(/*contextmenu_handler*/ ctx[37]).apply(this, arguments);
 					}),
-					listen(window_1, "touchstart", /*handleTouchStart*/ ctx[33]),
-					listen(window_1, "touchmove", /*touchmove_handler*/ ctx[39], { passive: false })
+					listen(window_1, "touchstart", /*handleTouchStart*/ ctx[30]),
+					listen(window_1, "touchmove", /*touchmove_handler*/ ctx[35], { passive: false })
 				];
@@ -112,4 +67,2 @@
 const ACTION_SELECT = 3;
-const VIEW_TIME_GRID = 1;
-const VIEW_DAY_GRID = 2;
 
@@ -130,8 +83,5 @@ function createPreventDefaultHandler(condition) {
 	let $selectBackgroundColor;
+	let $_monthMode;
 	let $_iClass;
-
-	let $_viewResources,
-		$$unsubscribe__viewResources = noop,
-		$$subscribe__viewResources = () => ($$unsubscribe__viewResources(), $$unsubscribe__viewResources = subscribe(_viewResources, $$value => $$invalidate(71, $_viewResources = $$value)), _viewResources);
-
+	let $dateClick;
 	let $eventDrop;
@@ -141,14 +91,9 @@ let $eventResize;
 	let $eventResizeStop;
-	let $select;
+	let $selectFn;
 	let $unselectCancel;
 	let $unselectAuto;
+	let $slotHeight;
 	let $dragScroll;
 	let $eventDragStart;
 	let $eventResizeStart;
-	let $_viewDates;
-	let $hiddenDays;
-	let $slotDuration;
-	let $slotHeight;
-	let $datesAboveResources;
-	let $_ignoreClick;
 	let $eventDragMinDistance;
@@ -159,103 +104,73 @@ let $selectMinDistance;
 	let $selectLongPressDelay;
-	$$self.$$.on_destroy.push(() => $$unsubscribe__viewResources());
-	let { _iEvents, _iClass, _ignoreClick, _events, _viewDates, _view, datesAboveResources, dragScroll, editable, eventStartEditable, eventDragMinDistance, eventDragStart, eventDragStop, eventDrop, eventLongPressDelay, eventResizeStart, eventResizeStop, eventResize, longPressDelay, select, selectBackgroundColor, selectLongPressDelay, selectMinDistance, slotDuration, slotHeight, hiddenDays, unselect: unselectFn, unselectAuto, unselectCancel } = getContext('state');
-	component_subscribe($$self, _iEvents, value => $$invalidate(68, $_iEvents = value));
-	component_subscribe($$self, _iClass, value => $$invalidate(70, $_iClass = value));
-	component_subscribe($$self, _ignoreClick, value => $$invalidate(87, $_ignoreClick = value));
-	component_subscribe($$self, _events, value => $$invalidate(67, $_events = value));
-	component_subscribe($$self, _viewDates, value => $$invalidate(82, $_viewDates = value));
-	component_subscribe($$self, _view, value => $$invalidate(65, $_view = value));
-	component_subscribe($$self, datesAboveResources, value => $$invalidate(86, $datesAboveResources = value));
-	component_subscribe($$self, dragScroll, value => $$invalidate(79, $dragScroll = value));
-	component_subscribe($$self, eventDragMinDistance, value => $$invalidate(88, $eventDragMinDistance = value));
-	component_subscribe($$self, eventDragStart, value => $$invalidate(80, $eventDragStart = value));
-	component_subscribe($$self, eventDragStop, value => $$invalidate(74, $eventDragStop = value));
-	component_subscribe($$self, eventDrop, value => $$invalidate(72, $eventDrop = value));
-	component_subscribe($$self, eventLongPressDelay, value => $$invalidate(91, $eventLongPressDelay = value));
-	component_subscribe($$self, eventResizeStart, value => $$invalidate(81, $eventResizeStart = value));
-	component_subscribe($$self, eventResizeStop, value => $$invalidate(75, $eventResizeStop = value));
-	component_subscribe($$self, eventResize, value => $$invalidate(73, $eventResize = value));
-	component_subscribe($$self, longPressDelay, value => $$invalidate(90, $longPressDelay = value));
-	component_subscribe($$self, select, value => $$invalidate(76, $select = value));
-	component_subscribe($$self, selectBackgroundColor, value => $$invalidate(69, $selectBackgroundColor = value));
-	component_subscribe($$self, selectLongPressDelay, value => $$invalidate(92, $selectLongPressDelay = value));
-	component_subscribe($$self, selectMinDistance, value => $$invalidate(89, $selectMinDistance = value));
-	component_subscribe($$self, slotDuration, value => $$invalidate(84, $slotDuration = value));
-	component_subscribe($$self, slotHeight, value => $$invalidate(85, $slotHeight = value));
-	component_subscribe($$self, hiddenDays, value => $$invalidate(83, $hiddenDays = value));
-	component_subscribe($$self, unselectFn, value => $$invalidate(66, $unselectFn = value));
-	component_subscribe($$self, unselectAuto, value => $$invalidate(78, $unselectAuto = value));
-	component_subscribe($$self, unselectCancel, value => $$invalidate(77, $unselectCancel = value));
+	let $slotDuration;
+	let { _iEvents, _iClass, _events, _view, _monthMode, dragScroll, eventDragMinDistance, eventDragStart, eventDragStop, eventDrop, eventLongPressDelay, eventResizeStart, eventResizeStop, eventResize, longPressDelay, select: selectFn, selectBackgroundColor, selectLongPressDelay, selectMinDistance, slotDuration, slotHeight, unselect: unselectFn, unselectAuto, unselectCancel, dateClick } = getContext('state');
+	component_subscribe($$self, _iEvents, value => $$invalidate(64, $_iEvents = value));
+	component_subscribe($$self, _iClass, value => $$invalidate(67, $_iClass = value));
+	component_subscribe($$self, _events, value => $$invalidate(63, $_events = value));
+	component_subscribe($$self, _view, value => $$invalidate(61, $_view = value));
+	component_subscribe($$self, _monthMode, value => $$invalidate(66, $_monthMode = value));
+	component_subscribe($$self, dragScroll, value => $$invalidate(77, $dragScroll = value));
+	component_subscribe($$self, eventDragMinDistance, value => $$invalidate(80, $eventDragMinDistance = value));
+	component_subscribe($$self, eventDragStart, value => $$invalidate(78, $eventDragStart = value));
+	component_subscribe($$self, eventDragStop, value => $$invalidate(71, $eventDragStop = value));
+	component_subscribe($$self, eventDrop, value => $$invalidate(69, $eventDrop = value));
+	component_subscribe($$self, eventLongPressDelay, value => $$invalidate(83, $eventLongPressDelay = value));
+	component_subscribe($$self, eventResizeStart, value => $$invalidate(79, $eventResizeStart = value));
+	component_subscribe($$self, eventResizeStop, value => $$invalidate(72, $eventResizeStop = value));
+	component_subscribe($$self, eventResize, value => $$invalidate(70, $eventResize = value));
+	component_subscribe($$self, longPressDelay, value => $$invalidate(82, $longPressDelay = value));
+	component_subscribe($$self, selectFn, value => $$invalidate(73, $selectFn = value));
+	component_subscribe($$self, selectBackgroundColor, value => $$invalidate(65, $selectBackgroundColor = value));
+	component_subscribe($$self, selectLongPressDelay, value => $$invalidate(84, $selectLongPressDelay = value));
+	component_subscribe($$self, selectMinDistance, value => $$invalidate(81, $selectMinDistance = value));
+	component_subscribe($$self, slotDuration, value => $$invalidate(85, $slotDuration = value));
+	component_subscribe($$self, slotHeight, value => $$invalidate(76, $slotHeight = value));
+	component_subscribe($$self, unselectFn, value => $$invalidate(62, $unselectFn = value));
+	component_subscribe($$self, unselectAuto, value => $$invalidate(75, $unselectAuto = value));
+	component_subscribe($$self, unselectCancel, value => $$invalidate(74, $unselectCancel = value));
+	component_subscribe($$self, dateClick, value => $$invalidate(68, $dateClick = value));
 	let action;
-	let view;
 	let interacting;
 	let event;
-	let col, row;
-	let offsetX, offsetY;
+	let display;
+	let date, newDate;
+	let resource, newResource;
 	let fromX, fromY;
 	let toX, toY;
+	let bodyEl, bodyRect, daysEl, daysRect;
 	let delta;
-	let colEl, rowEls, bodyEl;
-	let colRect, bodyRect;
-	let _viewResources;
-	let resourceCol, newResourceCol;
-	let isAllDay = false;
+	let allDay;
 	let iClass;
 	let minEnd; // minimum end time when resizing
+	let selectStep; // minimum selection step
 	let selected; // whether selection has been made
+	let noDateClick; // do not perform date click
 	let timer; // timer for long press delays
+	let viewport;
 
-	function dragTimeGrid(eventToDrag, el, jsEvent, resourcesStore, allDay, resize) {
+	function drag(eventToDrag, jsEvent, resize, forceDate) {
 		if (!action && jsEvent.isPrimary) {
 			$$invalidate(1, action = resize ? ACTION_RESIZE : ACTION_DRAG);
-			view = VIEW_TIME_GRID;
 			event = eventToDrag;
-			$$subscribe__viewResources($$invalidate(2, _viewResources = resourcesStore));
-			isAllDay = allDay;
-			iClass = resize ? allDay ? 'resizingX' : 'resizingY' : 'dragging';
-			let dayEl = ancestor(el, 2);
-
-			if (resourcesStore) {
-				[colEl, bodyEl, col, resourceCol] = traverseResourceTimeGrid(dayEl, $datesAboveResources);
-			} else {
-				[colEl, bodyEl, col] = traverseTimeGrid(dayEl);
-			}
-
 			common(jsEvent);
-			offsetY = floor((jsEvent.clientY - colRect.top) / $slotHeight);
-			offsetX = 0; // applicable for all-day slot
 
-			if (allDay && (!resourcesStore || !$datesAboveResources)) {
-				offsetX = floor((jsEvent.clientX - colRect.left) / colRect.width) - col - (resourceCol || 0) * $_viewDates.length;
+			if (forceDate) {
+				// Force date in popup
+				date = forceDate;
 			}
 
-			if (resize) {
-				minEnd = addDuration(cloneDate(event.start), $slotDuration);
-			}
+			iClass = resize ? allDay ? 'resizingX' : 'resizingY' : 'dragging';
 
-			move(jsEvent);
-		}
-	}
-
-	function dragDayGrid(eventToDrag, el, jsEvent, inPopup, resize) {
-		if (!action && jsEvent.isPrimary) {
-			$$invalidate(1, action = resize ? ACTION_RESIZE : ACTION_DRAG);
-			view = VIEW_DAY_GRID;
-			event = eventToDrag;
-			iClass = resize ? 'resizingX' : 'dragging';
-			let dayEl = ancestor(el, inPopup ? 3 : 2);
-			[colEl, bodyEl, col, row, rowEls] = traverseDayGrid(dayEl);
-			common(jsEvent);
-
-			offsetX = inPopup
-			? 0
-			: floor((jsEvent.clientX - colRect.left) / colRect.width) - col;
-
 			if (resize) {
 				minEnd = cloneDate(event.start);
-				minEnd.setUTCHours(event.end.getUTCHours(), event.end.getUTCMinutes(), event.end.getUTCSeconds());
 
-				if (minEnd < event.start) {
-					addDay(minEnd);
-				} // minEnd = addDuration(cloneDate(event.start), $slotDuration);  alternative version
+				if (allDay) {
+					minEnd.setUTCHours(event.end.getUTCHours(), event.end.getUTCMinutes(), event.end.getUTCSeconds(), 0);
+
+					if (minEnd < event.start) {
+						addDay(minEnd);
+					} // minEnd = addDuration(cloneDate(event.start), $slotDuration);  alternative version
+				} else {
+					addDuration(minEnd, $slotDuration);
+				}
 			}
@@ -267,38 +182,15 @@
 
-	function selectTimeGrid(colDate, dayEl, jsEvent, resourcesStore, _slotTimeLimits, allDay) {
+	function select(jsEvent) {
 		if (!action && jsEvent.isPrimary) {
 			$$invalidate(1, action = ACTION_SELECT);
-			view = VIEW_TIME_GRID;
-			$$subscribe__viewResources($$invalidate(2, _viewResources = resourcesStore));
-			isAllDay = allDay;
+			common(jsEvent);
 			iClass = 'selecting';
+			selectStep = allDay ? createDuration({ day: 1 }) : $slotDuration;
 
-			if (resourcesStore) {
-				[colEl, bodyEl, col, resourceCol] = traverseResourceTimeGrid(dayEl, $datesAboveResources);
-			} else {
-				[colEl, bodyEl, col] = traverseTimeGrid(dayEl);
-			}
-
-			common(jsEvent);
-			offsetY = floor((jsEvent.clientY - colRect.top) / $slotHeight);
-			offsetX = 0; // applicable for all-day slot
-
-			if (allDay && (!resourcesStore || !$datesAboveResources)) {
-				offsetX = floor((jsEvent.clientX - colRect.left) / colRect.width) - col - (resourceCol || 0) * $_viewDates.length;
-			}
-
 			// Create dummy source event
-			let date = cloneDate(colDate);
-
-			if (!allDay) {
-				addDuration(date, $slotDuration, offsetY + _slotTimeLimits.min.seconds / $slotDuration.seconds);
-			}
-
 			event = {
 				allDay,
 				start: date,
-				end: allDay
-				? addDay(cloneDate(date))
-				: addDuration(cloneDate(date), $slotDuration),
-				resourceIds: _viewResources ? [$_viewResources[resourceCol].id] : []
+				end: addDuration(cloneDate(date), selectStep),
+				resourceIds: resource ? [resource.id] : []
 			};
@@ -310,35 +202,15 @@
 
-	function selectDayGrid(dayDate, dayEl, jsEvent) {
-		if (!action && jsEvent.isPrimary) {
-			$$invalidate(1, action = ACTION_SELECT);
-			view = VIEW_DAY_GRID;
-			iClass = 'selecting';
-			[colEl, bodyEl, col, row, rowEls] = traverseDayGrid(dayEl);
-			common(jsEvent);
-			offsetX = floor((jsEvent.clientX - colRect.left) / colRect.width) - col;
-
-			// Create dummy source event
-			let date = cloneDate(dayDate);
-
-			event = {
-				allDay: false,
-				start: date,
-				end: addDay(cloneDate(date)),
-				resourceIds: []
-			};
-
-			move(jsEvent);
-		}
-	}
-
 	function common(jsEvent) {
 		window.getSelection().removeAllRanges();
-		colRect = rect(colEl);
-		bodyRect = rect(bodyEl);
 		fromX = toX = jsEvent.clientX;
 		fromY = toY = jsEvent.clientY;
+		let dayEl = getElementWithPayload(toX, toY);
+		({ allDay, date, resource } = getPayload(dayEl)(toY));
+		bodyEl = ancestor(dayEl, resource ? 4 : 3);
+		daysEl = ancestor(dayEl, resource && dragging() ? 2 : 1);
+		calcViewport();
 
 		if (jsEvent.pointerType !== 'mouse') {
 			// For touch devices init long press delay
-			$$invalidate(3, timer = setTimeout(
+			$$invalidate(2, timer = setTimeout(
 				() => {
@@ -358,5 +230,2 @@ if (action) {
 	function move(jsEvent) {
-		let rx = toX - colRect.left;
-		let ry = toY - colRect.top;
-
 		if (interacting || jsEvent && jsEvent.pointerType === 'mouse' && distance() >= (selecting() ? $selectMinDistance : $eventDragMinDistance)) {
@@ -366,51 +235,3 @@ interacting = true;
 			set_store_value(_iClass, $_iClass = iClass, $_iClass);
-			set_store_value(_ignoreClick, $_ignoreClick = true, $_ignoreClick);
-			let newCol = floor(rx / colRect.width);
 
-			if (view === VIEW_TIME_GRID) {
-				// timeGrid
-				if (_viewResources) {
-					if (dragging()) {
-						if ($datesAboveResources) {
-							let dayCol = limit(floor(newCol / $_viewResources.length), $_viewDates.length - 1);
-							newResourceCol = limit(newCol - dayCol * $_viewResources.length, $_viewResources.length - 1);
-							newCol = dayCol;
-						} else {
-							newResourceCol = limit(floor(newCol / $_viewDates.length), $_viewResources.length - 1);
-							newCol -= newResourceCol * $_viewDates.length;
-						}
-					} else {
-						if ($datesAboveResources) {
-							newCol = floor(newCol / $_viewResources.length);
-						} else {
-							newCol -= resourceCol * $_viewDates.length;
-						}
-					}
-				}
-
-				newCol = limit(newCol, $_viewDates.length - 1);
-
-				delta = createDuration({
-					days: ($_viewDates[newCol] - $_viewDates[col]) / 1000 / 60 / 60 / 24 - offsetX,
-					seconds: isAllDay
-					? 0
-					: (floor(ry / $slotHeight) - offsetY) * $slotDuration.seconds
-				});
-			} else {
-				// dayGrid
-				let cols = 7 - $hiddenDays.length;
-
-				newCol = limit(newCol, cols - 1);
-				let newRow = -1;
-
-				do {
-					++newRow;
-					ry -= rowEls[newRow].offsetHeight;
-				} while (ry > 0 && newRow < rowEls.length - 1);
-
-				delta = createDuration({
-					days: ($_viewDates[newRow * cols + newCol] - $_viewDates[row * cols + col]) / 1000 / 60 / 60 / 24 - offsetX
-				});
-			}
-
 			if (!$_iEvents[0]) {
@@ -424,22 +245,34 @@ if (selecting()) {
 
-			set_store_value(_iEvents, $_iEvents[0].end = addDuration(cloneDate(event.end), delta), $_iEvents);
+			let dayEl = findDayEl();
 
-			if (resizing()) {
-				if ($_iEvents[0].end < minEnd) {
-					set_store_value(_iEvents, $_iEvents[0].end = minEnd, $_iEvents);
-					delta = createDuration(($_iEvents[0].end - event.end) / 1000);
-				}
-			} else if (selecting()) {
-				if ($_iEvents[0].end < event.end) {
-					set_store_value(_iEvents, $_iEvents[0].end = event.end, $_iEvents);
-					set_store_value(_iEvents, $_iEvents[0].start = addDuration(cloneDate(event.start), delta), $_iEvents);
-				} else {
-					set_store_value(_iEvents, $_iEvents[0].start = event.start, $_iEvents);
-				}
-			} else {
-				set_store_value(_iEvents, $_iEvents[0].start = addDuration(cloneDate(event.start), delta), $_iEvents);
+			if (dayEl) {
+				let newAllDay;
+				({ allDay: newAllDay, date: newDate, resource: newResource } = getPayload(dayEl)(toY));
 
-				if (_viewResources) {
-					set_store_value(_iEvents, $_iEvents[0].resourceIds = event.resourceIds.filter(id => id !== $_viewResources[resourceCol].id), $_iEvents);
-					$_iEvents[0].resourceIds.push($_viewResources[newResourceCol].id);
+				if (newAllDay === allDay) {
+					delta = createDuration((newDate - date) / 1000);
+					set_store_value(_iEvents, $_iEvents[0].end = addDuration(cloneDate(event.end), delta), $_iEvents);
+
+					if (resizing()) {
+						// Resizing
+						if ($_iEvents[0].end < minEnd) {
+							set_store_value(_iEvents, $_iEvents[0].end = minEnd, $_iEvents);
+						}
+					} else if (selecting()) {
+						// Selecting
+						if ($_iEvents[0].end < event.end) {
+							set_store_value(_iEvents, $_iEvents[0].start = subtractDuration($_iEvents[0].end, selectStep), $_iEvents);
+							set_store_value(_iEvents, $_iEvents[0].end = event.end, $_iEvents);
+						} else {
+							set_store_value(_iEvents, $_iEvents[0].start = event.start, $_iEvents);
+						}
+					} else {
+						// Dragging
+						set_store_value(_iEvents, $_iEvents[0].start = addDuration(cloneDate(event.start), delta), $_iEvents);
+
+						if (resource) {
+							set_store_value(_iEvents, $_iEvents[0].resourceIds = event.resourceIds.filter(id => id !== resource.id), $_iEvents);
+							$_iEvents[0].resourceIds.push(newResource.id);
+						}
+					}
 				}
@@ -450,17 +283,21 @@ }
 		if ($dragScroll) {
+			let threshold = $slotHeight * 2;
+
 			animate(() => {
-				if (toY < 0) {
-					window.scrollBy(0, Math.max(-10, toY / 3));
-				}
+				if (bodyEl) {
+					if (toY < threshold) {
+						window.scrollBy(0, max(-10, (toY - threshold) / 3));
+					}
 
-				if (toY < bodyRect.top) {
-					bodyEl.scrollTop += Math.max(-10, (toY - bodyRect.top) / 3);
-				}
+					if (toY < bodyRect.top + threshold) {
+						bodyEl.scrollTop += max(-10, (toY - bodyRect.top - threshold) / 3);
+					}
 
-				if (toY > window.innerHeight) {
-					window.scrollBy(0, Math.min(10, (toY - window.innerHeight) / 3));
-				}
+					if (toY > window.innerHeight - threshold) {
+						window.scrollBy(0, min(10, (toY - window.innerHeight + threshold) / 3));
+					}
 
-				if (toY > bodyRect.bottom) {
-					bodyEl.scrollTop += Math.min(10, (toY - bodyRect.bottom) / 3);
+					if (toY > bodyRect.bottom - threshold) {
+						bodyEl.scrollTop += min(10, (toY - bodyRect.bottom + threshold) / 3);
+					}
 				}
@@ -473,4 +310,3 @@ });
 		if (action) {
-			colRect = rect(colEl);
-			bodyRect = rect(bodyEl);
+			calcViewport();
 			move();
@@ -498,6 +334,6 @@ }
 
-					if (is_function($select)) {
+					if (is_function($selectFn)) {
 						let { start, end } = toEventWithLocalDates($_iEvents[0]);
 
-						$select({
+						$selectFn({
 							start,
@@ -507,12 +343,10 @@ end,
 							endStr: toISOString($_iEvents[0].end),
-							allDay: isAllDay,
+							allDay,
 							jsEvent,
 							view: toViewWithLocalDates($_view),
-							resource: resourceCol !== undefined
-							? $_viewResources[resourceCol]
-							: undefined
+							resource
 						});
 					}
 				} else {
-					event.display = 'auto';
+					event.display = display;
 					let callback = resizing() ? $eventResizeStop : $eventDragStop;
@@ -535,14 +369,13 @@
 						let eventRef = event;
+						let info;
 
-						let info = resizing()
-						? { endDelta: delta }
-						: {
+						if (resizing()) {
+							info = { endDelta: delta };
+						} else {
+							info = {
 								delta,
-								oldResource: resourceCol !== newResourceCol
-								? $_viewResources[resourceCol]
-								: undefined,
-								newResource: resourceCol !== newResourceCol
-								? $_viewResources[newResourceCol]
-								: undefined
+								oldResource: resource !== newResource ? resource : undefined,
+								newResource: resource !== newResource ? newResource : undefined
 							};
+						}
 
@@ -560,18 +393,58 @@ callback(assign(info, {
 				}
+			} else {
+				if (selecting()) {
+					// Perform date click
+					if (is_function($dateClick) && !noDateClick) {
+						let dayEl = getElementWithPayload(toX, toY);
+
+						if (dayEl) {
+							let { allDay, date, resource } = getPayload(dayEl)(toY);
+
+							$dateClick({
+								allDay,
+								date: toLocalDate(date),
+								dateStr: toISOString(date),
+								dayEl,
+								jsEvent,
+								view: toViewWithLocalDates($_view),
+								resource
+							});
+						}
+					}
+				}
 			}
 
-			colEl = rowEls = bodyEl = null;
-			resourceCol = newResourceCol = undefined;
-			$$invalidate(1, action = view = interacting = false);
-			isAllDay = false;
-			set_store_value(_iClass, $_iClass = undefined, $_iClass);
-			$$subscribe__viewResources($$invalidate(2, _viewResources = undefined));
+			interacting = false;
+			$$invalidate(1, action = fromX = fromY = toX = toY = event = display = date = newDate = resource = newResource = delta = allDay = set_store_value(_iClass, $_iClass = minEnd = selectStep = undefined, $_iClass));
+			bodyEl = daysEl = bodyRect = daysRect = undefined;
 
 			if (timer) {
 				clearTimeout(timer);
-				$$invalidate(3, timer = undefined);
+				$$invalidate(2, timer = undefined);
 			}
 		}
+
+		noDateClick = false;
 	}
 
+	function findDayEl() {
+		// Limit coordinates to viewport
+		return getElementWithPayload(limit(toX, viewport[0], viewport[1]), limit(toY, viewport[2], viewport[3]));
+	}
+
+	function calcViewport() {
+		bodyRect = rect(bodyEl);
+		daysRect = rect(daysEl);
+
+		viewport = [
+			max(0, daysRect.left + ($_monthMode ? 0 : 8)),
+			min(document.documentElement.clientWidth, daysRect.right) - 2,
+			max(0, bodyRect.top),
+			min(document.documentElement.clientHeight, bodyRect.bottom) - 2
+		]; // left
+		// right
+		// top
+		// bottom
+	}
+
 	function createIEvent(jsEvent, callback) {
@@ -586,2 +459,3 @@ if (is_function(callback)) {
 
+		display = event.display;
 		event.display = 'preview';
@@ -651,2 +525,6 @@ set_store_value(_iEvents, $_iEvents[0] = cloneEvent(event), $_iEvents);
 
+	function noClick() {
+		noDateClick = true;
+	}
+
 	// Clear selection on view params change
@@ -676,11 +554,8 @@ _view.subscribe(unselect);
 		action,
-		_viewResources,
 		timer,
 		_iEvents,
 		_iClass,
-		_ignoreClick,
 		_events,
-		_viewDates,
 		_view,
-		datesAboveResources,
+		_monthMode,
 		dragScroll,
@@ -696,3 +571,3 @@ eventDragMinDistance,
 		longPressDelay,
-		select,
+		selectFn,
 		selectBackgroundColor,
@@ -703,14 +578,13 @@ selectLongPressDelay,
 		slotHeight,
-		hiddenDays,
 		unselectFn,
 		unselectAuto,
 		unselectCancel,
+		dateClick,
 		handlePointerMove,
 		handlePointerUp,
 		handleTouchStart,
-		dragTimeGrid,
-		dragDayGrid,
-		selectTimeGrid,
-		selectDayGrid,
+		drag,
+		select,
 		unselect,
+		noClick,
 		touchmove_handler,
@@ -733,8 +607,7 @@ selectstart_handler,
 			{
-				dragTimeGrid: 34,
-				dragDayGrid: 35,
-				selectTimeGrid: 36,
-				selectDayGrid: 37,
+				drag: 31,
+				select: 32,
 				handleScroll: 0,
-				unselect: 38
+				unselect: 33,
+				noClick: 34
 			},
@@ -746,18 +619,10 @@ null,
 
-	get dragTimeGrid() {
-		return this.$$.ctx[34];
+	get drag() {
+		return this.$$.ctx[31];
 	}
 
-	get dragDayGrid() {
-		return this.$$.ctx[35];
+	get select() {
+		return this.$$.ctx[32];
 	}
 
-	get selectTimeGrid() {
-		return this.$$.ctx[36];
-	}
-
-	get selectDayGrid() {
-		return this.$$.ctx[37];
-	}
-
 	get handleScroll() {
@@ -768,7 +633,11 @@ return this.$$.ctx[0];
 	get unselect() {
-		return this.$$.ctx[38];
+		return this.$$.ctx[33];
 	}
+
+	get noClick() {
+		return this.$$.ctx[34];
+	}
 }
 
-/* packages/interaction/src/Pointer.svelte generated by Svelte v3.55.1 */
+/* packages/interaction/src/Pointer.svelte generated by Svelte v3.58.0 */
 
@@ -959,3 +828,3 @@ function create_fragment$2(ctx) {
 
-/* packages/interaction/src/Resizer.svelte generated by Svelte v3.55.1 */
+/* packages/interaction/src/Resizer.svelte generated by Svelte v3.58.0 */
 
@@ -1059,3 +928,3 @@ function create_if_block$1(ctx) {
 
-/* packages/interaction/src/Auxiliary.svelte generated by Svelte v3.55.1 */
+/* packages/interaction/src/Auxiliary.svelte generated by Svelte v3.58.0 */
 
@@ -1067,3 +936,3 @@ function create_if_block(ctx) {
 	pointer_1 = new Pointer({ props: pointer_1_props });
-	/*pointer_1_binding*/ ctx[18](pointer_1);
+	/*pointer_1_binding*/ ctx[19](pointer_1);
 
@@ -1092,3 +961,3 @@ return {
 		d(detaching) {
-			/*pointer_1_binding*/ ctx[18](null);
+			/*pointer_1_binding*/ ctx[19](null);
 			destroy_component(pointer_1, detaching);
@@ -1106,3 +975,3 @@ }
 	action = new Action({ props: action_props });
-	/*action_binding*/ ctx[17](action);
+	/*action_binding*/ ctx[18](action);
 	let if_block = /*$pointer*/ ctx[1] && create_if_block(ctx);
@@ -1163,3 +1032,3 @@
 		d(detaching) {
-			/*action_binding*/ ctx[17](null);
+			/*action_binding*/ ctx[18](null);
 			destroy_component(action, detaching);
@@ -1175,3 +1044,3 @@ if (detaching) detach(t);
 	let $_interaction;
-	let $_scroll;
+	let $_bodyEl;
 	let $editable;
@@ -1185,24 +1054,20 @@ let $eventDurationEditable;
 	let $pointer;
-	let { theme, editable, eventStartEditable, eventDurationEditable, pointer, _interaction, _classes, _draggable, _resizable, _scroll } = getContext('state');
-	component_subscribe($$self, theme, value => $$invalidate(16, $theme = value));
-	component_subscribe($$self, editable, value => $$invalidate(12, $editable = value));
-	component_subscribe($$self, eventStartEditable, value => $$invalidate(14, $eventStartEditable = value));
-	component_subscribe($$self, eventDurationEditable, value => $$invalidate(13, $eventDurationEditable = value));
+	let { theme, editable, eventStartEditable, eventDurationEditable, pointer, _bodyEl, _interaction, _classes, _draggable, _resizable, _scroll } = getContext('state');
+	component_subscribe($$self, theme, value => $$invalidate(17, $theme = value));
+	component_subscribe($$self, editable, value => $$invalidate(13, $editable = value));
+	component_subscribe($$self, eventStartEditable, value => $$invalidate(15, $eventStartEditable = value));
+	component_subscribe($$self, eventDurationEditable, value => $$invalidate(14, $eventDurationEditable = value));
 	component_subscribe($$self, pointer, value => $$invalidate(1, $pointer = value));
+	component_subscribe($$self, _bodyEl, value => $$invalidate(12, $_bodyEl = value));
 	component_subscribe($$self, _interaction, value => $$invalidate(0, $_interaction = value));
 	component_subscribe($$self, _classes, value => $$invalidate(21, $_classes = value));
-	component_subscribe($$self, _draggable, value => $$invalidate(15, $_draggable = value));
+	component_subscribe($$self, _draggable, value => $$invalidate(16, $_draggable = value));
 	component_subscribe($$self, _resizable, value => $$invalidate(20, $_resizable = value));
-	component_subscribe($$self, _scroll, value => $$invalidate(19, $_scroll = value));
 	set_store_value(_interaction, $_interaction.resizer = Resizer, $_interaction);
 
-	set_store_value(
-		_scroll,
-		$_scroll = () => {
-			for (let component of Object.values($_interaction)) {
-				component?.handleScroll?.();
-			}
-		},
-		$_scroll
-	);
+	function bodyScrollHandler() {
+		for (let component of Object.values($_interaction)) {
+			component?.handleScroll?.();
+		}
+	}
 
@@ -1224,7 +1089,7 @@ function action_binding($$value) {
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*$eventStartEditable, $editable*/ 20480) {
+		if ($$self.$$.dirty & /*$eventStartEditable, $editable*/ 40960) {
 			set_store_value(_draggable, $_draggable = event => (event.startEditable ?? $eventStartEditable) || (event.editable ?? $editable), $_draggable);
 		}
 
-		if ($$self.$$.dirty & /*$_draggable, $theme*/ 98304) {
+		if ($$self.$$.dirty & /*$theme, $_draggable*/ 196608) {
 			set_store_value(
@@ -1234,4 +1099,2 @@ _classes,
 					switch (event.display) {
-						case 'auto':
-							return className + ($_draggable(event) ? ' ' + $theme.draggable : '');
 						case 'ghost':
@@ -1244,3 +1107,3 @@ return `${$theme.event} ${$theme.ghost}`;
 						default:
-							return className;
+							return className + ($_draggable(event) ? ' ' + $theme.draggable : '');
 					}
@@ -1252,5 +1115,11 @@ },
 
-		if ($$self.$$.dirty & /*$eventDurationEditable, $editable*/ 12288) {
+		if ($$self.$$.dirty & /*$eventDurationEditable, $editable*/ 24576) {
 			set_store_value(_resizable, $_resizable = event => (event.durationEditable ?? $eventDurationEditable) || (event.editable ?? $editable), $_resizable);
 		}
+
+		if ($$self.$$.dirty & /*$_bodyEl*/ 4096) {
+			if ($_bodyEl) {
+				listen($_bodyEl, 'scroll', bodyScrollHandler);
+			}
+		}
 	};
@@ -1266,2 +1135,3 @@
 		pointer,
+		_bodyEl,
 		_interaction,
@@ -1271,3 +1141,3 @@ _classes,
 		_resizable,
-		_scroll,
+		$_bodyEl,
 		$editable,
@@ -1274,0 +1144,0 @@ $eventDurationEditable,

package.json

 {
   "name": "@event-calendar/interaction",
-  "version": "0.19.0",
+  "version": "1.0.0",
   "title": "Event Calendar Interaction plugin",
@@ -39,5 +39,5 @@ "description": "Full-sized drag & drop event calendar with resource view",
   "dependencies": {
-    "@event-calendar/common": "~0.19.0",
+    "@event-calendar/common": "~1.0.0",
     "svelte": "^3.55.1"
   }
 }

README.md

@@ -7,3 +7,3 @@ # Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![npm](https://img.shields.io/npm/dm/@event-calendar/core?color=red&label=npm&style=flat-square)](https://www.npmjs.com/package/@event-calendar/core)
 
-* Lightweight (38kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
+* Lightweight (34kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
 * Zero-dependency (pre-built bundle)
@@ -72,8 +72,7 @@ * Used on over 60,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
   - [longPressDelay](#longpressdelay)
-  - [monthMode](#monthmode)
   - [moreLinkContent](#morelinkcontent)
   - [noEventsClick](#noeventsclick)
+  - [noEventsContent](#noeventscontent)
   </td><td>
 
-  - [noEventsContent](#noeventscontent)
   - [nowIndicator](#nowindicator)
@@ -198,4 +197,4 @@ - [pointer](#pointer)
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.19.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.19.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.0.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.0.0/event-calendar.min.js"></script>
 ```
@@ -304,2 +303,3 @@
 - Default `undefined`
+- Requires `Interaction` plugin
 
@@ -334,3 +334,3 @@ Callback function that is triggered when the user clicks on a date or a time.
 
-`true` or `false`. Determines if the click has occurred in the `all-day` slot. Clicks in month and list views are treated as all-day too</td>
+`true` or `false`. Determines if the click has occurred in the `all-day` slot. Month and list views are also considered as all-day slots</td>
 </tr>
@@ -1433,10 +1433,2 @@ <tr>
 
-### monthMode
-- Type `boolean`
-- Default `false`
-> Views override the default value as follows:
-> - dayGridMonth `true`
-
-Tells the calendar that visible dates should start from the [firstDay](#firstday) of the week, even if it will display days outside the current range (this is a common case for a month calendar when you can see days from adjacent months).
-
 ### moreLinkContent
@@ -1797,3 +1789,3 @@ - Type `string`, `object`or `function`
 - Type `object` or `function`
-- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', hiddenTimes: 'ec-hidden-times', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', list: 'ec-list', month: 'ec-month', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', week: 'ec-week', withScroll: 'ec-with-scroll'}`
+- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', list: 'ec-list', month: 'ec-month', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', week: 'ec-week', withScroll: 'ec-with-scroll'}`
 
@@ -2029,6 +2021,43 @@ Defines the CSS classes that the Event Calendar uses to generate HTML markup.
 ### dateFromPoint( x, y )
-- Return value `Date` or `null`
+- Return value `object` or `null`
 
-Returns the date and time as if the [dateClick](#dateclick) event had fired for that point.
+Returns an `info` object with data as if the [dateClick](#dateclick) event had fired for that point.
 
+`info` object contains the following properties:
+<table>
+<tr>
+<td>
+
+`date`
+</td>
+<td>JavaScript Date object for the date and time</td>
+</tr>
+<tr>
+<td>
+
+`allDay`
+</td>
+<td>
+
+`true` or `false`. Determines if the point is in the `all-day` slot. Month and list views are also considered as all-day slots</td>
+</tr>
+<tr>
+<td>
+
+`dayEl`
+</td>
+<td>HTML element that represents the whole-day that contains the point</td>
+</tr>
+<tr>
+<td>
+
+`resource`
+</td>
+<td>
+
+If the current view is a resource view, the [Resource](#resource-object) object that owns this date
+</td>
+</tr>
+</table>
+
 Using this method, you can, for example, find out on which day a click occurred inside a multi-day event. To do this, inside [eventClick](#eventclick), pass the `jsEvent.clientX` and `jsEvent.clientY` coordinates to `dateFromPoint` and get the desired date.
@@ -2035,0 +2064,0 @@

src/utils.js

@@ -1,44 +0,3 @@
-import {ancestor} from '@event-calendar/common';
+import {min, max} from '@event-calendar/common';
 
-export function traverseTimeGrid(dayEl) {
-    let colEl = child(ancestor(dayEl, 1), 1);
-    let bodyEl = ancestor(dayEl, 3);
-    let col = pos(dayEl) - 1;
-
-    return [colEl, bodyEl, col];
-}
-
-export function traverseResourceTimeGrid(dayEl, datesAboveResources) {
-    let colEl = child(child(ancestor(dayEl, 2), 1), 0);
-    let resourceEl = ancestor(dayEl, 1);
-    let bodyEl = ancestor(resourceEl, 3);
-    let col = pos(dayEl);
-    let resourceCol = pos(resourceEl) - 1;
-
-    return datesAboveResources ? [colEl, bodyEl, resourceCol, col] : [colEl, bodyEl, col, resourceCol];
-}
-
-export function traverseDayGrid(dayEl) {
-    let daysEl = ancestor(dayEl, 1);
-    let contentEl = ancestor(daysEl, 1);
-    let colEl = child(child(contentEl, 0), 0);
-    let bodyEl = ancestor(contentEl, 1);
-    let col = pos(dayEl);
-    let row = pos(daysEl);
-
-    return [colEl, bodyEl, col, row, contentEl.children];
-}
-
-function child(el, pos) {
-    return el.children[pos];
-}
-
-function pos(el) {
-    let result = 0;
-    while ((el = el.previousElementSibling)) {
-        ++result;
-    }
-    return result;
-}
-
 let busy = false;
@@ -55,8 +14,4 @@ export function animate(fn) {
 
-export function limit(value, max) {
-    return Math.max(0, Math.min(max, value));
+export function limit(value, minLimit, maxLimit) {
+    return max(minLimit, min(maxLimit, value));
 }
-
-export function floor(value) {
-    return Math.floor(value);
-}

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

2531

increased by1.16%

Worsened metrics

Total package byte prevSize

109722

decreased by-6.6%

Lines of code

1075

decreased by-11.89%

Dependency changes

• + Added@event-calendar/common@1.0.0(transitive)

• - Removed@event-calendar/common@0.19.0(transitive)

• Updated@event-calendar/common@~1.0.0