@spscommerce/positioning 5.0.0-rc1 → 5.0.0
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/lib/index.cjs.js +1 -516
- package/lib/index.d.ts +4 -4
- package/lib/index.es.js +1063 -0
- package/lib/position-anchor.enum.d.ts +7 -7
- package/lib/position.enum.d.ts +18 -16
- package/lib/positioning-options.interface.d.ts +37 -29
- package/lib/positioning.service.d.ts +55 -50
- package/package.json +18 -15
- package/tsconfig.json +1 -1
- package/vite.config.js +20 -0
- package/lib/index.esm.js +0 -511
- package/lib/positioning.service.spec.d.ts +0 -1
package/lib/index.es.js
ADDED
|
@@ -0,0 +1,1063 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import { onNextTick, lockedToAnimationFrames } from "@spscommerce/utils";
|
|
21
|
+
var Position;
|
|
22
|
+
(function(Position2) {
|
|
23
|
+
Position2["TOP_LEFT"] = "top left";
|
|
24
|
+
Position2["TOP_MIDDLE"] = "top middle";
|
|
25
|
+
Position2["TOP_RIGHT"] = "top right";
|
|
26
|
+
Position2["RIGHT_TOP"] = "right top";
|
|
27
|
+
Position2["RIGHT_MIDDLE"] = "right middle";
|
|
28
|
+
Position2["RIGHT_BOTTOM"] = "right bottom";
|
|
29
|
+
Position2["BOTTOM_RIGHT"] = "bottom right";
|
|
30
|
+
Position2["BOTTOM_MIDDLE"] = "bottom middle";
|
|
31
|
+
Position2["BOTTOM_LEFT"] = "bottom left";
|
|
32
|
+
Position2["LEFT_BOTTOM"] = "left bottom";
|
|
33
|
+
Position2["LEFT_MIDDLE"] = "left middle";
|
|
34
|
+
Position2["LEFT_TOP"] = "left top";
|
|
35
|
+
})(Position || (Position = {}));
|
|
36
|
+
var PositionAnchor;
|
|
37
|
+
(function(PositionAnchor2) {
|
|
38
|
+
PositionAnchor2["TOP_LEFT"] = "top left";
|
|
39
|
+
PositionAnchor2["TOP_RIGHT"] = "top right";
|
|
40
|
+
PositionAnchor2["BOTTOM_LEFT"] = "bottom left";
|
|
41
|
+
PositionAnchor2["BOTTOM_RIGHT"] = "bottom right";
|
|
42
|
+
})(PositionAnchor || (PositionAnchor = {}));
|
|
43
|
+
const DEFAULT_POSITIONING_OPTIONS = {
|
|
44
|
+
anchor: PositionAnchor.TOP_LEFT,
|
|
45
|
+
offsets: [],
|
|
46
|
+
position: Position.TOP_LEFT
|
|
47
|
+
};
|
|
48
|
+
(function() {
|
|
49
|
+
if (typeof window !== "object") {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {
|
|
53
|
+
if (!("isIntersecting" in window.IntersectionObserverEntry.prototype)) {
|
|
54
|
+
Object.defineProperty(window.IntersectionObserverEntry.prototype, "isIntersecting", {
|
|
55
|
+
get: function() {
|
|
56
|
+
return this.intersectionRatio > 0;
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
function getFrameElement(doc) {
|
|
63
|
+
try {
|
|
64
|
+
return doc.defaultView && doc.defaultView.frameElement || null;
|
|
65
|
+
} catch (e) {
|
|
66
|
+
return null;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
var document2 = function(startDoc) {
|
|
70
|
+
var doc = startDoc;
|
|
71
|
+
var frame = getFrameElement(doc);
|
|
72
|
+
while (frame) {
|
|
73
|
+
doc = frame.ownerDocument;
|
|
74
|
+
frame = getFrameElement(doc);
|
|
75
|
+
}
|
|
76
|
+
return doc;
|
|
77
|
+
}(window.document);
|
|
78
|
+
var registry = [];
|
|
79
|
+
var crossOriginUpdater = null;
|
|
80
|
+
var crossOriginRect = null;
|
|
81
|
+
function IntersectionObserverEntry2(entry) {
|
|
82
|
+
this.time = entry.time;
|
|
83
|
+
this.target = entry.target;
|
|
84
|
+
this.rootBounds = ensureDOMRect(entry.rootBounds);
|
|
85
|
+
this.boundingClientRect = ensureDOMRect(entry.boundingClientRect);
|
|
86
|
+
this.intersectionRect = ensureDOMRect(entry.intersectionRect || getEmptyRect());
|
|
87
|
+
this.isIntersecting = !!entry.intersectionRect;
|
|
88
|
+
var targetRect = this.boundingClientRect;
|
|
89
|
+
var targetArea = targetRect.width * targetRect.height;
|
|
90
|
+
var intersectionRect = this.intersectionRect;
|
|
91
|
+
var intersectionArea = intersectionRect.width * intersectionRect.height;
|
|
92
|
+
if (targetArea) {
|
|
93
|
+
this.intersectionRatio = Number((intersectionArea / targetArea).toFixed(4));
|
|
94
|
+
} else {
|
|
95
|
+
this.intersectionRatio = this.isIntersecting ? 1 : 0;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
function IntersectionObserver2(callback, opt_options) {
|
|
99
|
+
var options = opt_options || {};
|
|
100
|
+
if (typeof callback != "function") {
|
|
101
|
+
throw new Error("callback must be a function");
|
|
102
|
+
}
|
|
103
|
+
if (options.root && options.root.nodeType != 1 && options.root.nodeType != 9) {
|
|
104
|
+
throw new Error("root must be a Document or Element");
|
|
105
|
+
}
|
|
106
|
+
this._checkForIntersections = throttle(this._checkForIntersections.bind(this), this.THROTTLE_TIMEOUT);
|
|
107
|
+
this._callback = callback;
|
|
108
|
+
this._observationTargets = [];
|
|
109
|
+
this._queuedEntries = [];
|
|
110
|
+
this._rootMarginValues = this._parseRootMargin(options.rootMargin);
|
|
111
|
+
this.thresholds = this._initThresholds(options.threshold);
|
|
112
|
+
this.root = options.root || null;
|
|
113
|
+
this.rootMargin = this._rootMarginValues.map(function(margin) {
|
|
114
|
+
return margin.value + margin.unit;
|
|
115
|
+
}).join(" ");
|
|
116
|
+
this._monitoringDocuments = [];
|
|
117
|
+
this._monitoringUnsubscribes = [];
|
|
118
|
+
}
|
|
119
|
+
IntersectionObserver2.prototype.THROTTLE_TIMEOUT = 100;
|
|
120
|
+
IntersectionObserver2.prototype.POLL_INTERVAL = null;
|
|
121
|
+
IntersectionObserver2.prototype.USE_MUTATION_OBSERVER = true;
|
|
122
|
+
IntersectionObserver2._setupCrossOriginUpdater = function() {
|
|
123
|
+
if (!crossOriginUpdater) {
|
|
124
|
+
crossOriginUpdater = function(boundingClientRect, intersectionRect) {
|
|
125
|
+
if (!boundingClientRect || !intersectionRect) {
|
|
126
|
+
crossOriginRect = getEmptyRect();
|
|
127
|
+
} else {
|
|
128
|
+
crossOriginRect = convertFromParentRect(boundingClientRect, intersectionRect);
|
|
129
|
+
}
|
|
130
|
+
registry.forEach(function(observer) {
|
|
131
|
+
observer._checkForIntersections();
|
|
132
|
+
});
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
return crossOriginUpdater;
|
|
136
|
+
};
|
|
137
|
+
IntersectionObserver2._resetCrossOriginUpdater = function() {
|
|
138
|
+
crossOriginUpdater = null;
|
|
139
|
+
crossOriginRect = null;
|
|
140
|
+
};
|
|
141
|
+
IntersectionObserver2.prototype.observe = function(target) {
|
|
142
|
+
var isTargetAlreadyObserved = this._observationTargets.some(function(item) {
|
|
143
|
+
return item.element == target;
|
|
144
|
+
});
|
|
145
|
+
if (isTargetAlreadyObserved) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
if (!(target && target.nodeType == 1)) {
|
|
149
|
+
throw new Error("target must be an Element");
|
|
150
|
+
}
|
|
151
|
+
this._registerInstance();
|
|
152
|
+
this._observationTargets.push({ element: target, entry: null });
|
|
153
|
+
this._monitorIntersections(target.ownerDocument);
|
|
154
|
+
this._checkForIntersections();
|
|
155
|
+
};
|
|
156
|
+
IntersectionObserver2.prototype.unobserve = function(target) {
|
|
157
|
+
this._observationTargets = this._observationTargets.filter(function(item) {
|
|
158
|
+
return item.element != target;
|
|
159
|
+
});
|
|
160
|
+
this._unmonitorIntersections(target.ownerDocument);
|
|
161
|
+
if (this._observationTargets.length == 0) {
|
|
162
|
+
this._unregisterInstance();
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
IntersectionObserver2.prototype.disconnect = function() {
|
|
166
|
+
this._observationTargets = [];
|
|
167
|
+
this._unmonitorAllIntersections();
|
|
168
|
+
this._unregisterInstance();
|
|
169
|
+
};
|
|
170
|
+
IntersectionObserver2.prototype.takeRecords = function() {
|
|
171
|
+
var records = this._queuedEntries.slice();
|
|
172
|
+
this._queuedEntries = [];
|
|
173
|
+
return records;
|
|
174
|
+
};
|
|
175
|
+
IntersectionObserver2.prototype._initThresholds = function(opt_threshold) {
|
|
176
|
+
var threshold = opt_threshold || [0];
|
|
177
|
+
if (!Array.isArray(threshold))
|
|
178
|
+
threshold = [threshold];
|
|
179
|
+
return threshold.sort().filter(function(t, i, a) {
|
|
180
|
+
if (typeof t != "number" || isNaN(t) || t < 0 || t > 1) {
|
|
181
|
+
throw new Error("threshold must be a number between 0 and 1 inclusively");
|
|
182
|
+
}
|
|
183
|
+
return t !== a[i - 1];
|
|
184
|
+
});
|
|
185
|
+
};
|
|
186
|
+
IntersectionObserver2.prototype._parseRootMargin = function(opt_rootMargin) {
|
|
187
|
+
var marginString = opt_rootMargin || "0px";
|
|
188
|
+
var margins = marginString.split(/\s+/).map(function(margin) {
|
|
189
|
+
var parts = /^(-?\d*\.?\d+)(px|%)$/.exec(margin);
|
|
190
|
+
if (!parts) {
|
|
191
|
+
throw new Error("rootMargin must be specified in pixels or percent");
|
|
192
|
+
}
|
|
193
|
+
return { value: parseFloat(parts[1]), unit: parts[2] };
|
|
194
|
+
});
|
|
195
|
+
margins[1] = margins[1] || margins[0];
|
|
196
|
+
margins[2] = margins[2] || margins[0];
|
|
197
|
+
margins[3] = margins[3] || margins[1];
|
|
198
|
+
return margins;
|
|
199
|
+
};
|
|
200
|
+
IntersectionObserver2.prototype._monitorIntersections = function(doc) {
|
|
201
|
+
var win = doc.defaultView;
|
|
202
|
+
if (!win) {
|
|
203
|
+
return;
|
|
204
|
+
}
|
|
205
|
+
if (this._monitoringDocuments.indexOf(doc) != -1) {
|
|
206
|
+
return;
|
|
207
|
+
}
|
|
208
|
+
var callback = this._checkForIntersections;
|
|
209
|
+
var monitoringInterval = null;
|
|
210
|
+
var domObserver = null;
|
|
211
|
+
if (this.POLL_INTERVAL) {
|
|
212
|
+
monitoringInterval = win.setInterval(callback, this.POLL_INTERVAL);
|
|
213
|
+
} else {
|
|
214
|
+
addEvent(win, "resize", callback, true);
|
|
215
|
+
addEvent(doc, "scroll", callback, true);
|
|
216
|
+
if (this.USE_MUTATION_OBSERVER && "MutationObserver" in win) {
|
|
217
|
+
domObserver = new win.MutationObserver(callback);
|
|
218
|
+
domObserver.observe(doc, {
|
|
219
|
+
attributes: true,
|
|
220
|
+
childList: true,
|
|
221
|
+
characterData: true,
|
|
222
|
+
subtree: true
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
this._monitoringDocuments.push(doc);
|
|
227
|
+
this._monitoringUnsubscribes.push(function() {
|
|
228
|
+
var win2 = doc.defaultView;
|
|
229
|
+
if (win2) {
|
|
230
|
+
if (monitoringInterval) {
|
|
231
|
+
win2.clearInterval(monitoringInterval);
|
|
232
|
+
}
|
|
233
|
+
removeEvent(win2, "resize", callback, true);
|
|
234
|
+
}
|
|
235
|
+
removeEvent(doc, "scroll", callback, true);
|
|
236
|
+
if (domObserver) {
|
|
237
|
+
domObserver.disconnect();
|
|
238
|
+
}
|
|
239
|
+
});
|
|
240
|
+
var rootDoc = this.root && (this.root.ownerDocument || this.root) || document2;
|
|
241
|
+
if (doc != rootDoc) {
|
|
242
|
+
var frame = getFrameElement(doc);
|
|
243
|
+
if (frame) {
|
|
244
|
+
this._monitorIntersections(frame.ownerDocument);
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
};
|
|
248
|
+
IntersectionObserver2.prototype._unmonitorIntersections = function(doc) {
|
|
249
|
+
var index = this._monitoringDocuments.indexOf(doc);
|
|
250
|
+
if (index == -1) {
|
|
251
|
+
return;
|
|
252
|
+
}
|
|
253
|
+
var rootDoc = this.root && (this.root.ownerDocument || this.root) || document2;
|
|
254
|
+
var hasDependentTargets = this._observationTargets.some(function(item) {
|
|
255
|
+
var itemDoc = item.element.ownerDocument;
|
|
256
|
+
if (itemDoc == doc) {
|
|
257
|
+
return true;
|
|
258
|
+
}
|
|
259
|
+
while (itemDoc && itemDoc != rootDoc) {
|
|
260
|
+
var frame2 = getFrameElement(itemDoc);
|
|
261
|
+
itemDoc = frame2 && frame2.ownerDocument;
|
|
262
|
+
if (itemDoc == doc) {
|
|
263
|
+
return true;
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
return false;
|
|
267
|
+
});
|
|
268
|
+
if (hasDependentTargets) {
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
271
|
+
var unsubscribe = this._monitoringUnsubscribes[index];
|
|
272
|
+
this._monitoringDocuments.splice(index, 1);
|
|
273
|
+
this._monitoringUnsubscribes.splice(index, 1);
|
|
274
|
+
unsubscribe();
|
|
275
|
+
if (doc != rootDoc) {
|
|
276
|
+
var frame = getFrameElement(doc);
|
|
277
|
+
if (frame) {
|
|
278
|
+
this._unmonitorIntersections(frame.ownerDocument);
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
};
|
|
282
|
+
IntersectionObserver2.prototype._unmonitorAllIntersections = function() {
|
|
283
|
+
var unsubscribes = this._monitoringUnsubscribes.slice(0);
|
|
284
|
+
this._monitoringDocuments.length = 0;
|
|
285
|
+
this._monitoringUnsubscribes.length = 0;
|
|
286
|
+
for (var i = 0; i < unsubscribes.length; i++) {
|
|
287
|
+
unsubscribes[i]();
|
|
288
|
+
}
|
|
289
|
+
};
|
|
290
|
+
IntersectionObserver2.prototype._checkForIntersections = function() {
|
|
291
|
+
if (!this.root && crossOriginUpdater && !crossOriginRect) {
|
|
292
|
+
return;
|
|
293
|
+
}
|
|
294
|
+
var rootIsInDom = this._rootIsInDom();
|
|
295
|
+
var rootRect = rootIsInDom ? this._getRootRect() : getEmptyRect();
|
|
296
|
+
this._observationTargets.forEach(function(item) {
|
|
297
|
+
var target = item.element;
|
|
298
|
+
var targetRect = getBoundingClientRect(target);
|
|
299
|
+
var rootContainsTarget = this._rootContainsTarget(target);
|
|
300
|
+
var oldEntry = item.entry;
|
|
301
|
+
var intersectionRect = rootIsInDom && rootContainsTarget && this._computeTargetAndRootIntersection(target, targetRect, rootRect);
|
|
302
|
+
var rootBounds = null;
|
|
303
|
+
if (!this._rootContainsTarget(target)) {
|
|
304
|
+
rootBounds = getEmptyRect();
|
|
305
|
+
} else if (!crossOriginUpdater || this.root) {
|
|
306
|
+
rootBounds = rootRect;
|
|
307
|
+
}
|
|
308
|
+
var newEntry = item.entry = new IntersectionObserverEntry2({
|
|
309
|
+
time: now(),
|
|
310
|
+
target,
|
|
311
|
+
boundingClientRect: targetRect,
|
|
312
|
+
rootBounds,
|
|
313
|
+
intersectionRect
|
|
314
|
+
});
|
|
315
|
+
if (!oldEntry) {
|
|
316
|
+
this._queuedEntries.push(newEntry);
|
|
317
|
+
} else if (rootIsInDom && rootContainsTarget) {
|
|
318
|
+
if (this._hasCrossedThreshold(oldEntry, newEntry)) {
|
|
319
|
+
this._queuedEntries.push(newEntry);
|
|
320
|
+
}
|
|
321
|
+
} else {
|
|
322
|
+
if (oldEntry && oldEntry.isIntersecting) {
|
|
323
|
+
this._queuedEntries.push(newEntry);
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
}, this);
|
|
327
|
+
if (this._queuedEntries.length) {
|
|
328
|
+
this._callback(this.takeRecords(), this);
|
|
329
|
+
}
|
|
330
|
+
};
|
|
331
|
+
IntersectionObserver2.prototype._computeTargetAndRootIntersection = function(target, targetRect, rootRect) {
|
|
332
|
+
if (window.getComputedStyle(target).display == "none")
|
|
333
|
+
return;
|
|
334
|
+
var intersectionRect = targetRect;
|
|
335
|
+
var parent = getParentNode(target);
|
|
336
|
+
var atRoot = false;
|
|
337
|
+
while (!atRoot && parent) {
|
|
338
|
+
var parentRect = null;
|
|
339
|
+
var parentComputedStyle = parent.nodeType == 1 ? window.getComputedStyle(parent) : {};
|
|
340
|
+
if (parentComputedStyle.display == "none")
|
|
341
|
+
return null;
|
|
342
|
+
if (parent == this.root || parent.nodeType == 9) {
|
|
343
|
+
atRoot = true;
|
|
344
|
+
if (parent == this.root || parent == document2) {
|
|
345
|
+
if (crossOriginUpdater && !this.root) {
|
|
346
|
+
if (!crossOriginRect || crossOriginRect.width == 0 && crossOriginRect.height == 0) {
|
|
347
|
+
parent = null;
|
|
348
|
+
parentRect = null;
|
|
349
|
+
intersectionRect = null;
|
|
350
|
+
} else {
|
|
351
|
+
parentRect = crossOriginRect;
|
|
352
|
+
}
|
|
353
|
+
} else {
|
|
354
|
+
parentRect = rootRect;
|
|
355
|
+
}
|
|
356
|
+
} else {
|
|
357
|
+
var frame = getParentNode(parent);
|
|
358
|
+
var frameRect = frame && getBoundingClientRect(frame);
|
|
359
|
+
var frameIntersect = frame && this._computeTargetAndRootIntersection(frame, frameRect, rootRect);
|
|
360
|
+
if (frameRect && frameIntersect) {
|
|
361
|
+
parent = frame;
|
|
362
|
+
parentRect = convertFromParentRect(frameRect, frameIntersect);
|
|
363
|
+
} else {
|
|
364
|
+
parent = null;
|
|
365
|
+
intersectionRect = null;
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
} else {
|
|
369
|
+
var doc = parent.ownerDocument;
|
|
370
|
+
if (parent != doc.body && parent != doc.documentElement && parentComputedStyle.overflow != "visible") {
|
|
371
|
+
parentRect = getBoundingClientRect(parent);
|
|
372
|
+
}
|
|
373
|
+
}
|
|
374
|
+
if (parentRect) {
|
|
375
|
+
intersectionRect = computeRectIntersection(parentRect, intersectionRect);
|
|
376
|
+
}
|
|
377
|
+
if (!intersectionRect)
|
|
378
|
+
break;
|
|
379
|
+
parent = parent && getParentNode(parent);
|
|
380
|
+
}
|
|
381
|
+
return intersectionRect;
|
|
382
|
+
};
|
|
383
|
+
IntersectionObserver2.prototype._getRootRect = function() {
|
|
384
|
+
var rootRect;
|
|
385
|
+
if (this.root && !isDoc(this.root)) {
|
|
386
|
+
rootRect = getBoundingClientRect(this.root);
|
|
387
|
+
} else {
|
|
388
|
+
var doc = isDoc(this.root) ? this.root : document2;
|
|
389
|
+
var html = doc.documentElement;
|
|
390
|
+
var body = doc.body;
|
|
391
|
+
rootRect = {
|
|
392
|
+
top: 0,
|
|
393
|
+
left: 0,
|
|
394
|
+
right: html.clientWidth || body.clientWidth,
|
|
395
|
+
width: html.clientWidth || body.clientWidth,
|
|
396
|
+
bottom: html.clientHeight || body.clientHeight,
|
|
397
|
+
height: html.clientHeight || body.clientHeight
|
|
398
|
+
};
|
|
399
|
+
}
|
|
400
|
+
return this._expandRectByRootMargin(rootRect);
|
|
401
|
+
};
|
|
402
|
+
IntersectionObserver2.prototype._expandRectByRootMargin = function(rect) {
|
|
403
|
+
var margins = this._rootMarginValues.map(function(margin, i) {
|
|
404
|
+
return margin.unit == "px" ? margin.value : margin.value * (i % 2 ? rect.width : rect.height) / 100;
|
|
405
|
+
});
|
|
406
|
+
var newRect = {
|
|
407
|
+
top: rect.top - margins[0],
|
|
408
|
+
right: rect.right + margins[1],
|
|
409
|
+
bottom: rect.bottom + margins[2],
|
|
410
|
+
left: rect.left - margins[3]
|
|
411
|
+
};
|
|
412
|
+
newRect.width = newRect.right - newRect.left;
|
|
413
|
+
newRect.height = newRect.bottom - newRect.top;
|
|
414
|
+
return newRect;
|
|
415
|
+
};
|
|
416
|
+
IntersectionObserver2.prototype._hasCrossedThreshold = function(oldEntry, newEntry) {
|
|
417
|
+
var oldRatio = oldEntry && oldEntry.isIntersecting ? oldEntry.intersectionRatio || 0 : -1;
|
|
418
|
+
var newRatio = newEntry.isIntersecting ? newEntry.intersectionRatio || 0 : -1;
|
|
419
|
+
if (oldRatio === newRatio)
|
|
420
|
+
return;
|
|
421
|
+
for (var i = 0; i < this.thresholds.length; i++) {
|
|
422
|
+
var threshold = this.thresholds[i];
|
|
423
|
+
if (threshold == oldRatio || threshold == newRatio || threshold < oldRatio !== threshold < newRatio) {
|
|
424
|
+
return true;
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
};
|
|
428
|
+
IntersectionObserver2.prototype._rootIsInDom = function() {
|
|
429
|
+
return !this.root || containsDeep(document2, this.root);
|
|
430
|
+
};
|
|
431
|
+
IntersectionObserver2.prototype._rootContainsTarget = function(target) {
|
|
432
|
+
var rootDoc = this.root && (this.root.ownerDocument || this.root) || document2;
|
|
433
|
+
return containsDeep(rootDoc, target) && (!this.root || rootDoc == target.ownerDocument);
|
|
434
|
+
};
|
|
435
|
+
IntersectionObserver2.prototype._registerInstance = function() {
|
|
436
|
+
if (registry.indexOf(this) < 0) {
|
|
437
|
+
registry.push(this);
|
|
438
|
+
}
|
|
439
|
+
};
|
|
440
|
+
IntersectionObserver2.prototype._unregisterInstance = function() {
|
|
441
|
+
var index = registry.indexOf(this);
|
|
442
|
+
if (index != -1)
|
|
443
|
+
registry.splice(index, 1);
|
|
444
|
+
};
|
|
445
|
+
function now() {
|
|
446
|
+
return window.performance && performance.now && performance.now();
|
|
447
|
+
}
|
|
448
|
+
function throttle(fn, timeout) {
|
|
449
|
+
var timer = null;
|
|
450
|
+
return function() {
|
|
451
|
+
if (!timer) {
|
|
452
|
+
timer = setTimeout(function() {
|
|
453
|
+
fn();
|
|
454
|
+
timer = null;
|
|
455
|
+
}, timeout);
|
|
456
|
+
}
|
|
457
|
+
};
|
|
458
|
+
}
|
|
459
|
+
function addEvent(node, event, fn, opt_useCapture) {
|
|
460
|
+
if (typeof node.addEventListener == "function") {
|
|
461
|
+
node.addEventListener(event, fn, opt_useCapture || false);
|
|
462
|
+
} else if (typeof node.attachEvent == "function") {
|
|
463
|
+
node.attachEvent("on" + event, fn);
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
function removeEvent(node, event, fn, opt_useCapture) {
|
|
467
|
+
if (typeof node.removeEventListener == "function") {
|
|
468
|
+
node.removeEventListener(event, fn, opt_useCapture || false);
|
|
469
|
+
} else if (typeof node.detatchEvent == "function") {
|
|
470
|
+
node.detatchEvent("on" + event, fn);
|
|
471
|
+
}
|
|
472
|
+
}
|
|
473
|
+
function computeRectIntersection(rect1, rect2) {
|
|
474
|
+
var top = Math.max(rect1.top, rect2.top);
|
|
475
|
+
var bottom = Math.min(rect1.bottom, rect2.bottom);
|
|
476
|
+
var left = Math.max(rect1.left, rect2.left);
|
|
477
|
+
var right = Math.min(rect1.right, rect2.right);
|
|
478
|
+
var width = right - left;
|
|
479
|
+
var height = bottom - top;
|
|
480
|
+
return width >= 0 && height >= 0 && {
|
|
481
|
+
top,
|
|
482
|
+
bottom,
|
|
483
|
+
left,
|
|
484
|
+
right,
|
|
485
|
+
width,
|
|
486
|
+
height
|
|
487
|
+
} || null;
|
|
488
|
+
}
|
|
489
|
+
function getBoundingClientRect(el) {
|
|
490
|
+
var rect;
|
|
491
|
+
try {
|
|
492
|
+
rect = el.getBoundingClientRect();
|
|
493
|
+
} catch (err) {
|
|
494
|
+
}
|
|
495
|
+
if (!rect)
|
|
496
|
+
return getEmptyRect();
|
|
497
|
+
if (!(rect.width && rect.height)) {
|
|
498
|
+
rect = {
|
|
499
|
+
top: rect.top,
|
|
500
|
+
right: rect.right,
|
|
501
|
+
bottom: rect.bottom,
|
|
502
|
+
left: rect.left,
|
|
503
|
+
width: rect.right - rect.left,
|
|
504
|
+
height: rect.bottom - rect.top
|
|
505
|
+
};
|
|
506
|
+
}
|
|
507
|
+
return rect;
|
|
508
|
+
}
|
|
509
|
+
function getEmptyRect() {
|
|
510
|
+
return {
|
|
511
|
+
top: 0,
|
|
512
|
+
bottom: 0,
|
|
513
|
+
left: 0,
|
|
514
|
+
right: 0,
|
|
515
|
+
width: 0,
|
|
516
|
+
height: 0
|
|
517
|
+
};
|
|
518
|
+
}
|
|
519
|
+
function ensureDOMRect(rect) {
|
|
520
|
+
if (!rect || "x" in rect) {
|
|
521
|
+
return rect;
|
|
522
|
+
}
|
|
523
|
+
return {
|
|
524
|
+
top: rect.top,
|
|
525
|
+
y: rect.top,
|
|
526
|
+
bottom: rect.bottom,
|
|
527
|
+
left: rect.left,
|
|
528
|
+
x: rect.left,
|
|
529
|
+
right: rect.right,
|
|
530
|
+
width: rect.width,
|
|
531
|
+
height: rect.height
|
|
532
|
+
};
|
|
533
|
+
}
|
|
534
|
+
function convertFromParentRect(parentBoundingRect, parentIntersectionRect) {
|
|
535
|
+
var top = parentIntersectionRect.top - parentBoundingRect.top;
|
|
536
|
+
var left = parentIntersectionRect.left - parentBoundingRect.left;
|
|
537
|
+
return {
|
|
538
|
+
top,
|
|
539
|
+
left,
|
|
540
|
+
height: parentIntersectionRect.height,
|
|
541
|
+
width: parentIntersectionRect.width,
|
|
542
|
+
bottom: top + parentIntersectionRect.height,
|
|
543
|
+
right: left + parentIntersectionRect.width
|
|
544
|
+
};
|
|
545
|
+
}
|
|
546
|
+
function containsDeep(parent, child) {
|
|
547
|
+
var node = child;
|
|
548
|
+
while (node) {
|
|
549
|
+
if (node == parent)
|
|
550
|
+
return true;
|
|
551
|
+
node = getParentNode(node);
|
|
552
|
+
}
|
|
553
|
+
return false;
|
|
554
|
+
}
|
|
555
|
+
function getParentNode(node) {
|
|
556
|
+
var parent = node.parentNode;
|
|
557
|
+
if (node.nodeType == 9 && node != document2) {
|
|
558
|
+
return getFrameElement(node);
|
|
559
|
+
}
|
|
560
|
+
if (parent && parent.assignedSlot) {
|
|
561
|
+
parent = parent.assignedSlot.parentNode;
|
|
562
|
+
}
|
|
563
|
+
if (parent && parent.nodeType == 11 && parent.host) {
|
|
564
|
+
return parent.host;
|
|
565
|
+
}
|
|
566
|
+
return parent;
|
|
567
|
+
}
|
|
568
|
+
function isDoc(node) {
|
|
569
|
+
return node && node.nodeType === 9;
|
|
570
|
+
}
|
|
571
|
+
window.IntersectionObserver = IntersectionObserver2;
|
|
572
|
+
window.IntersectionObserverEntry = IntersectionObserverEntry2;
|
|
573
|
+
})();
|
|
574
|
+
var eventemitter3 = { exports: {} };
|
|
575
|
+
(function(module) {
|
|
576
|
+
var has = Object.prototype.hasOwnProperty, prefix = "~";
|
|
577
|
+
function Events() {
|
|
578
|
+
}
|
|
579
|
+
if (Object.create) {
|
|
580
|
+
Events.prototype = Object.create(null);
|
|
581
|
+
if (!new Events().__proto__)
|
|
582
|
+
prefix = false;
|
|
583
|
+
}
|
|
584
|
+
function EE(fn, context, once) {
|
|
585
|
+
this.fn = fn;
|
|
586
|
+
this.context = context;
|
|
587
|
+
this.once = once || false;
|
|
588
|
+
}
|
|
589
|
+
function addListener(emitter, event, fn, context, once) {
|
|
590
|
+
if (typeof fn !== "function") {
|
|
591
|
+
throw new TypeError("The listener must be a function");
|
|
592
|
+
}
|
|
593
|
+
var listener = new EE(fn, context || emitter, once), evt = prefix ? prefix + event : event;
|
|
594
|
+
if (!emitter._events[evt])
|
|
595
|
+
emitter._events[evt] = listener, emitter._eventsCount++;
|
|
596
|
+
else if (!emitter._events[evt].fn)
|
|
597
|
+
emitter._events[evt].push(listener);
|
|
598
|
+
else
|
|
599
|
+
emitter._events[evt] = [emitter._events[evt], listener];
|
|
600
|
+
return emitter;
|
|
601
|
+
}
|
|
602
|
+
function clearEvent(emitter, evt) {
|
|
603
|
+
if (--emitter._eventsCount === 0)
|
|
604
|
+
emitter._events = new Events();
|
|
605
|
+
else
|
|
606
|
+
delete emitter._events[evt];
|
|
607
|
+
}
|
|
608
|
+
function EventEmitter() {
|
|
609
|
+
this._events = new Events();
|
|
610
|
+
this._eventsCount = 0;
|
|
611
|
+
}
|
|
612
|
+
EventEmitter.prototype.eventNames = function eventNames() {
|
|
613
|
+
var names = [], events, name;
|
|
614
|
+
if (this._eventsCount === 0)
|
|
615
|
+
return names;
|
|
616
|
+
for (name in events = this._events) {
|
|
617
|
+
if (has.call(events, name))
|
|
618
|
+
names.push(prefix ? name.slice(1) : name);
|
|
619
|
+
}
|
|
620
|
+
if (Object.getOwnPropertySymbols) {
|
|
621
|
+
return names.concat(Object.getOwnPropertySymbols(events));
|
|
622
|
+
}
|
|
623
|
+
return names;
|
|
624
|
+
};
|
|
625
|
+
EventEmitter.prototype.listeners = function listeners(event) {
|
|
626
|
+
var evt = prefix ? prefix + event : event, handlers = this._events[evt];
|
|
627
|
+
if (!handlers)
|
|
628
|
+
return [];
|
|
629
|
+
if (handlers.fn)
|
|
630
|
+
return [handlers.fn];
|
|
631
|
+
for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
|
|
632
|
+
ee[i] = handlers[i].fn;
|
|
633
|
+
}
|
|
634
|
+
return ee;
|
|
635
|
+
};
|
|
636
|
+
EventEmitter.prototype.listenerCount = function listenerCount(event) {
|
|
637
|
+
var evt = prefix ? prefix + event : event, listeners = this._events[evt];
|
|
638
|
+
if (!listeners)
|
|
639
|
+
return 0;
|
|
640
|
+
if (listeners.fn)
|
|
641
|
+
return 1;
|
|
642
|
+
return listeners.length;
|
|
643
|
+
};
|
|
644
|
+
EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
|
|
645
|
+
var evt = prefix ? prefix + event : event;
|
|
646
|
+
if (!this._events[evt])
|
|
647
|
+
return false;
|
|
648
|
+
var listeners = this._events[evt], len = arguments.length, args, i;
|
|
649
|
+
if (listeners.fn) {
|
|
650
|
+
if (listeners.once)
|
|
651
|
+
this.removeListener(event, listeners.fn, void 0, true);
|
|
652
|
+
switch (len) {
|
|
653
|
+
case 1:
|
|
654
|
+
return listeners.fn.call(listeners.context), true;
|
|
655
|
+
case 2:
|
|
656
|
+
return listeners.fn.call(listeners.context, a1), true;
|
|
657
|
+
case 3:
|
|
658
|
+
return listeners.fn.call(listeners.context, a1, a2), true;
|
|
659
|
+
case 4:
|
|
660
|
+
return listeners.fn.call(listeners.context, a1, a2, a3), true;
|
|
661
|
+
case 5:
|
|
662
|
+
return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
|
|
663
|
+
case 6:
|
|
664
|
+
return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
|
|
665
|
+
}
|
|
666
|
+
for (i = 1, args = new Array(len - 1); i < len; i++) {
|
|
667
|
+
args[i - 1] = arguments[i];
|
|
668
|
+
}
|
|
669
|
+
listeners.fn.apply(listeners.context, args);
|
|
670
|
+
} else {
|
|
671
|
+
var length = listeners.length, j;
|
|
672
|
+
for (i = 0; i < length; i++) {
|
|
673
|
+
if (listeners[i].once)
|
|
674
|
+
this.removeListener(event, listeners[i].fn, void 0, true);
|
|
675
|
+
switch (len) {
|
|
676
|
+
case 1:
|
|
677
|
+
listeners[i].fn.call(listeners[i].context);
|
|
678
|
+
break;
|
|
679
|
+
case 2:
|
|
680
|
+
listeners[i].fn.call(listeners[i].context, a1);
|
|
681
|
+
break;
|
|
682
|
+
case 3:
|
|
683
|
+
listeners[i].fn.call(listeners[i].context, a1, a2);
|
|
684
|
+
break;
|
|
685
|
+
case 4:
|
|
686
|
+
listeners[i].fn.call(listeners[i].context, a1, a2, a3);
|
|
687
|
+
break;
|
|
688
|
+
default:
|
|
689
|
+
if (!args)
|
|
690
|
+
for (j = 1, args = new Array(len - 1); j < len; j++) {
|
|
691
|
+
args[j - 1] = arguments[j];
|
|
692
|
+
}
|
|
693
|
+
listeners[i].fn.apply(listeners[i].context, args);
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
}
|
|
697
|
+
return true;
|
|
698
|
+
};
|
|
699
|
+
EventEmitter.prototype.on = function on(event, fn, context) {
|
|
700
|
+
return addListener(this, event, fn, context, false);
|
|
701
|
+
};
|
|
702
|
+
EventEmitter.prototype.once = function once(event, fn, context) {
|
|
703
|
+
return addListener(this, event, fn, context, true);
|
|
704
|
+
};
|
|
705
|
+
EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
|
|
706
|
+
var evt = prefix ? prefix + event : event;
|
|
707
|
+
if (!this._events[evt])
|
|
708
|
+
return this;
|
|
709
|
+
if (!fn) {
|
|
710
|
+
clearEvent(this, evt);
|
|
711
|
+
return this;
|
|
712
|
+
}
|
|
713
|
+
var listeners = this._events[evt];
|
|
714
|
+
if (listeners.fn) {
|
|
715
|
+
if (listeners.fn === fn && (!once || listeners.once) && (!context || listeners.context === context)) {
|
|
716
|
+
clearEvent(this, evt);
|
|
717
|
+
}
|
|
718
|
+
} else {
|
|
719
|
+
for (var i = 0, events = [], length = listeners.length; i < length; i++) {
|
|
720
|
+
if (listeners[i].fn !== fn || once && !listeners[i].once || context && listeners[i].context !== context) {
|
|
721
|
+
events.push(listeners[i]);
|
|
722
|
+
}
|
|
723
|
+
}
|
|
724
|
+
if (events.length)
|
|
725
|
+
this._events[evt] = events.length === 1 ? events[0] : events;
|
|
726
|
+
else
|
|
727
|
+
clearEvent(this, evt);
|
|
728
|
+
}
|
|
729
|
+
return this;
|
|
730
|
+
};
|
|
731
|
+
EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
|
|
732
|
+
var evt;
|
|
733
|
+
if (event) {
|
|
734
|
+
evt = prefix ? prefix + event : event;
|
|
735
|
+
if (this._events[evt])
|
|
736
|
+
clearEvent(this, evt);
|
|
737
|
+
} else {
|
|
738
|
+
this._events = new Events();
|
|
739
|
+
this._eventsCount = 0;
|
|
740
|
+
}
|
|
741
|
+
return this;
|
|
742
|
+
};
|
|
743
|
+
EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
|
|
744
|
+
EventEmitter.prototype.addListener = EventEmitter.prototype.on;
|
|
745
|
+
EventEmitter.prefixed = prefix;
|
|
746
|
+
EventEmitter.EventEmitter = EventEmitter;
|
|
747
|
+
{
|
|
748
|
+
module.exports = EventEmitter;
|
|
749
|
+
}
|
|
750
|
+
})(eventemitter3);
|
|
751
|
+
var __defProp2 = Object.defineProperty;
|
|
752
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
753
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
754
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
755
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
756
|
+
if (decorator = decorators[i])
|
|
757
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
758
|
+
if (kind && result)
|
|
759
|
+
__defProp2(target, key, result);
|
|
760
|
+
return result;
|
|
761
|
+
};
|
|
762
|
+
const NAVBAR_HEIGHT = 60;
|
|
763
|
+
const _PositioningService = class {
|
|
764
|
+
static on(eventName, handler) {
|
|
765
|
+
_PositioningService.events.on(eventName, handler);
|
|
766
|
+
}
|
|
767
|
+
static off(eventName, handler) {
|
|
768
|
+
_PositioningService.events.off(eventName, handler);
|
|
769
|
+
}
|
|
770
|
+
static once(eventName, handler) {
|
|
771
|
+
_PositioningService.events.once(eventName, handler);
|
|
772
|
+
}
|
|
773
|
+
static checkCollisions(element, otherElements) {
|
|
774
|
+
const otherElementsList = otherElements || Array.from(_PositioningService.elements.keys());
|
|
775
|
+
const bounds = element.getBoundingClientRect();
|
|
776
|
+
const collisions = [];
|
|
777
|
+
for (const otherElement of otherElementsList) {
|
|
778
|
+
if (otherElement !== element) {
|
|
779
|
+
const otherBounds = otherElement.getBoundingClientRect();
|
|
780
|
+
if (otherBounds.left <= bounds.right && otherBounds.right >= bounds.left && otherBounds.top <= bounds.bottom && otherBounds.bottom >= bounds.top) {
|
|
781
|
+
collisions.push(otherElement);
|
|
782
|
+
}
|
|
783
|
+
}
|
|
784
|
+
}
|
|
785
|
+
if (collisions.length) {
|
|
786
|
+
_PositioningService.onElementIntersection(element, collisions);
|
|
787
|
+
}
|
|
788
|
+
}
|
|
789
|
+
static isPositioned(element) {
|
|
790
|
+
return _PositioningService.elements.has(element);
|
|
791
|
+
}
|
|
792
|
+
static getPositioningOptions(element) {
|
|
793
|
+
if (_PositioningService.elements.has(element)) {
|
|
794
|
+
return _PositioningService.elements.get(element);
|
|
795
|
+
}
|
|
796
|
+
return null;
|
|
797
|
+
}
|
|
798
|
+
static position(element, options = {}) {
|
|
799
|
+
const opts = __spreadValues(__spreadValues({}, DEFAULT_POSITIONING_OPTIONS), options);
|
|
800
|
+
let e = element;
|
|
801
|
+
while (e !== document.body) {
|
|
802
|
+
e = e.parentElement;
|
|
803
|
+
if (e.classList.contains("sps-focused-task")) {
|
|
804
|
+
opts.scrollParent = e;
|
|
805
|
+
if (!_PositioningService.registeredScrollParents.has(e)) {
|
|
806
|
+
_PositioningService.registeredScrollParents.add(e);
|
|
807
|
+
e.addEventListener("scroll", _PositioningService.update);
|
|
808
|
+
}
|
|
809
|
+
break;
|
|
810
|
+
}
|
|
811
|
+
}
|
|
812
|
+
element.style.visibility = "hidden";
|
|
813
|
+
if (_PositioningService.elements.size === 0) {
|
|
814
|
+
window.addEventListener("resize", _PositioningService.update);
|
|
815
|
+
window.addEventListener("scroll", _PositioningService.update);
|
|
816
|
+
}
|
|
817
|
+
if (!opts.relativeTo) {
|
|
818
|
+
throw new Error("You must provide an element for the relativeTo option to position an element.");
|
|
819
|
+
}
|
|
820
|
+
_PositioningService.elements.set(element, opts);
|
|
821
|
+
onNextTick(() => {
|
|
822
|
+
_PositioningService.fixElementPosition(element);
|
|
823
|
+
_PositioningService.viewportObserver.observe(element);
|
|
824
|
+
element.style.visibility = "";
|
|
825
|
+
_PositioningService.checkCollisions(element);
|
|
826
|
+
});
|
|
827
|
+
}
|
|
828
|
+
static release(element) {
|
|
829
|
+
if (_PositioningService.elements.has(element)) {
|
|
830
|
+
_PositioningService.clearStyles(element);
|
|
831
|
+
const options = _PositioningService.elements.get(element);
|
|
832
|
+
if (options.scrollParent) {
|
|
833
|
+
options.scrollParent.removeEventListener("scroll", _PositioningService.update);
|
|
834
|
+
_PositioningService.registeredScrollParents.delete(options.scrollParent);
|
|
835
|
+
}
|
|
836
|
+
_PositioningService.elements.delete(element);
|
|
837
|
+
if (_PositioningService.elements.size === 0) {
|
|
838
|
+
window.removeEventListener("resize", _PositioningService.update);
|
|
839
|
+
window.removeEventListener("scroll", _PositioningService.update);
|
|
840
|
+
}
|
|
841
|
+
_PositioningService.viewportObserver.unobserve(element);
|
|
842
|
+
}
|
|
843
|
+
}
|
|
844
|
+
static releaseAll() {
|
|
845
|
+
for (const element of _PositioningService.elements.keys()) {
|
|
846
|
+
_PositioningService.release(element);
|
|
847
|
+
}
|
|
848
|
+
}
|
|
849
|
+
static refresh(element) {
|
|
850
|
+
if (_PositioningService.elements.has(element)) {
|
|
851
|
+
_PositioningService.clearStyles(element);
|
|
852
|
+
_PositioningService.fixElementPosition(element);
|
|
853
|
+
_PositioningService.checkCollisions(element);
|
|
854
|
+
}
|
|
855
|
+
}
|
|
856
|
+
static refreshAll() {
|
|
857
|
+
for (const element of _PositioningService.elements.keys()) {
|
|
858
|
+
_PositioningService.refresh(element);
|
|
859
|
+
}
|
|
860
|
+
}
|
|
861
|
+
static reposition(element, newOptions) {
|
|
862
|
+
if (_PositioningService.elements.has(element)) {
|
|
863
|
+
const options = _PositioningService.elements.get(element);
|
|
864
|
+
_PositioningService.elements.set(element, Object.assign(options, newOptions));
|
|
865
|
+
_PositioningService.refresh(element);
|
|
866
|
+
}
|
|
867
|
+
}
|
|
868
|
+
static onViewportIntersection(entries) {
|
|
869
|
+
for (const entry of entries) {
|
|
870
|
+
const entryCopy = Object.keys(IntersectionObserverEntry.prototype).reduce((copy, key) => __spreadProps(__spreadValues({}, copy), {
|
|
871
|
+
[key]: entry[key]
|
|
872
|
+
}), {});
|
|
873
|
+
entryCopy.rootBounds = entryCopy.rootBounds || _PositioningService.getRootBounds();
|
|
874
|
+
_PositioningService.events.emit("viewportIntersection", Object.freeze(entryCopy));
|
|
875
|
+
}
|
|
876
|
+
}
|
|
877
|
+
static onElementIntersection(target, intersectingWith) {
|
|
878
|
+
_PositioningService.events.emit("elementIntersection", { target, intersectingWith });
|
|
879
|
+
}
|
|
880
|
+
static getRootBounds() {
|
|
881
|
+
const rootWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
|
882
|
+
const rootHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
|
883
|
+
return {
|
|
884
|
+
x: 0,
|
|
885
|
+
y: NAVBAR_HEIGHT,
|
|
886
|
+
left: 0,
|
|
887
|
+
top: NAVBAR_HEIGHT,
|
|
888
|
+
right: rootWidth,
|
|
889
|
+
bottom: rootHeight,
|
|
890
|
+
height: rootHeight - NAVBAR_HEIGHT,
|
|
891
|
+
width: rootWidth
|
|
892
|
+
};
|
|
893
|
+
}
|
|
894
|
+
static clearStyles(element) {
|
|
895
|
+
Object.assign(element.style, {
|
|
896
|
+
position: "",
|
|
897
|
+
width: "",
|
|
898
|
+
top: "",
|
|
899
|
+
left: "",
|
|
900
|
+
right: "",
|
|
901
|
+
bottom: "",
|
|
902
|
+
visibility: "",
|
|
903
|
+
zIndex: ""
|
|
904
|
+
});
|
|
905
|
+
}
|
|
906
|
+
static fixElementPosition(element, options) {
|
|
907
|
+
if (!this.elements.has(element)) {
|
|
908
|
+
return;
|
|
909
|
+
}
|
|
910
|
+
const opts = options || this.elements.get(element);
|
|
911
|
+
const rootBounds = this.getRootBounds();
|
|
912
|
+
const positionedElementBounds = element.getBoundingClientRect();
|
|
913
|
+
const relativeTargetBounds = opts.relativeTo.getBoundingClientRect();
|
|
914
|
+
const { width } = opts.useRelativeTargetWidth ? relativeTargetBounds : positionedElementBounds;
|
|
915
|
+
Object.assign(element.style, {
|
|
916
|
+
minWidth: `${width}px`,
|
|
917
|
+
position: "fixed",
|
|
918
|
+
zIndex: opts.zIndex || ""
|
|
919
|
+
});
|
|
920
|
+
let top;
|
|
921
|
+
let left;
|
|
922
|
+
const positionRelativeToTarget = opts.position.split(" ");
|
|
923
|
+
const offsetA = opts.offsets[0] || 0;
|
|
924
|
+
const offsetB = opts.offsets[1] || 0;
|
|
925
|
+
top = 0;
|
|
926
|
+
left = 0;
|
|
927
|
+
switch (positionRelativeToTarget[0]) {
|
|
928
|
+
case "top":
|
|
929
|
+
top = relativeTargetBounds.top - positionedElementBounds.height - offsetA;
|
|
930
|
+
break;
|
|
931
|
+
case "left":
|
|
932
|
+
left = relativeTargetBounds.left - width - offsetA;
|
|
933
|
+
break;
|
|
934
|
+
case "right":
|
|
935
|
+
left = relativeTargetBounds.right + offsetA;
|
|
936
|
+
break;
|
|
937
|
+
case "bottom":
|
|
938
|
+
top = relativeTargetBounds.bottom + offsetA;
|
|
939
|
+
break;
|
|
940
|
+
default:
|
|
941
|
+
throw new Error(`${opts.position} is not a valid position`);
|
|
942
|
+
}
|
|
943
|
+
switch (positionRelativeToTarget[1]) {
|
|
944
|
+
case "left":
|
|
945
|
+
left = relativeTargetBounds.left - offsetB;
|
|
946
|
+
break;
|
|
947
|
+
case "top":
|
|
948
|
+
top = relativeTargetBounds.top - offsetB;
|
|
949
|
+
break;
|
|
950
|
+
case "middle":
|
|
951
|
+
if (positionRelativeToTarget[0] === "top" || positionRelativeToTarget[0] === "bottom") {
|
|
952
|
+
left = relativeTargetBounds.left + relativeTargetBounds.width / 2 - width / 2 + offsetB;
|
|
953
|
+
} else if (positionRelativeToTarget[0] === "left" || positionRelativeToTarget[0] === "right") {
|
|
954
|
+
top = relativeTargetBounds.top + relativeTargetBounds.height / 2 - positionedElementBounds.height / 2 + offsetB;
|
|
955
|
+
}
|
|
956
|
+
break;
|
|
957
|
+
case "bottom":
|
|
958
|
+
top = relativeTargetBounds.bottom - positionedElementBounds.height + offsetB;
|
|
959
|
+
break;
|
|
960
|
+
case "right":
|
|
961
|
+
left = relativeTargetBounds.right - width + offsetB;
|
|
962
|
+
break;
|
|
963
|
+
default:
|
|
964
|
+
throw new Error(`${opts.position} is not a valid position`);
|
|
965
|
+
}
|
|
966
|
+
const bottom = top + positionedElementBounds.height;
|
|
967
|
+
const right = left + positionedElementBounds.width;
|
|
968
|
+
const topPx = `${Math.round(top)}px`;
|
|
969
|
+
const bottomPx = `${Math.round(rootBounds.bottom - bottom)}px`;
|
|
970
|
+
const leftPx = `${Math.round(left)}px`;
|
|
971
|
+
const rightPx = `${Math.round(rootBounds.right - right)}px`;
|
|
972
|
+
switch (opts.anchor) {
|
|
973
|
+
case PositionAnchor.TOP_LEFT:
|
|
974
|
+
Object.assign(element.style, {
|
|
975
|
+
top: topPx,
|
|
976
|
+
bottom: "auto",
|
|
977
|
+
left: leftPx,
|
|
978
|
+
right: "auto"
|
|
979
|
+
});
|
|
980
|
+
break;
|
|
981
|
+
case PositionAnchor.TOP_RIGHT:
|
|
982
|
+
Object.assign(element.style, {
|
|
983
|
+
top: topPx,
|
|
984
|
+
bottom: "auto",
|
|
985
|
+
left: "auto",
|
|
986
|
+
right: rightPx
|
|
987
|
+
});
|
|
988
|
+
break;
|
|
989
|
+
case PositionAnchor.BOTTOM_LEFT:
|
|
990
|
+
Object.assign(element.style, {
|
|
991
|
+
top: "auto",
|
|
992
|
+
bottom: bottomPx,
|
|
993
|
+
left: leftPx,
|
|
994
|
+
right: "auto"
|
|
995
|
+
});
|
|
996
|
+
break;
|
|
997
|
+
case PositionAnchor.BOTTOM_RIGHT:
|
|
998
|
+
Object.assign(element.style, {
|
|
999
|
+
top: "auto",
|
|
1000
|
+
bottom: bottomPx,
|
|
1001
|
+
left: "auto",
|
|
1002
|
+
right: rightPx
|
|
1003
|
+
});
|
|
1004
|
+
break;
|
|
1005
|
+
}
|
|
1006
|
+
}
|
|
1007
|
+
static update(event) {
|
|
1008
|
+
const elements = _PositioningService.elements.entries();
|
|
1009
|
+
const updatedElements = [];
|
|
1010
|
+
for (const [element, options] of elements) {
|
|
1011
|
+
if (!event || event.target === document || event.target === options.scrollParent || event.target === window) {
|
|
1012
|
+
_PositioningService.fixElementPosition(element, options);
|
|
1013
|
+
_PositioningService.checkCollisions(element, updatedElements);
|
|
1014
|
+
updatedElements.push(element);
|
|
1015
|
+
}
|
|
1016
|
+
}
|
|
1017
|
+
}
|
|
1018
|
+
on(eventName, handler) {
|
|
1019
|
+
_PositioningService.on(eventName, handler);
|
|
1020
|
+
}
|
|
1021
|
+
off(eventName, handler) {
|
|
1022
|
+
_PositioningService.off(eventName, handler);
|
|
1023
|
+
}
|
|
1024
|
+
once(eventName, handler) {
|
|
1025
|
+
_PositioningService.once(eventName, handler);
|
|
1026
|
+
}
|
|
1027
|
+
isPositioned(element) {
|
|
1028
|
+
return _PositioningService.isPositioned(element);
|
|
1029
|
+
}
|
|
1030
|
+
getPositioningOptions(element) {
|
|
1031
|
+
return _PositioningService.getPositioningOptions(element);
|
|
1032
|
+
}
|
|
1033
|
+
position(element, options = {}) {
|
|
1034
|
+
_PositioningService.position(element, options);
|
|
1035
|
+
}
|
|
1036
|
+
release(element) {
|
|
1037
|
+
_PositioningService.release(element);
|
|
1038
|
+
}
|
|
1039
|
+
releaseAll() {
|
|
1040
|
+
_PositioningService.releaseAll();
|
|
1041
|
+
}
|
|
1042
|
+
refresh(element) {
|
|
1043
|
+
_PositioningService.refresh(element);
|
|
1044
|
+
}
|
|
1045
|
+
refreshAll() {
|
|
1046
|
+
_PositioningService.refreshAll();
|
|
1047
|
+
}
|
|
1048
|
+
reposition(element, newOptions) {
|
|
1049
|
+
_PositioningService.reposition(element, newOptions);
|
|
1050
|
+
}
|
|
1051
|
+
};
|
|
1052
|
+
let PositioningService = _PositioningService;
|
|
1053
|
+
PositioningService.elements = new Map();
|
|
1054
|
+
PositioningService.registeredScrollParents = new Set();
|
|
1055
|
+
PositioningService.events = new eventemitter3.exports.EventEmitter();
|
|
1056
|
+
PositioningService.viewportObserver = new IntersectionObserver(_PositioningService.onViewportIntersection, {
|
|
1057
|
+
rootMargin: `-${NAVBAR_HEIGHT}px 0px 0px`,
|
|
1058
|
+
threshold: 1
|
|
1059
|
+
});
|
|
1060
|
+
__decorateClass([
|
|
1061
|
+
lockedToAnimationFrames
|
|
1062
|
+
], PositioningService, "update", 1);
|
|
1063
|
+
export { DEFAULT_POSITIONING_OPTIONS, Position, PositionAnchor, PositioningService };
|