@event-calendar/core 4.7.0 → 5.0.0

package/src/plugins/day-grid/Popup.svelte

@@ -1,69 +1,82 @@
 <script>
-    import {getContext, tick, untrack} from 'svelte';
-    import {ancestor, rect, setContent, outsideEvent, keyEnter, toISOString, stopPropagation} from '#lib';
+    import {getContext, onMount, untrack} from 'svelte';
+    import {
+        assign, contentFrom, createEventChunk, outsideEvent, keyEnter, rect, stopPropagation, toISOString
+    } from '#lib';
     import Event from './Event.svelte';
 
-    let {buttonText, theme, _interaction, _intlDayPopover, _popupDate, _popupChunks} = getContext('state');
+    let {gridEl, chunks} = $props();
+
+    let {_colsCount, _interaction, _intlDayPopover, _popupDay, buttonText, theme} = getContext('state');
 
     let el = $state();
     let style = $state('');
 
+    let {gridColumn, gridRow, dayStart, dayEnd} = $derived($_popupDay);
+
+    let popupChunks = $derived.by(() => {
+        let result = [];
+        for (let chunk of chunks) {
+            if (chunk.gridRow === gridRow && chunk.gridColumn <= gridColumn && chunk.gridColumn + chunk.dates.length > gridColumn) {
+                result.push(assign({}, chunk, createEventChunk(chunk.event, dayStart, dayEnd)));
+            }
+        }
+        result.sort((a, b) => a.top - b.top);
+        return result;
+    });
+
+    onMount(() => {
+        el.show();
+    });
+
+    $effect(() => {
+        if (popupChunks.length) {
+            untrack(position);
+        } else {
+            close();
+        }
+    });
+
     function position() {
-        let dayEl = ancestor(el, 1);
-        let bodyEl = ancestor(dayEl, 3);
+        let dayEl = gridEl.children.item((gridRow - 1) * $_colsCount + gridColumn - 1);
         let popupRect = rect(el);
         let dayRect = rect(dayEl);
-        let bodyRect = rect(bodyEl);
+        let gridRect = rect(gridEl);
         style = '';
 
         let left;
-        if (popupRect.width >= bodyRect.width) {
-            left = bodyRect.left - dayRect.left;
-            let right = dayRect.right - bodyRect.right;
-            style += `right:${right}px;`;
+        if (popupRect.width >= gridRect.width) {
+            left = gridRect.left - dayRect.left;
+            let right = dayRect.right - gridRect.right;
+            style += `inset-inline-end:${right}px;`;
         } else {
             left = (dayRect.width - popupRect.width) / 2;
-            if (dayRect.left + left < bodyRect.left) {
-                left = bodyRect.left - dayRect.left;
-            } else if (dayRect.left + left + popupRect.width > bodyRect.right) {
-                left = bodyRect.right - dayRect.left - popupRect.width;
+            if (dayRect.left + left < gridRect.left) {
+                left = gridRect.left - dayRect.left;
+            } else if (dayRect.left + left + popupRect.width > gridRect.right) {
+                left = gridRect.right - dayRect.left - popupRect.width;
             }
         }
-        style += `left:${left}px;`;
+        style += `inset-inline-start:${left}px;`;
 
         let top;
-        if (popupRect.height >= bodyRect.height) {
-            top = bodyRect.top - dayRect.top;
-            let bottom = dayRect.bottom - bodyRect.bottom;
-            style += `bottom:${bottom}px;`;
+        if (popupRect.height >= gridRect.height) {
+            top = gridRect.top - dayRect.top;
+            let bottom = dayRect.bottom - gridRect.bottom;
+            style += `inset-block-end:${bottom}px;`;
         } else {
             top = (dayRect.height - popupRect.height) / 2;
-            if (dayRect.top + top < bodyRect.top) {
-                top = bodyRect.top - dayRect.top;
-            } else if (dayRect.top + top + popupRect.height > bodyRect.bottom) {
-                top = bodyRect.bottom - dayRect.top - popupRect.height;
+            if (dayRect.top + top < gridRect.top) {
+                top = gridRect.top - dayRect.top;
+            } else if (dayRect.top + top + popupRect.height > gridRect.bottom) {
+                top = gridRect.bottom - dayRect.top - popupRect.height;
             }
         }
-        style += `top:${top}px;`;
-    }
-
-    $effect(() => {
-        // Fire reposition only on popup chunks change
-        $_popupChunks;
-        // Let chunks to update/mount then position the popup
-        tick().then(reposition);
-    });
-    function reposition() {
-        if ($_popupChunks.length) {
-            position();
-        } else {
-            close();
-        }
+        style += `inset-block-start:${top}px;`;
     }
 
     function close() {
-        $_popupDate = null;
-        $_popupChunks = [];
+        $_popupDay = null;
     }
 
     function handlePointerDownOutside() {
@@ -72,28 +85,32 @@
     }
 </script>
 
-<div
+<dialog
     bind:this={el}
     class="{$theme.popup}"
+    closedby="closerequest"
     {style}
-    use:outsideEvent={'pointerdown'}
-    onpointerdown={stopPropagation()}
+    style:grid-area="{`${gridRow + 1} / ${gridColumn}`}"
+    {@attach outsideEvent('pointerdown')}
     onpointerdownoutside={handlePointerDownOutside}
+    onclose={close}
 >
-    <div class="{$theme.dayHead}">
-        <time datetime="{toISOString($_popupDate, 10)}" use:setContent={$_intlDayPopover.format($_popupDate)}></time>
+    <header class="{$theme.dayHead}">
+        <time datetime="{toISOString(dayStart, 10)}" {@attach contentFrom($_intlDayPopover.format(dayStart))}></time>
         <!-- svelte-ignore a11y_missing_attribute -->
+        <!-- svelte-ignore a11y_autofocus -->
         <a
+            autofocus
             role="button"
             tabindex="0"
             aria-label={$buttonText.close}
             onclick={stopPropagation(close)}
             onkeydown={keyEnter(close)}
         >&times;</a>
-    </div>
+    </header>
     <div class="{$theme.events}">
-        {#each $_popupChunks as chunk (chunk.event)}
+        {#each popupChunks as chunk}
             <Event {chunk} inPopup />
         {/each}
     </div>
-</div>
+</dialog>

package/src/plugins/day-grid/View.svelte

@@ -1,7 +1,79 @@
 <script>
-    import Header from './Header.svelte';
-    import Body from './Body.svelte';
+    import {getContext} from 'svelte';
+    import {contentFrom, resizeObserver, runReposition} from '#lib';
+    import Day from './Day.svelte';
+    import Event from './Event.svelte';
+    import Popup from './Popup.svelte';
+    import {createEventChunks, createIEventChunks, createGrid} from './lib.js';
+
+    let {_mainEl, _colsCount, _filteredEvents, _hiddenChunks, _iEvents, _intlDayHeader, _intlDayHeaderAL, _popupDay,
+        _viewDates, dayMaxEvents, highlightedDates, theme, validRange} = getContext('state');
+
+    let gridEl = $state();
+    let grid = $derived(createGrid($_viewDates, $_colsCount, $validRange, $highlightedDates));
+    let {chunks, bgChunks} = $derived(createEventChunks($_filteredEvents, grid));
+    let iChunks = $derived(createIEventChunks($_iEvents, grid));
+
+    // Events reposition
+    let refs = [];
+    function reposition() {
+        $_hiddenChunks = {};
+        runReposition(refs, chunks);
+    }
+    $effect(reposition);
+    $effect(() => {
+        $_hiddenChunks;
+        refs.forEach(ref => ref.hide());
+    });
 </script>
 
-<Header/>
-<Body/>
+<section
+    bind:this={$_mainEl}
+    class={[$theme.main, $dayMaxEvents === true && $theme.uniform]}
+    style:--ec-grid-cols="{grid[0].length}"
+    style:--ec-grid-rows="{grid.length}"
+    {@attach resizeObserver(reposition)}
+>
+    <header class="{$theme.header}">
+        <div class="{$theme.grid}" role="row">
+            {#each grid[0] as {dayStart}, i}
+                <div
+                    class={[$theme.colHead, $theme.weekdays?.[dayStart.getUTCDay()]]}
+                    role="columnheader"
+                    aria-colindex="{1 + i}"
+                >
+                    <span
+                        aria-label="{$_intlDayHeaderAL.format(dayStart)}"
+                        {@attach contentFrom($_intlDayHeader.format(dayStart))}
+                    ></span>
+                </div>
+            {/each}
+        </div>
+    </header>
+
+    <div class="{$theme.body}">
+        <div bind:this={gridEl} class="{$theme.grid}">
+            {#each grid as days}
+                {#each days as day}
+                    <Day {day}/>
+                {/each}
+            {/each}
+        </div>
+        <div class="{$theme.events}">
+            {#each chunks as chunk, i}
+                <!-- svelte-ignore binding_property_non_reactive -->
+                <Event bind:this={refs[i]} {chunk} {gridEl}/>
+            {/each}
+            {#each bgChunks as chunk}
+                <Event {chunk}/>
+            {/each}
+            {#each iChunks as chunk}
+                <Event {chunk} {gridEl}/>
+            {/each}
+        </div>
+    </div>
+
+    {#if $_popupDay}
+        <Popup {gridEl} {chunks}/>
+    {/if}
+</section>

package/src/plugins/day-grid/index.js

@@ -1,6 +1,6 @@
 import {writable} from 'svelte/store';
 import {btnTextMonth, intl, themeView} from '#lib';
-import {days} from './stores.js';
+import {colsCount} from './stores.js';
 import View from './View.svelte';
 
 export default {
@@ -16,6 +16,7 @@ export default {
         options.buttonText.close = 'Close';
         options.theme.uniform = 'ec-uniform';
         options.theme.dayFoot = 'ec-day-foot';
+        options.theme.otherMonth = 'ec-other-month';
         options.theme.popup = 'ec-popup';
         options.theme.weekNumber = 'ec-week-number';
         options.view = 'dayGridMonth';
@@ -32,11 +33,10 @@ export default {
     },
 
     createStores(state) {
-        state._days = days(state);
+        state._colsCount = colsCount(state);
         state._intlDayCell = intl(state.locale, state.dayCellFormat);
         state._intlDayPopover = intl(state.locale, state.dayPopoverFormat);
-        state._hiddenEvents = writable({});
-        state._popupDate = writable(null);
-        state._popupChunks = writable([]);
+        state._hiddenChunks = writable({});
+        state._popupDay = writable(null);
     }
 }

package/src/plugins/day-grid/lib.js

@@ -0,0 +1,61 @@
+import {addDay, bgEvent, cloneDate, createAllDayChunks, datesEqual, outsideRange, prepareAllDayChunks} from '#lib';
+
+export function createGrid($_viewDates, $_colsCount, $validRange, $highlightedDates) {
+    let grid = [];
+    let days = [];
+    let gridColumn = 1;
+    let gridRow = 1;
+    for (let date of $_viewDates) {
+        days.push({
+            gridColumn,
+            gridRow,
+            resource: undefined,
+            dayStart: date,
+            dayEnd: addDay(cloneDate(date)),
+            disabled: outsideRange(date, $validRange),
+            highlight: $highlightedDates.some(d => datesEqual(d, date))
+        });
+        if (gridColumn === $_colsCount) {
+            grid.push(days);
+            days = [];
+            gridColumn = 0;
+            ++ gridRow;
+        }
+        ++ gridColumn;
+    }
+
+    return grid;
+}
+
+export function createEventChunks($_filteredEvents, grid) {
+    let chunks = [];
+    let bgChunks = [];
+    for (let event of $_filteredEvents) {
+        for (let days of grid) {
+            if (bgEvent(event.display)) {
+                if (event.allDay) {
+                    bgChunks = bgChunks.concat(createAllDayChunks(event, days));
+                }
+            } else {
+                chunks = chunks.concat(createAllDayChunks(event, days));
+            }
+        }
+    }
+    prepareAllDayChunks(chunks);
+
+    return {chunks, bgChunks};
+}
+
+export function createIEventChunks($_iEvents, grid) {
+    let iChunks = [];
+    for (let event of $_iEvents) {
+        if (!event) {
+            continue;
+        }
+        for (let days of grid) {
+            iChunks = iChunks.concat(createAllDayChunks(event, days));
+        }
+    }
+
+    return iChunks;
+}

package/src/plugins/day-grid/stores.js

@@ -1,23 +1,5 @@
 import {derived} from 'svelte/store';
-import {cloneDate, addDay, subtractDay} from '#lib';
 
-export function days(state) {
-    return derived([state.date, state.firstDay, state.hiddenDays], ([$date, $firstDay, $hiddenDays]) => {
-        let days = [];
-        let day = cloneDate($date);
-        let max = 7;
-        // First day of week
-        while (day.getUTCDay() !== $firstDay && max) {
-            subtractDay(day);
-            --max;
-        }
-        for (let i = 0; i < 7; ++i) {
-            if (!$hiddenDays.includes(day.getUTCDay())) {
-                days.push(cloneDate(day));
-            }
-            addDay(day);
-        }
-
-        return days;
-    });
+export function colsCount(state) {
+    return derived(state.hiddenDays, $hiddenDays => 7 - $hiddenDays.length);
 }

package/src/plugins/interaction/Action.svelte

@@ -1,18 +1,17 @@
 <script>
-    import {getContext} from 'svelte';
+    import {getContext, onMount} from 'svelte';
     import {
         addDay, addDuration, ancestor, assign, cloneDate, cloneEvent, copyTime, createDuration, getElementWithPayload,
         getPayload, isFunction, listen, listView, max, min, noop, rect, runAll, subtractDay, subtractDuration,
-        timelineView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates
+        toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates
     } from '#lib';
     import {animate, limit, eventDraggable} from './lib';
 
-    let {_iEvents, _iClass, _events, _view, _dayGrid, _bodyEl, datesAboveResources, dateClick, dragConstraint,
-        dragScroll, editable, eventStartEditable, eventDragMinDistance, eventDragStart, eventDragStop, eventDrop,
+    let {_iEvents, _iClass, _events, _view, _mainEl, dateClick, dragConstraint, dragScroll, editable,
+        eventStartEditable, eventDragMinDistance, eventDragStart, eventDragStop, eventDrop,
         eventLongPressDelay, eventResizeStart, eventResizeStop, eventResize, longPressDelay, resizeConstraint,
         selectable, select: selectFn, selectBackgroundColor, selectConstraint, selectLongPressDelay, selectMinDistance,
-        slotDuration, slotHeight, slotWidth, unselect: unselectFn, unselectAuto, unselectCancel, validRange,
-        view} = getContext('state');
+        slotDuration, unselect: unselectFn, unselectAuto, unselectCancel, validRange, view} = getContext('state');
 
     const ACTION_DRAG = 1;
     const ACTION_RESIZE_END = 2;
@@ -28,7 +27,7 @@
     let resource, newResource;
     let fromX, fromY;
     let toX, toY;
-    let bodyEl, bodyRect, clipEl, clipRect;
+    let gridEl, scrollable;
     let delta;
     let allDay;
     let iClass;
@@ -181,12 +180,8 @@
         let dayEl = getElementWithPayload(toX, toY);
         ({allDay, date, resource} = getPayload(dayEl)(toX, toY));
 
-        if (timelineView($view)) {
-            bodyEl = clipEl = $_bodyEl;
-        } else {
-            bodyEl = ancestor(dayEl, resource ? 4 : 3);
-            clipEl = ancestor(dayEl, resource && (dragging() || $datesAboveResources) ? 2 : 1);
-        }
+        scrollable = $_mainEl === ancestor(dayEl, 3);  // test for "all-day" slot
+        gridEl = ancestor(dayEl, 1);
         calcViewport();
 
         if (jsEvent.pointerType !== 'mouse') {
@@ -286,31 +281,31 @@
         }
 
         if ($dragScroll) {
-            let thresholdY = $slotHeight * 2;
-            let thresholdX = $slotWidth;
+            let thresholdY = 24;
+            let thresholdX = 24;
             animate(() => {
-                if (bodyEl) {
-                    if (toY < thresholdY) {
-                        window.scrollBy(0, max(-10, (toY - thresholdY) / 3));
+                if (viewport) {
+                    if (scrollable) {
+                        if (toY < viewport.top + thresholdY) {
+                            $_mainEl.scrollTop += max(-8, (toY - viewport.top - thresholdY) / 3);
+                        }
+                        if (toY > viewport.bottom - thresholdY) {
+                            $_mainEl.scrollTop += min(8, (toY - viewport.bottom + thresholdY) / 3);
+                        }
+                        if (toX < viewport.left + thresholdX) {
+                            $_mainEl.scrollLeft += max(-8, (toX - viewport.left - thresholdX) / 3);
+                        }
+                        if (toX > viewport.right - thresholdX) {
+                            $_mainEl.scrollLeft += min(8, (toX - viewport.right + thresholdX) / 3);
+                        }
                     }
-                    if (toY < bodyRect.top + thresholdY) {
-                        bodyEl.scrollTop += max(-10, (toY - bodyRect.top - thresholdY) / 3);
+                    if (toY < thresholdY) {
+                        window.scrollBy(0, max(-8, (toY - thresholdY) / 3));
                     }
                     if (toY > window.innerHeight - thresholdY) {
-                        window.scrollBy(0, min(10, (toY - window.innerHeight + thresholdY) / 3));
-                    }
-                    if (toY > bodyRect.bottom - thresholdY) {
-                        bodyEl.scrollTop += min(10, (toY - bodyRect.bottom + thresholdY) / 3);
+                        window.scrollBy(0, min(8, (toY - window.innerHeight + thresholdY) / 3));
                     }
 
-                    if (timelineView($view)) {
-                        if (toX < bodyRect.left + thresholdX) {
-                            bodyEl.scrollLeft += max(-10, (toX - bodyRect.left - thresholdX) / 3);
-                        }
-                        if (toX > bodyRect.right - thresholdX) {
-                            bodyEl.scrollLeft += min(10, (toX - bodyRect.right + thresholdX) / 3);
-                        }
-                    }
                 }
             });
         }
@@ -392,8 +387,7 @@
 
             interacting = false;
             action = fromX = fromY = toX = toY = event = display = date = newDate = resource = newResource = delta =
-                extraDuration = allDay = $_iClass = minResize = selectStep = margin = undefined;
-            bodyEl = clipEl = bodyRect = clipRect = undefined;
+                extraDuration = allDay = $_iClass = minResize = selectStep = margin = gridEl = viewport = undefined;
 
             if (timer) {
                 clearTimeout(timer);
@@ -407,8 +401,8 @@
     function findDayEl() {
         // Limit coordinates to viewport
         return getElementWithPayload(
-            limit(toX, viewport[0], viewport[1]),
-            limit(toY, viewport[2], viewport[3])
+            limit(toX, viewport.left, viewport.right),
+            limit(toY, viewport.top, viewport.bottom)
         );
     }
 
@@ -430,14 +424,14 @@
     }
 
     function calcViewport() {
-        bodyRect = rect(bodyEl);
-        clipRect = rect(clipEl);
-        viewport = [
-            max(0, clipRect.left + (timelineView($view) ? 1 : ($_dayGrid ? 0 : 8))),  // left
-            min(document.documentElement.clientWidth, clipRect.left + clipEl.clientWidth) - 2,  // right
-            max(0, bodyRect.top),  // top
-            min(document.documentElement.clientHeight, bodyRect.top + bodyEl.clientHeight) - 2  // bottom
-        ];
+        let mainRect = rect($_mainEl);
+        let gridRect = rect(gridEl);
+        viewport = {
+            left: max(0, gridRect.left + $_mainEl.scrollLeft),
+            right: min(document.documentElement.clientWidth, mainRect.left + $_mainEl.clientWidth) - 2,
+            top: max(0, gridRect.top + (scrollable ? $_mainEl.scrollTop : 0)),
+            bottom: min(document.documentElement.clientHeight, scrollable ? mainRect.top + $_mainEl.clientHeight : gridRect.bottom) - 2
+        };
     }
 
     function createIEvent(jsEvent, callback) {
@@ -582,7 +576,6 @@
             let target = jsEvent.target;
             let stops = [];
             let stop = () => runAll(stops);
-            stops.push(listen(window, 'touchmove', noop, {passive: false}))
             stops.push(listen(target, 'touchmove', createPreventDefaultHandler(() => interacting)));
             stops.push(listen(target, 'touchend', stop));
             stops.push(listen(target, 'touchcancel', stop));
@@ -596,6 +589,8 @@
             }
         };
     }
+
+    onMount(() => listen(window, 'touchmove', noop, {passive: false}));
 </script>
 
 <svelte:window

package/src/plugins/interaction/Auxiliary.svelte

@@ -6,7 +6,7 @@
     import Pointer from './Pointer.svelte';
     import Resizer from './Resizer.svelte';
 
-    let {theme, editable, eventStartEditable, pointer, _bodyEl,
+    let {theme, editable, eventStartEditable, pointer, _mainEl,
         _interaction, _iClasses} = getContext('state');
 
     $_interaction.resizer = Resizer;
@@ -31,12 +31,12 @@
     });
 
     $effect(() => {
-        if ($_bodyEl) {
-            return listen($_bodyEl, 'scroll', bodyScrollHandler);
+        if ($_mainEl) {
+            return listen($_mainEl, 'scroll', mainElScrollHandler);
         }
     });
 
-    function bodyScrollHandler() {
+    function mainElScrollHandler() {
         for (let component of Object.values($_interaction)) {
             component?.handleScroll?.();
         }

package/src/plugins/interaction/Pointer.svelte

@@ -18,14 +18,13 @@
         if (dayEl) {
             let {allDay, date, resource, disabled} = getPayload(dayEl)(x, y);
             if (!disabled) {
-                let idx = allDay ? 2 : 1;
-
-                if (!$_iEvents[idx]) {
-                    createPointerEvent(idx);
+                if (!$_iEvents[1]) {
+                    createPointerEvent();
                 }
-                $_iEvents[idx].start = date;
-                $_iEvents[idx].end = addDuration(cloneDate(date), $slotDuration);
-                $_iEvents[idx].resourceIds = resource ? [resource.id] : [];
+                $_iEvents[1].allDay = allDay;
+                $_iEvents[1].start = date;
+                $_iEvents[1].end = addDuration(cloneDate(date), $slotDuration);
+                $_iEvents[1].resourceIds = resource ? [resource.id] : [];
 
                 return;
             }
@@ -46,8 +45,8 @@
         }
     }
 
-    function createPointerEvent(idx) {
-        $_iEvents[idx] = {
+    function createPointerEvent() {
+        $_iEvents[1] = {
             id: '{pointer}',
             title: '',
             display: 'pointer',
@@ -62,9 +61,6 @@
         if ($_iEvents[1]) {
             $_iEvents[1] = null;
         }
-        if ($_iEvents[2]) {
-            $_iEvents[2] = null;
-        }
     }
 
     function validEvent(jsEvent) {

package/src/plugins/interaction/Resizer.svelte

@@ -20,8 +20,8 @@
             jsEvent,
             start,
             axis,
-            forceDate?.(),
-            forceMargin?.(),
+            forceDate,
+            forceMargin,
             chunk.zeroDuration
         );
     }

package/src/plugins/interaction/lib/utils.js

@@ -13,8 +13,4 @@ export function animate(fn) {
 
 export function limit(value, minLimit, maxLimit) {
     return max(minLimit, min(maxLimit, value));
-}
-
-export function draggable(event) {
-
-}
+}