@fullcalendar/scrollgrid 5.10.1 → 6.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/main.cjs.js +377 -407
- package/main.global.js +375 -456
- package/main.global.min.js +3 -3
- package/main.js +378 -408
- package/main.js.map +1 -1
- package/package.json +4 -4
package/main.global.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
FullCalendar Scheduler
|
|
2
|
+
FullCalendar Scheduler v6.0.0-beta.1
|
|
3
3
|
Docs & License: https://fullcalendar.io/scheduler
|
|
4
|
-
(c)
|
|
4
|
+
(c) 2022 Adam Shaw
|
|
5
5
|
*/
|
|
6
6
|
var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
7
7
|
'use strict';
|
|
@@ -10,65 +10,12 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
10
10
|
|
|
11
11
|
var premiumCommonPlugin__default = /*#__PURE__*/_interopDefaultLegacy(premiumCommonPlugin);
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
Copyright (c) Microsoft Corporation.
|
|
15
|
-
|
|
16
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
17
|
-
purpose with or without fee is hereby granted.
|
|
18
|
-
|
|
19
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
20
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
21
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
22
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
23
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
24
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
25
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
33
|
-
return extendStatics(d, b);
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
function __extends(d, b) {
|
|
37
|
-
if (typeof b !== "function" && b !== null)
|
|
38
|
-
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
39
|
-
extendStatics(d, b);
|
|
40
|
-
function __() { this.constructor = d; }
|
|
41
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
var __assign = function() {
|
|
45
|
-
__assign = Object.assign || function __assign(t) {
|
|
46
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
47
|
-
s = arguments[i];
|
|
48
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
49
|
-
}
|
|
50
|
-
return t;
|
|
51
|
-
};
|
|
52
|
-
return __assign.apply(this, arguments);
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
function __spreadArray(to, from, pack) {
|
|
56
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
57
|
-
if (ar || !(i in from)) {
|
|
58
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
59
|
-
ar[i] = from[i];
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
return to.concat(ar || from);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
var WHEEL_EVENT_NAMES = 'wheel mousewheel DomMouseScroll MozMousePixelScroll'.split(' ');
|
|
13
|
+
const WHEEL_EVENT_NAMES = 'wheel mousewheel DomMouseScroll MozMousePixelScroll'.split(' ');
|
|
66
14
|
/*
|
|
67
15
|
ALSO, with the ability to disable touch
|
|
68
16
|
*/
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
var _this = this;
|
|
17
|
+
class ScrollListener {
|
|
18
|
+
constructor(el) {
|
|
72
19
|
this.el = el;
|
|
73
20
|
this.emitter = new common.Emitter();
|
|
74
21
|
this.isScrolling = false;
|
|
@@ -79,56 +26,54 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
79
26
|
this.scrollWaiter = new common.DelayedRunner(this._handleScrollWaited.bind(this));
|
|
80
27
|
// Handlers
|
|
81
28
|
// ----------------------------------------------------------------------------------------------
|
|
82
|
-
this.handleScroll =
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
29
|
+
this.handleScroll = () => {
|
|
30
|
+
this.startScroll();
|
|
31
|
+
this.emitter.trigger('scroll', this.isRecentlyWheeled, this.isTouching);
|
|
32
|
+
this.isRecentlyScrolled = true;
|
|
33
|
+
this.scrollWaiter.request(500);
|
|
87
34
|
};
|
|
88
35
|
// will fire *before* the scroll event is fired (might not cause a scroll)
|
|
89
|
-
this.handleWheel =
|
|
90
|
-
|
|
91
|
-
|
|
36
|
+
this.handleWheel = () => {
|
|
37
|
+
this.isRecentlyWheeled = true;
|
|
38
|
+
this.wheelWaiter.request(500);
|
|
92
39
|
};
|
|
93
40
|
// will fire *before* the scroll event is fired (might not cause a scroll)
|
|
94
|
-
this.handleTouchStart =
|
|
95
|
-
|
|
41
|
+
this.handleTouchStart = () => {
|
|
42
|
+
this.isTouching = true;
|
|
96
43
|
};
|
|
97
|
-
this.handleTouchEnd =
|
|
98
|
-
|
|
44
|
+
this.handleTouchEnd = () => {
|
|
45
|
+
this.isTouching = false;
|
|
99
46
|
// if the user ended their touch, and the scroll area wasn't moving,
|
|
100
47
|
// we consider this to be the end of the scroll.
|
|
101
|
-
if (!
|
|
102
|
-
|
|
48
|
+
if (!this.isRecentlyScrolled) {
|
|
49
|
+
this.endScroll(); // won't fire if already ended
|
|
103
50
|
}
|
|
104
51
|
};
|
|
105
52
|
el.addEventListener('scroll', this.handleScroll);
|
|
106
53
|
el.addEventListener('touchstart', this.handleTouchStart, { passive: true });
|
|
107
54
|
el.addEventListener('touchend', this.handleTouchEnd);
|
|
108
|
-
for (
|
|
109
|
-
var eventName = WHEEL_EVENT_NAMES_1[_i];
|
|
55
|
+
for (let eventName of WHEEL_EVENT_NAMES) {
|
|
110
56
|
el.addEventListener(eventName, this.handleWheel);
|
|
111
57
|
}
|
|
112
58
|
}
|
|
113
|
-
|
|
114
|
-
|
|
59
|
+
destroy() {
|
|
60
|
+
let { el } = this;
|
|
115
61
|
el.removeEventListener('scroll', this.handleScroll);
|
|
116
62
|
el.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
|
|
117
63
|
el.removeEventListener('touchend', this.handleTouchEnd);
|
|
118
|
-
for (
|
|
119
|
-
var eventName = WHEEL_EVENT_NAMES_2[_i];
|
|
64
|
+
for (let eventName of WHEEL_EVENT_NAMES) {
|
|
120
65
|
el.removeEventListener(eventName, this.handleWheel);
|
|
121
66
|
}
|
|
122
|
-
}
|
|
67
|
+
}
|
|
123
68
|
// Start / Stop
|
|
124
69
|
// ----------------------------------------------------------------------------------------------
|
|
125
|
-
|
|
70
|
+
startScroll() {
|
|
126
71
|
if (!this.isScrolling) {
|
|
127
72
|
this.isScrolling = true;
|
|
128
73
|
this.emitter.trigger('scrollStart', this.isRecentlyWheeled, this.isTouching);
|
|
129
74
|
}
|
|
130
|
-
}
|
|
131
|
-
|
|
75
|
+
}
|
|
76
|
+
endScroll() {
|
|
132
77
|
if (this.isScrolling) {
|
|
133
78
|
this.emitter.trigger('scrollEnd');
|
|
134
79
|
this.isScrolling = false;
|
|
@@ -137,33 +82,32 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
137
82
|
this.scrollWaiter.clear();
|
|
138
83
|
this.wheelWaiter.clear();
|
|
139
84
|
}
|
|
140
|
-
}
|
|
141
|
-
|
|
85
|
+
}
|
|
86
|
+
_handleScrollWaited() {
|
|
142
87
|
this.isRecentlyScrolled = false;
|
|
143
88
|
// only end the scroll if not currently touching.
|
|
144
89
|
// if touching, the scrolling will end later, on touchend.
|
|
145
90
|
if (!this.isTouching) {
|
|
146
91
|
this.endScroll(); // won't fire if already ended
|
|
147
92
|
}
|
|
148
|
-
}
|
|
149
|
-
|
|
93
|
+
}
|
|
94
|
+
_handleWheelWaited() {
|
|
150
95
|
this.isRecentlyWheeled = false;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
}());
|
|
96
|
+
}
|
|
97
|
+
}
|
|
154
98
|
|
|
155
99
|
// TODO: assume the el has no borders?
|
|
156
100
|
function getScrollCanvasOrigin(scrollEl) {
|
|
157
|
-
|
|
158
|
-
|
|
101
|
+
let rect = scrollEl.getBoundingClientRect();
|
|
102
|
+
let edges = common.computeEdges(scrollEl); // TODO: pass in isRtl?
|
|
159
103
|
return {
|
|
160
104
|
left: rect.left + edges.borderLeft + edges.scrollbarLeft - getScrollFromLeftEdge(scrollEl),
|
|
161
105
|
top: rect.top + edges.borderTop - scrollEl.scrollTop,
|
|
162
106
|
};
|
|
163
107
|
}
|
|
164
108
|
function getScrollFromLeftEdge(el) {
|
|
165
|
-
|
|
166
|
-
|
|
109
|
+
let scrollLeft = el.scrollLeft;
|
|
110
|
+
let computedStyles = window.getComputedStyle(el); // TODO: pass in isRtl instead?
|
|
167
111
|
if (computedStyles.direction === 'rtl') {
|
|
168
112
|
switch (getRtlScrollSystem()) {
|
|
169
113
|
case 'negative':
|
|
@@ -175,7 +119,7 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
175
119
|
return scrollLeft;
|
|
176
120
|
}
|
|
177
121
|
function setScrollFromLeftEdge(el, scrollLeft) {
|
|
178
|
-
|
|
122
|
+
let computedStyles = window.getComputedStyle(el); // TODO: pass in isRtl instead?
|
|
179
123
|
if (computedStyles.direction === 'rtl') {
|
|
180
124
|
switch (getRtlScrollSystem()) {
|
|
181
125
|
case 'reverse':
|
|
@@ -190,12 +134,12 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
190
134
|
}
|
|
191
135
|
// Horizontal Scroll System Detection
|
|
192
136
|
// ----------------------------------------------------------------------------------------------
|
|
193
|
-
|
|
137
|
+
let _rtlScrollSystem;
|
|
194
138
|
function getRtlScrollSystem() {
|
|
195
139
|
return _rtlScrollSystem || (_rtlScrollSystem = detectRtlScrollSystem());
|
|
196
140
|
}
|
|
197
141
|
function detectRtlScrollSystem() {
|
|
198
|
-
|
|
142
|
+
let el = document.createElement('div');
|
|
199
143
|
el.style.position = 'absolute';
|
|
200
144
|
el.style.top = '-1000px';
|
|
201
145
|
el.style.width = '1px';
|
|
@@ -205,7 +149,7 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
205
149
|
el.style.fontSize = '100px';
|
|
206
150
|
el.innerHTML = 'A';
|
|
207
151
|
document.body.appendChild(el);
|
|
208
|
-
|
|
152
|
+
let system;
|
|
209
153
|
if (el.scrollLeft > 0) {
|
|
210
154
|
system = 'positive'; // scroll is a positive number from the left edge
|
|
211
155
|
}
|
|
@@ -222,8 +166,8 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
222
166
|
return system;
|
|
223
167
|
}
|
|
224
168
|
|
|
225
|
-
|
|
226
|
-
|
|
169
|
+
const IS_MS_EDGE = typeof navigator !== 'undefined' && /Edge/.test(navigator.userAgent); // TODO: what about Chromeum-based Edge?
|
|
170
|
+
const STICKY_SELECTOR = '.fc-sticky';
|
|
227
171
|
/*
|
|
228
172
|
useful beyond the native position:sticky for these reasons:
|
|
229
173
|
- support in IE11
|
|
@@ -234,20 +178,19 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
234
178
|
|
|
235
179
|
TODO: don't query text-align:center. isn't compatible with flexbox centering. instead, check natural X coord within parent container
|
|
236
180
|
*/
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
var _this = this;
|
|
181
|
+
class StickyScrolling {
|
|
182
|
+
constructor(scrollEl, isRtl) {
|
|
240
183
|
this.scrollEl = scrollEl;
|
|
241
184
|
this.isRtl = isRtl;
|
|
242
185
|
this.usingRelative = null;
|
|
243
|
-
this.updateSize =
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
if (
|
|
250
|
-
|
|
186
|
+
this.updateSize = () => {
|
|
187
|
+
let { scrollEl } = this;
|
|
188
|
+
let els = common.findElements(scrollEl, STICKY_SELECTOR);
|
|
189
|
+
let elGeoms = this.queryElGeoms(els);
|
|
190
|
+
let viewportWidth = scrollEl.clientWidth;
|
|
191
|
+
let viewportHeight = scrollEl.clientHeight;
|
|
192
|
+
if (this.usingRelative) {
|
|
193
|
+
let elDestinations = this.computeElDestinations(elGeoms, viewportWidth); // read before prepPositioning
|
|
251
194
|
assignRelativePositions(els, elGeoms, elDestinations, viewportWidth, viewportHeight);
|
|
252
195
|
}
|
|
253
196
|
else {
|
|
@@ -263,23 +206,22 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
263
206
|
this.listener.emitter.on('scrollEnd', this.updateSize);
|
|
264
207
|
}
|
|
265
208
|
}
|
|
266
|
-
|
|
209
|
+
destroy() {
|
|
267
210
|
if (this.listener) {
|
|
268
211
|
this.listener.destroy();
|
|
269
212
|
}
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
for (
|
|
276
|
-
|
|
277
|
-
var parentBound = common.translateRect(common.computeInnerRect(el.parentNode, true, true), // weird way to call this!!!
|
|
213
|
+
}
|
|
214
|
+
queryElGeoms(els) {
|
|
215
|
+
let { scrollEl, isRtl } = this;
|
|
216
|
+
let canvasOrigin = getScrollCanvasOrigin(scrollEl);
|
|
217
|
+
let elGeoms = [];
|
|
218
|
+
for (let el of els) {
|
|
219
|
+
let parentBound = common.translateRect(common.computeInnerRect(el.parentNode, true, true), // weird way to call this!!!
|
|
278
220
|
-canvasOrigin.left, -canvasOrigin.top);
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
221
|
+
let elRect = el.getBoundingClientRect();
|
|
222
|
+
let computedStyles = window.getComputedStyle(el);
|
|
223
|
+
let textAlign = window.getComputedStyle(el.parentNode).textAlign; // ask the parent
|
|
224
|
+
let naturalBound = null;
|
|
283
225
|
if (textAlign === 'start') {
|
|
284
226
|
textAlign = isRtl ? 'right' : 'left';
|
|
285
227
|
}
|
|
@@ -291,25 +233,25 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
291
233
|
-canvasOrigin.top - (parseFloat(computedStyles.top) || 0));
|
|
292
234
|
}
|
|
293
235
|
elGeoms.push({
|
|
294
|
-
parentBound
|
|
295
|
-
naturalBound
|
|
236
|
+
parentBound,
|
|
237
|
+
naturalBound,
|
|
296
238
|
elWidth: elRect.width,
|
|
297
239
|
elHeight: elRect.height,
|
|
298
|
-
textAlign
|
|
240
|
+
textAlign,
|
|
299
241
|
});
|
|
300
242
|
}
|
|
301
243
|
return elGeoms;
|
|
302
|
-
}
|
|
244
|
+
}
|
|
303
245
|
// only for IE
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
return elGeoms.map(
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
246
|
+
computeElDestinations(elGeoms, viewportWidth) {
|
|
247
|
+
let { scrollEl } = this;
|
|
248
|
+
let viewportTop = scrollEl.scrollTop;
|
|
249
|
+
let viewportLeft = getScrollFromLeftEdge(scrollEl);
|
|
250
|
+
let viewportRight = viewportLeft + viewportWidth;
|
|
251
|
+
return elGeoms.map((elGeom) => {
|
|
252
|
+
let { elWidth, elHeight, parentBound, naturalBound } = elGeom;
|
|
253
|
+
let destLeft; // relative to canvas topleft
|
|
254
|
+
let destTop; // "
|
|
313
255
|
switch (elGeom.textAlign) {
|
|
314
256
|
case 'left':
|
|
315
257
|
destLeft = viewportLeft;
|
|
@@ -328,16 +270,15 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
328
270
|
destTop = Math.max(destTop, naturalBound.top); // better to use natural top for upper bound
|
|
329
271
|
return { left: destLeft, top: destTop };
|
|
330
272
|
});
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
}());
|
|
273
|
+
}
|
|
274
|
+
}
|
|
334
275
|
function assignRelativePositions(els, elGeoms, elDestinations, viewportWidth, viewportHeight) {
|
|
335
|
-
els.forEach(
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
276
|
+
els.forEach((el, i) => {
|
|
277
|
+
let { naturalBound, parentBound } = elGeoms[i];
|
|
278
|
+
let parentWidth = parentBound.right - parentBound.left;
|
|
279
|
+
let parentHeight = parentBound.bottom - parentBound.bottom;
|
|
280
|
+
let left;
|
|
281
|
+
let top;
|
|
341
282
|
if (parentWidth > viewportWidth ||
|
|
342
283
|
parentHeight > viewportHeight) {
|
|
343
284
|
left = elDestinations[i].left - naturalBound.left;
|
|
@@ -349,17 +290,17 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
349
290
|
}
|
|
350
291
|
common.applyStyle(el, {
|
|
351
292
|
position: 'relative',
|
|
352
|
-
left
|
|
293
|
+
left,
|
|
353
294
|
right: -left,
|
|
354
|
-
top
|
|
295
|
+
top,
|
|
355
296
|
});
|
|
356
297
|
});
|
|
357
298
|
}
|
|
358
299
|
function assignStickyPositions(els, elGeoms, viewportWidth) {
|
|
359
|
-
els.forEach(
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
300
|
+
els.forEach((el, i) => {
|
|
301
|
+
let { textAlign, elWidth, parentBound } = elGeoms[i];
|
|
302
|
+
let parentWidth = parentBound.right - parentBound.left;
|
|
303
|
+
let left;
|
|
363
304
|
if (textAlign === 'center' &&
|
|
364
305
|
parentWidth > viewportWidth) {
|
|
365
306
|
left = (viewportWidth - elWidth) / 2;
|
|
@@ -368,13 +309,13 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
368
309
|
left = '';
|
|
369
310
|
}
|
|
370
311
|
common.applyStyle(el, {
|
|
371
|
-
left
|
|
312
|
+
left,
|
|
372
313
|
right: left,
|
|
373
314
|
top: 0,
|
|
374
315
|
});
|
|
375
316
|
});
|
|
376
317
|
}
|
|
377
|
-
|
|
318
|
+
let _isStickySupported;
|
|
378
319
|
function getStickySupported() {
|
|
379
320
|
if (_isStickySupported == null) {
|
|
380
321
|
_isStickySupported = computeStickySupported();
|
|
@@ -382,44 +323,42 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
382
323
|
return _isStickySupported;
|
|
383
324
|
}
|
|
384
325
|
function computeStickySupported() {
|
|
385
|
-
|
|
326
|
+
let el = document.createElement('div');
|
|
386
327
|
el.style.position = 'sticky';
|
|
387
328
|
document.body.appendChild(el);
|
|
388
|
-
|
|
329
|
+
let val = window.getComputedStyle(el).position;
|
|
389
330
|
common.removeElement(el);
|
|
390
331
|
return val === 'sticky';
|
|
391
332
|
}
|
|
392
333
|
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
_this.state = {
|
|
334
|
+
class ClippedScroller extends common.BaseComponent {
|
|
335
|
+
constructor() {
|
|
336
|
+
super(...arguments);
|
|
337
|
+
this.elRef = common.createRef();
|
|
338
|
+
this.state = {
|
|
399
339
|
xScrollbarWidth: 0,
|
|
400
340
|
yScrollbarWidth: 0,
|
|
401
341
|
};
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
common.setRef(
|
|
342
|
+
this.handleScroller = (scroller) => {
|
|
343
|
+
this.scroller = scroller;
|
|
344
|
+
common.setRef(this.props.scrollerRef, scroller);
|
|
405
345
|
};
|
|
406
|
-
|
|
407
|
-
|
|
346
|
+
this.handleSizing = () => {
|
|
347
|
+
let { props } = this;
|
|
408
348
|
if (props.overflowY === 'scroll-hidden') {
|
|
409
|
-
|
|
349
|
+
this.setState({ yScrollbarWidth: this.scroller.getYScrollbarWidth() });
|
|
410
350
|
}
|
|
411
351
|
if (props.overflowX === 'scroll-hidden') {
|
|
412
|
-
|
|
352
|
+
this.setState({ xScrollbarWidth: this.scroller.getXScrollbarWidth() });
|
|
413
353
|
}
|
|
414
354
|
};
|
|
415
|
-
return _this;
|
|
416
355
|
}
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
356
|
+
render() {
|
|
357
|
+
let { props, state, context } = this;
|
|
358
|
+
let isScrollbarOnLeft = context.isRtl && common.getIsRtlScrollbarOnLeft();
|
|
359
|
+
let overcomeLeft = 0;
|
|
360
|
+
let overcomeRight = 0;
|
|
361
|
+
let overcomeBottom = 0;
|
|
423
362
|
if (props.overflowX === 'scroll-hidden') {
|
|
424
363
|
overcomeBottom = state.xScrollbarWidth;
|
|
425
364
|
}
|
|
@@ -437,54 +376,49 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
437
376
|
common.createElement(common.Scroller, { ref: this.handleScroller, elRef: this.props.scrollerElRef, overflowX: props.overflowX === 'scroll-hidden' ? 'scroll' : props.overflowX, overflowY: props.overflowY === 'scroll-hidden' ? 'scroll' : props.overflowY, overcomeLeft: overcomeLeft, overcomeRight: overcomeRight, overcomeBottom: overcomeBottom, maxHeight: typeof props.maxHeight === 'number'
|
|
438
377
|
? (props.maxHeight + (props.overflowX === 'scroll-hidden' ? state.xScrollbarWidth : 0))
|
|
439
378
|
: '', liquid: props.liquid, liquidIsAbsolute: true }, props.children)));
|
|
440
|
-
}
|
|
441
|
-
|
|
379
|
+
}
|
|
380
|
+
componentDidMount() {
|
|
442
381
|
this.handleSizing();
|
|
443
382
|
this.context.addResizeHandler(this.handleSizing);
|
|
444
|
-
}
|
|
445
|
-
|
|
383
|
+
}
|
|
384
|
+
componentDidUpdate(prevProps) {
|
|
446
385
|
if (!common.isPropsEqual(prevProps, this.props)) { // an external change?
|
|
447
386
|
this.handleSizing();
|
|
448
387
|
}
|
|
449
|
-
}
|
|
450
|
-
|
|
388
|
+
}
|
|
389
|
+
componentWillUnmount() {
|
|
451
390
|
this.context.removeResizeHandler(this.handleSizing);
|
|
452
|
-
}
|
|
453
|
-
|
|
391
|
+
}
|
|
392
|
+
needsXScrolling() {
|
|
454
393
|
return this.scroller.needsXScrolling();
|
|
455
|
-
}
|
|
456
|
-
|
|
394
|
+
}
|
|
395
|
+
needsYScrolling() {
|
|
457
396
|
return this.scroller.needsYScrolling();
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
}(common.BaseComponent));
|
|
397
|
+
}
|
|
398
|
+
}
|
|
461
399
|
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
var _this = this;
|
|
400
|
+
class ScrollSyncer {
|
|
401
|
+
constructor(isVertical, scrollEls) {
|
|
465
402
|
this.isVertical = isVertical;
|
|
466
403
|
this.scrollEls = scrollEls;
|
|
467
404
|
this.isPaused = false;
|
|
468
|
-
this.scrollListeners = scrollEls.map(
|
|
405
|
+
this.scrollListeners = scrollEls.map((el) => this.bindScroller(el));
|
|
469
406
|
}
|
|
470
|
-
|
|
471
|
-
for (
|
|
472
|
-
var scrollListener = _a[_i];
|
|
407
|
+
destroy() {
|
|
408
|
+
for (let scrollListener of this.scrollListeners) {
|
|
473
409
|
scrollListener.destroy();
|
|
474
410
|
}
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
_this.assignMaster(el);
|
|
411
|
+
}
|
|
412
|
+
bindScroller(el) {
|
|
413
|
+
let { scrollEls, isVertical } = this;
|
|
414
|
+
let scrollListener = new ScrollListener(el);
|
|
415
|
+
const onScroll = (isWheel, isTouch) => {
|
|
416
|
+
if (!this.isPaused) {
|
|
417
|
+
if (!this.masterEl || (this.masterEl !== el && (isWheel || isTouch))) {
|
|
418
|
+
this.assignMaster(el);
|
|
484
419
|
}
|
|
485
|
-
if (
|
|
486
|
-
for (
|
|
487
|
-
var otherEl = scrollEls_1[_i];
|
|
420
|
+
if (this.masterEl === el) { // dealing with current
|
|
421
|
+
for (let otherEl of scrollEls) {
|
|
488
422
|
if (otherEl !== el) {
|
|
489
423
|
if (isVertical) {
|
|
490
424
|
otherEl.scrollTop = el.scrollTop;
|
|
@@ -497,72 +431,64 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
497
431
|
}
|
|
498
432
|
}
|
|
499
433
|
};
|
|
500
|
-
|
|
501
|
-
if (
|
|
502
|
-
|
|
434
|
+
const onScrollEnd = () => {
|
|
435
|
+
if (this.masterEl === el) {
|
|
436
|
+
this.masterEl = null;
|
|
503
437
|
}
|
|
504
438
|
};
|
|
505
439
|
scrollListener.emitter.on('scroll', onScroll);
|
|
506
440
|
scrollListener.emitter.on('scrollEnd', onScrollEnd);
|
|
507
441
|
return scrollListener;
|
|
508
|
-
}
|
|
509
|
-
|
|
442
|
+
}
|
|
443
|
+
assignMaster(el) {
|
|
510
444
|
this.masterEl = el;
|
|
511
|
-
for (
|
|
512
|
-
var scrollListener = _a[_i];
|
|
445
|
+
for (let scrollListener of this.scrollListeners) {
|
|
513
446
|
if (scrollListener.el !== el) {
|
|
514
447
|
scrollListener.endScroll(); // to prevent residual scrolls from reclaiming master
|
|
515
448
|
}
|
|
516
449
|
}
|
|
517
|
-
}
|
|
450
|
+
}
|
|
518
451
|
/*
|
|
519
452
|
will normalize the scrollLeft value
|
|
520
453
|
*/
|
|
521
|
-
|
|
454
|
+
forceScrollLeft(scrollLeft) {
|
|
522
455
|
this.isPaused = true;
|
|
523
|
-
for (
|
|
524
|
-
var listener = _a[_i];
|
|
456
|
+
for (let listener of this.scrollListeners) {
|
|
525
457
|
setScrollFromLeftEdge(listener.el, scrollLeft);
|
|
526
458
|
}
|
|
527
459
|
this.isPaused = false;
|
|
528
|
-
}
|
|
529
|
-
|
|
460
|
+
}
|
|
461
|
+
forceScrollTop(top) {
|
|
530
462
|
this.isPaused = true;
|
|
531
|
-
for (
|
|
532
|
-
var listener = _a[_i];
|
|
463
|
+
for (let listener of this.scrollListeners) {
|
|
533
464
|
listener.el.scrollTop = top;
|
|
534
465
|
}
|
|
535
466
|
this.isPaused = false;
|
|
536
|
-
}
|
|
537
|
-
|
|
538
|
-
}());
|
|
467
|
+
}
|
|
468
|
+
}
|
|
539
469
|
|
|
540
470
|
/*
|
|
541
471
|
TODO: make <ScrollGridSection> subcomponent
|
|
542
472
|
NOTE: doesn't support collapsibleWidth (which is sortof a hack anyway)
|
|
543
473
|
*/
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
_this.clippedScrollerRefs = new common.RefMap();
|
|
474
|
+
class ScrollGrid extends common.BaseComponent {
|
|
475
|
+
constructor() {
|
|
476
|
+
super(...arguments);
|
|
477
|
+
this.compileColGroupStats = common.memoizeArraylike(compileColGroupStat, isColGroupStatsEqual);
|
|
478
|
+
this.renderMicroColGroups = common.memoizeArraylike(common.renderMicroColGroup); // yucky to memoize VNodes, but much more efficient for consumers
|
|
479
|
+
this.clippedScrollerRefs = new common.RefMap();
|
|
551
480
|
// doesn't hold non-scrolling els used just for padding
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
_this.stickyScrollings = [];
|
|
558
|
-
_this.scrollSyncersBySection = {};
|
|
559
|
-
_this.scrollSyncersByColumn = {};
|
|
481
|
+
this.scrollerElRefs = new common.RefMap(this._handleScrollerEl.bind(this));
|
|
482
|
+
this.chunkElRefs = new common.RefMap(this._handleChunkEl.bind(this));
|
|
483
|
+
this.stickyScrollings = [];
|
|
484
|
+
this.scrollSyncersBySection = {};
|
|
485
|
+
this.scrollSyncersByColumn = {};
|
|
560
486
|
// for row-height-syncing
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
487
|
+
this.rowUnstableMap = new Map(); // no need to groom. always self-cancels
|
|
488
|
+
this.rowInnerMaxHeightMap = new Map();
|
|
489
|
+
this.anyRowHeightsChanged = false;
|
|
490
|
+
this.recentSizingCnt = 0;
|
|
491
|
+
this.state = {
|
|
566
492
|
shrinkWidths: [],
|
|
567
493
|
forceYScrollbars: false,
|
|
568
494
|
forceXScrollbars: false,
|
|
@@ -570,61 +496,60 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
570
496
|
scrollerClientHeights: {},
|
|
571
497
|
sectionRowMaxHeights: [],
|
|
572
498
|
};
|
|
573
|
-
|
|
574
|
-
if (!
|
|
499
|
+
this.handleSizing = (isForcedResize, sectionRowMaxHeightsChanged) => {
|
|
500
|
+
if (!this.allowSizing()) {
|
|
575
501
|
return;
|
|
576
502
|
}
|
|
577
503
|
if (!sectionRowMaxHeightsChanged) { // something else changed, probably external
|
|
578
|
-
|
|
504
|
+
this.anyRowHeightsChanged = true;
|
|
579
505
|
}
|
|
580
|
-
|
|
506
|
+
let otherState = {};
|
|
581
507
|
// if reacting to self-change of sectionRowMaxHeightsChanged, or not stable, don't do anything
|
|
582
|
-
if (isForcedResize || (!sectionRowMaxHeightsChanged && !
|
|
583
|
-
otherState.sectionRowMaxHeights =
|
|
508
|
+
if (isForcedResize || (!sectionRowMaxHeightsChanged && !this.rowUnstableMap.size)) {
|
|
509
|
+
otherState.sectionRowMaxHeights = this.computeSectionRowMaxHeights();
|
|
584
510
|
}
|
|
585
|
-
|
|
586
|
-
if (!
|
|
587
|
-
|
|
511
|
+
this.setState(Object.assign(Object.assign({ shrinkWidths: this.computeShrinkWidths() }, this.computeScrollerDims()), otherState), () => {
|
|
512
|
+
if (!this.rowUnstableMap.size) {
|
|
513
|
+
this.updateStickyScrolling(); // needs to happen AFTER final positioning committed to DOM
|
|
588
514
|
}
|
|
589
515
|
});
|
|
590
516
|
};
|
|
591
|
-
|
|
592
|
-
|
|
517
|
+
this.handleRowHeightChange = (rowEl, isStable) => {
|
|
518
|
+
let { rowUnstableMap, rowInnerMaxHeightMap } = this;
|
|
593
519
|
if (!isStable) {
|
|
594
520
|
rowUnstableMap.set(rowEl, true);
|
|
595
521
|
}
|
|
596
522
|
else {
|
|
597
523
|
rowUnstableMap.delete(rowEl);
|
|
598
|
-
|
|
524
|
+
let innerMaxHeight = getRowInnerMaxHeight(rowEl);
|
|
599
525
|
if (!rowInnerMaxHeightMap.has(rowEl) || rowInnerMaxHeightMap.get(rowEl) !== innerMaxHeight) {
|
|
600
526
|
rowInnerMaxHeightMap.set(rowEl, innerMaxHeight);
|
|
601
|
-
|
|
527
|
+
this.anyRowHeightsChanged = true;
|
|
602
528
|
}
|
|
603
|
-
if (!rowUnstableMap.size &&
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
sectionRowMaxHeights:
|
|
529
|
+
if (!rowUnstableMap.size && this.anyRowHeightsChanged) {
|
|
530
|
+
this.anyRowHeightsChanged = false;
|
|
531
|
+
this.setState({
|
|
532
|
+
sectionRowMaxHeights: this.computeSectionRowMaxHeights(),
|
|
607
533
|
});
|
|
608
534
|
}
|
|
609
535
|
}
|
|
610
536
|
};
|
|
611
|
-
return _this;
|
|
612
537
|
}
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
538
|
+
render() {
|
|
539
|
+
let { props, state, context } = this;
|
|
540
|
+
let { shrinkWidths } = state;
|
|
541
|
+
let colGroupStats = this.compileColGroupStats(props.colGroups.map((colGroup) => [colGroup]));
|
|
542
|
+
let microColGroupNodes = this.renderMicroColGroups(colGroupStats.map((stat, i) => [stat.cols, shrinkWidths[i]]));
|
|
543
|
+
let classNames = common.getScrollGridClassNames(props.liquid, context);
|
|
544
|
+
this.getDims();
|
|
620
545
|
// TODO: make DRY
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
546
|
+
let sectionConfigs = props.sections;
|
|
547
|
+
let configCnt = sectionConfigs.length;
|
|
548
|
+
let configI = 0;
|
|
549
|
+
let currentConfig;
|
|
550
|
+
let headSectionNodes = [];
|
|
551
|
+
let bodySectionNodes = [];
|
|
552
|
+
let footSectionNodes = [];
|
|
628
553
|
while (configI < configCnt && (currentConfig = sectionConfigs[configI]).type === 'header') {
|
|
629
554
|
headSectionNodes.push(this.renderSection(currentConfig, configI, colGroupStats, microColGroupNodes, state.sectionRowMaxHeights, true));
|
|
630
555
|
configI += 1;
|
|
@@ -637,53 +562,52 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
637
562
|
footSectionNodes.push(this.renderSection(currentConfig, configI, colGroupStats, microColGroupNodes, state.sectionRowMaxHeights, true));
|
|
638
563
|
configI += 1;
|
|
639
564
|
}
|
|
640
|
-
|
|
641
|
-
|
|
565
|
+
const isBuggy = !common.getCanVGrowWithinCell(); // see NOTE in SimpleScrollGrid
|
|
566
|
+
const roleAttrs = { role: 'rowgroup' };
|
|
642
567
|
return common.createElement('table', {
|
|
643
568
|
ref: props.elRef,
|
|
644
569
|
role: 'grid',
|
|
645
570
|
className: classNames.join(' '),
|
|
646
|
-
}, renderMacroColGroup(colGroupStats, shrinkWidths), Boolean(!isBuggy && headSectionNodes.length) && common.createElement
|
|
647
|
-
}
|
|
648
|
-
|
|
649
|
-
var _this = this;
|
|
571
|
+
}, renderMacroColGroup(colGroupStats, shrinkWidths), Boolean(!isBuggy && headSectionNodes.length) && common.createElement('thead', roleAttrs, ...headSectionNodes), Boolean(!isBuggy && bodySectionNodes.length) && common.createElement('tbody', roleAttrs, ...bodySectionNodes), Boolean(!isBuggy && footSectionNodes.length) && common.createElement('tfoot', roleAttrs, ...footSectionNodes), isBuggy && common.createElement('tbody', roleAttrs, ...headSectionNodes, ...bodySectionNodes, ...footSectionNodes));
|
|
572
|
+
}
|
|
573
|
+
renderSection(sectionConfig, sectionIndex, colGroupStats, microColGroupNodes, sectionRowMaxHeights, isHeader) {
|
|
650
574
|
if ('outerContent' in sectionConfig) {
|
|
651
575
|
return (common.createElement(common.Fragment, { key: sectionConfig.key }, sectionConfig.outerContent));
|
|
652
576
|
}
|
|
653
|
-
return (common.createElement("tr", { key: sectionConfig.key, role: "presentation", className: common.getSectionClassNames(sectionConfig, this.props.liquid).join(' ') }, sectionConfig.chunks.map(
|
|
654
|
-
}
|
|
655
|
-
|
|
577
|
+
return (common.createElement("tr", { key: sectionConfig.key, role: "presentation", className: common.getSectionClassNames(sectionConfig, this.props.liquid).join(' ') }, sectionConfig.chunks.map((chunkConfig, i) => this.renderChunk(sectionConfig, sectionIndex, colGroupStats[i], microColGroupNodes[i], chunkConfig, i, (sectionRowMaxHeights[sectionIndex] || [])[i] || [], isHeader))));
|
|
578
|
+
}
|
|
579
|
+
renderChunk(sectionConfig, sectionIndex, colGroupStat, microColGroupNode, chunkConfig, chunkIndex, rowHeights, isHeader) {
|
|
656
580
|
if ('outerContent' in chunkConfig) {
|
|
657
581
|
return (common.createElement(common.Fragment, { key: chunkConfig.key }, chunkConfig.outerContent));
|
|
658
582
|
}
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
583
|
+
let { state } = this;
|
|
584
|
+
let { scrollerClientWidths, scrollerClientHeights } = state;
|
|
585
|
+
let [sectionCnt, chunksPerSection] = this.getDims();
|
|
586
|
+
let index = sectionIndex * chunksPerSection + chunkIndex;
|
|
587
|
+
let sideScrollIndex = (!this.context.isRtl || common.getIsRtlScrollbarOnLeft()) ? chunksPerSection - 1 : 0;
|
|
588
|
+
let isVScrollSide = chunkIndex === sideScrollIndex;
|
|
589
|
+
let isLastSection = sectionIndex === sectionCnt - 1;
|
|
590
|
+
let forceXScrollbars = isLastSection && state.forceXScrollbars; // NOOOO can result in `null`
|
|
591
|
+
let forceYScrollbars = isVScrollSide && state.forceYScrollbars; // NOOOO can result in `null`
|
|
592
|
+
let allowXScrolling = colGroupStat && colGroupStat.allowXScrolling; // rename?
|
|
593
|
+
let allowYScrolling = common.getAllowYScrolling(this.props, sectionConfig); // rename? do in section func?
|
|
594
|
+
let chunkVGrow = common.getSectionHasLiquidHeight(this.props, sectionConfig); // do in section func?
|
|
595
|
+
let expandRows = sectionConfig.expandRows && chunkVGrow;
|
|
596
|
+
let tableMinWidth = (colGroupStat && colGroupStat.totalColMinWidth) || '';
|
|
597
|
+
let content = common.renderChunkContent(sectionConfig, chunkConfig, {
|
|
674
598
|
tableColGroupNode: microColGroupNode,
|
|
675
|
-
tableMinWidth
|
|
599
|
+
tableMinWidth,
|
|
676
600
|
clientWidth: scrollerClientWidths[index] !== undefined ? scrollerClientWidths[index] : null,
|
|
677
601
|
clientHeight: scrollerClientHeights[index] !== undefined ? scrollerClientHeights[index] : null,
|
|
678
|
-
expandRows
|
|
602
|
+
expandRows,
|
|
679
603
|
syncRowHeights: Boolean(sectionConfig.syncRowHeights),
|
|
680
604
|
rowSyncHeights: rowHeights,
|
|
681
605
|
reportRowHeightChange: this.handleRowHeightChange,
|
|
682
606
|
}, isHeader);
|
|
683
|
-
|
|
607
|
+
let overflowX = forceXScrollbars ? (isLastSection ? 'scroll' : 'scroll-hidden') :
|
|
684
608
|
!allowXScrolling ? 'hidden' :
|
|
685
609
|
(isLastSection ? 'auto' : 'scroll-hidden');
|
|
686
|
-
|
|
610
|
+
let overflowY = forceYScrollbars ? (isVScrollSide ? 'scroll' : 'scroll-hidden') :
|
|
687
611
|
!allowYScrolling ? 'hidden' :
|
|
688
612
|
(isVScrollSide ? 'auto' : 'scroll-hidden');
|
|
689
613
|
// it *could* be possible to reduce DOM wrappers by only doing a ClippedScroller when allowXScrolling or allowYScrolling,
|
|
@@ -694,24 +618,27 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
694
618
|
ref: this.chunkElRefs.createRef(index),
|
|
695
619
|
role: 'presentation',
|
|
696
620
|
}, content);
|
|
697
|
-
}
|
|
698
|
-
|
|
621
|
+
}
|
|
622
|
+
componentDidMount() {
|
|
623
|
+
this.getStickyScrolling = common.memoizeArraylike(initStickyScrolling, null, destroyStickyScrolling);
|
|
624
|
+
this.getScrollSyncersBySection = common.memoizeHashlike(initScrollSyncer.bind(this, true), null, destroyScrollSyncer);
|
|
625
|
+
this.getScrollSyncersByColumn = common.memoizeHashlike(initScrollSyncer.bind(this, false), null, destroyScrollSyncer);
|
|
699
626
|
this.updateScrollSyncers();
|
|
700
627
|
this.handleSizing(false);
|
|
701
628
|
this.context.addResizeHandler(this.handleSizing);
|
|
702
|
-
}
|
|
703
|
-
|
|
629
|
+
}
|
|
630
|
+
componentDidUpdate(prevProps, prevState) {
|
|
704
631
|
this.updateScrollSyncers();
|
|
705
632
|
// TODO: need better solution when state contains non-sizing things
|
|
706
633
|
this.handleSizing(false, prevState.sectionRowMaxHeights !== this.state.sectionRowMaxHeights);
|
|
707
|
-
}
|
|
708
|
-
|
|
634
|
+
}
|
|
635
|
+
componentWillUnmount() {
|
|
709
636
|
this.context.removeResizeHandler(this.handleSizing);
|
|
710
637
|
this.destroyStickyScrolling();
|
|
711
638
|
this.destroyScrollSyncers();
|
|
712
|
-
}
|
|
713
|
-
|
|
714
|
-
|
|
639
|
+
}
|
|
640
|
+
allowSizing() {
|
|
641
|
+
let now = new Date();
|
|
715
642
|
if (!this.lastSizingDate ||
|
|
716
643
|
now.valueOf() > this.lastSizingDate.valueOf() + common.config.SCROLLGRID_RESIZE_INTERVAL) {
|
|
717
644
|
this.lastSizingDate = now;
|
|
@@ -719,39 +646,38 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
719
646
|
return true;
|
|
720
647
|
}
|
|
721
648
|
return (this.recentSizingCnt += 1) <= 10;
|
|
722
|
-
}
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
colGroupStats.forEach(function (colGroupStat, i) {
|
|
649
|
+
}
|
|
650
|
+
computeShrinkWidths() {
|
|
651
|
+
let colGroupStats = this.compileColGroupStats(this.props.colGroups.map((colGroup) => [colGroup]));
|
|
652
|
+
let [sectionCnt, chunksPerSection] = this.getDims();
|
|
653
|
+
let cnt = sectionCnt * chunksPerSection;
|
|
654
|
+
let shrinkWidths = [];
|
|
655
|
+
colGroupStats.forEach((colGroupStat, i) => {
|
|
730
656
|
if (colGroupStat.hasShrinkCol) {
|
|
731
|
-
|
|
657
|
+
let chunkEls = this.chunkElRefs.collect(i, cnt, chunksPerSection); // in one col
|
|
732
658
|
shrinkWidths[i] = common.computeShrinkWidth(chunkEls);
|
|
733
659
|
}
|
|
734
660
|
});
|
|
735
661
|
return shrinkWidths;
|
|
736
|
-
}
|
|
662
|
+
}
|
|
737
663
|
// has the side effect of grooming rowInnerMaxHeightMap
|
|
738
664
|
// TODO: somehow short-circuit if there are no new height changes
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
for (
|
|
744
|
-
|
|
745
|
-
|
|
665
|
+
computeSectionRowMaxHeights() {
|
|
666
|
+
let newHeightMap = new Map();
|
|
667
|
+
let [sectionCnt, chunksPerSection] = this.getDims();
|
|
668
|
+
let sectionRowMaxHeights = [];
|
|
669
|
+
for (let sectionI = 0; sectionI < sectionCnt; sectionI += 1) {
|
|
670
|
+
let sectionConfig = this.props.sections[sectionI];
|
|
671
|
+
let assignableHeights = []; // chunk, row
|
|
746
672
|
if (sectionConfig && sectionConfig.syncRowHeights) {
|
|
747
|
-
|
|
748
|
-
for (
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
673
|
+
let rowHeightsByChunk = [];
|
|
674
|
+
for (let chunkI = 0; chunkI < chunksPerSection; chunkI += 1) {
|
|
675
|
+
let index = sectionI * chunksPerSection + chunkI;
|
|
676
|
+
let rowHeights = [];
|
|
677
|
+
let chunkEl = this.chunkElRefs.currentMap[index];
|
|
752
678
|
if (chunkEl) {
|
|
753
|
-
rowHeights = common.findElements(chunkEl, '.fc-scrollgrid-sync-table tr').map(
|
|
754
|
-
|
|
679
|
+
rowHeights = common.findElements(chunkEl, '.fc-scrollgrid-sync-table tr').map((rowEl) => {
|
|
680
|
+
let max = getRowInnerMaxHeight(rowEl);
|
|
755
681
|
newHeightMap.set(rowEl, max);
|
|
756
682
|
return max;
|
|
757
683
|
});
|
|
@@ -761,30 +687,30 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
761
687
|
}
|
|
762
688
|
rowHeightsByChunk.push(rowHeights);
|
|
763
689
|
}
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
for (
|
|
767
|
-
|
|
690
|
+
let rowCnt = rowHeightsByChunk[0].length;
|
|
691
|
+
let isEqualRowCnt = true;
|
|
692
|
+
for (let chunkI = 1; chunkI < chunksPerSection; chunkI += 1) {
|
|
693
|
+
let isOuterContent = sectionConfig.chunks[chunkI] && sectionConfig.chunks[chunkI].outerContent !== undefined; // can be null
|
|
768
694
|
if (!isOuterContent && rowHeightsByChunk[chunkI].length !== rowCnt) { // skip outer content
|
|
769
695
|
isEqualRowCnt = false;
|
|
770
696
|
break;
|
|
771
697
|
}
|
|
772
698
|
}
|
|
773
699
|
if (!isEqualRowCnt) {
|
|
774
|
-
|
|
775
|
-
for (
|
|
700
|
+
let chunkHeightSums = [];
|
|
701
|
+
for (let chunkI = 0; chunkI < chunksPerSection; chunkI += 1) {
|
|
776
702
|
chunkHeightSums.push(sumNumbers(rowHeightsByChunk[chunkI]) + rowHeightsByChunk[chunkI].length);
|
|
777
703
|
}
|
|
778
|
-
|
|
779
|
-
for (
|
|
780
|
-
|
|
781
|
-
|
|
704
|
+
let maxTotalSum = Math.max(...chunkHeightSums);
|
|
705
|
+
for (let chunkI = 0; chunkI < chunksPerSection; chunkI += 1) {
|
|
706
|
+
let rowInChunkCnt = rowHeightsByChunk[chunkI].length;
|
|
707
|
+
let rowInChunkTotalHeight = maxTotalSum - rowInChunkCnt; // subtract border
|
|
782
708
|
// height of non-first row. we do this to avoid rounding, because it's unreliable within a table
|
|
783
|
-
|
|
709
|
+
let rowInChunkHeightOthers = Math.floor(rowInChunkTotalHeight / rowInChunkCnt);
|
|
784
710
|
// whatever is leftover goes to the first row
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
711
|
+
let rowInChunkHeightFirst = rowInChunkTotalHeight - rowInChunkHeightOthers * (rowInChunkCnt - 1);
|
|
712
|
+
let rowInChunkHeights = [];
|
|
713
|
+
let row = 0;
|
|
788
714
|
if (row < rowInChunkCnt) {
|
|
789
715
|
rowInChunkHeights.push(rowInChunkHeightFirst);
|
|
790
716
|
row += 1;
|
|
@@ -797,19 +723,19 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
797
723
|
}
|
|
798
724
|
}
|
|
799
725
|
else {
|
|
800
|
-
for (
|
|
726
|
+
for (let chunkI = 0; chunkI < chunksPerSection; chunkI += 1) {
|
|
801
727
|
assignableHeights.push([]);
|
|
802
728
|
}
|
|
803
|
-
for (
|
|
804
|
-
|
|
805
|
-
for (
|
|
806
|
-
|
|
729
|
+
for (let row = 0; row < rowCnt; row += 1) {
|
|
730
|
+
let rowHeightsAcrossChunks = [];
|
|
731
|
+
for (let chunkI = 0; chunkI < chunksPerSection; chunkI += 1) {
|
|
732
|
+
let h = rowHeightsByChunk[chunkI][row];
|
|
807
733
|
if (h != null) { // protect against outerContent
|
|
808
734
|
rowHeightsAcrossChunks.push(h);
|
|
809
735
|
}
|
|
810
736
|
}
|
|
811
|
-
|
|
812
|
-
for (
|
|
737
|
+
let maxHeight = Math.max(...rowHeightsAcrossChunks);
|
|
738
|
+
for (let chunkI = 0; chunkI < chunksPerSection; chunkI += 1) {
|
|
813
739
|
assignableHeights[chunkI].push(maxHeight);
|
|
814
740
|
}
|
|
815
741
|
}
|
|
@@ -819,41 +745,41 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
819
745
|
}
|
|
820
746
|
this.rowInnerMaxHeightMap = newHeightMap;
|
|
821
747
|
return sectionRowMaxHeights;
|
|
822
|
-
}
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
for (
|
|
835
|
-
|
|
836
|
-
|
|
748
|
+
}
|
|
749
|
+
computeScrollerDims() {
|
|
750
|
+
let scrollbarWidth = common.getScrollbarWidths();
|
|
751
|
+
let [sectionCnt, chunksPerSection] = this.getDims();
|
|
752
|
+
let sideScrollI = (!this.context.isRtl || common.getIsRtlScrollbarOnLeft()) ? chunksPerSection - 1 : 0;
|
|
753
|
+
let lastSectionI = sectionCnt - 1;
|
|
754
|
+
let currentScrollers = this.clippedScrollerRefs.currentMap;
|
|
755
|
+
let scrollerEls = this.scrollerElRefs.currentMap;
|
|
756
|
+
let forceYScrollbars = false;
|
|
757
|
+
let forceXScrollbars = false;
|
|
758
|
+
let scrollerClientWidths = {};
|
|
759
|
+
let scrollerClientHeights = {};
|
|
760
|
+
for (let sectionI = 0; sectionI < sectionCnt; sectionI += 1) { // along edge
|
|
761
|
+
let index = sectionI * chunksPerSection + sideScrollI;
|
|
762
|
+
let scroller = currentScrollers[index];
|
|
837
763
|
if (scroller && scroller.needsYScrolling()) {
|
|
838
764
|
forceYScrollbars = true;
|
|
839
765
|
break;
|
|
840
766
|
}
|
|
841
767
|
}
|
|
842
|
-
for (
|
|
843
|
-
|
|
844
|
-
|
|
768
|
+
for (let chunkI = 0; chunkI < chunksPerSection; chunkI += 1) { // along last row
|
|
769
|
+
let index = lastSectionI * chunksPerSection + chunkI;
|
|
770
|
+
let scroller = currentScrollers[index];
|
|
845
771
|
if (scroller && scroller.needsXScrolling()) {
|
|
846
772
|
forceXScrollbars = true;
|
|
847
773
|
break;
|
|
848
774
|
}
|
|
849
775
|
}
|
|
850
|
-
for (
|
|
851
|
-
for (
|
|
852
|
-
|
|
853
|
-
|
|
776
|
+
for (let sectionI = 0; sectionI < sectionCnt; sectionI += 1) {
|
|
777
|
+
for (let chunkI = 0; chunkI < chunksPerSection; chunkI += 1) {
|
|
778
|
+
let index = sectionI * chunksPerSection + chunkI;
|
|
779
|
+
let scrollerEl = scrollerEls[index];
|
|
854
780
|
if (scrollerEl) {
|
|
855
781
|
// TODO: weird way to get this. need harness b/c doesn't include table borders
|
|
856
|
-
|
|
782
|
+
let harnessEl = scrollerEl.parentNode;
|
|
857
783
|
scrollerClientWidths[index] = Math.floor(harnessEl.getBoundingClientRect().width - ((chunkI === sideScrollI && forceYScrollbars)
|
|
858
784
|
? scrollbarWidth.y // use global because scroller might not have scrollbars yet but will need them in future
|
|
859
785
|
: 0));
|
|
@@ -863,94 +789,92 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
863
789
|
}
|
|
864
790
|
}
|
|
865
791
|
}
|
|
866
|
-
return { forceYScrollbars
|
|
867
|
-
}
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
stickyScrollings.forEach(
|
|
792
|
+
return { forceYScrollbars, forceXScrollbars, scrollerClientWidths, scrollerClientHeights };
|
|
793
|
+
}
|
|
794
|
+
updateStickyScrolling() {
|
|
795
|
+
let { isRtl } = this.context;
|
|
796
|
+
let argsByKey = this.scrollerElRefs.getAll().map((scrollEl) => [scrollEl, isRtl]);
|
|
797
|
+
let stickyScrollings = this.getStickyScrolling(argsByKey);
|
|
798
|
+
stickyScrollings.forEach((stickyScrolling) => stickyScrolling.updateSize());
|
|
873
799
|
this.stickyScrollings = stickyScrollings;
|
|
874
|
-
}
|
|
875
|
-
|
|
800
|
+
}
|
|
801
|
+
destroyStickyScrolling() {
|
|
876
802
|
this.stickyScrollings.forEach(destroyStickyScrolling);
|
|
877
|
-
}
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
for (
|
|
885
|
-
|
|
886
|
-
|
|
803
|
+
}
|
|
804
|
+
updateScrollSyncers() {
|
|
805
|
+
let [sectionCnt, chunksPerSection] = this.getDims();
|
|
806
|
+
let cnt = sectionCnt * chunksPerSection;
|
|
807
|
+
let scrollElsBySection = {};
|
|
808
|
+
let scrollElsByColumn = {};
|
|
809
|
+
let scrollElMap = this.scrollerElRefs.currentMap;
|
|
810
|
+
for (let sectionI = 0; sectionI < sectionCnt; sectionI += 1) {
|
|
811
|
+
let startIndex = sectionI * chunksPerSection;
|
|
812
|
+
let endIndex = startIndex + chunksPerSection;
|
|
887
813
|
scrollElsBySection[sectionI] = common.collectFromHash(scrollElMap, startIndex, endIndex, 1); // use the filtered
|
|
888
814
|
}
|
|
889
|
-
for (
|
|
815
|
+
for (let col = 0; col < chunksPerSection; col += 1) {
|
|
890
816
|
scrollElsByColumn[col] = this.scrollerElRefs.collect(col, cnt, chunksPerSection); // DON'T use the filtered
|
|
891
817
|
}
|
|
892
818
|
this.scrollSyncersBySection = this.getScrollSyncersBySection(scrollElsBySection);
|
|
893
819
|
this.scrollSyncersByColumn = this.getScrollSyncersByColumn(scrollElsByColumn);
|
|
894
|
-
}
|
|
895
|
-
|
|
820
|
+
}
|
|
821
|
+
destroyScrollSyncers() {
|
|
896
822
|
common.mapHash(this.scrollSyncersBySection, destroyScrollSyncer);
|
|
897
823
|
common.mapHash(this.scrollSyncersByColumn, destroyScrollSyncer);
|
|
898
|
-
}
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
824
|
+
}
|
|
825
|
+
getChunkConfigByIndex(index) {
|
|
826
|
+
let chunksPerSection = this.getDims()[1];
|
|
827
|
+
let sectionI = Math.floor(index / chunksPerSection);
|
|
828
|
+
let chunkI = index % chunksPerSection;
|
|
829
|
+
let sectionConfig = this.props.sections[sectionI];
|
|
904
830
|
return sectionConfig && sectionConfig.chunks[chunkI];
|
|
905
|
-
}
|
|
906
|
-
|
|
907
|
-
|
|
831
|
+
}
|
|
832
|
+
forceScrollLeft(col, scrollLeft) {
|
|
833
|
+
let scrollSyncer = this.scrollSyncersByColumn[col];
|
|
908
834
|
if (scrollSyncer) {
|
|
909
835
|
scrollSyncer.forceScrollLeft(scrollLeft);
|
|
910
836
|
}
|
|
911
|
-
}
|
|
912
|
-
|
|
913
|
-
|
|
837
|
+
}
|
|
838
|
+
forceScrollTop(sectionI, scrollTop) {
|
|
839
|
+
let scrollSyncer = this.scrollSyncersBySection[sectionI];
|
|
914
840
|
if (scrollSyncer) {
|
|
915
841
|
scrollSyncer.forceScrollTop(scrollTop);
|
|
916
842
|
}
|
|
917
|
-
}
|
|
918
|
-
|
|
919
|
-
|
|
843
|
+
}
|
|
844
|
+
_handleChunkEl(chunkEl, key) {
|
|
845
|
+
let chunkConfig = this.getChunkConfigByIndex(parseInt(key, 10));
|
|
920
846
|
if (chunkConfig) { // null if section disappeared. bad, b/c won't null-set the elRef
|
|
921
847
|
common.setRef(chunkConfig.elRef, chunkEl);
|
|
922
848
|
}
|
|
923
|
-
}
|
|
924
|
-
|
|
925
|
-
|
|
849
|
+
}
|
|
850
|
+
_handleScrollerEl(scrollerEl, key) {
|
|
851
|
+
let chunkConfig = this.getChunkConfigByIndex(parseInt(key, 10));
|
|
926
852
|
if (chunkConfig) { // null if section disappeared. bad, b/c won't null-set the elRef
|
|
927
853
|
common.setRef(chunkConfig.scrollerElRef, scrollerEl);
|
|
928
854
|
}
|
|
929
|
-
}
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
855
|
+
}
|
|
856
|
+
getDims() {
|
|
857
|
+
let sectionCnt = this.props.sections.length;
|
|
858
|
+
let chunksPerSection = sectionCnt ? this.props.sections[0].chunks.length : 0;
|
|
933
859
|
return [sectionCnt, chunksPerSection];
|
|
934
|
-
}
|
|
935
|
-
|
|
936
|
-
}(common.BaseComponent));
|
|
860
|
+
}
|
|
861
|
+
}
|
|
937
862
|
ScrollGrid.addStateEquality({
|
|
938
863
|
shrinkWidths: common.isArraysEqual,
|
|
939
864
|
scrollerClientWidths: common.isPropsEqual,
|
|
940
865
|
scrollerClientHeights: common.isPropsEqual,
|
|
941
866
|
});
|
|
942
867
|
function sumNumbers(numbers) {
|
|
943
|
-
|
|
944
|
-
for (
|
|
945
|
-
var n = numbers_1[_i];
|
|
868
|
+
let sum = 0;
|
|
869
|
+
for (let n of numbers) {
|
|
946
870
|
sum += n;
|
|
947
871
|
}
|
|
948
872
|
return sum;
|
|
949
873
|
}
|
|
950
874
|
function getRowInnerMaxHeight(rowEl) {
|
|
951
|
-
|
|
875
|
+
let innerHeights = common.findElements(rowEl, '.fc-scrollgrid-sync-inner').map(getElHeight);
|
|
952
876
|
if (innerHeights.length) {
|
|
953
|
-
return Math.max
|
|
877
|
+
return Math.max(...innerHeights);
|
|
954
878
|
}
|
|
955
879
|
return 0;
|
|
956
880
|
}
|
|
@@ -958,53 +882,48 @@ var FullCalendarScrollGrid = (function (exports, common, premiumCommonPlugin) {
|
|
|
958
882
|
return el.offsetHeight; // better to deal with integers, for rounding, for PureComponent
|
|
959
883
|
}
|
|
960
884
|
function renderMacroColGroup(colGroupStats, shrinkWidths) {
|
|
961
|
-
|
|
962
|
-
|
|
885
|
+
let children = colGroupStats.map((colGroupStat, i) => {
|
|
886
|
+
let width = colGroupStat.width;
|
|
963
887
|
if (width === 'shrink') {
|
|
964
888
|
width = colGroupStat.totalColWidth + common.sanitizeShrinkWidth(shrinkWidths[i]) + 1; // +1 for border :(
|
|
965
889
|
}
|
|
966
890
|
return ( // eslint-disable-next-line react/jsx-key
|
|
967
|
-
common.createElement("col", { style: { width
|
|
891
|
+
common.createElement("col", { style: { width } }));
|
|
968
892
|
});
|
|
969
|
-
return common.createElement
|
|
893
|
+
return common.createElement('colgroup', {}, ...children);
|
|
970
894
|
}
|
|
971
895
|
function compileColGroupStat(colGroupConfig) {
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
896
|
+
let totalColWidth = sumColProp(colGroupConfig.cols, 'width'); // excludes "shrink"
|
|
897
|
+
let totalColMinWidth = sumColProp(colGroupConfig.cols, 'minWidth');
|
|
898
|
+
let hasShrinkCol = common.hasShrinkWidth(colGroupConfig.cols);
|
|
899
|
+
let allowXScrolling = colGroupConfig.width !== 'shrink' && Boolean(totalColWidth || totalColMinWidth || hasShrinkCol);
|
|
976
900
|
return {
|
|
977
|
-
hasShrinkCol
|
|
978
|
-
totalColWidth
|
|
979
|
-
totalColMinWidth
|
|
980
|
-
allowXScrolling
|
|
901
|
+
hasShrinkCol,
|
|
902
|
+
totalColWidth,
|
|
903
|
+
totalColMinWidth,
|
|
904
|
+
allowXScrolling,
|
|
981
905
|
cols: colGroupConfig.cols,
|
|
982
906
|
width: colGroupConfig.width,
|
|
983
907
|
};
|
|
984
908
|
}
|
|
985
909
|
function sumColProp(cols, propName) {
|
|
986
|
-
|
|
987
|
-
for (
|
|
988
|
-
|
|
989
|
-
var val = col[propName];
|
|
910
|
+
let total = 0;
|
|
911
|
+
for (let col of cols) {
|
|
912
|
+
let val = col[propName];
|
|
990
913
|
if (typeof val === 'number') {
|
|
991
914
|
total += val * (col.span || 1);
|
|
992
915
|
}
|
|
993
916
|
}
|
|
994
917
|
return total;
|
|
995
918
|
}
|
|
996
|
-
|
|
919
|
+
const COL_GROUP_STAT_EQUALITY = {
|
|
997
920
|
cols: common.isColPropsEqual,
|
|
998
921
|
};
|
|
999
922
|
function isColGroupStatsEqual(stat0, stat1) {
|
|
1000
923
|
return common.compareObjs(stat0, stat1, COL_GROUP_STAT_EQUALITY);
|
|
1001
924
|
}
|
|
1002
925
|
// for memoizers...
|
|
1003
|
-
function initScrollSyncer(isVertical) {
|
|
1004
|
-
var scrollEls = [];
|
|
1005
|
-
for (var _i = 1; _i < arguments.length; _i++) {
|
|
1006
|
-
scrollEls[_i - 1] = arguments[_i];
|
|
1007
|
-
}
|
|
926
|
+
function initScrollSyncer(isVertical, ...scrollEls) {
|
|
1008
927
|
return new ScrollSyncer(isVertical, scrollEls);
|
|
1009
928
|
}
|
|
1010
929
|
function destroyScrollSyncer(scrollSyncer) {
|