@internetarchive/modal-manager 2.0.3 → 2.0.4-alpha-webdev7960.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/.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/index.js.map +1 -1
- package/dist/src/assets/arrow-left-icon.d.ts +2 -2
- package/dist/src/assets/arrow-left-icon.js +14 -14
- package/dist/src/assets/arrow-left-icon.js.map +1 -1
- package/dist/src/assets/ia-logo-icon.d.ts +2 -2
- package/dist/src/assets/ia-logo-icon.js +29 -29
- package/dist/src/assets/ia-logo-icon.js.map +1 -1
- package/dist/src/modal-config.d.ts +104 -104
- package/dist/src/modal-config.js +24 -24
- package/dist/src/modal-config.js.map +1 -1
- 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-interface.js.map +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-host-bridge.js.map +1 -1
- package/dist/src/modal-manager-interface.d.ts +27 -27
- package/dist/src/modal-manager-interface.js +1 -1
- package/dist/src/modal-manager-interface.js.map +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-mode.js.map +1 -1
- package/dist/src/modal-manager.d.ts +137 -127
- package/dist/src/modal-manager.js +247 -234
- package/dist/src/modal-manager.js.map +1 -1
- package/dist/src/modal-template.d.ts +41 -41
- package/dist/src/modal-template.js +335 -335
- package/dist/src/modal-template.js.map +1 -1
- package/dist/src/shoelace/active-elements.d.ts +15 -15
- package/dist/src/shoelace/active-elements.js +27 -27
- package/dist/src/shoelace/active-elements.js.map +1 -1
- package/dist/src/shoelace/modal.d.ts +24 -24
- package/dist/src/shoelace/modal.js +131 -131
- package/dist/src/shoelace/modal.js.map +1 -1
- package/dist/src/shoelace/tabbable.d.ts +9 -9
- package/dist/src/shoelace/tabbable.js +169 -169
- package/dist/src/shoelace/tabbable.js.map +1 -1
- package/dist/test/modal-config.test.d.ts +1 -1
- package/dist/test/modal-config.test.js +69 -69
- package/dist/test/modal-config.test.js.map +1 -1
- package/dist/test/modal-manager.test.d.ts +1 -1
- package/dist/test/modal-manager.test.js +274 -274
- 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 +178 -178
- package/dist/test/modal-template.test.js.map +1 -1
- package/dist/vite.config.d.ts +2 -2
- package/dist/vite.config.js +22 -22
- package/dist/vite.config.js.map +1 -1
- 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/index.ts +7 -7
- package/karma.conf.js +24 -24
- package/package.json +85 -85
- package/renovate.json +7 -7
- package/src/assets/arrow-left-icon.ts +15 -15
- package/src/assets/ia-logo-icon.ts +30 -30
- package/src/modal-config.ts +133 -133
- package/src/modal-manager-host-bridge-interface.ts +13 -13
- package/src/modal-manager-host-bridge.ts +82 -82
- package/src/modal-manager-interface.ts +30 -30
- package/src/modal-manager-mode.ts +10 -10
- package/src/modal-manager.ts +303 -283
- package/src/modal-template.ts +343 -343
- package/src/shoelace/LICENSE.md +6 -6
- package/src/shoelace/active-elements.ts +33 -33
- package/src/shoelace/modal.ts +166 -166
- package/src/shoelace/tabbable.ts +223 -223
- package/test/modal-config.test.ts +77 -77
- package/test/modal-manager.test.ts +347 -347
- package/test/modal-template.test.ts +206 -206
- package/tsconfig.json +21 -21
- package/vite.config.ts +23 -23
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
import { throttle } from 'throttle-debounce';
|
|
2
|
-
|
|
3
|
-
import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
|
|
4
|
-
import { ModalManagerInterface } from './modal-manager-interface';
|
|
5
|
-
import { ModalManagerMode } from './modal-manager-mode';
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the
|
|
9
|
-
* host that sets up environment-specific changes when the modal opens and closes.
|
|
10
|
-
*
|
|
11
|
-
* For instance, when the modal opens, this adds a class to the `<body>` tag for styling
|
|
12
|
-
* and adds a `resize` listener to fix a Safari shadow root issue.
|
|
13
|
-
*
|
|
14
|
-
* Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass
|
|
15
|
-
* them into the `ModalManager` if this one does not work for their environment.
|
|
16
|
-
*
|
|
17
|
-
* @export
|
|
18
|
-
* @class ModalManagerHostBridge
|
|
19
|
-
* @implements {ModalManagerHostBridgeInterface}
|
|
20
|
-
*/
|
|
21
|
-
export class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {
|
|
22
|
-
private modalManager: ModalManagerInterface;
|
|
23
|
-
|
|
24
|
-
constructor(modalManager: ModalManagerInterface) {
|
|
25
|
-
this.modalManager = modalManager;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* Handle the mode change
|
|
30
|
-
*
|
|
31
|
-
* @private
|
|
32
|
-
* @memberof ModalManager
|
|
33
|
-
*/
|
|
34
|
-
handleModeChange(mode: ModalManagerMode): void {
|
|
35
|
-
switch (mode) {
|
|
36
|
-
case ModalManagerMode.Open:
|
|
37
|
-
this.startResizeListener();
|
|
38
|
-
this.stopDocumentScroll();
|
|
39
|
-
break;
|
|
40
|
-
case ModalManagerMode.Closed:
|
|
41
|
-
this.stopResizeListener();
|
|
42
|
-
this.resumeDocumentScroll();
|
|
43
|
-
break;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
private windowResizeThrottler: throttle<() => void> = throttle(
|
|
48
|
-
100,
|
|
49
|
-
this.updateModalContainerHeight,
|
|
50
|
-
{ noLeading: false, noTrailing: false }
|
|
51
|
-
).bind(this);
|
|
52
|
-
|
|
53
|
-
// This is a workaround for Safari. Safari does not update shadowRoot elements calculated
|
|
54
|
-
// based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,
|
|
55
|
-
// but resizing the window does not cause the calculation to update. Firefox and Chrome both handle
|
|
56
|
-
// this correctly.
|
|
57
|
-
// It doesn't matter what css variable you set, it is just forcing Safari to do an update.
|
|
58
|
-
// Also note that the value has to change on each update for Safari to do the update,
|
|
59
|
-
// ie. you can't just set a static value.
|
|
60
|
-
private updateModalContainerHeight(): void {
|
|
61
|
-
this.modalManager.style.setProperty(
|
|
62
|
-
'--containerHeight',
|
|
63
|
-
`${window.innerHeight}px`
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
private stopDocumentScroll(): void {
|
|
68
|
-
document.body.classList.add('modal-manager-open');
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
private resumeDocumentScroll(): void {
|
|
72
|
-
document.body.classList.remove('modal-manager-open');
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
private startResizeListener(): void {
|
|
76
|
-
window.addEventListener('resize', this.windowResizeThrottler);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
private stopResizeListener(): void {
|
|
80
|
-
window.removeEventListener('resize', this.windowResizeThrottler);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
1
|
+
import { throttle } from 'throttle-debounce';
|
|
2
|
+
|
|
3
|
+
import { ModalManagerHostBridgeInterface } from './modal-manager-host-bridge-interface';
|
|
4
|
+
import { ModalManagerInterface } from './modal-manager-interface';
|
|
5
|
+
import { ModalManagerMode } from './modal-manager-mode';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* The `ModalManagerHostBridge` is a bridge between the `ModalManager` and the
|
|
9
|
+
* host that sets up environment-specific changes when the modal opens and closes.
|
|
10
|
+
*
|
|
11
|
+
* For instance, when the modal opens, this adds a class to the `<body>` tag for styling
|
|
12
|
+
* and adds a `resize` listener to fix a Safari shadow root issue.
|
|
13
|
+
*
|
|
14
|
+
* Consumers can create their own `ModalManagerHostBridgeInterface` classes and pass
|
|
15
|
+
* them into the `ModalManager` if this one does not work for their environment.
|
|
16
|
+
*
|
|
17
|
+
* @export
|
|
18
|
+
* @class ModalManagerHostBridge
|
|
19
|
+
* @implements {ModalManagerHostBridgeInterface}
|
|
20
|
+
*/
|
|
21
|
+
export class ModalManagerHostBridge implements ModalManagerHostBridgeInterface {
|
|
22
|
+
private modalManager: ModalManagerInterface;
|
|
23
|
+
|
|
24
|
+
constructor(modalManager: ModalManagerInterface) {
|
|
25
|
+
this.modalManager = modalManager;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Handle the mode change
|
|
30
|
+
*
|
|
31
|
+
* @private
|
|
32
|
+
* @memberof ModalManager
|
|
33
|
+
*/
|
|
34
|
+
handleModeChange(mode: ModalManagerMode): void {
|
|
35
|
+
switch (mode) {
|
|
36
|
+
case ModalManagerMode.Open:
|
|
37
|
+
this.startResizeListener();
|
|
38
|
+
this.stopDocumentScroll();
|
|
39
|
+
break;
|
|
40
|
+
case ModalManagerMode.Closed:
|
|
41
|
+
this.stopResizeListener();
|
|
42
|
+
this.resumeDocumentScroll();
|
|
43
|
+
break;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
private windowResizeThrottler: throttle<() => void> = throttle(
|
|
48
|
+
100,
|
|
49
|
+
this.updateModalContainerHeight,
|
|
50
|
+
{ noLeading: false, noTrailing: false }
|
|
51
|
+
).bind(this);
|
|
52
|
+
|
|
53
|
+
// This is a workaround for Safari. Safari does not update shadowRoot elements calculated
|
|
54
|
+
// based on the viewport size (ie. `calc(100vh - 10px)`). It does an initial calculation correctly,
|
|
55
|
+
// but resizing the window does not cause the calculation to update. Firefox and Chrome both handle
|
|
56
|
+
// this correctly.
|
|
57
|
+
// It doesn't matter what css variable you set, it is just forcing Safari to do an update.
|
|
58
|
+
// Also note that the value has to change on each update for Safari to do the update,
|
|
59
|
+
// ie. you can't just set a static value.
|
|
60
|
+
private updateModalContainerHeight(): void {
|
|
61
|
+
this.modalManager.style.setProperty(
|
|
62
|
+
'--containerHeight',
|
|
63
|
+
`${window.innerHeight}px`
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
private stopDocumentScroll(): void {
|
|
68
|
+
document.body.classList.add('modal-manager-open');
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
private resumeDocumentScroll(): void {
|
|
72
|
+
document.body.classList.remove('modal-manager-open');
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
private startResizeListener(): void {
|
|
76
|
+
window.addEventListener('resize', this.windowResizeThrottler);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
private stopResizeListener(): void {
|
|
80
|
+
window.removeEventListener('resize', this.windowResizeThrottler);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import { LitElement, TemplateResult } from 'lit';
|
|
2
|
-
import { ModalConfig } from './modal-config';
|
|
3
|
-
import { ModalManagerMode } from './modal-manager-mode';
|
|
4
|
-
|
|
5
|
-
export interface ModalManagerInterface extends LitElement {
|
|
6
|
-
/**
|
|
7
|
-
* Get the current modal mode.
|
|
8
|
-
*/
|
|
9
|
-
getMode(): ModalManagerMode;
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Show a modal from a given ModalConfig
|
|
13
|
-
*
|
|
14
|
-
* @param config ModalConfig
|
|
15
|
-
* @param customModalContent TemplateResult | undefined
|
|
16
|
-
* @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed
|
|
17
|
-
* @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed
|
|
18
|
-
*/
|
|
19
|
-
showModal(options: {
|
|
20
|
-
config: ModalConfig;
|
|
21
|
-
customModalContent?: TemplateResult;
|
|
22
|
-
userClosedModalCallback?: () => void;
|
|
23
|
-
userPressedLeftNavButtonCallback?: () => void;
|
|
24
|
-
}): Promise<void>;
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Close the currently open modal
|
|
28
|
-
*/
|
|
29
|
-
closeModal(): void;
|
|
30
|
-
}
|
|
1
|
+
import { LitElement, TemplateResult } from 'lit';
|
|
2
|
+
import { ModalConfig } from './modal-config';
|
|
3
|
+
import { ModalManagerMode } from './modal-manager-mode';
|
|
4
|
+
|
|
5
|
+
export interface ModalManagerInterface extends LitElement {
|
|
6
|
+
/**
|
|
7
|
+
* Get the current modal mode.
|
|
8
|
+
*/
|
|
9
|
+
getMode(): ModalManagerMode;
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Show a modal from a given ModalConfig
|
|
13
|
+
*
|
|
14
|
+
* @param config ModalConfig
|
|
15
|
+
* @param customModalContent TemplateResult | undefined
|
|
16
|
+
* @param userClosedModalCallback () => void | undefined an optional callback when the modal is closed
|
|
17
|
+
* @param userPressedLeftNavButtonCallback () => void | undefined an optional callback when the left nav button is pressed
|
|
18
|
+
*/
|
|
19
|
+
showModal(options: {
|
|
20
|
+
config: ModalConfig;
|
|
21
|
+
customModalContent?: TemplateResult;
|
|
22
|
+
userClosedModalCallback?: () => void;
|
|
23
|
+
userPressedLeftNavButtonCallback?: () => void;
|
|
24
|
+
}): Promise<void>;
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Close the currently open modal
|
|
28
|
+
*/
|
|
29
|
+
closeModal(): void;
|
|
30
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Various modes the modal can be in
|
|
3
|
-
*
|
|
4
|
-
* @export
|
|
5
|
-
* @enum {number}
|
|
6
|
-
*/
|
|
7
|
-
export enum ModalManagerMode {
|
|
8
|
-
Open = 'open',
|
|
9
|
-
Closed = 'closed',
|
|
10
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* Various modes the modal can be in
|
|
3
|
+
*
|
|
4
|
+
* @export
|
|
5
|
+
* @enum {number}
|
|
6
|
+
*/
|
|
7
|
+
export enum ModalManagerMode {
|
|
8
|
+
Open = 'open',
|
|
9
|
+
Closed = 'closed',
|
|
10
|
+
}
|