@event-calendar/core 5.0.5 → 5.1.0

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

@@ -1,38 +1,44 @@
-import {btnTextDay, btnTextWeek, themeView} from '#lib';
+import {assign, btnTextDay, btnTextWeek, themeView} from '#lib';
+import {setExtensions} from './lib.js';
 import {createTROptions, createTRROptions, createTRRParsers} from './options.js';
-import {createTRRStores, createTRStores} from './stores.js';
 import View from './View.svelte';
 
 export default {
     createOptions(options) {
-        createTROptions(options);
         createTRROptions(options);
+        createTROptions(options);
         // Common options
-        options.buttonText.timeGridDay = 'day';
-        options.buttonText.timeGridWeek = 'week';
-        options.view = 'timeGridWeek';
-        options.views.timeGridDay = {
-            buttonText: btnTextDay,
-            component: View,
-            dayHeaderFormat: {weekday: 'long'},
-            duration: {days: 1},
-            theme: themeView('ec-time-grid ec-day-view'),
-            titleFormat: {year: 'numeric', month: 'long', day: 'numeric'}
-        };
-        options.views.timeGridWeek = {
-            buttonText: btnTextWeek,
-            component: View,
-            duration: {weeks: 1},
-            theme: themeView('ec-time-grid ec-week-view')
-        };
+        assign(options.buttonText, {
+            timeGridDay:  'day',
+            timeGridWeek: 'week'
+        });
+        assign(options, {
+            view: 'timeGridWeek'
+        });
+        assign(options.views, {
+            timeGridDay: {
+                buttonText: btnTextDay,
+                component: initViewComponent,
+                dayHeaderFormat: {weekday: 'long'},
+                duration: {days: 1},
+                theme: themeView('ec-time-grid ec-day-view'),
+                titleFormat: {year: 'numeric', month: 'long', day: 'numeric'}
+            },
+            timeGridWeek: {
+                buttonText: btnTextWeek,
+                component: initViewComponent,
+                duration: {weeks: 1},
+                theme: themeView('ec-time-grid ec-week-view')
+            }
+        });
     },
 
     createParsers(parsers) {
         createTRRParsers(parsers);
-    },
-
-    createStores(state) {
-        createTRRStores(state);
-        createTRStores(state);
     }
 }
+
+function initViewComponent(mainState) {
+    setExtensions(mainState);
+    return View;
+}

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

@@ -1,79 +1,8 @@
 import {
-    addDay, addDuration, assign, bgEvent, cloneDate, createAllDayChunks, createEventChunk, datesEqual, eventIntersects,
-    isFunction, outsideRange, prepareAllDayChunks,
+    addDuration, assign, cloneDate, createEventChunk, DAY_IN_SECONDS, eventIntersects, isFunction, subtractDay
 } from '#lib';
 
-/**
- * Days with prepared start and end times
- */
-export function createGrid($_viewDates, $_slotTimeLimits, $validRange, $highlightedDates) {
-    let days = [];
-    let gridColumn = 1;
-    for (let date of $_viewDates) {
-        days.push({
-            gridColumn,
-            gridRow: 1,
-            resource: undefined,
-            start: addDuration(cloneDate(date), $_slotTimeLimits.min),
-            end: addDuration(cloneDate(date), $_slotTimeLimits.max),
-            dayStart: date,
-            dayEnd: addDay(cloneDate(date)),
-            disabled: outsideRange(date, $validRange),
-            highlight: $highlightedDates.some(d => datesEqual(d, date))
-        });
-        ++ gridColumn;
-    }
-
-    return [days];
-}
-
-export function createEventChunks($_filteredEvents, grid) {
-    let chunks = [];
-    let bgChunks = [];
-    let allDayChunks = [];
-    let allDayBgChunks = [];
-    for (let event of $_filteredEvents) {
-        for (let days of grid) {
-            if (bgEvent(event.display)) {
-                bgChunks = bgChunks.concat(createChunks(event, days));
-                if (event.allDay) {
-                    allDayBgChunks = allDayBgChunks.concat(createAllDayChunks(event, days));
-                }
-            } else {
-                if (event.allDay) {
-                    allDayChunks = allDayChunks.concat(createAllDayChunks(event, days));
-                } else {
-                    chunks = chunks.concat(createChunks(event, days));
-                }
-            }
-        }
-    }
-    groupChunks(chunks);
-    prepareAllDayChunks(allDayChunks);
-
-    return {chunks, bgChunks, allDayChunks, allDayBgChunks};
-}
-
-export function createIEventChunks($_iEvents, grid) {
-    let iChunks = [];
-    let allDayIChunks = [];
-    for (let event of $_iEvents) {
-        if (!event) {
-            continue;
-        }
-        for (let days of grid) {
-            if (event.allDay) {
-                allDayIChunks = allDayIChunks.concat(createAllDayChunks(event, days));
-            } else {
-                iChunks = iChunks.concat(createChunks(event, days));
-            }
-        }
-    }
-
-    return {iChunks, allDayIChunks};
-}
-
-function createChunks(event, days) {
+export function createChunks(event, days) {
     let chunks = [];
     for (let {gridColumn, gridRow, resource, start, end, disabled} of days) {
         if (!disabled && eventIntersects(event, start, end, resource)) {
@@ -92,7 +21,7 @@ function createChunks(event, days) {
     return chunks;
 }
 
-function groupChunks(chunks) {
+export function groupChunks(chunks) {
     let groups = {};
     for (let chunk of chunks) {
         let {gridColumn} = chunk;
@@ -140,3 +69,18 @@ export function createAllDayContent(allDayContent) {
 
     return content;
 }
+
+export function setExtensions(mainState) {
+    mainState.extensions.activeRange = (start, end) => {
+        // Dependencies
+        let {options: {slotMaxTime}} = mainState;
+        if (slotMaxTime.days || slotMaxTime.seconds > DAY_IN_SECONDS) {
+            addDuration(subtractDay(end), slotMaxTime);
+            let start2 = subtractDay(cloneDate(end));
+            if (start2 < start) {
+                start = start2;
+            }
+        }
+        return {start, end};
+    };
+}

package/src/plugins/time-grid/options.js

@@ -1,18 +1,5 @@
 import {assign, createDuration} from '#lib';
 
-/**
- * TimeGrid + ResourceTimeGrid
- */
-export function createTROptions(options) {
-    if (!('allDaySlot' in options)) {
-        assign(options, {
-            allDayContent: undefined,
-            allDaySlot: true,
-            slotEventOverlap: true
-        });
-    }
-}
-
 /**
  * TimeGrid + ResourceTimeGrid + ResourceTimeline
  */
@@ -31,7 +18,8 @@ export function createTRROptions(options) {
                 minute: '2-digit'
             },
             slotMaxTime: '24:00:00',
-            slotMinTime: '00:00:00'
+            slotMinTime: '00:00:00',
+            snapDuration: undefined
         });
         assign(options.theme, {
             nowIndicator: 'ec-now-indicator',
@@ -41,6 +29,22 @@ export function createTRROptions(options) {
     }
 }
 
+/**
+ * TimeGrid + ResourceTimeGrid
+ */
+export function createTROptions(options) {
+    if (!('allDaySlot' in options)) {
+        assign(options, {
+            allDayContent: undefined,
+            allDaySlot: true,
+            slotEventOverlap: true
+        });
+        assign(options.theme, {
+            allDay: 'ec-all-day'
+        });
+    }
+}
+
 /**
  * TimeGrid + ResourceTimeGrid + ResourceTimeline
  */
@@ -51,7 +55,8 @@ export function createTRRParsers(parsers) {
             slotDuration: createDuration,
             slotLabelInterval: input => input !== undefined ? createDuration(input) : undefined,
             slotMaxTime: createDuration,
-            slotMinTime: createDuration
+            slotMinTime: createDuration,
+            snapDuration: input => input !== undefined ? createDuration(input) : undefined
         });
     }
-}
+}

package/src/plugins/time-grid/state.svelte.js

@@ -0,0 +1,44 @@
+import {intl} from '#lib';
+import {slots, slotLabelPeriodicity, slotTimeLimits, grid, eventChunks, iEventChunks, snap} from './derived.js';
+
+/**
+ * TimeGrid + ResourceTimeGrid + ResourceTimeline
+ */
+export function TRRState() {
+    return class {
+        constructor(mainState) {
+            this.intlSlotLabel = $derived.by(intl(mainState, 'slotLabelFormat'));
+            this.slotLabelPeriodicity = $derived.by(slotLabelPeriodicity(mainState));
+            this.sidebarWidth = $state(0);
+            this.snap = $derived.by(snap(mainState));
+        }
+    };
+}
+
+/**
+ * TimeGrid + ResourceTimeGrid
+ */
+export function TRState(Base) {
+    return class extends Base {
+        constructor(mainState) {
+            super(mainState);
+            this.slotTimeLimits = $derived.by(slotTimeLimits(mainState));  // flexible limits
+            this.slots = $derived.by(slots(mainState, this));
+            let {chunks, bgChunks, allDayChunks, allDayBgChunks} = $derived.by(eventChunks(mainState, this));
+            this.chunks = $derived(chunks);
+            this.bgChunks = $derived(bgChunks);
+            this.allDayChunks = $derived(allDayChunks);
+            this.allDayBgChunks = $derived(allDayBgChunks);
+            let {iChunks, allDayIChunks} = $derived.by(iEventChunks(mainState, this));
+            this.iChunks = $derived(iChunks);
+            this.allDayIChunks = $derived(allDayIChunks);
+        }
+    };
+}
+
+export default class ViewState extends TRState(TRRState()) {
+    constructor(mainState) {
+        super(mainState);
+        this.grid = $derived.by(grid(mainState, this));
+    }
+}

package/src/storage/derived.js

@@ -0,0 +1,144 @@
+import {untrack} from 'svelte';
+import {
+    addDay, addDuration, cloneDate, createView, isFunction, prevClosestDay, setMidnight, subtractDay,
+    toEventWithLocalDates, toViewWithLocalDates
+} from '#lib';
+
+export function currentRange(mainState) {
+    return () => {
+        // Dependencies
+        let {options: {date, duration, firstDay}} = mainState;
+
+        let start, end;
+
+        untrack(() => {
+            start = cloneDate(date);
+            if (duration.months) {
+                start.setUTCDate(1);
+            } else if (duration.inWeeks) {
+                // First day of week
+                prevClosestDay(start, firstDay);
+            }
+            end = addDuration(cloneDate(start), duration);
+        });
+
+        return {start, end};
+    };
+}
+
+export function activeRange(mainState) {
+    return () => {
+        // Dependencies
+        let {currentRange, extensions: {activeRange}} = mainState;
+
+        let start, end;
+
+        untrack(() => {
+            start = cloneDate(currentRange.start);
+            end = cloneDate(currentRange.end);
+        });
+
+        return activeRange ? activeRange(start, end) : {start, end};
+    };
+}
+
+export function filteredEvents(mainState) {
+    return () => {
+        // Dependencies
+        let {events, options: {eventFilter, eventOrder, filterEventsWithResources, resources}} = mainState;
+
+        let result = [...events];
+
+        untrack(() => {
+            // Filter events
+            if (isFunction(eventFilter)) {
+                let events2 = events.map(toEventWithLocalDates);
+                let view = toViewWithLocalDates(mainState.view);
+                result = result
+                    .filter((event, index) => eventFilter({
+                        event: toEventWithLocalDates(event),
+                        index,
+                        events: events2,
+                        view
+                    }));
+            }
+            if (filterEventsWithResources) {
+                result = result.filter(event => resources.some(resource => event.resourceIds.includes(resource.id)));
+            }
+
+            // Sort events
+            if (isFunction(eventOrder)) {
+                result.sort((a, b) => eventOrder(
+                    toEventWithLocalDates(a),
+                    toEventWithLocalDates(b)
+                ));
+            } else {
+                // Sort by start date (all-day events always on top)
+                result.sort((a, b) => a.start - b.start || b.allDay - a.allDay);
+            }
+        });
+
+        return result;
+    };
+}
+
+export function viewDates(mainState) {
+    return () => {
+        // Dependencies
+        let {options, activeRange} = mainState;
+        let {hiddenDays} = options;
+
+        let dates = [];
+
+        untrack(() => {
+            let date = setMidnight(cloneDate(activeRange.start));
+            let end = setMidnight(cloneDate(activeRange.end));
+            while (date < end) {
+                if (!hiddenDays.includes(date.getUTCDay())) {
+                    dates.push(cloneDate(date));
+                }
+                addDay(date);
+            }
+            if (!dates.length && hiddenDays.length && hiddenDays.length < 7) {
+                // Try to move the date
+                while (hiddenDays.includes(options.date.getUTCDay())) {
+                    mainState.setOption('date', addDay(cloneDate(options.date)));
+                }
+            }
+        });
+
+        return dates;
+    };
+}
+
+export function viewTitle(mainState) {
+    return () => {
+        // Dependencies
+        let {activeRange, intlTitle, features, options: {date}} = mainState;
+
+        let title;
+
+        untrack(() => {
+            title = features.includes('day-grid')
+                ? intlTitle.formatRange(date, date)
+                : intlTitle.formatRange(activeRange.start, subtractDay(cloneDate(activeRange.end)));
+        });
+
+        return title;
+    }
+}
+
+export function view(mainState) {
+    return () => {
+        // Dependencies
+        let {activeRange, currentRange, viewTitle, options: {view}} = mainState;
+
+        let viewObj;
+
+        untrack(() => {
+            viewObj = createView(view, viewTitle, currentRange, activeRange);
+        });
+
+        return viewObj;
+    };
+}

package/src/storage/effects.js

@@ -0,0 +1,156 @@
+import {getAbortSignal, tick, untrack} from 'svelte';
+import {
+    assign, cloneDate, createDate, createEvents, datesEqual, isFunction, setMidnight, toISOString, toLocalDate,
+    toViewWithLocalDates
+} from '#lib';
+
+export function loadEvents(mainState) {
+    let fetching = 0;
+    return () => {
+        // Dependencies
+        let {activeRange, fetchedRange, options: {events, eventSources, lazyFetching, loading}} = mainState;
+
+        untrack(() => {
+            if (!eventSources.length) {
+                mainState.events = events;
+            }
+            // Do not fetch if new range is within the previous one
+            if (
+                !fetchedRange.start ||
+                fetchedRange.start > activeRange.start ||
+                fetchedRange.end < activeRange.end ||
+                !lazyFetching
+            ) {
+                // Call loading hook
+                if (isFunction(loading) && !fetching) {
+                    loading(true);
+                }
+                let stopLoading = () => {
+                    if (--fetching === 0 && isFunction(loading)) {
+                        loading(false);
+                    }
+                };
+                let events = [];
+                // Prepare handlers
+                let failure = e => stopLoading();
+                let success = data => {
+                    events = events.concat(createEvents(data));
+                    mainState.events = events;
+                    stopLoading();
+                };
+                // Prepare other stuff
+                let startStr = toISOString(activeRange.start)
+                let endStr = toISOString(activeRange.end);
+                // Loop over event sources
+                for (let source of eventSources) {
+                    if (isFunction(source.events)) {
+                        // Events as a function
+                        let result = source.events({
+                            start: toLocalDate(activeRange.start),
+                            end: toLocalDate(activeRange.end),
+                            startStr,
+                            endStr
+                        }, success, failure);
+                        if (result !== undefined) {
+                            Promise.resolve(result).then(success, failure);
+                        }
+                    } else {
+                        // Events as a JSON feed
+                        // Prepare params
+                        let params = isFunction(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
+                        params.start = startStr;
+                        params.end = endStr;
+                        params = new URLSearchParams(params);
+                        // Prepare fetch
+                        let url = source.url, headers = {}, body;
+                        if (['GET', 'HEAD'].includes(source.method)) {
+                            url += (url.includes('?') ? '&' : '?') + params;
+                        } else {
+                            headers['content-type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+                            body = String(params);  // Safari 10.1 doesn't convert to string automatically
+                        }
+                        // Do the fetch
+                        fetch(url, {
+                            method: source.method, headers, body, signal: getAbortSignal(), credentials: 'same-origin'
+                        })
+                            .then(response => response.json())
+                            .then(success)
+                            .catch(failure);
+                    }
+                    ++fetching;
+                }
+                // Save current range for future requests
+                mainState.fetchedRange = activeRange;
+            }
+        });
+    };
+}
+
+export function setNowAndToday(mainState) {
+    return () => {
+        // Now and today
+        let interval = setInterval(() => {
+            let now = createDate();
+            let today = setMidnight(cloneDate(now));
+            mainState.now = now;
+            if (!datesEqual(mainState.today, today)) {
+                mainState.today = today;
+            }
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }
+}
+
+export function runDatesSet(mainState) {
+    return () => {
+        // Dependencies
+        let {activeRange, options: {datesSet}} = mainState;
+
+        untrack(() => {
+            if (isFunction(datesSet)) {
+                datesSet({
+                    start: toLocalDate(activeRange.start),
+                    end: toLocalDate(activeRange.end),
+                    startStr: toISOString(activeRange.start),
+                    endStr: toISOString(activeRange.end),
+                    view: toViewWithLocalDates(mainState.view)
+                });
+            }
+        });
+    }
+}
+
+export function runEventAllUpdated(mainState) {
+    let timer;
+    return () => {
+        // Dependencies
+        let {filteredEvents, options: {eventAllUpdated}} = mainState;
+
+        untrack(() => {
+            if (isFunction(eventAllUpdated)) {
+                if (!timer) {
+                    timer = setTimeout(() => {
+                        timer = null;
+                        eventAllUpdated({view: toViewWithLocalDates(mainState.view)});
+                    });
+                }
+            }
+        });
+    }
+}
+
+export function runViewDidMount(mainState) {
+    return () => {
+        // Dependencies
+        let {viewComponent, options: {viewDidMount}} = mainState;
+
+        untrack(() => {
+            if (isFunction(viewDidMount)) {
+                tick().then(() => viewDidMount({
+                    view: toViewWithLocalDates(mainState.view)
+                }));
+            }
+        });
+    };
+}