@internetarchive/modal-manager 2.0.4-alpha-webdev7960.0 → 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.
Files changed (42) hide show
  1. package/dist/index.js.map +1 -1
  2. package/dist/src/assets/arrow-left-icon.js +12 -12
  3. package/dist/src/assets/arrow-left-icon.js.map +1 -1
  4. package/dist/src/assets/ia-logo-icon.js +27 -27
  5. package/dist/src/assets/ia-logo-icon.js.map +1 -1
  6. package/dist/src/modal-config.js.map +1 -1
  7. package/dist/src/modal-manager-host-bridge-interface.js.map +1 -1
  8. package/dist/src/modal-manager-host-bridge.js.map +1 -1
  9. package/dist/src/modal-manager-interface.js.map +1 -1
  10. package/dist/src/modal-manager-mode.js.map +1 -1
  11. package/dist/src/modal-manager.d.ts +1 -1
  12. package/dist/src/modal-manager.js +41 -39
  13. package/dist/src/modal-manager.js.map +1 -1
  14. package/dist/src/modal-template.js +220 -220
  15. package/dist/src/modal-template.js.map +1 -1
  16. package/dist/src/shoelace/active-elements.js.map +1 -1
  17. package/dist/src/shoelace/modal.js.map +1 -1
  18. package/dist/src/shoelace/tabbable.js.map +1 -1
  19. package/dist/test/modal-config.test.js.map +1 -1
  20. package/dist/test/modal-manager.test.js +75 -40
  21. package/dist/test/modal-manager.test.js.map +1 -1
  22. package/dist/test/modal-template.test.js +22 -22
  23. package/dist/test/modal-template.test.js.map +1 -1
  24. package/dist/vite.config.js.map +1 -1
  25. package/index.ts +7 -7
  26. package/package.json +1 -1
  27. package/src/assets/arrow-left-icon.ts +15 -15
  28. package/src/assets/ia-logo-icon.ts +30 -30
  29. package/src/modal-config.ts +133 -133
  30. package/src/modal-manager-host-bridge-interface.ts +13 -13
  31. package/src/modal-manager-host-bridge.ts +82 -82
  32. package/src/modal-manager-interface.ts +30 -30
  33. package/src/modal-manager-mode.ts +10 -10
  34. package/src/modal-manager.ts +305 -303
  35. package/src/modal-template.ts +343 -343
  36. package/src/shoelace/active-elements.ts +33 -33
  37. package/src/shoelace/modal.ts +166 -166
  38. package/src/shoelace/tabbable.ts +223 -223
  39. package/test/modal-config.test.ts +77 -77
  40. package/test/modal-manager.test.ts +393 -347
  41. package/test/modal-template.test.ts +206 -206
  42. package/vite.config.ts +23 -23
package/src/modal-manager-host-bridge.ts CHANGED
@@ -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
+ }
package/src/modal-manager-interface.ts CHANGED
@@ -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
+ }
package/src/modal-manager-mode.ts CHANGED
@@ -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
+ }