@internetarchive/modal-manager 2.0.3 → 2.0.4-alpha-webdev7960.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.editorconfig +29 -29
- package/.eslintrc.js +14 -14
- package/.github/workflows/ci.yml +30 -30
- package/.github/workflows/gh-pages-main.yml +42 -42
- package/.github/workflows/pr-preview.yml +40 -40
- package/LICENSE +661 -661
- package/README.md +139 -139
- package/custom-elements.json +170 -170
- package/dist/index.d.ts +7 -7
- package/dist/index.js +5 -5
- package/dist/src/assets/arrow-left-icon.d.ts +2 -2
- package/dist/src/assets/arrow-left-icon.js +2 -2
- package/dist/src/assets/ia-logo-icon.d.ts +2 -2
- package/dist/src/assets/ia-logo-icon.js +2 -2
- package/dist/src/modal-config.d.ts +104 -104
- package/dist/src/modal-config.js +24 -24
- package/dist/src/modal-manager-host-bridge-interface.d.ts +12 -12
- package/dist/src/modal-manager-host-bridge-interface.js +1 -1
- package/dist/src/modal-manager-host-bridge.d.ts +34 -34
- package/dist/src/modal-manager-host-bridge.js +62 -62
- package/dist/src/modal-manager-interface.d.ts +27 -27
- package/dist/src/modal-manager-interface.js +1 -1
- package/dist/src/modal-manager-mode.d.ts +10 -10
- package/dist/src/modal-manager-mode.js +11 -11
- package/dist/src/modal-manager.d.ts +137 -127
- package/dist/src/modal-manager.js +212 -197
- package/dist/src/modal-manager.js.map +1 -1
- package/dist/src/modal-template.d.ts +41 -41
- package/dist/src/modal-template.js +115 -115
- package/dist/src/shoelace/active-elements.d.ts +15 -15
- package/dist/src/shoelace/active-elements.js +27 -27
- package/dist/src/shoelace/modal.d.ts +24 -24
- package/dist/src/shoelace/modal.js +131 -131
- package/dist/src/shoelace/tabbable.d.ts +9 -9
- package/dist/src/shoelace/tabbable.js +169 -169
- package/dist/test/modal-config.test.d.ts +1 -1
- package/dist/test/modal-config.test.js +69 -69
- package/dist/test/modal-manager.test.d.ts +1 -1
- package/dist/test/modal-manager.test.js +275 -240
- package/dist/test/modal-manager.test.js.map +1 -1
- package/dist/test/modal-template.test.d.ts +1 -1
- package/dist/test/modal-template.test.js +156 -156
- package/dist/vite.config.d.ts +2 -2
- package/dist/vite.config.js +22 -22
- package/docs/assets/css/main.css +2678 -2678
- package/docs/classes/_src_modal_config_.modalconfig.html +429 -429
- package/docs/classes/_src_modal_manager_.modalmanager.html +7702 -7702
- package/docs/classes/_src_modal_manager_host_bridge_.modalmanagerhostbridge.html +409 -409
- package/docs/classes/_src_modal_template_.modaltemplate.html +7096 -7096
- package/docs/enums/_src_modal_manager_mode_.modalmanagermode.html +196 -196
- package/docs/globals.html +150 -150
- package/docs/index.html +252 -252
- package/docs/interfaces/_src_modal_manager_host_bridge_interface_.modalmanagerhostbridgeinterface.html +210 -210
- package/docs/interfaces/_src_modal_manager_interface_.modalmanagerinterface.html +7095 -7095
- package/docs/modules/_index_.html +208 -208
- package/docs/modules/_src_modal_config_.html +146 -146
- package/docs/modules/_src_modal_manager_.html +146 -146
- package/docs/modules/_src_modal_manager_host_bridge_.html +146 -146
- package/docs/modules/_src_modal_manager_host_bridge_interface_.html +146 -146
- package/docs/modules/_src_modal_manager_interface_.html +146 -146
- package/docs/modules/_src_modal_manager_mode_.html +146 -146
- package/docs/modules/_src_modal_template_.html +146 -146
- package/docs/modules/_test_modal_config_test_.html +106 -106
- package/docs/modules/_test_modal_manager_test_.html +106 -106
- package/docs/modules/_test_modal_template_test_.html +106 -106
- package/index.html +300 -300
- package/karma.conf.js +24 -24
- package/package.json +85 -85
- package/renovate.json +7 -7
- package/src/modal-manager.ts +22 -0
- package/src/shoelace/LICENSE.md +6 -6
- package/test/modal-manager.test.ts +52 -6
- package/tsconfig.json +21 -21
|
@@ -1,64 +1,65 @@
|
|
|
1
|
-
import { __awaiter, __decorate } from "tslib";
|
|
2
|
-
import { LitElement, html, css, } from 'lit';
|
|
3
|
-
import { property, customElement, query } from 'lit/decorators.js';
|
|
4
|
-
import Modal from './shoelace/modal';
|
|
5
|
-
import './
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* @
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* `
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
* @
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
* @
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
//
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
1
|
+
import { __awaiter, __decorate } from "tslib";
|
|
2
|
+
import { LitElement, html, css, } from 'lit';
|
|
3
|
+
import { property, customElement, query } from 'lit/decorators.js';
|
|
4
|
+
import Modal from './shoelace/modal';
|
|
5
|
+
import { getDeepestActiveElement } from './shoelace/active-elements';
|
|
6
|
+
import './modal-template';
|
|
7
|
+
import { ModalConfig } from './modal-config';
|
|
8
|
+
import { ModalManagerHostBridge } from './modal-manager-host-bridge';
|
|
9
|
+
import { ModalManagerMode } from './modal-manager-mode';
|
|
10
|
+
let ModalManager = class ModalManager extends LitElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
/**
|
|
14
|
+
* The current mode of the ModalManager
|
|
15
|
+
*
|
|
16
|
+
* Current options are `modal` or `closed`
|
|
17
|
+
*
|
|
18
|
+
* @type {ModalManagerMode}
|
|
19
|
+
* @memberof ModalManager
|
|
20
|
+
*/
|
|
21
|
+
this.mode = ModalManagerMode.Closed;
|
|
22
|
+
/**
|
|
23
|
+
* This hostBridge handles environmental-specific interactions such as adding classes
|
|
24
|
+
* to the body tag or event listeners needed to support the modal manager in the host environment.
|
|
25
|
+
*
|
|
26
|
+
* There is a default `ModalManagerHostBridge`, but consumers can override it with a custom
|
|
27
|
+
* `ModalManagerHostBridgeInterface`
|
|
28
|
+
*
|
|
29
|
+
* @type {ModalManagerHostBridgeInterface}
|
|
30
|
+
* @memberof ModalManager
|
|
31
|
+
*/
|
|
32
|
+
this.hostBridge = new ModalManagerHostBridge(this);
|
|
33
|
+
// Imported tab handling from shoelace
|
|
34
|
+
this.modal = new Modal(this);
|
|
35
|
+
/**
|
|
36
|
+
* Whether the modal should close if the user taps on the backdrop
|
|
37
|
+
*
|
|
38
|
+
* @private
|
|
39
|
+
* @memberof ModalManager
|
|
40
|
+
*/
|
|
41
|
+
this.closeOnBackdropClick = true;
|
|
42
|
+
}
|
|
43
|
+
firstUpdated() {
|
|
44
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
45
|
+
// Give the browser a chance to paint
|
|
46
|
+
// eslint-disable-next-line no-promise-executor-return
|
|
47
|
+
yield new Promise(r => setTimeout(r, 0));
|
|
48
|
+
if (this.closeOnBackdropClick) {
|
|
49
|
+
this.addEventListener('keydown', (e) => {
|
|
50
|
+
if (e.key === 'Escape') {
|
|
51
|
+
this.backdropClicked();
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
disconnectedCallback() {
|
|
58
|
+
super.disconnectedCallback();
|
|
59
|
+
this.modal.deactivate();
|
|
60
|
+
}
|
|
61
|
+
/** @inheritdoc */
|
|
62
|
+
render() {
|
|
62
63
|
return html `
|
|
63
64
|
<div class="container">
|
|
64
65
|
<div class="backdrop" @click=${this.backdropClicked}></div>
|
|
@@ -70,123 +71,137 @@ let ModalManager = class ModalManager extends LitElement {
|
|
|
70
71
|
${this.customModalContent}
|
|
71
72
|
</modal-template>
|
|
72
73
|
</div>
|
|
73
|
-
`;
|
|
74
|
-
}
|
|
75
|
-
/** @inheritdoc */
|
|
76
|
-
getMode() {
|
|
77
|
-
return this.mode;
|
|
78
|
-
}
|
|
79
|
-
/** @inheritdoc */
|
|
80
|
-
closeModal() {
|
|
81
|
-
|
|
82
|
-
this.
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
if
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
this.mode
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
this.
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
this.
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
/**
|
|
140
|
-
*
|
|
141
|
-
*
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
*
|
|
155
|
-
*
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
*
|
|
177
|
-
*
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
74
|
+
`;
|
|
75
|
+
}
|
|
76
|
+
/** @inheritdoc */
|
|
77
|
+
getMode() {
|
|
78
|
+
return this.mode;
|
|
79
|
+
}
|
|
80
|
+
/** @inheritdoc */
|
|
81
|
+
closeModal() {
|
|
82
|
+
var _a, _b;
|
|
83
|
+
this.mode = ModalManagerMode.Closed;
|
|
84
|
+
this.customModalContent = undefined;
|
|
85
|
+
if (this.modalTemplate)
|
|
86
|
+
this.modalTemplate.config = new ModalConfig();
|
|
87
|
+
this.modal.deactivate();
|
|
88
|
+
// Return focus to the triggering element, if possible
|
|
89
|
+
(_b = (_a = this.triggeringElement) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
90
|
+
this.triggeringElement = undefined;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Call the userClosedModalCallback and reset it if it exists
|
|
94
|
+
*
|
|
95
|
+
* @private
|
|
96
|
+
* @memberof ModalManager
|
|
97
|
+
*/
|
|
98
|
+
callUserClosedModalCallback() {
|
|
99
|
+
// we assign the callback to a temp var and undefine it before calling it
|
|
100
|
+
// otherwise, we run into the potential for an infinite loop if the
|
|
101
|
+
// callback triggers another `showModal()`, which would execute `userClosedModalCallback`
|
|
102
|
+
const callback = this.userClosedModalCallback;
|
|
103
|
+
this.userClosedModalCallback = undefined;
|
|
104
|
+
if (callback)
|
|
105
|
+
callback();
|
|
106
|
+
}
|
|
107
|
+
/**
|
|
108
|
+
* Call the user pressed left nav button callback and reset it if it exists
|
|
109
|
+
*
|
|
110
|
+
* @private
|
|
111
|
+
* @memberof ModalManager
|
|
112
|
+
*/
|
|
113
|
+
callUserPressedLeftNavButtonCallback() {
|
|
114
|
+
// avoids an infinite showModal() loop, as above
|
|
115
|
+
const callback = this.userPressedLeftNavButtonCallback;
|
|
116
|
+
this.userPressedLeftNavButtonCallback = undefined;
|
|
117
|
+
if (callback)
|
|
118
|
+
callback();
|
|
119
|
+
}
|
|
120
|
+
/** @inheritdoc */
|
|
121
|
+
showModal(options) {
|
|
122
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
123
|
+
// If the dialog is being opened, make note of what element was focused beforehand
|
|
124
|
+
if (this.mode === ModalManagerMode.Closed)
|
|
125
|
+
this.captureFocusedElement();
|
|
126
|
+
this.closeOnBackdropClick = options.config.closeOnBackdropClick;
|
|
127
|
+
this.userClosedModalCallback = options.userClosedModalCallback;
|
|
128
|
+
this.userPressedLeftNavButtonCallback =
|
|
129
|
+
options.userPressedLeftNavButtonCallback;
|
|
130
|
+
this.customModalContent = options.customModalContent;
|
|
131
|
+
this.mode = ModalManagerMode.Open;
|
|
132
|
+
if (this.modalTemplate) {
|
|
133
|
+
this.modalTemplate.config = options.config;
|
|
134
|
+
yield this.modalTemplate.updateComplete;
|
|
135
|
+
this.modalTemplate.focus();
|
|
136
|
+
}
|
|
137
|
+
this.modal.activate();
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* Sets the triggering element to the one that is currently focused, as deep
|
|
142
|
+
* within Shadow DOM as possible.
|
|
143
|
+
*/
|
|
144
|
+
captureFocusedElement() {
|
|
145
|
+
this.triggeringElement = getDeepestActiveElement();
|
|
146
|
+
}
|
|
147
|
+
/** @inheritdoc */
|
|
148
|
+
updated(changed) {
|
|
149
|
+
/* istanbul ignore else */
|
|
150
|
+
if (changed.has('mode')) {
|
|
151
|
+
this.handleModeChange();
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
155
|
+
* Called when the backdrop is clicked
|
|
156
|
+
*
|
|
157
|
+
* @private
|
|
158
|
+
* @memberof ModalManager
|
|
159
|
+
*/
|
|
160
|
+
backdropClicked() {
|
|
161
|
+
if (this.closeOnBackdropClick) {
|
|
162
|
+
this.closeModal();
|
|
163
|
+
this.callUserClosedModalCallback();
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
/**
|
|
167
|
+
* Handle the mode change
|
|
168
|
+
*
|
|
169
|
+
* @private
|
|
170
|
+
* @memberof ModalManager
|
|
171
|
+
*/
|
|
172
|
+
handleModeChange() {
|
|
173
|
+
this.hostBridge.handleModeChange(this.mode);
|
|
174
|
+
this.emitModeChangeEvent();
|
|
175
|
+
}
|
|
176
|
+
/**
|
|
177
|
+
* Emit a modeChange event
|
|
178
|
+
*
|
|
179
|
+
* @private
|
|
180
|
+
* @memberof ModalManager
|
|
181
|
+
*/
|
|
182
|
+
emitModeChangeEvent() {
|
|
183
|
+
const event = new CustomEvent('modeChanged', {
|
|
184
|
+
detail: { mode: this.mode },
|
|
185
|
+
});
|
|
186
|
+
this.dispatchEvent(event);
|
|
187
|
+
}
|
|
188
|
+
/**
|
|
189
|
+
* Called when the modal close button is pressed. Closes the modal.
|
|
190
|
+
*
|
|
191
|
+
* @private
|
|
192
|
+
* @memberof ModalManager
|
|
193
|
+
*/
|
|
194
|
+
closeButtonPressed() {
|
|
195
|
+
this.closeModal();
|
|
196
|
+
this.callUserClosedModalCallback();
|
|
197
|
+
}
|
|
198
|
+
/** @inheritdoc */
|
|
199
|
+
static get styles() {
|
|
200
|
+
const modalBackdropColor = css `var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;
|
|
201
|
+
const modalBackdropZindex = css `var(--modalBackdropZindex, 1000)`;
|
|
202
|
+
const modalWidth = css `var(--modalWidth, 32rem)`;
|
|
203
|
+
const modalMaxWidth = css `var(--modalMaxWidth, 95%)`;
|
|
204
|
+
const modalZindex = css `var(--modalZindex, 2000)`;
|
|
190
205
|
return css `
|
|
191
206
|
.container {
|
|
192
207
|
width: 100%;
|
|
@@ -213,23 +228,23 @@ let ModalManager = class ModalManager extends LitElement {
|
|
|
213
228
|
width: ${modalWidth};
|
|
214
229
|
max-width: ${modalMaxWidth};
|
|
215
230
|
}
|
|
216
|
-
`;
|
|
217
|
-
}
|
|
218
|
-
};
|
|
219
|
-
__decorate([
|
|
220
|
-
property({ type: String, reflect: true })
|
|
221
|
-
], ModalManager.prototype, "mode", void 0);
|
|
222
|
-
__decorate([
|
|
223
|
-
property({ type: Object })
|
|
224
|
-
], ModalManager.prototype, "customModalContent", void 0);
|
|
225
|
-
__decorate([
|
|
226
|
-
property({ type: Object })
|
|
227
|
-
], ModalManager.prototype, "hostBridge", void 0);
|
|
228
|
-
__decorate([
|
|
229
|
-
query('modal-template')
|
|
230
|
-
], ModalManager.prototype, "modalTemplate", void 0);
|
|
231
|
-
ModalManager = __decorate([
|
|
232
|
-
customElement('modal-manager')
|
|
233
|
-
], ModalManager);
|
|
234
|
-
export { ModalManager };
|
|
231
|
+
`;
|
|
232
|
+
}
|
|
233
|
+
};
|
|
234
|
+
__decorate([
|
|
235
|
+
property({ type: String, reflect: true })
|
|
236
|
+
], ModalManager.prototype, "mode", void 0);
|
|
237
|
+
__decorate([
|
|
238
|
+
property({ type: Object })
|
|
239
|
+
], ModalManager.prototype, "customModalContent", void 0);
|
|
240
|
+
__decorate([
|
|
241
|
+
property({ type: Object })
|
|
242
|
+
], ModalManager.prototype, "hostBridge", void 0);
|
|
243
|
+
__decorate([
|
|
244
|
+
query('modal-template')
|
|
245
|
+
], ModalManager.prototype, "modalTemplate", void 0);
|
|
246
|
+
ModalManager = __decorate([
|
|
247
|
+
customElement('modal-manager')
|
|
248
|
+
], ModalManager);
|
|
249
|
+
export { ModalManager };
|
|
235
250
|
//# sourceMappingURL=modal-manager.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n CSSResult,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport Modal from './shoelace/modal';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n /**\n * The current mode of the ModalManager\n *\n * Current options are `modal` or `closed`\n *\n * @type {ModalManagerMode}\n * @memberof ModalManager\n */\n @property({ type: String, reflect: true }) mode: ModalManagerMode =\n ModalManagerMode.Closed;\n\n /**\n * Custom content to display in the modal's content slot\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalManager\n */\n @property({ type: Object }) customModalContent?: TemplateResult;\n\n /**\n * This hostBridge handles environmental-specific interactions such as adding classes\n * to the body tag or event listeners needed to support the modal manager in the host environment.\n *\n * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n * `ModalManagerHostBridgeInterface`\n *\n * @type {ModalManagerHostBridgeInterface}\n * @memberof ModalManager\n */\n @property({ type: Object })\n hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n this\n );\n\n /**\n * Reference to the ModalTemplate DOM element\n *\n * @private\n * @type {ModalTemplate}\n * @memberof ModalManager\n */\n @query('modal-template') private modalTemplate?: ModalTemplate;\n\n // Imported tab handling from shoelace\n public modal = new Modal(this);\n\n async firstUpdated(): Promise<void> {\n // Give the browser a chance to paint\n // eslint-disable-next-line no-promise-executor-return\n await new Promise(r => setTimeout(r, 0));\n\n if (this.closeOnBackdropClick) {\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.backdropClicked();\n }\n });\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.modal.deactivate();\n }\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <div class=\"container\">\n <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n <modal-template\n @closeButtonPressed=${this.closeButtonPressed}\n @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}\n tabindex=\"-1\"\n >\n ${this.customModalContent}\n </modal-template>\n </div>\n `;\n }\n\n /** @inheritdoc */\n getMode(): ModalManagerMode {\n return this.mode;\n }\n\n /** @inheritdoc */\n closeModal(): void {\n this.mode = ModalManagerMode.Closed;\n this.customModalContent = undefined;\n if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();\n this.modal.deactivate();\n }\n\n /**\n * Whether the modal should close if the user taps on the backdrop\n *\n * @private\n * @memberof ModalManager\n */\n private closeOnBackdropClick = true;\n\n /**\n * A callback if the user closes the modal\n *\n * @private\n * @memberof ModalManager\n */\n private userClosedModalCallback?: () => void;\n\n /**\n * A callback if the user presses the left nav button\n *\n * @private\n * @memberof ModalManager\n */\n private userPressedLeftNavButtonCallback?: () => void;\n\n /**\n * Call the userClosedModalCallback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserClosedModalCallback(): void {\n // we assign the callback to a temp var and undefine it before calling it\n // otherwise, we run into the potential for an infinite loop if the\n // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n const callback = this.userClosedModalCallback;\n this.userClosedModalCallback = undefined;\n if (callback) callback();\n }\n\n /**\n * Call the user pressed left nav button callback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserPressedLeftNavButtonCallback(): void {\n // avoids an infinite showModal() loop, as above\n const callback = this.userPressedLeftNavButtonCallback;\n this.userPressedLeftNavButtonCallback = undefined;\n if (callback) callback();\n }\n\n /** @inheritdoc */\n async showModal(options: {\n config: ModalConfig;\n customModalContent?: TemplateResult;\n userClosedModalCallback?: () => void;\n userPressedLeftNavButtonCallback?: () => void;\n }): Promise<void> {\n this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n this.userClosedModalCallback = options.userClosedModalCallback;\n this.userPressedLeftNavButtonCallback =\n options.userPressedLeftNavButtonCallback;\n this.customModalContent = options.customModalContent;\n this.mode = ModalManagerMode.Open;\n if (this.modalTemplate) {\n this.modalTemplate.config = options.config;\n await this.modalTemplate.updateComplete;\n this.modalTemplate.focus();\n }\n this.modal.activate();\n }\n\n /** @inheritdoc */\n updated(changed: PropertyValues): void {\n /* istanbul ignore else */\n if (changed.has('mode')) {\n this.handleModeChange();\n }\n }\n\n /**\n * Called when the backdrop is clicked\n *\n * @private\n * @memberof ModalManager\n */\n private backdropClicked(): void {\n if (this.closeOnBackdropClick) {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n }\n\n /**\n * Handle the mode change\n *\n * @private\n * @memberof ModalManager\n */\n private handleModeChange(): void {\n this.hostBridge.handleModeChange(this.mode);\n this.emitModeChangeEvent();\n }\n\n /**\n * Emit a modeChange event\n *\n * @private\n * @memberof ModalManager\n */\n private emitModeChangeEvent(): void {\n const event = new CustomEvent('modeChanged', {\n detail: { mode: this.mode },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Called when the modal close button is pressed. Closes the modal.\n *\n * @private\n * @memberof ModalManager\n */\n private closeButtonPressed(): void {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n const modalWidth = css`var(--modalWidth, 32rem)`;\n const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n const modalZindex = css`var(--modalZindex, 2000)`;\n\n return css`\n .container {\n width: 100%;\n height: 100%;\n }\n\n .backdrop {\n position: fixed;\n top: 0;\n left: 0;\n background-color: ${modalBackdropColor};\n width: 100%;\n height: 100%;\n z-index: ${modalBackdropZindex};\n }\n\n modal-template {\n outline: 0;\n position: fixed;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0);\n z-index: ${modalZindex};\n width: ${modalWidth};\n max-width: ${modalMaxWidth};\n }\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../src/modal-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n LitElement,\n html,\n css,\n CSSResult,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\n\nimport Modal from './shoelace/modal';\nimport { getDeepestActiveElement } from './shoelace/active-elements';\n\nimport './modal-template';\nimport { ModalTemplate } from './modal-template';\nimport { ModalConfig } from './modal-config';\nimport { ModalManagerHostBridge } from './modal-manager-host-bridge';\nimport { ModalManagerInterface } from './modal-manager-interface';\nimport { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';\nimport { ModalManagerMode } from './modal-manager-mode';\n\n@customElement('modal-manager')\nexport class ModalManager extends LitElement implements ModalManagerInterface {\n /**\n * The current mode of the ModalManager\n *\n * Current options are `modal` or `closed`\n *\n * @type {ModalManagerMode}\n * @memberof ModalManager\n */\n @property({ type: String, reflect: true }) mode: ModalManagerMode =\n ModalManagerMode.Closed;\n\n /**\n * Custom content to display in the modal's content slot\n *\n * @type {(TemplateResult | undefined)}\n * @memberof ModalManager\n */\n @property({ type: Object }) customModalContent?: TemplateResult;\n\n /**\n * This hostBridge handles environmental-specific interactions such as adding classes\n * to the body tag or event listeners needed to support the modal manager in the host environment.\n *\n * There is a default `ModalManagerHostBridge`, but consumers can override it with a custom\n * `ModalManagerHostBridgeInterface`\n *\n * @type {ModalManagerHostBridgeInterface}\n * @memberof ModalManager\n */\n @property({ type: Object })\n hostBridge: ModalManagerHostBridgeInterface = new ModalManagerHostBridge(\n this\n );\n\n /**\n * Reference to the ModalTemplate DOM element\n *\n * @private\n * @type {ModalTemplate}\n * @memberof ModalManager\n */\n @query('modal-template') private modalTemplate?: ModalTemplate;\n\n // Imported tab handling from shoelace\n public modal = new Modal(this);\n\n async firstUpdated(): Promise<void> {\n // Give the browser a chance to paint\n // eslint-disable-next-line no-promise-executor-return\n await new Promise(r => setTimeout(r, 0));\n\n if (this.closeOnBackdropClick) {\n this.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.backdropClicked();\n }\n });\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.modal.deactivate();\n }\n\n /** @inheritdoc */\n render(): TemplateResult {\n return html`\n <div class=\"container\">\n <div class=\"backdrop\" @click=${this.backdropClicked}></div>\n <modal-template\n @closeButtonPressed=${this.closeButtonPressed}\n @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}\n tabindex=\"-1\"\n >\n ${this.customModalContent}\n </modal-template>\n </div>\n `;\n }\n\n /** @inheritdoc */\n getMode(): ModalManagerMode {\n return this.mode;\n }\n\n /** @inheritdoc */\n closeModal(): void {\n this.mode = ModalManagerMode.Closed;\n this.customModalContent = undefined;\n if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();\n this.modal.deactivate();\n\n // Return focus to the triggering element, if possible\n (this.triggeringElement as HTMLElement)?.focus?.();\n this.triggeringElement = undefined;\n }\n\n /**\n * Whether the modal should close if the user taps on the backdrop\n *\n * @private\n * @memberof ModalManager\n */\n private closeOnBackdropClick = true;\n\n /**\n * The element that had focus when the modal was opened, so that we can return focus\n * to it after the modal closes.\n */\n private triggeringElement?: Element;\n\n /**\n * A callback if the user closes the modal\n *\n * @private\n * @memberof ModalManager\n */\n private userClosedModalCallback?: () => void;\n\n /**\n * A callback if the user presses the left nav button\n *\n * @private\n * @memberof ModalManager\n */\n private userPressedLeftNavButtonCallback?: () => void;\n\n /**\n * Call the userClosedModalCallback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserClosedModalCallback(): void {\n // we assign the callback to a temp var and undefine it before calling it\n // otherwise, we run into the potential for an infinite loop if the\n // callback triggers another `showModal()`, which would execute `userClosedModalCallback`\n const callback = this.userClosedModalCallback;\n this.userClosedModalCallback = undefined;\n if (callback) callback();\n }\n\n /**\n * Call the user pressed left nav button callback and reset it if it exists\n *\n * @private\n * @memberof ModalManager\n */\n private callUserPressedLeftNavButtonCallback(): void {\n // avoids an infinite showModal() loop, as above\n const callback = this.userPressedLeftNavButtonCallback;\n this.userPressedLeftNavButtonCallback = undefined;\n if (callback) callback();\n }\n\n /** @inheritdoc */\n async showModal(options: {\n config: ModalConfig;\n customModalContent?: TemplateResult;\n userClosedModalCallback?: () => void;\n userPressedLeftNavButtonCallback?: () => void;\n }): Promise<void> {\n // If the dialog is being opened, make note of what element was focused beforehand\n if (this.mode === ModalManagerMode.Closed) this.captureFocusedElement();\n\n this.closeOnBackdropClick = options.config.closeOnBackdropClick;\n this.userClosedModalCallback = options.userClosedModalCallback;\n this.userPressedLeftNavButtonCallback =\n options.userPressedLeftNavButtonCallback;\n this.customModalContent = options.customModalContent;\n this.mode = ModalManagerMode.Open;\n if (this.modalTemplate) {\n this.modalTemplate.config = options.config;\n await this.modalTemplate.updateComplete;\n this.modalTemplate.focus();\n }\n this.modal.activate();\n }\n\n /**\n * Sets the triggering element to the one that is currently focused, as deep\n * within Shadow DOM as possible.\n */\n private captureFocusedElement(): void {\n this.triggeringElement = getDeepestActiveElement();\n }\n\n /** @inheritdoc */\n updated(changed: PropertyValues): void {\n /* istanbul ignore else */\n if (changed.has('mode')) {\n this.handleModeChange();\n }\n }\n\n /**\n * Called when the backdrop is clicked\n *\n * @private\n * @memberof ModalManager\n */\n private backdropClicked(): void {\n if (this.closeOnBackdropClick) {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n }\n\n /**\n * Handle the mode change\n *\n * @private\n * @memberof ModalManager\n */\n private handleModeChange(): void {\n this.hostBridge.handleModeChange(this.mode);\n this.emitModeChangeEvent();\n }\n\n /**\n * Emit a modeChange event\n *\n * @private\n * @memberof ModalManager\n */\n private emitModeChangeEvent(): void {\n const event = new CustomEvent('modeChanged', {\n detail: { mode: this.mode },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Called when the modal close button is pressed. Closes the modal.\n *\n * @private\n * @memberof ModalManager\n */\n private closeButtonPressed(): void {\n this.closeModal();\n this.callUserClosedModalCallback();\n }\n\n /** @inheritdoc */\n static get styles(): CSSResult {\n const modalBackdropColor = css`var(--modalBackdropColor, rgba(10, 10, 10, 0.9))`;\n const modalBackdropZindex = css`var(--modalBackdropZindex, 1000)`;\n\n const modalWidth = css`var(--modalWidth, 32rem)`;\n const modalMaxWidth = css`var(--modalMaxWidth, 95%)`;\n const modalZindex = css`var(--modalZindex, 2000)`;\n\n return css`\n .container {\n width: 100%;\n height: 100%;\n }\n\n .backdrop {\n position: fixed;\n top: 0;\n left: 0;\n background-color: ${modalBackdropColor};\n width: 100%;\n height: 100%;\n z-index: ${modalBackdropZindex};\n }\n\n modal-template {\n outline: 0;\n position: fixed;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0);\n z-index: ${modalZindex};\n width: ${modalWidth};\n max-width: ${modalMaxWidth};\n }\n `;\n }\n}\n"]}
|
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import { LitElement, CSSResult, TemplateResult } from 'lit';
|
|
2
|
-
import '@internetarchive/ia-activity-indicator';
|
|
3
|
-
import '@internetarchive/icon-close';
|
|
4
|
-
import { ModalConfig } from './modal-config';
|
|
5
|
-
export declare class ModalTemplate extends LitElement {
|
|
6
|
-
/**
|
|
7
|
-
* The ModalConfig that displayed the template
|
|
8
|
-
*
|
|
9
|
-
* @type {ModalConfig}
|
|
10
|
-
* @memberof ModalTemplate
|
|
11
|
-
*/
|
|
12
|
-
config: ModalConfig;
|
|
13
|
-
/** @inheritdoc */
|
|
14
|
-
render(): TemplateResult;
|
|
15
|
-
/**
|
|
16
|
-
* Dispatch the `closeButtonPressed` event to the consumer
|
|
17
|
-
*
|
|
18
|
-
* @private
|
|
19
|
-
* @memberof ModalTemplate
|
|
20
|
-
*/
|
|
21
|
-
private handleCloseButton;
|
|
22
|
-
/**
|
|
23
|
-
* Dispatch the `leftNavButtonPressed` event to the consumer
|
|
24
|
-
*
|
|
25
|
-
* @private
|
|
26
|
-
* @memberof ModalTemplate
|
|
27
|
-
*/
|
|
28
|
-
private handleLeftNavButtonPressed;
|
|
29
|
-
/**
|
|
30
|
-
* The close button template
|
|
31
|
-
*
|
|
32
|
-
* @readonly
|
|
33
|
-
* @private
|
|
34
|
-
* @type {TemplateResult}
|
|
35
|
-
* @memberof ModalTemplate
|
|
36
|
-
*/
|
|
37
|
-
private get closeButtonTemplate();
|
|
38
|
-
private get leftNavButtonTemplate();
|
|
39
|
-
/** @inheritdoc */
|
|
40
|
-
static get styles(): CSSResult;
|
|
41
|
-
}
|
|
1
|
+
import { LitElement, CSSResult, TemplateResult } from 'lit';
|
|
2
|
+
import '@internetarchive/ia-activity-indicator';
|
|
3
|
+
import '@internetarchive/icon-close';
|
|
4
|
+
import { ModalConfig } from './modal-config';
|
|
5
|
+
export declare class ModalTemplate extends LitElement {
|
|
6
|
+
/**
|
|
7
|
+
* The ModalConfig that displayed the template
|
|
8
|
+
*
|
|
9
|
+
* @type {ModalConfig}
|
|
10
|
+
* @memberof ModalTemplate
|
|
11
|
+
*/
|
|
12
|
+
config: ModalConfig;
|
|
13
|
+
/** @inheritdoc */
|
|
14
|
+
render(): TemplateResult;
|
|
15
|
+
/**
|
|
16
|
+
* Dispatch the `closeButtonPressed` event to the consumer
|
|
17
|
+
*
|
|
18
|
+
* @private
|
|
19
|
+
* @memberof ModalTemplate
|
|
20
|
+
*/
|
|
21
|
+
private handleCloseButton;
|
|
22
|
+
/**
|
|
23
|
+
* Dispatch the `leftNavButtonPressed` event to the consumer
|
|
24
|
+
*
|
|
25
|
+
* @private
|
|
26
|
+
* @memberof ModalTemplate
|
|
27
|
+
*/
|
|
28
|
+
private handleLeftNavButtonPressed;
|
|
29
|
+
/**
|
|
30
|
+
* The close button template
|
|
31
|
+
*
|
|
32
|
+
* @readonly
|
|
33
|
+
* @private
|
|
34
|
+
* @type {TemplateResult}
|
|
35
|
+
* @memberof ModalTemplate
|
|
36
|
+
*/
|
|
37
|
+
private get closeButtonTemplate();
|
|
38
|
+
private get leftNavButtonTemplate();
|
|
39
|
+
/** @inheritdoc */
|
|
40
|
+
static get styles(): CSSResult;
|
|
41
|
+
}
|