@spscommerce/positioning 5.21.0 → 5.21.1-ie
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/dist/out-tsc/index.d.ts +4 -0
- package/dist/out-tsc/index.js +5 -0
- package/dist/out-tsc/index.js.map +1 -0
- package/dist/out-tsc/position-anchor.enum.d.ts +7 -0
- package/dist/out-tsc/position-anchor.enum.js +9 -0
- package/dist/out-tsc/position-anchor.enum.js.map +1 -0
- package/dist/out-tsc/position.enum.d.ts +18 -0
- package/dist/out-tsc/position.enum.js +20 -0
- package/dist/out-tsc/position.enum.js.map +1 -0
- package/dist/out-tsc/positioning-options.interface.d.ts +37 -0
- package/dist/out-tsc/positioning-options.interface.js +8 -0
- package/dist/out-tsc/positioning-options.interface.js.map +1 -0
- package/dist/out-tsc/positioning.service.d.ts +55 -0
- package/dist/out-tsc/positioning.service.js +466 -0
- package/dist/out-tsc/positioning.service.js.map +1 -0
- package/lib/index.cjs.js +1857 -1
- package/lib/index.es.js +1762 -973
- package/package.json +7 -7
- package/vite.config.js +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/** Indicates which point on a positioned element it should be positioned by. */
|
|
2
|
+
export var PositionAnchor;
|
|
3
|
+
(function (PositionAnchor) {
|
|
4
|
+
PositionAnchor["TOP_LEFT"] = "top left";
|
|
5
|
+
PositionAnchor["TOP_RIGHT"] = "top right";
|
|
6
|
+
PositionAnchor["BOTTOM_LEFT"] = "bottom left";
|
|
7
|
+
PositionAnchor["BOTTOM_RIGHT"] = "bottom right";
|
|
8
|
+
})(PositionAnchor || (PositionAnchor = {}));
|
|
9
|
+
//# sourceMappingURL=position-anchor.enum.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"position-anchor.enum.js","sourceRoot":"","sources":["../../src/position-anchor.enum.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,uCAAqB,CAAA;IACrB,yCAAuB,CAAA;IACvB,6CAA2B,CAAA;IAC3B,+CAA6B,CAAA;AAC/B,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* These are the possibilities for the `position` option of
|
|
3
|
+
* `PositioningOptions` when using `relativeTo`.
|
|
4
|
+
*/
|
|
5
|
+
export declare enum Position {
|
|
6
|
+
TOP_LEFT = "top left",
|
|
7
|
+
TOP_MIDDLE = "top middle",
|
|
8
|
+
TOP_RIGHT = "top right",
|
|
9
|
+
RIGHT_TOP = "right top",
|
|
10
|
+
RIGHT_MIDDLE = "right middle",
|
|
11
|
+
RIGHT_BOTTOM = "right bottom",
|
|
12
|
+
BOTTOM_RIGHT = "bottom right",
|
|
13
|
+
BOTTOM_MIDDLE = "bottom middle",
|
|
14
|
+
BOTTOM_LEFT = "bottom left",
|
|
15
|
+
LEFT_BOTTOM = "left bottom",
|
|
16
|
+
LEFT_MIDDLE = "left middle",
|
|
17
|
+
LEFT_TOP = "left top"
|
|
18
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* These are the possibilities for the `position` option of
|
|
3
|
+
* `PositioningOptions` when using `relativeTo`.
|
|
4
|
+
*/
|
|
5
|
+
export var Position;
|
|
6
|
+
(function (Position) {
|
|
7
|
+
Position["TOP_LEFT"] = "top left";
|
|
8
|
+
Position["TOP_MIDDLE"] = "top middle";
|
|
9
|
+
Position["TOP_RIGHT"] = "top right";
|
|
10
|
+
Position["RIGHT_TOP"] = "right top";
|
|
11
|
+
Position["RIGHT_MIDDLE"] = "right middle";
|
|
12
|
+
Position["RIGHT_BOTTOM"] = "right bottom";
|
|
13
|
+
Position["BOTTOM_RIGHT"] = "bottom right";
|
|
14
|
+
Position["BOTTOM_MIDDLE"] = "bottom middle";
|
|
15
|
+
Position["BOTTOM_LEFT"] = "bottom left";
|
|
16
|
+
Position["LEFT_BOTTOM"] = "left bottom";
|
|
17
|
+
Position["LEFT_MIDDLE"] = "left middle";
|
|
18
|
+
Position["LEFT_TOP"] = "left top";
|
|
19
|
+
})(Position || (Position = {}));
|
|
20
|
+
//# sourceMappingURL=position.enum.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"position.enum.js","sourceRoot":"","sources":["../../src/position.enum.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAN,IAAY,QAaX;AAbD,WAAY,QAAQ;IAClB,iCAAqB,CAAA;IACrB,qCAAyB,CAAA;IACzB,mCAAuB,CAAA;IACvB,mCAAuB,CAAA;IACvB,yCAA6B,CAAA;IAC7B,yCAA6B,CAAA;IAC7B,yCAA6B,CAAA;IAC7B,2CAA+B,CAAA;IAC/B,uCAA2B,CAAA;IAC3B,uCAA2B,CAAA;IAC3B,uCAA2B,CAAA;IAC3B,iCAAqB,CAAA;AACvB,CAAC,EAbW,QAAQ,KAAR,QAAQ,QAanB"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Position } from "./position.enum";
|
|
2
|
+
import { PositionAnchor } from "./position-anchor.enum";
|
|
3
|
+
/** Options that can be passed to `position()` method. */
|
|
4
|
+
export interface PositioningOptions {
|
|
5
|
+
/** Indicates which point on the positioned element it should be positioned by. */
|
|
6
|
+
anchor?: PositionAnchor;
|
|
7
|
+
/**
|
|
8
|
+
* An array of pixel offsets. Each offset is applied
|
|
9
|
+
* to the corresponding term in `position`. So to continue the above example of
|
|
10
|
+
* `"bottom left"`, if the offsets are `[-7, 9]`, the element will be placed at
|
|
11
|
+
* the bottom of the `relativeTo` element minus 7 pixels, and at the left of it
|
|
12
|
+
* plus 9 pixels. (NB: The values will be converted to rem.)
|
|
13
|
+
*/
|
|
14
|
+
offsets?: number[];
|
|
15
|
+
/**
|
|
16
|
+
* When using `relativeTo`, this describes the positioning relationship between
|
|
17
|
+
* the two elements. For example, if it's `"bottom left"`, the positioned element
|
|
18
|
+
* will be placed at the bottom left of the `relativeTo` element.
|
|
19
|
+
*/
|
|
20
|
+
position?: Position;
|
|
21
|
+
/**
|
|
22
|
+
* Normally, an element positioned by the service will simply have its current
|
|
23
|
+
* position on the page locked in place. Instead you can have it positioned
|
|
24
|
+
* relative to another element.
|
|
25
|
+
*/
|
|
26
|
+
relativeTo?: HTMLElement;
|
|
27
|
+
/**
|
|
28
|
+
* The width of the positioned element will be set to the width of the element
|
|
29
|
+
* provided to the relativeTo option, rather than its own natural width.
|
|
30
|
+
*/
|
|
31
|
+
useRelativeTargetWidth?: boolean;
|
|
32
|
+
/** Specify a z-index override for the positioned element. */
|
|
33
|
+
zIndex?: number;
|
|
34
|
+
/** The element's ancestor that scrolls, if it's not the window itself */
|
|
35
|
+
scrollParent?: HTMLElement;
|
|
36
|
+
}
|
|
37
|
+
export declare const DEFAULT_POSITIONING_OPTIONS: PositioningOptions;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Position } from "./position.enum";
|
|
2
|
+
import { PositionAnchor } from "./position-anchor.enum";
|
|
3
|
+
export var DEFAULT_POSITIONING_OPTIONS = {
|
|
4
|
+
anchor: PositionAnchor.TOP_LEFT,
|
|
5
|
+
offsets: [],
|
|
6
|
+
position: Position.TOP_LEFT,
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=positioning-options.interface.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"positioning-options.interface.js","sourceRoot":"","sources":["../../src/positioning-options.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AA2CxD,MAAM,CAAC,IAAM,2BAA2B,GAAuB;IAC7D,MAAM,EAAE,cAAc,CAAC,QAAQ;IAC/B,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,QAAQ,CAAC,QAAQ;CAC5B,CAAC"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import "intersection-observer";
|
|
2
|
+
import type { PositioningOptions } from "./positioning-options.interface";
|
|
3
|
+
/**
|
|
4
|
+
* This class follows a singleton pattern where you can create an instance by calling
|
|
5
|
+
* `new PositioningService()` if you wish, but all instance methods pass through to
|
|
6
|
+
* static methods, so there's really only one set of elements being positioned that's
|
|
7
|
+
* shared between all instances and static usages of PositioningService.
|
|
8
|
+
*/
|
|
9
|
+
export declare class PositioningService {
|
|
10
|
+
static elements: Map<HTMLElement, PositioningOptions>;
|
|
11
|
+
private static registeredScrollParents;
|
|
12
|
+
private static events;
|
|
13
|
+
private static viewportObserver;
|
|
14
|
+
static on(eventName: any, handler: any): void;
|
|
15
|
+
static off(eventName: any, handler: any): void;
|
|
16
|
+
static once(eventName: any, handler: any): void;
|
|
17
|
+
static checkCollisions(element: HTMLElement, otherElements?: HTMLElement[]): void;
|
|
18
|
+
/**
|
|
19
|
+
* Returns `true` if the element is currently being positioned by the service
|
|
20
|
+
* and `false` otherwise.
|
|
21
|
+
*/
|
|
22
|
+
static isPositioned(element: HTMLElement): boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Returns the options currently beinng used for positioning the element,
|
|
25
|
+
* if it is indeed being positioned by the service.
|
|
26
|
+
*/
|
|
27
|
+
static getPositioningOptions(element: HTMLElement): PositioningOptions;
|
|
28
|
+
/** PositioningService will start controlling the position of the given element. */
|
|
29
|
+
static position(element: HTMLElement, options?: PositioningOptions): void;
|
|
30
|
+
/** PositioningService will stop controlling the position of the given element. */
|
|
31
|
+
static release(element: HTMLElement): void;
|
|
32
|
+
static releaseAll(): void;
|
|
33
|
+
/** PositioningService will refresh the positioning of the given element */
|
|
34
|
+
static refresh(element: HTMLElement): void;
|
|
35
|
+
static refreshAll(): void;
|
|
36
|
+
/** Update the positioning options of a currently positioned element */
|
|
37
|
+
static reposition(element: HTMLElement, newOptions: PositioningOptions): void;
|
|
38
|
+
private static onViewportIntersection;
|
|
39
|
+
private static onElementIntersection;
|
|
40
|
+
private static getRootBounds;
|
|
41
|
+
private static clearStyles;
|
|
42
|
+
private static fixElementPosition;
|
|
43
|
+
private static update;
|
|
44
|
+
on(eventName: any, handler: any): void;
|
|
45
|
+
off(eventName: any, handler: any): void;
|
|
46
|
+
once(eventName: any, handler: any): void;
|
|
47
|
+
isPositioned(element: HTMLElement): boolean;
|
|
48
|
+
getPositioningOptions(element: HTMLElement): PositioningOptions;
|
|
49
|
+
position(element: HTMLElement, options?: PositioningOptions): void;
|
|
50
|
+
release(element: HTMLElement): void;
|
|
51
|
+
releaseAll(): void;
|
|
52
|
+
refresh(element: HTMLElement): void;
|
|
53
|
+
refreshAll(): void;
|
|
54
|
+
reposition(element: HTMLElement, newOptions: PositioningOptions): void;
|
|
55
|
+
}
|
|
@@ -0,0 +1,466 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
13
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
14
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
15
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
16
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
17
|
+
};
|
|
18
|
+
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
19
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
20
|
+
};
|
|
21
|
+
var __values = (this && this.__values) || function(o) {
|
|
22
|
+
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
|
|
23
|
+
if (m) return m.call(o);
|
|
24
|
+
if (o && typeof o.length === "number") return {
|
|
25
|
+
next: function () {
|
|
26
|
+
if (o && i >= o.length) o = void 0;
|
|
27
|
+
return { value: o && o[i++], done: !o };
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
|
31
|
+
};
|
|
32
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
33
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
34
|
+
if (!m) return o;
|
|
35
|
+
var i = m.call(o), r, ar = [], e;
|
|
36
|
+
try {
|
|
37
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
38
|
+
}
|
|
39
|
+
catch (error) { e = { error: error }; }
|
|
40
|
+
finally {
|
|
41
|
+
try {
|
|
42
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
43
|
+
}
|
|
44
|
+
finally { if (e) throw e.error; }
|
|
45
|
+
}
|
|
46
|
+
return ar;
|
|
47
|
+
};
|
|
48
|
+
import "intersection-observer";
|
|
49
|
+
import { lockedToAnimationFrames, onNextTick } from "@spscommerce/utils";
|
|
50
|
+
import { EventEmitter } from "eventemitter3";
|
|
51
|
+
import { DEFAULT_POSITIONING_OPTIONS } from "./positioning-options.interface";
|
|
52
|
+
import { PositionAnchor } from "./position-anchor.enum";
|
|
53
|
+
var NAVBAR_HEIGHT = 60;
|
|
54
|
+
/**
|
|
55
|
+
* This class follows a singleton pattern where you can create an instance by calling
|
|
56
|
+
* `new PositioningService()` if you wish, but all instance methods pass through to
|
|
57
|
+
* static methods, so there's really only one set of elements being positioned that's
|
|
58
|
+
* shared between all instances and static usages of PositioningService.
|
|
59
|
+
*/
|
|
60
|
+
var PositioningService = /** @class */ (function () {
|
|
61
|
+
function PositioningService() {
|
|
62
|
+
}
|
|
63
|
+
PositioningService.on = function (eventName, handler) {
|
|
64
|
+
PositioningService.events.on(eventName, handler);
|
|
65
|
+
};
|
|
66
|
+
PositioningService.off = function (eventName, handler) {
|
|
67
|
+
PositioningService.events.off(eventName, handler);
|
|
68
|
+
};
|
|
69
|
+
PositioningService.once = function (eventName, handler) {
|
|
70
|
+
PositioningService.events.once(eventName, handler);
|
|
71
|
+
};
|
|
72
|
+
PositioningService.checkCollisions = function (element, otherElements) {
|
|
73
|
+
var e_1, _a;
|
|
74
|
+
var otherElementsList = otherElements || Array.from(PositioningService.elements.keys());
|
|
75
|
+
var bounds = element.getBoundingClientRect();
|
|
76
|
+
var collisions = [];
|
|
77
|
+
try {
|
|
78
|
+
for (var otherElementsList_1 = __values(otherElementsList), otherElementsList_1_1 = otherElementsList_1.next(); !otherElementsList_1_1.done; otherElementsList_1_1 = otherElementsList_1.next()) {
|
|
79
|
+
var otherElement = otherElementsList_1_1.value;
|
|
80
|
+
if (otherElement !== element) {
|
|
81
|
+
var otherBounds = otherElement.getBoundingClientRect();
|
|
82
|
+
if (otherBounds.left <= bounds.right
|
|
83
|
+
&& otherBounds.right >= bounds.left
|
|
84
|
+
&& otherBounds.top <= bounds.bottom
|
|
85
|
+
&& otherBounds.bottom >= bounds.top) {
|
|
86
|
+
collisions.push(otherElement);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
92
|
+
finally {
|
|
93
|
+
try {
|
|
94
|
+
if (otherElementsList_1_1 && !otherElementsList_1_1.done && (_a = otherElementsList_1.return)) _a.call(otherElementsList_1);
|
|
95
|
+
}
|
|
96
|
+
finally { if (e_1) throw e_1.error; }
|
|
97
|
+
}
|
|
98
|
+
if (collisions.length) {
|
|
99
|
+
PositioningService.onElementIntersection(element, collisions);
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
/**
|
|
103
|
+
* Returns `true` if the element is currently being positioned by the service
|
|
104
|
+
* and `false` otherwise.
|
|
105
|
+
*/
|
|
106
|
+
PositioningService.isPositioned = function (element) {
|
|
107
|
+
return PositioningService.elements.has(element);
|
|
108
|
+
};
|
|
109
|
+
/**
|
|
110
|
+
* Returns the options currently beinng used for positioning the element,
|
|
111
|
+
* if it is indeed being positioned by the service.
|
|
112
|
+
*/
|
|
113
|
+
PositioningService.getPositioningOptions = function (element) {
|
|
114
|
+
if (PositioningService.elements.has(element)) {
|
|
115
|
+
return PositioningService.elements.get(element);
|
|
116
|
+
}
|
|
117
|
+
return null;
|
|
118
|
+
};
|
|
119
|
+
/** PositioningService will start controlling the position of the given element. */
|
|
120
|
+
PositioningService.position = function (element, options) {
|
|
121
|
+
if (options === void 0) { options = {}; }
|
|
122
|
+
var opts = __assign(__assign({}, DEFAULT_POSITIONING_OPTIONS), options);
|
|
123
|
+
var e = element;
|
|
124
|
+
while (e !== document.body) {
|
|
125
|
+
e = e.parentElement;
|
|
126
|
+
if (e.classList.contains("sps-focused-task")) {
|
|
127
|
+
opts.scrollParent = e;
|
|
128
|
+
if (!PositioningService.registeredScrollParents.has(e)) {
|
|
129
|
+
PositioningService.registeredScrollParents.add(e);
|
|
130
|
+
e.addEventListener("scroll", PositioningService.update);
|
|
131
|
+
}
|
|
132
|
+
break;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
// eslint-disable-next-line no-param-reassign
|
|
136
|
+
element.style.visibility = "hidden";
|
|
137
|
+
if (PositioningService.elements.size === 0) {
|
|
138
|
+
window.addEventListener("resize", PositioningService.update);
|
|
139
|
+
window.addEventListener("scroll", PositioningService.update);
|
|
140
|
+
}
|
|
141
|
+
if (!opts.relativeTo) {
|
|
142
|
+
throw new Error("You must provide an element for the relativeTo option to position an element.");
|
|
143
|
+
}
|
|
144
|
+
PositioningService.elements.set(element, opts);
|
|
145
|
+
onNextTick(function () {
|
|
146
|
+
PositioningService.fixElementPosition(element);
|
|
147
|
+
PositioningService.viewportObserver.observe(element);
|
|
148
|
+
// eslint-disable-next-line no-param-reassign
|
|
149
|
+
element.style.visibility = "";
|
|
150
|
+
PositioningService.checkCollisions(element);
|
|
151
|
+
});
|
|
152
|
+
};
|
|
153
|
+
/** PositioningService will stop controlling the position of the given element. */
|
|
154
|
+
PositioningService.release = function (element) {
|
|
155
|
+
if (PositioningService.elements.has(element)) {
|
|
156
|
+
PositioningService.clearStyles(element);
|
|
157
|
+
var options = PositioningService.elements.get(element);
|
|
158
|
+
if (options.scrollParent) {
|
|
159
|
+
options.scrollParent.removeEventListener("scroll", PositioningService.update);
|
|
160
|
+
PositioningService.registeredScrollParents.delete(options.scrollParent);
|
|
161
|
+
}
|
|
162
|
+
PositioningService.elements.delete(element);
|
|
163
|
+
if (PositioningService.elements.size === 0) {
|
|
164
|
+
window.removeEventListener("resize", PositioningService.update);
|
|
165
|
+
window.removeEventListener("scroll", PositioningService.update);
|
|
166
|
+
}
|
|
167
|
+
PositioningService.viewportObserver.unobserve(element);
|
|
168
|
+
}
|
|
169
|
+
};
|
|
170
|
+
PositioningService.releaseAll = function () {
|
|
171
|
+
var e_2, _a;
|
|
172
|
+
try {
|
|
173
|
+
for (var _b = __values(PositioningService.elements.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
174
|
+
var element = _c.value;
|
|
175
|
+
PositioningService.release(element);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
catch (e_2_1) { e_2 = { error: e_2_1 }; }
|
|
179
|
+
finally {
|
|
180
|
+
try {
|
|
181
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
182
|
+
}
|
|
183
|
+
finally { if (e_2) throw e_2.error; }
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
/** PositioningService will refresh the positioning of the given element */
|
|
187
|
+
PositioningService.refresh = function (element) {
|
|
188
|
+
if (PositioningService.elements.has(element)) {
|
|
189
|
+
PositioningService.clearStyles(element);
|
|
190
|
+
PositioningService.fixElementPosition(element);
|
|
191
|
+
PositioningService.checkCollisions(element);
|
|
192
|
+
}
|
|
193
|
+
};
|
|
194
|
+
PositioningService.refreshAll = function () {
|
|
195
|
+
var e_3, _a;
|
|
196
|
+
try {
|
|
197
|
+
for (var _b = __values(PositioningService.elements.keys()), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
198
|
+
var element = _c.value;
|
|
199
|
+
PositioningService.refresh(element);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
catch (e_3_1) { e_3 = { error: e_3_1 }; }
|
|
203
|
+
finally {
|
|
204
|
+
try {
|
|
205
|
+
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
206
|
+
}
|
|
207
|
+
finally { if (e_3) throw e_3.error; }
|
|
208
|
+
}
|
|
209
|
+
};
|
|
210
|
+
/** Update the positioning options of a currently positioned element */
|
|
211
|
+
PositioningService.reposition = function (element, newOptions) {
|
|
212
|
+
if (PositioningService.elements.has(element)) {
|
|
213
|
+
var options = PositioningService.elements.get(element);
|
|
214
|
+
PositioningService.elements.set(element, Object.assign(options, newOptions));
|
|
215
|
+
PositioningService.refresh(element);
|
|
216
|
+
}
|
|
217
|
+
};
|
|
218
|
+
PositioningService.onViewportIntersection = function (entries) {
|
|
219
|
+
var e_4, _a;
|
|
220
|
+
var _loop_1 = function (entry) {
|
|
221
|
+
/*
|
|
222
|
+
* This is how you make a copy of an IntersectionObserverEntry that
|
|
223
|
+
* you can modify; it's read-only and incompatible with simply using
|
|
224
|
+
* destructuring or Object.assign. Before sending it out we make the
|
|
225
|
+
* copy read-only by passing it to Object.freeze
|
|
226
|
+
*/
|
|
227
|
+
var entryCopy = Object.keys(IntersectionObserverEntry.prototype).reduce(function (copy, key) {
|
|
228
|
+
var _a;
|
|
229
|
+
return (__assign(__assign({}, copy), (_a = {}, _a[key] = entry[key], _a)));
|
|
230
|
+
}, {});
|
|
231
|
+
entryCopy.rootBounds = entryCopy.rootBounds || PositioningService.getRootBounds();
|
|
232
|
+
PositioningService.events.emit("viewportIntersection", Object.freeze(entryCopy));
|
|
233
|
+
};
|
|
234
|
+
try {
|
|
235
|
+
for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
|
|
236
|
+
var entry = entries_1_1.value;
|
|
237
|
+
_loop_1(entry);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
catch (e_4_1) { e_4 = { error: e_4_1 }; }
|
|
241
|
+
finally {
|
|
242
|
+
try {
|
|
243
|
+
if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
|
|
244
|
+
}
|
|
245
|
+
finally { if (e_4) throw e_4.error; }
|
|
246
|
+
}
|
|
247
|
+
};
|
|
248
|
+
PositioningService.onElementIntersection = function (target, intersectingWith) {
|
|
249
|
+
PositioningService.events.emit("elementIntersection", { target: target, intersectingWith: intersectingWith });
|
|
250
|
+
};
|
|
251
|
+
PositioningService.getRootBounds = function () {
|
|
252
|
+
var rootWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
|
253
|
+
var rootHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
|
254
|
+
return {
|
|
255
|
+
x: 0,
|
|
256
|
+
y: NAVBAR_HEIGHT,
|
|
257
|
+
left: 0,
|
|
258
|
+
top: NAVBAR_HEIGHT,
|
|
259
|
+
right: rootWidth,
|
|
260
|
+
bottom: rootHeight,
|
|
261
|
+
height: rootHeight - NAVBAR_HEIGHT,
|
|
262
|
+
width: rootWidth,
|
|
263
|
+
};
|
|
264
|
+
};
|
|
265
|
+
PositioningService.clearStyles = function (element) {
|
|
266
|
+
Object.assign(element.style, {
|
|
267
|
+
position: "",
|
|
268
|
+
width: "",
|
|
269
|
+
top: "",
|
|
270
|
+
left: "",
|
|
271
|
+
right: "",
|
|
272
|
+
bottom: "",
|
|
273
|
+
visibility: "",
|
|
274
|
+
zIndex: "",
|
|
275
|
+
});
|
|
276
|
+
};
|
|
277
|
+
PositioningService.fixElementPosition = function (element, options) {
|
|
278
|
+
if (!this.elements.has(element)) {
|
|
279
|
+
return;
|
|
280
|
+
}
|
|
281
|
+
var opts = options || this.elements.get(element);
|
|
282
|
+
var rootBounds = this.getRootBounds();
|
|
283
|
+
var positionedElementBounds = element.getBoundingClientRect();
|
|
284
|
+
var relativeTargetBounds = opts.relativeTo.getBoundingClientRect();
|
|
285
|
+
var width = (opts.useRelativeTargetWidth
|
|
286
|
+
? relativeTargetBounds
|
|
287
|
+
: positionedElementBounds).width;
|
|
288
|
+
Object.assign(element.style, {
|
|
289
|
+
minWidth: width + "px",
|
|
290
|
+
position: "fixed",
|
|
291
|
+
zIndex: opts.zIndex || "",
|
|
292
|
+
});
|
|
293
|
+
var top;
|
|
294
|
+
var left;
|
|
295
|
+
var positionRelativeToTarget = opts.position.split(" ");
|
|
296
|
+
var offsetA = opts.offsets[0] || 0;
|
|
297
|
+
var offsetB = opts.offsets[1] || 0;
|
|
298
|
+
top = 0;
|
|
299
|
+
left = 0;
|
|
300
|
+
switch (positionRelativeToTarget[0]) {
|
|
301
|
+
case "top":
|
|
302
|
+
top = relativeTargetBounds.top - positionedElementBounds.height - offsetA;
|
|
303
|
+
break;
|
|
304
|
+
case "left":
|
|
305
|
+
left = relativeTargetBounds.left - width - offsetA;
|
|
306
|
+
break;
|
|
307
|
+
case "right":
|
|
308
|
+
left = relativeTargetBounds.right + offsetA;
|
|
309
|
+
break;
|
|
310
|
+
case "bottom":
|
|
311
|
+
top = relativeTargetBounds.bottom + offsetA;
|
|
312
|
+
break;
|
|
313
|
+
default:
|
|
314
|
+
throw new Error(opts.position + " is not a valid position");
|
|
315
|
+
}
|
|
316
|
+
switch (positionRelativeToTarget[1]) {
|
|
317
|
+
case "left":
|
|
318
|
+
left = relativeTargetBounds.left - offsetB;
|
|
319
|
+
break;
|
|
320
|
+
case "top":
|
|
321
|
+
top = relativeTargetBounds.top - offsetB;
|
|
322
|
+
break;
|
|
323
|
+
case "middle":
|
|
324
|
+
if (positionRelativeToTarget[0] === "top"
|
|
325
|
+
|| positionRelativeToTarget[0] === "bottom") {
|
|
326
|
+
left = relativeTargetBounds.left
|
|
327
|
+
+ (relativeTargetBounds.width / 2)
|
|
328
|
+
- (width / 2)
|
|
329
|
+
+ offsetB;
|
|
330
|
+
}
|
|
331
|
+
else if (positionRelativeToTarget[0] === "left"
|
|
332
|
+
|| positionRelativeToTarget[0] === "right") {
|
|
333
|
+
top = relativeTargetBounds.top
|
|
334
|
+
+ (relativeTargetBounds.height / 2)
|
|
335
|
+
- (positionedElementBounds.height / 2)
|
|
336
|
+
+ offsetB;
|
|
337
|
+
}
|
|
338
|
+
break;
|
|
339
|
+
case "bottom":
|
|
340
|
+
top = relativeTargetBounds.bottom - positionedElementBounds.height + offsetB;
|
|
341
|
+
break;
|
|
342
|
+
case "right":
|
|
343
|
+
left = relativeTargetBounds.right - width + offsetB;
|
|
344
|
+
break;
|
|
345
|
+
default:
|
|
346
|
+
throw new Error(opts.position + " is not a valid position");
|
|
347
|
+
}
|
|
348
|
+
var bottom = top + positionedElementBounds.height;
|
|
349
|
+
var right = left + positionedElementBounds.width;
|
|
350
|
+
var topPx = Math.round(top) + "px";
|
|
351
|
+
var bottomPx = Math.round(rootBounds.bottom - bottom) + "px";
|
|
352
|
+
var leftPx = Math.round(left) + "px";
|
|
353
|
+
var rightPx = Math.round(rootBounds.right - right) + "px";
|
|
354
|
+
switch (opts.anchor) {
|
|
355
|
+
case PositionAnchor.TOP_LEFT:
|
|
356
|
+
Object.assign(element.style, {
|
|
357
|
+
top: topPx,
|
|
358
|
+
bottom: "auto",
|
|
359
|
+
left: leftPx,
|
|
360
|
+
right: "auto",
|
|
361
|
+
});
|
|
362
|
+
break;
|
|
363
|
+
case PositionAnchor.TOP_RIGHT:
|
|
364
|
+
Object.assign(element.style, {
|
|
365
|
+
top: topPx,
|
|
366
|
+
bottom: "auto",
|
|
367
|
+
left: "auto",
|
|
368
|
+
right: rightPx,
|
|
369
|
+
});
|
|
370
|
+
break;
|
|
371
|
+
case PositionAnchor.BOTTOM_LEFT:
|
|
372
|
+
Object.assign(element.style, {
|
|
373
|
+
top: "auto",
|
|
374
|
+
bottom: bottomPx,
|
|
375
|
+
left: leftPx,
|
|
376
|
+
right: "auto",
|
|
377
|
+
});
|
|
378
|
+
break;
|
|
379
|
+
case PositionAnchor.BOTTOM_RIGHT:
|
|
380
|
+
Object.assign(element.style, {
|
|
381
|
+
top: "auto",
|
|
382
|
+
bottom: bottomPx,
|
|
383
|
+
left: "auto",
|
|
384
|
+
right: rightPx,
|
|
385
|
+
});
|
|
386
|
+
break;
|
|
387
|
+
// no default
|
|
388
|
+
}
|
|
389
|
+
};
|
|
390
|
+
PositioningService.update = function (event) {
|
|
391
|
+
var e_5, _a;
|
|
392
|
+
var elements = PositioningService.elements.entries();
|
|
393
|
+
var updatedElements = [];
|
|
394
|
+
try {
|
|
395
|
+
for (var elements_1 = __values(elements), elements_1_1 = elements_1.next(); !elements_1_1.done; elements_1_1 = elements_1.next()) {
|
|
396
|
+
var _b = __read(elements_1_1.value, 2), element = _b[0], options = _b[1];
|
|
397
|
+
if (!event
|
|
398
|
+
|| event.target === document
|
|
399
|
+
|| event.target === options.scrollParent
|
|
400
|
+
|| event.target === window) {
|
|
401
|
+
PositioningService.fixElementPosition(element, options);
|
|
402
|
+
PositioningService.checkCollisions(element, updatedElements);
|
|
403
|
+
updatedElements.push(element);
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
catch (e_5_1) { e_5 = { error: e_5_1 }; }
|
|
408
|
+
finally {
|
|
409
|
+
try {
|
|
410
|
+
if (elements_1_1 && !elements_1_1.done && (_a = elements_1.return)) _a.call(elements_1);
|
|
411
|
+
}
|
|
412
|
+
finally { if (e_5) throw e_5.error; }
|
|
413
|
+
}
|
|
414
|
+
};
|
|
415
|
+
/* eslint class-methods-use-this: "off" */
|
|
416
|
+
PositioningService.prototype.on = function (eventName, handler) {
|
|
417
|
+
PositioningService.on(eventName, handler);
|
|
418
|
+
};
|
|
419
|
+
PositioningService.prototype.off = function (eventName, handler) {
|
|
420
|
+
PositioningService.off(eventName, handler);
|
|
421
|
+
};
|
|
422
|
+
PositioningService.prototype.once = function (eventName, handler) {
|
|
423
|
+
PositioningService.once(eventName, handler);
|
|
424
|
+
};
|
|
425
|
+
PositioningService.prototype.isPositioned = function (element) {
|
|
426
|
+
return PositioningService.isPositioned(element);
|
|
427
|
+
};
|
|
428
|
+
PositioningService.prototype.getPositioningOptions = function (element) {
|
|
429
|
+
return PositioningService.getPositioningOptions(element);
|
|
430
|
+
};
|
|
431
|
+
PositioningService.prototype.position = function (element, options) {
|
|
432
|
+
if (options === void 0) { options = {}; }
|
|
433
|
+
PositioningService.position(element, options);
|
|
434
|
+
};
|
|
435
|
+
PositioningService.prototype.release = function (element) {
|
|
436
|
+
PositioningService.release(element);
|
|
437
|
+
};
|
|
438
|
+
PositioningService.prototype.releaseAll = function () {
|
|
439
|
+
PositioningService.releaseAll();
|
|
440
|
+
};
|
|
441
|
+
PositioningService.prototype.refresh = function (element) {
|
|
442
|
+
PositioningService.refresh(element);
|
|
443
|
+
};
|
|
444
|
+
PositioningService.prototype.refreshAll = function () {
|
|
445
|
+
PositioningService.refreshAll();
|
|
446
|
+
};
|
|
447
|
+
PositioningService.prototype.reposition = function (element, newOptions) {
|
|
448
|
+
PositioningService.reposition(element, newOptions);
|
|
449
|
+
};
|
|
450
|
+
PositioningService.elements = new Map();
|
|
451
|
+
PositioningService.registeredScrollParents = new Set();
|
|
452
|
+
PositioningService.events = new EventEmitter();
|
|
453
|
+
PositioningService.viewportObserver = new IntersectionObserver(PositioningService.onViewportIntersection, {
|
|
454
|
+
rootMargin: "-" + NAVBAR_HEIGHT + "px 0px 0px",
|
|
455
|
+
threshold: 1,
|
|
456
|
+
});
|
|
457
|
+
__decorate([
|
|
458
|
+
lockedToAnimationFrames,
|
|
459
|
+
__metadata("design:type", Function),
|
|
460
|
+
__metadata("design:paramtypes", [Event]),
|
|
461
|
+
__metadata("design:returntype", void 0)
|
|
462
|
+
], PositioningService, "update", null);
|
|
463
|
+
return PositioningService;
|
|
464
|
+
}());
|
|
465
|
+
export { PositioningService };
|
|
466
|
+
//# sourceMappingURL=positioning.service.js.map
|