https://www.finearts.go.th/plugins/fullcalendar/4.3.1/packages/list/main.js

1/*!
2FullCalendar List View Plugin v4.3.0
3Docs & License: https://fullcalendar.io/
4(c) 2019 Adam Shaw
5*/
6
7(function (global, factory) {
8    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core')) :
9    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core'], factory) :
10    (global = global || self, factory(global.FullCalendarList = {}, global.FullCalendar));
11}(this, function (exports, core) { 'use strict';
12
13    /*! *****************************************************************************
14    Copyright (c) Microsoft Corporation. All rights reserved.
15    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
16    this file except in compliance with the License. You may obtain a copy of the
17    License at http://www.apache.org/licenses/LICENSE-2.0
18
19    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
20    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
21    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
22    MERCHANTABLITY OR NON-INFRINGEMENT.
23
24    See the Apache Version 2.0 License for specific language governing permissions
25    and limitations under the License.
26    ***************************************************************************** */
27    /* global Reflect, Promise */
28
29    var extendStatics = function(d, b) {
30        extendStatics = Object.setPrototypeOf ||
31            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
32            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
33        return extendStatics(d, b);
34    };
35
36    function __extends(d, b) {
37        extendStatics(d, b);
38        function __() { this.constructor = d; }
39        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
40    }
41
42    var ListEventRenderer = /** @class */ (function (_super) {
43        __extends(ListEventRenderer, _super);
44        function ListEventRenderer(listView) {
45            var _this = _super.call(this, listView.context) || this;
46            _this.listView = listView;
47            return _this;
48        }
49        ListEventRenderer.prototype.attachSegs = function (segs) {
50            if (!segs.length) {
51                this.listView.renderEmptyMessage();
52            }
53            else {
54                this.listView.renderSegList(segs);
55            }
56        };
57        ListEventRenderer.prototype.detachSegs = function () {
58        };
59        // generates the HTML for a single event row
60        ListEventRenderer.prototype.renderSegHtml = function (seg) {
61            var _a = this.context, view = _a.view, theme = _a.theme;
62            var eventRange = seg.eventRange;
63            var eventDef = eventRange.def;
64            var eventInstance = eventRange.instance;
65            var eventUi = eventRange.ui;
66            var url = eventDef.url;
67            var classes = ['fc-list-item'].concat(eventUi.classNames);
68            var bgColor = eventUi.backgroundColor;
69            var timeHtml;
70            if (eventDef.allDay) {
71                timeHtml = core.getAllDayHtml(view);
72            }
73            else if (core.isMultiDayRange(eventRange.range)) {
74                if (seg.isStart) {
75                    timeHtml = core.htmlEscape(this._getTimeText(eventInstance.range.start, seg.end, false // allDay
76                    ));
77                }
78                else if (seg.isEnd) {
79                    timeHtml = core.htmlEscape(this._getTimeText(seg.start, eventInstance.range.end, false // allDay
80                    ));
81                }
82                else { // inner segment that lasts the whole day
83                    timeHtml = core.getAllDayHtml(view);
84                }
85            }
86            else {
87                // Display the normal time text for the *event's* times
88                timeHtml = core.htmlEscape(this.getTimeText(eventRange));
89            }
90            if (url) {
91                classes.push('fc-has-url');
92            }
93            return '<tr class="' + classes.join(' ') + '">' +
94                (this.displayEventTime ?
95                    '<td class="fc-list-item-time ' + theme.getClass('widgetContent') + '">' +
96                        (timeHtml || '') +
97                        '</td>' :
98                    '') +
99                '<td class="fc-list-item-marker ' + theme.getClass('widgetContent') + '">' +
100                '<span class="fc-event-dot"' +
101                (bgColor ?
102                    ' style="background-color:' + bgColor + '"' :
103                    '') +
104                '></span>' +
105                '</td>' +
106                '<td class="fc-list-item-title ' + theme.getClass('widgetContent') + '">' +
107                '<a' + (url ? ' href="' + core.htmlEscape(url) + '"' : '') + '>

107' +
108                core.htmlEscape(eventDef.title || '') +
109                '</a>' +
110                '</td>' +
111                '</tr>';
112        };
113        // like "4:00am"
114        ListEventRenderer.prototype.computeEventTimeFormat = function () {
115            return {
116                hour: 'numeric',
117                minute: '2-digit',
118                meridiem: 'short'
119            };
120        };
121        return ListEventRenderer;
122    }(core.FgEventRenderer));
123
124    /*
125    Responsible for the scroller, and forwarding event-related actions into the "grid".
126    */
127    var ListView = /** @class */ (function (_super) {
128        __extends(ListView, _super);
129        function ListView(context, viewSpec, dateProfileGenerator, parentEl) {
130            var _this = _super.call(this, context, viewSpec, dateProfileGenerator, parentEl) || this;
131            _this.computeDateVars = core.memoize(computeDateVars);
132            _this.eventStoreToSegs = core.memoize(_this._eventStoreToSegs);
133            var eventRenderer = _this.eventRenderer = new ListEventRenderer(_this);
134            _this.renderContent = core.memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer));
135            _this.el.classList.add('fc-list-view');
136            var listViewClassNames = (_this.theme.getClass('listView') || '').split(' '); // wish we didn't have to do this
137            for (var _i = 0, listViewClassNames_1 = listViewClassNames; _i < listViewClassNames_1.length; _i++) {
138                var listViewClassName = listViewClassNames_1[_i];
139                if (listViewClassName) { // in case input was empty string
140                    _this.el.classList.add(listViewClassName);
141                }
142            }
143            _this.scroller = new core.ScrollComponent('hidden', // overflow x
144            'auto' // overflow y
145            );
146            _this.el.appendChild(_this.scroller.el);
147            _this.contentEl = _this.scroller.el; // shortcut
148            context.calendar.registerInteractiveComponent(_this, {
149                el: _this.el
150                // TODO: make aware that it doesn't do Hits
151            });
152            return _this;
153        }
154        ListView.prototype.render = function (props) {
155            var _a = this.computeDateVars(props.dateProfile), dayDates = _a.dayDates, dayRanges = _a.dayRanges;
156            this.dayDates = dayDates;
157            this.renderContent(this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges));
158        };
159        ListView.prototype.destroy = function () {
160            _super.prototype.destroy.call(this);
161            this.renderContent.unrender();
162            this.scroller.destroy(); // will remove the Grid too
163            this.calendar.unregisterInteractiveComponent(this);
164        };
165        ListView.prototype.updateSize = function (isResize, viewHeight, isAuto) {
166            _super.prototype.updateSize.call(this, isResize, viewHeight, isAuto);
167            this.eventRenderer.computeSizes(isResize);
168            this.eventRenderer.assignSizes(isResize);
169            this.scroller.clear(); // sets height to 'auto' and clears overflow
170            if (!isAuto) {
171                this.scroller.setHeight(this.computeScrollerHeight(viewHeight));
172            }
173        };
174        ListView.prototype.computeScrollerHeight = function (viewHeight) {
175            return viewHeight -
176                core.subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller
177        };
178        ListView.prototype._eventStoreToSegs = function (eventStore, eventUiBases, dayRanges) {
179            return this.eventRangesToSegs(core.sliceEventStore(eventStore, eventUiBases, this.props.dateProfile.activeRange, this.nextDayThreshold).fg, dayRanges);
180        };
181        ListView.prototype.eventRangesToSegs = function (eventRanges, dayRanges) {
182            var segs = [];
183            for (var _i = 0, eventRanges_1 = eventRanges; _i < eventRanges_1.length; _i++) {
184                var eventRange = eventRanges_1[_i];
185                segs.push.apply(segs, this.eventRangeToSegs(eventRange, dayRanges));
186            }
187            return segs;
188        };
189        ListView.prototype.eventRangeToSegs = function (eventRange, dayRanges) {
190            var _a = this, dateEnv = _a.dateEnv, nextDayThreshold = _a.nextDayThreshold;
191            var range = eventRange.range;
192            var allDay = eventRange.def.allDay;
193            var dayIndex;
194            var segRange;
195            var seg;
196            var segs = [];
197            for (dayIndex = 0; dayIndex < dayRanges.length; dayIndex++) {
198                segRange = core.intersectRanges(range, dayRanges[dayIndex]);
199                if (segRange) {
200                    seg = {
201                        component: this,
202                        eventRange: eventRange,
203                        start: segRange.start,
204                        end: segRange.end,
205                        isStart: eventRange.isStart && segRange.start.valueOf() === range.start.valueOf(),
206                        isEnd: eventRange.isEnd && segRange.end.valueOf() === range.end.valueOf(),
207                        dayIndex: dayIndex
208                    };
209                    segs.push(seg);
210                    // detect when range won't go fully into the next day,
211                    // and mutate the latest seg to the be the end.
212                    if (!seg.isEnd && !allDay &&
213                        dayIndex + 1 < dayRanges.length &&
214                        range.end <
215                            dateEnv.add(dayRanges[dayIndex + 1].start, nextDayThreshold)) {
216                        seg.end = range.end;
217                        seg.isEnd = true;
218                        break;
219                    }
220                }
221            }
222            return segs;
223        };
224        ListView.prototype.renderEmptyMessage = function () {
225            this.contentEl.innerHTML =
226                '<div class="fc-list-empty-wrap2">' + // TODO: try less wraps
227                    '<div class="fc-list-empty-wrap1">' +
228                    '<div class="fc-list-empty">' +
229                    core.htmlEscape(this.opt('noEventsMessage')) +
230                    '</div>' +
231                    '</div>' +
232                    '</div>';
233        };
234        // called by ListEventRenderer
235        ListView.prototype.renderSegList = function (allSegs) {
236            var segsByDay = this.groupSegsByDay(allSegs); // sparse array
237            var dayIndex;
238            var daySegs;
239            var i;
240            var tableEl = core.htmlToElement('<table class="fc-list-table ' + this.calendar.theme.getClass('tableList') + '"><tbody></tbody></table>');
241            var tbodyEl = tableEl.querySelector('tbody');
242            for (dayIndex = 0; dayIndex < segsByDay.length; dayIndex++) {
243                daySegs = segsByDay[dayIndex];
244                if (daySegs) { // sparse array, so might be undefined
245                    // append a day header
246                    tbodyEl.appendChild(this.buildDayHeaderRow(this.dayDates[dayIndex]));
247                    daySegs = this.eventRenderer.sortEventSegs(daySegs);
248                    for (i = 0;

248 i < daySegs.length; i++) {
249                        tbodyEl.appendChild(daySegs[i].el); // append event row
250                    }
251                }
252            }
253            this.contentEl.innerHTML = '';
254            this.contentEl.appendChild(tableEl);
255        };
256        // Returns a sparse array of arrays, segs grouped by their dayIndex
257        ListView.prototype.groupSegsByDay = function (segs) {
258            var segsByDay = []; // sparse array
259            var i;
260            var seg;
261            for (i = 0; i < segs.length; i++) {
262                seg = segs[i];
263                (segsByDay[seg.dayIndex] || (segsByDay[seg.dayIndex] = []))
264                    .push(seg);
265            }
266            return segsByDay;
267        };
268        // generates the HTML for the day headers that live amongst the event rows
269        ListView.prototype.buildDayHeaderRow = function (dayDate) {
270            var dateEnv = this.dateEnv;
271            var mainFormat = core.createFormatter(this.opt('listDayFormat')); // TODO: cache
272            var altFormat = core.createFormatter(this.opt('listDayAltFormat')); // TODO: cache
273            return core.createElement('tr', {
274                className: 'fc-list-heading',
275                'data-date': dateEnv.formatIso(dayDate, { omitTime: true })
276            }, '<td class="' + (this.calendar.theme.getClass('tableListHeading') ||
277                this.calendar.theme.getClass('widgetHeader')) + '" colspan="3">' +
278                (mainFormat ?
279                    core.buildGotoAnchorHtml(this, dayDate, { 'class': 'fc-list-heading-main' }, core.htmlEscape(dateEnv.format(dayDate, mainFormat)) // inner HTML
280                    ) :
281                    '') +
282                (altFormat ?
283                    core.buildGotoAnchorHtml(this, dayDate, { 'class': 'fc-list-heading-alt' }, core.htmlEscape(dateEnv.format(dayDate, altFormat)) // inner HTML
284                    ) :
285                    '') +
286                '</td>');
287        };
288        return ListView;
289    }(core.View));
290    ListView.prototype.fgSegSelector = '.fc-list-item'; // which elements accept event actions
291    function computeDateVars(dateProfile) {
292        var dayStart = core.startOfDay(dateProfile.renderRange.start);
293        var viewEnd = dateProfile.renderRange.end;
294        var dayDates = [];
295        var dayRanges = [];
296        while (dayStart < viewEnd) {
297            dayDates.push(dayStart);
298            dayRanges.push({
299                start: dayStart,
300                end: core.addDays(dayStart, 1)
301            });
302            dayStart = core.addDays(dayStart, 1);
303        }
304        return { dayDates: dayDates, dayRanges: dayRanges };
305    }
306
307    var main = core.createPlugin({
308        views: {
309            list: {
310                class: ListView,
311                buttonTextKey: 'list',
312                listDayFormat: { month: 'long', day: 'numeric', year: 'numeric' } // like "January 1, 2016"
313            },
314            listDay: {
315                type: 'list',
316                duration: { days: 1 },
317                listDayFormat: { weekday: 'long' } // day-of-week is all we need. full date is probably in header
318            },
319            listWeek: {
320                type: 'list',
321                duration: { weeks: 1 },
322                listDayFormat: { weekday: 'long' },
323                listDayAltFormat: { month: 'long', day: 'numeric', year: 'numeric' }
324            },
325            listMonth: {
326                type: 'list',
327                duration: { month: 1 },
328                listDayAltFormat: { weekday: 'long' } // day-of-week is nice-to-have
329            },
330            listYear: {
331                type: 'list',
332                duration: { year: 1 },
333                listDayAltFormat: { weekday: 'long' } // day-of-week is nice-to-have
334            }
335        }
336    });
337
338    exports.ListView = ListView;
339    exports.default = main;
340
341    Object.defineProperty(exports, '__esModule', { value: true });
342
343}));