diff options
Diffstat (limited to 'library/fullcalendar/packages/list/index.global.js')
| -rw-r--r-- | library/fullcalendar/packages/list/index.global.js | 332 |
1 files changed, 332 insertions, 0 deletions
diff --git a/library/fullcalendar/packages/list/index.global.js b/library/fullcalendar/packages/list/index.global.js new file mode 100644 index 000000000..1922e7d93 --- /dev/null +++ b/library/fullcalendar/packages/list/index.global.js @@ -0,0 +1,332 @@ +/*! +FullCalendar List View Plugin v6.0.3 +Docs & License: https://fullcalendar.io/docs/list-view +(c) 2022 Adam Shaw +*/ +FullCalendar.List = (function (exports, core, internal$1, preact) { + 'use strict'; + + class ListViewHeaderRow extends internal$1.BaseComponent { + constructor() { + super(...arguments); + this.state = { + textId: internal$1.getUniqueDomId(), + }; + } + render() { + let { theme, dateEnv, options, viewApi } = this.context; + let { cellId, dayDate, todayRange } = this.props; + let { textId } = this.state; + let dayMeta = internal$1.getDateMeta(dayDate, todayRange); + // will ever be falsy? + let text = options.listDayFormat ? dateEnv.format(dayDate, options.listDayFormat) : ''; + // will ever be falsy? also, BAD NAME "alt" + let sideText = options.listDaySideFormat ? dateEnv.format(dayDate, options.listDaySideFormat) : ''; + let renderProps = Object.assign({ date: dateEnv.toDate(dayDate), view: viewApi, textId, + text, + sideText, navLinkAttrs: internal$1.buildNavLinkAttrs(this.context, dayDate), sideNavLinkAttrs: internal$1.buildNavLinkAttrs(this.context, dayDate, 'day', false) }, dayMeta); + // TODO: make a reusable HOC for dayHeader (used in daygrid/timegrid too) + return (preact.createElement(internal$1.ContentContainer, { elTag: "tr", elClasses: [ + 'fc-list-day', + ...internal$1.getDayClassNames(dayMeta, theme), + ], elAttrs: { + 'data-date': internal$1.formatDayString(dayDate), + }, renderProps: renderProps, generatorName: "dayHeaderContent", generator: options.dayHeaderContent || renderInnerContent, classNameGenerator: options.dayHeaderClassNames, didMount: options.dayHeaderDidMount, willUnmount: options.dayHeaderWillUnmount }, (InnerContent) => ( // TODO: force-hide top border based on :first-child + preact.createElement("th", { scope: "colgroup", colSpan: 3, id: cellId, "aria-labelledby": textId }, + preact.createElement(InnerContent, { elTag: "div", elClasses: [ + 'fc-list-day-cushion', + theme.getClass('tableCellShaded'), + ] }))))); + } + } + function renderInnerContent(props) { + return (preact.createElement(preact.Fragment, null, + props.text && (preact.createElement("a", Object.assign({ id: props.textId, className: "fc-list-day-text" }, props.navLinkAttrs), props.text)), + props.sideText && ( /* not keyboard tabbable */preact.createElement("a", Object.assign({ "aria-hidden": true, className: "fc-list-day-side-text" }, props.sideNavLinkAttrs), props.sideText)))); + } + + const DEFAULT_TIME_FORMAT = internal$1.createFormatter({ + hour: 'numeric', + minute: '2-digit', + meridiem: 'short', + }); + class ListViewEventRow extends internal$1.BaseComponent { + render() { + let { props, context } = this; + let { options } = context; + let { seg, timeHeaderId, eventHeaderId, dateHeaderId } = props; + let timeFormat = options.eventTimeFormat || DEFAULT_TIME_FORMAT; + return (preact.createElement(internal$1.EventContainer, Object.assign({}, props, { elTag: "tr", elClasses: [ + 'fc-list-event', + seg.eventRange.def.url && 'fc-event-forced-url', + ], defaultGenerator: () => renderEventInnerContent(seg, context) /* weird */, seg: seg, timeText: "", disableDragging: true, disableResizing: true }), (InnerContent, eventContentArg) => (preact.createElement(preact.Fragment, null, + buildTimeContent(seg, timeFormat, context, timeHeaderId, dateHeaderId), + preact.createElement("td", { "aria-hidden": true, className: "fc-list-event-graphic" }, + preact.createElement("span", { className: "fc-list-event-dot", style: { + borderColor: eventContentArg.borderColor || eventContentArg.backgroundColor, + } })), + preact.createElement(InnerContent, { elTag: "td", elClasses: ['fc-list-event-title'], elAttrs: { headers: `${eventHeaderId} ${dateHeaderId}` } }))))); + } + } + function renderEventInnerContent(seg, context) { + let interactiveAttrs = internal$1.getSegAnchorAttrs(seg, context); + return (preact.createElement("a", Object.assign({}, interactiveAttrs), seg.eventRange.def.title)); + } + function buildTimeContent(seg, timeFormat, context, timeHeaderId, dateHeaderId) { + let { options } = context; + if (options.displayEventTime !== false) { + let eventDef = seg.eventRange.def; + let eventInstance = seg.eventRange.instance; + let doAllDay = false; + let timeText; + if (eventDef.allDay) { + doAllDay = true; + } + else if (internal$1.isMultiDayRange(seg.eventRange.range)) { // TODO: use (!isStart || !isEnd) instead? + if (seg.isStart) { + timeText = internal$1.buildSegTimeText(seg, timeFormat, context, null, null, eventInstance.range.start, seg.end); + } + else if (seg.isEnd) { + timeText = internal$1.buildSegTimeText(seg, timeFormat, context, null, null, seg.start, eventInstance.range.end); + } + else { + doAllDay = true; + } + } + else { + timeText = internal$1.buildSegTimeText(seg, timeFormat, context); + } + if (doAllDay) { + let renderProps = { + text: context.options.allDayText, + view: context.viewApi, + }; + return (preact.createElement(internal$1.ContentContainer, { elTag: "td", elClasses: ['fc-list-event-time'], elAttrs: { + headers: `${timeHeaderId} ${dateHeaderId}`, + }, renderProps: renderProps, generatorName: "allDayContent", generator: options.allDayContent || renderAllDayInner, classNameGenerator: options.allDayClassNames, didMount: options.allDayDidMount, willUnmount: options.allDayWillUnmount })); + } + return (preact.createElement("td", { className: "fc-list-event-time" }, timeText)); + } + return null; + } + function renderAllDayInner(renderProps) { + return renderProps.text; + } + + /* + Responsible for the scroller, and forwarding event-related actions into the "grid". + */ + class ListView extends internal$1.DateComponent { + constructor() { + super(...arguments); + this.computeDateVars = internal$1.memoize(computeDateVars); + this.eventStoreToSegs = internal$1.memoize(this._eventStoreToSegs); + this.state = { + timeHeaderId: internal$1.getUniqueDomId(), + eventHeaderId: internal$1.getUniqueDomId(), + dateHeaderIdRoot: internal$1.getUniqueDomId(), + }; + this.setRootEl = (rootEl) => { + if (rootEl) { + this.context.registerInteractiveComponent(this, { + el: rootEl, + }); + } + else { + this.context.unregisterInteractiveComponent(this); + } + }; + } + render() { + let { props, context } = this; + let { dayDates, dayRanges } = this.computeDateVars(props.dateProfile); + let eventSegs = this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges); + return (preact.createElement(internal$1.ViewContainer, { elRef: this.setRootEl, elClasses: [ + 'fc-list', + context.theme.getClass('table'), + context.options.stickyHeaderDates !== false ? + 'fc-list-sticky' : + '', + ], viewSpec: context.viewSpec }, + preact.createElement(internal$1.Scroller, { liquid: !props.isHeightAuto, overflowX: props.isHeightAuto ? 'visible' : 'hidden', overflowY: props.isHeightAuto ? 'visible' : 'auto' }, eventSegs.length > 0 ? + this.renderSegList(eventSegs, dayDates) : + this.renderEmptyMessage()))); + } + renderEmptyMessage() { + let { options, viewApi } = this.context; + let renderProps = { + text: options.noEventsText, + view: viewApi, + }; + return (preact.createElement(internal$1.ContentContainer, { elTag: "div", elClasses: ['fc-list-empty'], renderProps: renderProps, generatorName: "noEventsContent", generator: options.noEventsContent || renderNoEventsInner, classNameGenerator: options.noEventsClassNames, didMount: options.noEventsDidMount, willUnmount: options.noEventsWillUnmount }, (InnerContent) => (preact.createElement(InnerContent, { elTag: "div", elClasses: ['fc-list-empty-cushion'] })))); + } + renderSegList(allSegs, dayDates) { + let { theme, options } = this.context; + let { timeHeaderId, eventHeaderId, dateHeaderIdRoot } = this.state; + let segsByDay = groupSegsByDay(allSegs); // sparse array + return (preact.createElement(internal$1.NowTimer, { unit: "day" }, (nowDate, todayRange) => { + let innerNodes = []; + for (let dayIndex = 0; dayIndex < segsByDay.length; dayIndex += 1) { + let daySegs = segsByDay[dayIndex]; + if (daySegs) { // sparse array, so might be undefined + let dayStr = internal$1.formatDayString(dayDates[dayIndex]); + let dateHeaderId = dateHeaderIdRoot + '-' + dayStr; + // append a day header + innerNodes.push(preact.createElement(ListViewHeaderRow, { key: dayStr, cellId: dateHeaderId, dayDate: dayDates[dayIndex], todayRange: todayRange })); + daySegs = internal$1.sortEventSegs(daySegs, options.eventOrder); + for (let seg of daySegs) { + innerNodes.push(preact.createElement(ListViewEventRow, Object.assign({ key: dayStr + ':' + seg.eventRange.instance.instanceId /* are multiple segs for an instanceId */, seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false, timeHeaderId: timeHeaderId, eventHeaderId: eventHeaderId, dateHeaderId: dateHeaderId }, internal$1.getSegMeta(seg, todayRange, nowDate)))); + } + } + } + return (preact.createElement("table", { className: 'fc-list-table ' + theme.getClass('table') }, + preact.createElement("thead", null, + preact.createElement("tr", null, + preact.createElement("th", { scope: "col", id: timeHeaderId }, options.timeHint), + preact.createElement("th", { scope: "col", "aria-hidden": true }), + preact.createElement("th", { scope: "col", id: eventHeaderId }, options.eventHint))), + preact.createElement("tbody", null, innerNodes))); + })); + } + _eventStoreToSegs(eventStore, eventUiBases, dayRanges) { + return this.eventRangesToSegs(internal$1.sliceEventStore(eventStore, eventUiBases, this.props.dateProfile.activeRange, this.context.options.nextDayThreshold).fg, dayRanges); + } + eventRangesToSegs(eventRanges, dayRanges) { + let segs = []; + for (let eventRange of eventRanges) { + segs.push(...this.eventRangeToSegs(eventRange, dayRanges)); + } + return segs; + } + eventRangeToSegs(eventRange, dayRanges) { + let { dateEnv } = this.context; + let { nextDayThreshold } = this.context.options; + let range = eventRange.range; + let allDay = eventRange.def.allDay; + let dayIndex; + let segRange; + let seg; + let segs = []; + for (dayIndex = 0; dayIndex < dayRanges.length; dayIndex += 1) { + segRange = internal$1.intersectRanges(range, dayRanges[dayIndex]); + if (segRange) { + seg = { + component: this, + eventRange, + start: segRange.start, + end: segRange.end, + isStart: eventRange.isStart && segRange.start.valueOf() === range.start.valueOf(), + isEnd: eventRange.isEnd && segRange.end.valueOf() === range.end.valueOf(), + dayIndex, + }; + segs.push(seg); + // detect when range won't go fully into the next day, + // and mutate the latest seg to the be the end. + if (!seg.isEnd && !allDay && + dayIndex + 1 < dayRanges.length && + range.end < + dateEnv.add(dayRanges[dayIndex + 1].start, nextDayThreshold)) { + seg.end = range.end; + seg.isEnd = true; + break; + } + } + } + return segs; + } + } + function renderNoEventsInner(renderProps) { + return renderProps.text; + } + function computeDateVars(dateProfile) { + let dayStart = internal$1.startOfDay(dateProfile.renderRange.start); + let viewEnd = dateProfile.renderRange.end; + let dayDates = []; + let dayRanges = []; + while (dayStart < viewEnd) { + dayDates.push(dayStart); + dayRanges.push({ + start: dayStart, + end: internal$1.addDays(dayStart, 1), + }); + dayStart = internal$1.addDays(dayStart, 1); + } + return { dayDates, dayRanges }; + } + // Returns a sparse array of arrays, segs grouped by their dayIndex + function groupSegsByDay(segs) { + let segsByDay = []; // sparse array + let i; + let seg; + for (i = 0; i < segs.length; i += 1) { + seg = segs[i]; + (segsByDay[seg.dayIndex] || (segsByDay[seg.dayIndex] = [])) + .push(seg); + } + return segsByDay; + } + + const OPTION_REFINERS = { + listDayFormat: createFalsableFormatter, + listDaySideFormat: createFalsableFormatter, + noEventsClassNames: internal$1.identity, + noEventsContent: internal$1.identity, + noEventsDidMount: internal$1.identity, + noEventsWillUnmount: internal$1.identity, + // noEventsText is defined in base options + }; + function createFalsableFormatter(input) { + return input === false ? null : internal$1.createFormatter(input); + } + + var css_248z = ":root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-theme-standard .fc-list{border:1px solid var(--fc-border-color)}.fc .fc-list-empty{align-items:center;background-color:var(--fc-neutral-bg-color);display:flex;height:100%;justify-content:center}.fc .fc-list-empty-cushion{margin:5em 0}.fc .fc-list-table{border-style:hidden;width:100%}.fc .fc-list-table tr>*{border-left:0;border-right:0}.fc .fc-list-sticky .fc-list-day>*{background:var(--fc-page-bg-color);position:sticky;top:0}.fc .fc-list-table thead{left:-10000px;position:absolute}.fc .fc-list-table tbody>tr:first-child th{border-top:0}.fc .fc-list-table th{padding:0}.fc .fc-list-day-cushion,.fc .fc-list-table td{padding:8px 14px}.fc .fc-list-day-cushion:after{clear:both;content:\"\";display:table}.fc-theme-standard .fc-list-day-cushion{background-color:var(--fc-neutral-bg-color)}.fc-direction-ltr .fc-list-day-text,.fc-direction-rtl .fc-list-day-side-text{float:left}.fc-direction-ltr .fc-list-day-side-text,.fc-direction-rtl .fc-list-day-text{float:right}.fc-direction-ltr .fc-list-table .fc-list-event-graphic{padding-right:0}.fc-direction-rtl .fc-list-table .fc-list-event-graphic{padding-left:0}.fc .fc-list-event.fc-event-forced-url{cursor:pointer}.fc .fc-list-event:hover td{background-color:var(--fc-list-event-hover-bg-color)}.fc .fc-list-event-graphic,.fc .fc-list-event-time{white-space:nowrap;width:1px}.fc .fc-list-event-dot{border:calc(var(--fc-list-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-list-event-dot-width)/2);box-sizing:content-box;display:inline-block;height:0;width:0}.fc .fc-list-event-title a{color:inherit;text-decoration:none}.fc .fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}"; + internal$1.injectStyles(css_248z); + + var plugin = core.createPlugin({ + name: '@fullcalendar/list', + optionRefiners: OPTION_REFINERS, + views: { + list: { + component: ListView, + buttonTextKey: 'list', + listDayFormat: { month: 'long', day: 'numeric', year: 'numeric' }, // like "January 1, 2016" + }, + listDay: { + type: 'list', + duration: { days: 1 }, + listDayFormat: { weekday: 'long' }, // day-of-week is all we need. full date is probably in headerToolbar + }, + listWeek: { + type: 'list', + duration: { weeks: 1 }, + listDayFormat: { weekday: 'long' }, + listDaySideFormat: { month: 'long', day: 'numeric', year: 'numeric' }, + }, + listMonth: { + type: 'list', + duration: { month: 1 }, + listDaySideFormat: { weekday: 'long' }, // day-of-week is nice-to-have + }, + listYear: { + type: 'list', + duration: { year: 1 }, + listDaySideFormat: { weekday: 'long' }, // day-of-week is nice-to-have + }, + }, + }); + + var internal = { + __proto__: null, + ListView: ListView + }; + + core.globalPlugins.push(plugin); + + exports.Internal = internal; + exports["default"] = plugin; + + Object.defineProperty(exports, '__esModule', { value: true }); + + return exports; + +})({}, FullCalendar, FullCalendar.Internal, FullCalendar.Preact); |