@workday/canvas-kit-popup-stack 6.1.5 → 6.2.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/README.md +41 -0
- package/dist/commonjs/lib/PopupStack.d.ts +83 -10
- package/dist/commonjs/lib/PopupStack.d.ts.map +1 -1
- package/dist/commonjs/lib/PopupStack.js +129 -15
- package/dist/es6/lib/PopupStack.d.ts +83 -10
- package/dist/es6/lib/PopupStack.d.ts.map +1 -1
- package/dist/es6/lib/PopupStack.js +126 -15
- package/lib/PopupStack.ts +141 -16
- package/package.json +6 -3
- package/ts3.5/dist/commonjs/lib/PopupStack.d.ts +83 -10
- package/ts3.5/dist/es6/lib/PopupStack.d.ts +83 -10
package/README.md
CHANGED
|
@@ -198,6 +198,47 @@ considered to be "contained" by an element under the following conditions:
|
|
|
198
198
|
PopupStack.contains(element: HTMLElement, eventTarget: HTMLElement): boolean
|
|
199
199
|
```
|
|
200
200
|
|
|
201
|
+
### pushStackContext
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
PopupStack.pushStackContext(element: HTMLElement): void
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
Add a new stack context for popups. This method could be called with the same element multiple
|
|
208
|
+
times, but should only push a new stack context once. The most common use-case for calling
|
|
209
|
+
`pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be pushing
|
|
210
|
+
the same element which is very difficult to ensure only one stack is used. To mitigate, this method
|
|
211
|
+
filters out multiple calls to push the same element as a new stack context.
|
|
212
|
+
|
|
213
|
+
### popStackContext
|
|
214
|
+
|
|
215
|
+
```tsx
|
|
216
|
+
PopupStack.popStackContext(element: HTMLElement): void
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
220
|
+
context container element matches to guard against accidental remove of other stack contexts you
|
|
221
|
+
don't own.
|
|
222
|
+
|
|
223
|
+
### transferToCurrentContext
|
|
224
|
+
|
|
225
|
+
```tsx
|
|
226
|
+
PopupStack.transferToCurrentContext(item: PopupStackItem): void
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
Transfer the popup stack item into the current popup stack context.
|
|
230
|
+
|
|
231
|
+
An example might be a popup that is opened and an element goes into fullscreen. The default popup
|
|
232
|
+
stack context is `document.body`, but the
|
|
233
|
+
[Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render
|
|
234
|
+
elements that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
235
|
+
popup stack context, the popup will remain open, but will no longer be rendered. This method will
|
|
236
|
+
transfer that popup to the fullscreen element so that it will render. Popups created while in a
|
|
237
|
+
fullscreen context that need to be transferred back when fullscreen is exited should also call this
|
|
238
|
+
method. While popups may still render when fullscreen is exited, popups will be members of different
|
|
239
|
+
popup stack contexts which will cause unspecified results (like the escape key will choose the wrong
|
|
240
|
+
popup as the "topmost").
|
|
241
|
+
|
|
201
242
|
### createAdapter
|
|
202
243
|
|
|
203
244
|
Create an adapter for the PopupStack. Any method provided will override the default method of
|
|
@@ -32,6 +32,16 @@ export interface PopupStackItem {
|
|
|
32
32
|
* popups.
|
|
33
33
|
*/
|
|
34
34
|
export declare function getValue(index: number, length: number): number;
|
|
35
|
+
interface Stack {
|
|
36
|
+
items: PopupStackItem[];
|
|
37
|
+
container?: () => HTMLElement;
|
|
38
|
+
zIndex: {
|
|
39
|
+
min: number;
|
|
40
|
+
max: number;
|
|
41
|
+
getValue: typeof getValue;
|
|
42
|
+
};
|
|
43
|
+
_adapter: Partial<typeof PopupStack>;
|
|
44
|
+
}
|
|
35
45
|
export declare const PopupStack: {
|
|
36
46
|
/**
|
|
37
47
|
* Create a HTMLElement as the container for the popup stack item. The returned element reference
|
|
@@ -48,10 +58,11 @@ export declare const PopupStack: {
|
|
|
48
58
|
*/
|
|
49
59
|
add(item: PopupStackItem): void;
|
|
50
60
|
/**
|
|
51
|
-
* Removes an item from
|
|
52
|
-
*
|
|
53
|
-
* cleanup.
|
|
54
|
-
* reset z-index values of the
|
|
61
|
+
* Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
|
|
62
|
+
* is "closed" or when the element is removed from the page entirely to ensure proper memory
|
|
63
|
+
* cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
|
|
64
|
+
* called when the element is removed from the DOM. This method will reset z-index values of the
|
|
65
|
+
* stack.
|
|
55
66
|
*/
|
|
56
67
|
remove(element: HTMLElement): void;
|
|
57
68
|
/**
|
|
@@ -65,7 +76,7 @@ export declare const PopupStack: {
|
|
|
65
76
|
* elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
|
|
66
77
|
* make decisions based on z-index order.
|
|
67
78
|
*/
|
|
68
|
-
getElements(): HTMLElement[];
|
|
79
|
+
getElements(stackOverride?: Stack | undefined): HTMLElement[];
|
|
69
80
|
/**
|
|
70
81
|
* Bring the element to the top of the stack. This is useful for persistent popups to place them
|
|
71
82
|
* on top of the stack when clicked. If an `owner` was provided to an item when it was added and
|
|
@@ -91,6 +102,36 @@ export declare const PopupStack: {
|
|
|
91
102
|
* is not inside `element`).
|
|
92
103
|
*/
|
|
93
104
|
contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
|
|
105
|
+
/**
|
|
106
|
+
* Add a new stack context for popups. This method could be called with the same element multiple
|
|
107
|
+
* times, but should only push a new stack context once. The most common use-case for calling
|
|
108
|
+
* `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
|
|
109
|
+
* pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
|
|
110
|
+
* this method filters out multiple calls to push the same element as a new stack context.
|
|
111
|
+
*/
|
|
112
|
+
pushStackContext(container: HTMLElement): void;
|
|
113
|
+
/**
|
|
114
|
+
* Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
115
|
+
* context container element matches to guard against accidental remove of other stack contexts
|
|
116
|
+
* you don't own.
|
|
117
|
+
*/
|
|
118
|
+
popStackContext(container: HTMLElement): void;
|
|
119
|
+
/**
|
|
120
|
+
* Transfer the popup stack item into the current popup stack context.
|
|
121
|
+
*
|
|
122
|
+
* An example might be a popup
|
|
123
|
+
* that is opened and an element goes into fullscreen. The default popup stack context is
|
|
124
|
+
* `document.body`, but the [Fullscreen
|
|
125
|
+
* API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
|
|
126
|
+
* that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
127
|
+
* popup stack context, the popup will remain open, but will no longer be rendered. This method
|
|
128
|
+
* will transfer that popup to the fullscreen element so that it will render. Popups created while
|
|
129
|
+
* in a fullscreen context that need to be transferred back when fullscreen is exited should also
|
|
130
|
+
* call this method. While popups may still render when fullscreen is exited, popups will be
|
|
131
|
+
* members of different popup stack contexts which will cause unspecified results (like the escape
|
|
132
|
+
* key will choose the wrong popup as the "topmost").
|
|
133
|
+
*/
|
|
134
|
+
transferToCurrentContext(item: PopupStackItem): void;
|
|
94
135
|
};
|
|
95
136
|
/**
|
|
96
137
|
* Reset all the items in the stack. This should only be used for testing or if the page doesn't
|
|
@@ -117,10 +158,11 @@ export declare const createAdapter: (adapter: Partial<{
|
|
|
117
158
|
*/
|
|
118
159
|
add(item: PopupStackItem): void;
|
|
119
160
|
/**
|
|
120
|
-
* Removes an item from
|
|
121
|
-
*
|
|
122
|
-
* cleanup.
|
|
123
|
-
* reset z-index values of the
|
|
161
|
+
* Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
|
|
162
|
+
* is "closed" or when the element is removed from the page entirely to ensure proper memory
|
|
163
|
+
* cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
|
|
164
|
+
* called when the element is removed from the DOM. This method will reset z-index values of the
|
|
165
|
+
* stack.
|
|
124
166
|
*/
|
|
125
167
|
remove(element: HTMLElement): void;
|
|
126
168
|
/**
|
|
@@ -134,7 +176,7 @@ export declare const createAdapter: (adapter: Partial<{
|
|
|
134
176
|
* elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
|
|
135
177
|
* make decisions based on z-index order.
|
|
136
178
|
*/
|
|
137
|
-
getElements(): HTMLElement[];
|
|
179
|
+
getElements(stackOverride?: Stack | undefined): HTMLElement[];
|
|
138
180
|
/**
|
|
139
181
|
* Bring the element to the top of the stack. This is useful for persistent popups to place them
|
|
140
182
|
* on top of the stack when clicked. If an `owner` was provided to an item when it was added and
|
|
@@ -160,5 +202,36 @@ export declare const createAdapter: (adapter: Partial<{
|
|
|
160
202
|
* is not inside `element`).
|
|
161
203
|
*/
|
|
162
204
|
contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
|
|
205
|
+
/**
|
|
206
|
+
* Add a new stack context for popups. This method could be called with the same element multiple
|
|
207
|
+
* times, but should only push a new stack context once. The most common use-case for calling
|
|
208
|
+
* `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
|
|
209
|
+
* pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
|
|
210
|
+
* this method filters out multiple calls to push the same element as a new stack context.
|
|
211
|
+
*/
|
|
212
|
+
pushStackContext(container: HTMLElement): void;
|
|
213
|
+
/**
|
|
214
|
+
* Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
215
|
+
* context container element matches to guard against accidental remove of other stack contexts
|
|
216
|
+
* you don't own.
|
|
217
|
+
*/
|
|
218
|
+
popStackContext(container: HTMLElement): void;
|
|
219
|
+
/**
|
|
220
|
+
* Transfer the popup stack item into the current popup stack context.
|
|
221
|
+
*
|
|
222
|
+
* An example might be a popup
|
|
223
|
+
* that is opened and an element goes into fullscreen. The default popup stack context is
|
|
224
|
+
* `document.body`, but the [Fullscreen
|
|
225
|
+
* API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
|
|
226
|
+
* that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
227
|
+
* popup stack context, the popup will remain open, but will no longer be rendered. This method
|
|
228
|
+
* will transfer that popup to the fullscreen element so that it will render. Popups created while
|
|
229
|
+
* in a fullscreen context that need to be transferred back when fullscreen is exited should also
|
|
230
|
+
* call this method. While popups may still render when fullscreen is exited, popups will be
|
|
231
|
+
* members of different popup stack contexts which will cause unspecified results (like the escape
|
|
232
|
+
* key will choose the wrong popup as the "topmost").
|
|
233
|
+
*/
|
|
234
|
+
transferToCurrentContext(item: PopupStackItem): void;
|
|
163
235
|
}>) => void;
|
|
236
|
+
export {};
|
|
164
237
|
//# sourceMappingURL=PopupStack.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AASD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAO9D;AA0DD,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,WAAW,CAAC;IAC9B,MAAM,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,QAAQ,CAAC;KAC3B,CAAC;IACF,QAAQ,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;CACtC;AAwFD,eAAO,MAAM,UAAU;IACrB;;;;;OAKG;;IAUH;;;;;OAKG;;IAaH;;;;;;OAMG;;IAgBH;;;;OAIG;;IAcH;;;;OAIG;;IASH;;;;;;;;;;;OAWG;;IA8BH;;;;;;;;;;OAUG;;IA4BH;;;;;;OAMG;;IAqBH;;;;OAIG;;IAaH;;;;;;;;;;;;;;OAcG;;CAsBJ,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,SAEzB;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa;IAnQxB;;;;;OAKG;;IAUH;;;;;OAKG;;IAaH;;;;;;OAMG;;IAgBH;;;;OAIG;;IAcH;;;;OAIG;;IASH;;;;;;;;;;;OAWG;;IA8BH;;;;;;;;;;OAUG;;IA4BH;;;;;;OAMG;;IAqBH;;;;OAIG;;IAaH;;;;;;;;;;;;;;OAcG;;WAsCJ,CAAC"}
|
|
@@ -6,7 +6,11 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
|
|
|
6
6
|
r[k] = a[j];
|
|
7
7
|
return r;
|
|
8
8
|
};
|
|
9
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
10
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
11
|
+
};
|
|
9
12
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
+
var screenfull_1 = __importDefault(require("screenfull"));
|
|
10
14
|
function getLast(items) {
|
|
11
15
|
if (items.length) {
|
|
12
16
|
return items[items.length - 1];
|
|
@@ -139,12 +143,19 @@ var setToWindow = function (path, value) {
|
|
|
139
143
|
// defined on the page, we need to use that one. Never, ever, ever change this variable name on
|
|
140
144
|
// window
|
|
141
145
|
var stack = getFromWindow('workday.__popupStack') || {
|
|
142
|
-
description: 'Global popup stack from @workday/canvas-kit
|
|
146
|
+
description: 'Global popup stack from @workday/canvas-kit/popup-stack',
|
|
147
|
+
container: function () { return document.body; },
|
|
143
148
|
items: [],
|
|
144
149
|
zIndex: { min: 30, max: 50, getValue: getValue },
|
|
145
150
|
_adapter: {},
|
|
146
151
|
};
|
|
147
152
|
setToWindow('workday.__popupStack', stack);
|
|
153
|
+
var stacks = getFromWindow('workday.__popupStackOfStacks') || [stack];
|
|
154
|
+
stacks.description = 'Global stack of popup stacks from @workday/canvas-kit/popup-stack';
|
|
155
|
+
setToWindow('workday.__popupStackOfStacks', stacks);
|
|
156
|
+
function getTopStack() {
|
|
157
|
+
return stacks[stacks.length - 1];
|
|
158
|
+
}
|
|
148
159
|
exports.PopupStack = {
|
|
149
160
|
/**
|
|
150
161
|
* Create a HTMLElement as the container for the popup stack item. The returned element reference
|
|
@@ -154,6 +165,7 @@ exports.PopupStack = {
|
|
|
154
165
|
*/
|
|
155
166
|
createContainer: function () {
|
|
156
167
|
var _a;
|
|
168
|
+
var stack = getTopStack();
|
|
157
169
|
if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.createContainer) {
|
|
158
170
|
return stack._adapter.createContainer();
|
|
159
171
|
}
|
|
@@ -168,30 +180,36 @@ exports.PopupStack = {
|
|
|
168
180
|
* method when the event triggers.
|
|
169
181
|
*/
|
|
170
182
|
add: function (item) {
|
|
171
|
-
var _a;
|
|
183
|
+
var _a, _b;
|
|
184
|
+
var stack = getTopStack();
|
|
172
185
|
if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.add) {
|
|
173
186
|
stack._adapter.add(item);
|
|
174
187
|
return;
|
|
175
188
|
}
|
|
176
189
|
stack.items.push(item);
|
|
177
|
-
document.body.appendChild(item.element);
|
|
190
|
+
(((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) || document.body).appendChild(item.element);
|
|
178
191
|
setZIndexOfElements(exports.PopupStack.getElements());
|
|
179
192
|
},
|
|
180
193
|
/**
|
|
181
|
-
* Removes an item from
|
|
182
|
-
*
|
|
183
|
-
* cleanup.
|
|
184
|
-
* reset z-index values of the
|
|
194
|
+
* Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
|
|
195
|
+
* is "closed" or when the element is removed from the page entirely to ensure proper memory
|
|
196
|
+
* cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
|
|
197
|
+
* called when the element is removed from the DOM. This method will reset z-index values of the
|
|
198
|
+
* stack.
|
|
185
199
|
*/
|
|
186
200
|
remove: function (element) {
|
|
187
|
-
var _a;
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
201
|
+
var _a, _b;
|
|
202
|
+
// Find the stack the popup belongs to.
|
|
203
|
+
var stack = find(stacks, function (stack) { return !!find(stack.items, function (item) { return item.element === element; }); });
|
|
204
|
+
if (stack) {
|
|
205
|
+
if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.remove) {
|
|
206
|
+
stack._adapter.remove(element);
|
|
207
|
+
return;
|
|
208
|
+
}
|
|
209
|
+
stack.items = stack.items.filter(function (item) { return item.element !== element; });
|
|
210
|
+
(((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) || document.body).removeChild(element);
|
|
211
|
+
setZIndexOfElements(exports.PopupStack.getElements(stack));
|
|
191
212
|
}
|
|
192
|
-
stack.items = stack.items.filter(function (item) { return item.element !== element; });
|
|
193
|
-
document.body.removeChild(element);
|
|
194
|
-
setZIndexOfElements(exports.PopupStack.getElements());
|
|
195
213
|
},
|
|
196
214
|
/**
|
|
197
215
|
* Returns true when the provided `element` is at the top of the stack. It will return false if it
|
|
@@ -200,6 +218,7 @@ exports.PopupStack = {
|
|
|
200
218
|
*/
|
|
201
219
|
isTopmost: function (element) {
|
|
202
220
|
var _a;
|
|
221
|
+
var stack = getTopStack();
|
|
203
222
|
if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.isTopmost) {
|
|
204
223
|
return stack._adapter.isTopmost(element);
|
|
205
224
|
}
|
|
@@ -214,8 +233,9 @@ exports.PopupStack = {
|
|
|
214
233
|
* elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
|
|
215
234
|
* make decisions based on z-index order.
|
|
216
235
|
*/
|
|
217
|
-
getElements: function () {
|
|
236
|
+
getElements: function (stackOverride) {
|
|
218
237
|
var _a;
|
|
238
|
+
var stack = stackOverride || getTopStack();
|
|
219
239
|
if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.getElements) {
|
|
220
240
|
return stack._adapter.getElements();
|
|
221
241
|
}
|
|
@@ -235,6 +255,7 @@ exports.PopupStack = {
|
|
|
235
255
|
*/
|
|
236
256
|
bringToTop: function (element) {
|
|
237
257
|
var _a;
|
|
258
|
+
var stack = getTopStack();
|
|
238
259
|
if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.bringToTop) {
|
|
239
260
|
stack._adapter.bringToTop(element);
|
|
240
261
|
return;
|
|
@@ -272,6 +293,7 @@ exports.PopupStack = {
|
|
|
272
293
|
*/
|
|
273
294
|
contains: function (element, eventTarget) {
|
|
274
295
|
var _a, _b;
|
|
296
|
+
var stack = getTopStack();
|
|
275
297
|
if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.contains) {
|
|
276
298
|
return stack._adapter.contains(element, eventTarget);
|
|
277
299
|
}
|
|
@@ -289,6 +311,79 @@ exports.PopupStack = {
|
|
|
289
311
|
}
|
|
290
312
|
return false;
|
|
291
313
|
},
|
|
314
|
+
/**
|
|
315
|
+
* Add a new stack context for popups. This method could be called with the same element multiple
|
|
316
|
+
* times, but should only push a new stack context once. The most common use-case for calling
|
|
317
|
+
* `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
|
|
318
|
+
* pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
|
|
319
|
+
* this method filters out multiple calls to push the same element as a new stack context.
|
|
320
|
+
*/
|
|
321
|
+
pushStackContext: function (container) {
|
|
322
|
+
var _a, _b;
|
|
323
|
+
var stack = getTopStack();
|
|
324
|
+
if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.pushStackContext) {
|
|
325
|
+
return stack._adapter.pushStackContext(container);
|
|
326
|
+
}
|
|
327
|
+
// Don't push if the container already exists. This removes duplicates
|
|
328
|
+
if (((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) === container) {
|
|
329
|
+
return;
|
|
330
|
+
}
|
|
331
|
+
var newStack = {
|
|
332
|
+
items: [],
|
|
333
|
+
zIndex: stack.zIndex,
|
|
334
|
+
container: function () { return container; },
|
|
335
|
+
_adapter: {},
|
|
336
|
+
};
|
|
337
|
+
stacks.push(newStack);
|
|
338
|
+
},
|
|
339
|
+
/**
|
|
340
|
+
* Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
341
|
+
* context container element matches to guard against accidental remove of other stack contexts
|
|
342
|
+
* you don't own.
|
|
343
|
+
*/
|
|
344
|
+
popStackContext: function (container) {
|
|
345
|
+
var _a, _b;
|
|
346
|
+
var stack = getTopStack();
|
|
347
|
+
if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.popStackContext) {
|
|
348
|
+
return stack._adapter.popStackContext(container);
|
|
349
|
+
}
|
|
350
|
+
if (((_b = stack.container) === null || _b === void 0 ? void 0 : _b.call(stack)) === container && stacks.length > 1) {
|
|
351
|
+
stacks.pop();
|
|
352
|
+
}
|
|
353
|
+
},
|
|
354
|
+
/**
|
|
355
|
+
* Transfer the popup stack item into the current popup stack context.
|
|
356
|
+
*
|
|
357
|
+
* An example might be a popup
|
|
358
|
+
* that is opened and an element goes into fullscreen. The default popup stack context is
|
|
359
|
+
* `document.body`, but the [Fullscreen
|
|
360
|
+
* API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
|
|
361
|
+
* that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
362
|
+
* popup stack context, the popup will remain open, but will no longer be rendered. This method
|
|
363
|
+
* will transfer that popup to the fullscreen element so that it will render. Popups created while
|
|
364
|
+
* in a fullscreen context that need to be transferred back when fullscreen is exited should also
|
|
365
|
+
* call this method. While popups may still render when fullscreen is exited, popups will be
|
|
366
|
+
* members of different popup stack contexts which will cause unspecified results (like the escape
|
|
367
|
+
* key will choose the wrong popup as the "topmost").
|
|
368
|
+
*/
|
|
369
|
+
transferToCurrentContext: function (item) {
|
|
370
|
+
var _a;
|
|
371
|
+
var stack = getTopStack();
|
|
372
|
+
if ((_a = stack._adapter) === null || _a === void 0 ? void 0 : _a.transferToCurrentContext) {
|
|
373
|
+
return stack._adapter.transferToCurrentContext(item);
|
|
374
|
+
}
|
|
375
|
+
if (find(stack.items, function (i) { return i.element === item.element; })) {
|
|
376
|
+
// The element is already in the stack, don't do anything
|
|
377
|
+
return;
|
|
378
|
+
}
|
|
379
|
+
// Try to find the element in existing stacks. If it exists, we need to first remove from that
|
|
380
|
+
// stack context
|
|
381
|
+
var oldStack = find(stacks, function (stack) { return !!find(stack.items, function (i) { return i.element === item.element; }); });
|
|
382
|
+
if (oldStack) {
|
|
383
|
+
exports.PopupStack.remove(item.element);
|
|
384
|
+
}
|
|
385
|
+
exports.PopupStack.add(item);
|
|
386
|
+
},
|
|
292
387
|
};
|
|
293
388
|
/**
|
|
294
389
|
* Reset all the items in the stack. This should only be used for testing or if the page doesn't
|
|
@@ -305,3 +400,22 @@ exports.resetStack = resetStack;
|
|
|
305
400
|
exports.createAdapter = function (adapter) {
|
|
306
401
|
stack._adapter = adapter;
|
|
307
402
|
};
|
|
403
|
+
// keep track of the element ourselves to avoid accidentally popping off someone else's stack
|
|
404
|
+
// context
|
|
405
|
+
var element = null;
|
|
406
|
+
// Where should this go? Each version of `PopupStack` on a page will add a listener. The
|
|
407
|
+
// `PopupStack` should guard against multiple handlers like this simultaneously and there is no
|
|
408
|
+
// lifecycle here.
|
|
409
|
+
if (screenfull_1.default.isEnabled) {
|
|
410
|
+
screenfull_1.default.on('change', function () {
|
|
411
|
+
if (screenfull_1.default.isFullscreen) {
|
|
412
|
+
if (screenfull_1.default.element) {
|
|
413
|
+
element = screenfull_1.default.element;
|
|
414
|
+
exports.PopupStack.pushStackContext(element);
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
else if (element) {
|
|
418
|
+
exports.PopupStack.popStackContext(element);
|
|
419
|
+
}
|
|
420
|
+
});
|
|
421
|
+
}
|
|
@@ -32,6 +32,16 @@ export interface PopupStackItem {
|
|
|
32
32
|
* popups.
|
|
33
33
|
*/
|
|
34
34
|
export declare function getValue(index: number, length: number): number;
|
|
35
|
+
interface Stack {
|
|
36
|
+
items: PopupStackItem[];
|
|
37
|
+
container?: () => HTMLElement;
|
|
38
|
+
zIndex: {
|
|
39
|
+
min: number;
|
|
40
|
+
max: number;
|
|
41
|
+
getValue: typeof getValue;
|
|
42
|
+
};
|
|
43
|
+
_adapter: Partial<typeof PopupStack>;
|
|
44
|
+
}
|
|
35
45
|
export declare const PopupStack: {
|
|
36
46
|
/**
|
|
37
47
|
* Create a HTMLElement as the container for the popup stack item. The returned element reference
|
|
@@ -48,10 +58,11 @@ export declare const PopupStack: {
|
|
|
48
58
|
*/
|
|
49
59
|
add(item: PopupStackItem): void;
|
|
50
60
|
/**
|
|
51
|
-
* Removes an item from
|
|
52
|
-
*
|
|
53
|
-
* cleanup.
|
|
54
|
-
* reset z-index values of the
|
|
61
|
+
* Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
|
|
62
|
+
* is "closed" or when the element is removed from the page entirely to ensure proper memory
|
|
63
|
+
* cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
|
|
64
|
+
* called when the element is removed from the DOM. This method will reset z-index values of the
|
|
65
|
+
* stack.
|
|
55
66
|
*/
|
|
56
67
|
remove(element: HTMLElement): void;
|
|
57
68
|
/**
|
|
@@ -65,7 +76,7 @@ export declare const PopupStack: {
|
|
|
65
76
|
* elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
|
|
66
77
|
* make decisions based on z-index order.
|
|
67
78
|
*/
|
|
68
|
-
getElements(): HTMLElement[];
|
|
79
|
+
getElements(stackOverride?: Stack | undefined): HTMLElement[];
|
|
69
80
|
/**
|
|
70
81
|
* Bring the element to the top of the stack. This is useful for persistent popups to place them
|
|
71
82
|
* on top of the stack when clicked. If an `owner` was provided to an item when it was added and
|
|
@@ -91,6 +102,36 @@ export declare const PopupStack: {
|
|
|
91
102
|
* is not inside `element`).
|
|
92
103
|
*/
|
|
93
104
|
contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
|
|
105
|
+
/**
|
|
106
|
+
* Add a new stack context for popups. This method could be called with the same element multiple
|
|
107
|
+
* times, but should only push a new stack context once. The most common use-case for calling
|
|
108
|
+
* `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
|
|
109
|
+
* pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
|
|
110
|
+
* this method filters out multiple calls to push the same element as a new stack context.
|
|
111
|
+
*/
|
|
112
|
+
pushStackContext(container: HTMLElement): void;
|
|
113
|
+
/**
|
|
114
|
+
* Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
115
|
+
* context container element matches to guard against accidental remove of other stack contexts
|
|
116
|
+
* you don't own.
|
|
117
|
+
*/
|
|
118
|
+
popStackContext(container: HTMLElement): void;
|
|
119
|
+
/**
|
|
120
|
+
* Transfer the popup stack item into the current popup stack context.
|
|
121
|
+
*
|
|
122
|
+
* An example might be a popup
|
|
123
|
+
* that is opened and an element goes into fullscreen. The default popup stack context is
|
|
124
|
+
* `document.body`, but the [Fullscreen
|
|
125
|
+
* API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
|
|
126
|
+
* that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
127
|
+
* popup stack context, the popup will remain open, but will no longer be rendered. This method
|
|
128
|
+
* will transfer that popup to the fullscreen element so that it will render. Popups created while
|
|
129
|
+
* in a fullscreen context that need to be transferred back when fullscreen is exited should also
|
|
130
|
+
* call this method. While popups may still render when fullscreen is exited, popups will be
|
|
131
|
+
* members of different popup stack contexts which will cause unspecified results (like the escape
|
|
132
|
+
* key will choose the wrong popup as the "topmost").
|
|
133
|
+
*/
|
|
134
|
+
transferToCurrentContext(item: PopupStackItem): void;
|
|
94
135
|
};
|
|
95
136
|
/**
|
|
96
137
|
* Reset all the items in the stack. This should only be used for testing or if the page doesn't
|
|
@@ -117,10 +158,11 @@ export declare const createAdapter: (adapter: Partial<{
|
|
|
117
158
|
*/
|
|
118
159
|
add(item: PopupStackItem): void;
|
|
119
160
|
/**
|
|
120
|
-
* Removes an item from
|
|
121
|
-
*
|
|
122
|
-
* cleanup.
|
|
123
|
-
* reset z-index values of the
|
|
161
|
+
* Removes an item from a stack by its `HTMLElement` reference. This should be called when a popup
|
|
162
|
+
* is "closed" or when the element is removed from the page entirely to ensure proper memory
|
|
163
|
+
* cleanup. A popup will be removed from the stack it is a part of. This will not automatically be
|
|
164
|
+
* called when the element is removed from the DOM. This method will reset z-index values of the
|
|
165
|
+
* stack.
|
|
124
166
|
*/
|
|
125
167
|
remove(element: HTMLElement): void;
|
|
126
168
|
/**
|
|
@@ -134,7 +176,7 @@ export declare const createAdapter: (adapter: Partial<{
|
|
|
134
176
|
* elements in the order of lowest z-index to highest z-index. Some popup behaviors will need to
|
|
135
177
|
* make decisions based on z-index order.
|
|
136
178
|
*/
|
|
137
|
-
getElements(): HTMLElement[];
|
|
179
|
+
getElements(stackOverride?: Stack | undefined): HTMLElement[];
|
|
138
180
|
/**
|
|
139
181
|
* Bring the element to the top of the stack. This is useful for persistent popups to place them
|
|
140
182
|
* on top of the stack when clicked. If an `owner` was provided to an item when it was added and
|
|
@@ -160,5 +202,36 @@ export declare const createAdapter: (adapter: Partial<{
|
|
|
160
202
|
* is not inside `element`).
|
|
161
203
|
*/
|
|
162
204
|
contains(element: HTMLElement, eventTarget: HTMLElement): boolean;
|
|
205
|
+
/**
|
|
206
|
+
* Add a new stack context for popups. This method could be called with the same element multiple
|
|
207
|
+
* times, but should only push a new stack context once. The most common use-case for calling
|
|
208
|
+
* `pushStackContext` is when entering fullscreen, but multiple fullscreen listeners could be
|
|
209
|
+
* pushing the same element which is very difficult to ensure only one stack is used. To mitigate,
|
|
210
|
+
* this method filters out multiple calls to push the same element as a new stack context.
|
|
211
|
+
*/
|
|
212
|
+
pushStackContext(container: HTMLElement): void;
|
|
213
|
+
/**
|
|
214
|
+
* Remove the topmost stack context. The stack context will only be removed if the top stack
|
|
215
|
+
* context container element matches to guard against accidental remove of other stack contexts
|
|
216
|
+
* you don't own.
|
|
217
|
+
*/
|
|
218
|
+
popStackContext(container: HTMLElement): void;
|
|
219
|
+
/**
|
|
220
|
+
* Transfer the popup stack item into the current popup stack context.
|
|
221
|
+
*
|
|
222
|
+
* An example might be a popup
|
|
223
|
+
* that is opened and an element goes into fullscreen. The default popup stack context is
|
|
224
|
+
* `document.body`, but the [Fullscreen
|
|
225
|
+
* API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) will only render elements
|
|
226
|
+
* that are children of the fullscreen element. If the popup isn't transferred to the current
|
|
227
|
+
* popup stack context, the popup will remain open, but will no longer be rendered. This method
|
|
228
|
+
* will transfer that popup to the fullscreen element so that it will render. Popups created while
|
|
229
|
+
* in a fullscreen context that need to be transferred back when fullscreen is exited should also
|
|
230
|
+
* call this method. While popups may still render when fullscreen is exited, popups will be
|
|
231
|
+
* members of different popup stack contexts which will cause unspecified results (like the escape
|
|
232
|
+
* key will choose the wrong popup as the "topmost").
|
|
233
|
+
*/
|
|
234
|
+
transferToCurrentContext(item: PopupStackItem): void;
|
|
163
235
|
}>) => void;
|
|
236
|
+
export {};
|
|
164
237
|
//# sourceMappingURL=PopupStack.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PopupStack.d.ts","sourceRoot":"","sources":["../../../lib/PopupStack.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AASD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAO9D;AA0DD,UAAU,KAAK;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,WAAW,CAAC;IAC9B,MAAM,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,OAAO,QAAQ,CAAC;KAC3B,CAAC;IACF,QAAQ,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;CACtC;AAwFD,eAAO,MAAM,UAAU;IACrB;;;;;OAKG;;IAUH;;;;;OAKG;;IAaH;;;;;;OAMG;;IAgBH;;;;OAIG;;IAcH;;;;OAIG;;IASH;;;;;;;;;;;OAWG;;IA8BH;;;;;;;;;;OAUG;;IA4BH;;;;;;OAMG;;IAqBH;;;;OAIG;;IAaH;;;;;;;;;;;;;;OAcG;;CAsBJ,CAAC;AAEF;;;GAGG;AACH,wBAAgB,UAAU,SAEzB;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa;IAnQxB;;;;;OAKG;;IAUH;;;;;OAKG;;IAaH;;;;;;OAMG;;IAgBH;;;;OAIG;;IAcH;;;;OAIG;;IASH;;;;;;;;;;;OAWG;;IA8BH;;;;;;;;;;OAUG;;IA4BH;;;;;;OAMG;;IAqBH;;;;OAIG;;IAaH;;;;;;;;;;;;;;OAcG;;WAsCJ,CAAC"}
|