@internetarchive/modal-manager 2.0.1 → 2.0.3

package/src/modal-manager.ts

@@ -61,7 +61,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
    * @type {ModalTemplate}
    * @memberof ModalManager
    */
-  @query('modal-template') private modalTemplate!: ModalTemplate;
+  @query('modal-template') private modalTemplate?: ModalTemplate;
 
   // Imported tab handling from shoelace
   public modal = new Modal(this);
@@ -92,6 +92,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
         <div class="backdrop" @click=${this.backdropClicked}></div>
         <modal-template
           @closeButtonPressed=${this.closeButtonPressed}
+          @leftNavButtonPressed=${this.callUserPressedLeftNavButtonCallback}
           tabindex="-1"
         >
           ${this.customModalContent}
@@ -109,7 +110,7 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
   closeModal(): void {
     this.mode = ModalManagerMode.Closed;
     this.customModalContent = undefined;
-    this.modalTemplate.config = new ModalConfig();
+    if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();
     this.modal.deactivate();
   }
 
@@ -129,6 +130,14 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
    */
   private userClosedModalCallback?: () => void;
 
+  /**
+   * A callback if the user presses the left nav button
+   *
+   * @private
+   * @memberof ModalManager
+   */
+  private userPressedLeftNavButtonCallback?: () => void;
+
   /**
    * Call the userClosedModalCallback and reset it if it exists
    *
@@ -144,19 +153,37 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
     if (callback) callback();
   }
 
+  /**
+   * Call the user pressed left nav button callback and reset it if it exists
+   *
+   * @private
+   * @memberof ModalManager
+   */
+  private callUserPressedLeftNavButtonCallback(): void {
+    // avoids an infinite showModal() loop, as above
+    const callback = this.userPressedLeftNavButtonCallback;
+    this.userPressedLeftNavButtonCallback = undefined;
+    if (callback) callback();
+  }
+
   /** @inheritdoc */
   async showModal(options: {
     config: ModalConfig;
     customModalContent?: TemplateResult;
     userClosedModalCallback?: () => void;
+    userPressedLeftNavButtonCallback?: () => void;
   }): Promise<void> {
     this.closeOnBackdropClick = options.config.closeOnBackdropClick;
     this.userClosedModalCallback = options.userClosedModalCallback;
-    this.modalTemplate.config = options.config;
+    this.userPressedLeftNavButtonCallback =
+      options.userPressedLeftNavButtonCallback;
     this.customModalContent = options.customModalContent;
     this.mode = ModalManagerMode.Open;
-    await this.modalTemplate.updateComplete;
-    this.modalTemplate.focus();
+    if (this.modalTemplate) {
+      this.modalTemplate.config = options.config;
+      await this.modalTemplate.updateComplete;
+      this.modalTemplate.focus();
+    }
     this.modal.activate();
   }
 

package/src/modal-template.ts

@@ -6,6 +6,7 @@ import '@internetarchive/icon-close';
 
 import { ModalConfig } from './modal-config';
 import IALogoIcon from './assets/ia-logo-icon';
+import arrowLeftIcon from './assets/arrow-left-icon';
 
 @customElement('modal-template')
 export class ModalTemplate extends LitElement {
@@ -23,6 +24,9 @@ export class ModalTemplate extends LitElement {
       <div class="modal-wrapper">
         <div class="modal-container">
           <header style="background-color: ${this.config.headerColor}">
+            ${this.config.showLeftNavButton
+              ? this.leftNavButtonTemplate
+              : nothing}
             ${this.config.showCloseButton ? this.closeButtonTemplate : ''}
             ${this.config.showHeaderLogo
               ? html`<div class="logo-icon">${IALogoIcon}</div>`
@@ -84,6 +88,25 @@ export class ModalTemplate extends LitElement {
     this.dispatchEvent(event);
   }
 
+  /**
+   * Dispatch the `leftNavButtonPressed` event to the consumer
+   *
+   * @private
+   * @memberof ModalTemplate
+   */
+  private handleLeftNavButtonPressed(e: Event): void {
+    e.preventDefault();
+    if (
+      e.type === 'keydown' &&
+      (e as KeyboardEvent).key !== ' ' &&
+      (e as KeyboardEvent).key !== 'Enter'
+    ) {
+      return;
+    }
+    const event = new Event('leftNavButtonPressed');
+    this.dispatchEvent(event);
+  }
+
   /**
    * The close button template
    *
@@ -105,6 +128,17 @@ export class ModalTemplate extends LitElement {
     `;
   }
 
+  private get leftNavButtonTemplate(): TemplateResult {
+    return html`<button
+      type="button"
+      class="back-button"
+      @click=${this.handleLeftNavButtonPressed}
+      @keydown=${this.handleLeftNavButtonPressed}
+    >
+      ${arrowLeftIcon} ${this.config.leftNavButtonText ?? ''}
+    </button> `;
+  }
+
   /** @inheritdoc */
   static get styles(): CSSResult {
     const modalLogoSize = css`var(--modalLogoSize, 6.5rem)`;
@@ -186,7 +220,7 @@ export class ModalTemplate extends LitElement {
       }
 
       .modal-body {
-        background-color: #f5f5f7;
+        background-color: #fbfbfd;
         border-radius: 0 0 calc(${modalCornerRadius}) calc(${modalCornerRadius});
         border: ${modalBorder};
         border-top: 0;
@@ -261,6 +295,28 @@ export class ModalTemplate extends LitElement {
           0 4px 4px 0 rgba(0, 0, 0, 0.08);
       }
 
+      .back-button {
+        position: absolute;
+        left: 1.2rem;
+        top: 1.2rem;
+        height: 2rem;
+        background-color: transparent;
+        outline: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        color: white;
+        font-family: inherit;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .back-button svg {
+        height: 1.5rem;
+      }
+
       .sr-only {
         position: absolute;
         width: 1px;

package/test/modal-config.test.ts

@@ -24,6 +24,8 @@ describe('Modal Config', () => {
     const showProcessingIndicator = true;
     const processingImageMode = 'processing';
     const showCloseButton = false;
+    const showLeftNavButton = false;
+    const leftNavButtonText = 'Previous';
     const showHeaderLogo = false;
     const closeOnBackdropClick = false;
 
@@ -36,6 +38,8 @@ describe('Modal Config', () => {
       showProcessingIndicator: showProcessingIndicator,
       processingImageMode: processingImageMode,
       showCloseButton: showCloseButton,
+      showLeftNavButton: showLeftNavButton,
+      leftNavButtonText: leftNavButtonText,
       showHeaderLogo: showHeaderLogo,
       closeOnBackdropClick: closeOnBackdropClick,
     });
@@ -49,6 +53,8 @@ describe('Modal Config', () => {
     expect(config.showProcessingIndicator).to.equal(showProcessingIndicator);
     expect(config.processingImageMode).to.equal(processingImageMode);
     expect(config.showCloseButton).to.equal(showCloseButton);
+    expect(config.showLeftNavButton).to.equal(showLeftNavButton);
+    expect(config.leftNavButtonText).to.equal(leftNavButtonText);
     expect(config.showHeaderLogo).to.equal(showHeaderLogo);
     expect(config.closeOnBackdropClick).to.equal(closeOnBackdropClick);
   });
@@ -63,6 +69,8 @@ describe('Modal Config', () => {
     expect(config.showProcessingIndicator).to.equal(false);
     expect(config.processingImageMode).to.equal('complete');
     expect(config.showCloseButton).to.equal(true);
+    expect(config.showLeftNavButton).to.equal(false);
+    expect(config.leftNavButtonText).to.equal('');
     expect(config.showHeaderLogo).to.equal(true);
     expect(config.closeOnBackdropClick).to.equal(true);
   });

package/test/modal-manager.test.ts

@@ -151,6 +151,34 @@ describe('Modal Manager', () => {
     expect(callbackCalled).to.equal(false);
   });
 
+  it('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', async () => {
+    const el = (await fixture(html`
+      <modal-manager></modal-manager>
+    `)) as ModalManager;
+
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+
+    let callbackCalled = false;
+    const callback = (): void => {
+      callbackCalled = true;
+    };
+    el.showModal({
+      config,
+      userPressedLeftNavButtonCallback: callback,
+    });
+    await elementUpdated(el);
+
+    const modalTemplate = el.shadowRoot?.querySelector('modal-template');
+    expect(modalTemplate).to.exist;
+
+    modalTemplate?.dispatchEvent(new Event('leftNavButtonPressed'));
+
+    await elementUpdated(el);
+
+    expect(callbackCalled).to.equal(true);
+  });
+
   it('mode is set to closed when close button is pressed', async () => {
     const el = (await fixture(html`
       <modal-manager></modal-manager>

package/test/modal-template.test.ts

@@ -57,6 +57,40 @@ describe('Modal Template', () => {
     expect(response).to.exist;
   });
 
+  it('emits leftNavButtonPressed event when left nav button is pressed', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    const clickEvent = new MouseEvent('click');
+
+    setTimeout(() => {
+      leftNavButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'leftNavButtonPressed', false);
+    expect(response).to.exist;
+  });
+
+  it('emits leftNavButtonPressed event when left nav button gets spacebar pressed', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    const clickEvent = new KeyboardEvent('keydown', { key: ' ' });
+
+    setTimeout(() => {
+      leftNavButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'leftNavButtonPressed', false);
+    expect(response).to.exist;
+  });
+
   it('shows the processing indicator if configured to', async () => {
     const config = new ModalConfig();
     config.showProcessingIndicator = true;
@@ -70,6 +104,54 @@ describe('Modal Template', () => {
     expect('hidden' in classList).to.equal(false);
   });
 
+  it('shows the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    expect(leftNavButton).to.exist;
+  });
+
+  it('hides the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showCloseButton = false;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    expect(closeButton).to.not.exist;
+  });
+
+  it('uses custom text for the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    config.leftNavButtonText = 'Previous';
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+
+    expect(leftNavButton).to.exist;
+    expect(leftNavButton?.innerHTML).to.contain('Previous');
+  });
+
+  it('does not use any text for the left nav button if not configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    expect(leftNavButton?.innerHTML).not.to.contain('Previous');
+  });
+
   it('shows the close button if configured to', async () => {
     const config = new ModalConfig();
     config.showCloseButton = true;