@internetarchive/modal-manager 2.0.4 → 2.0.5-webdev-8155.2

package/demo/app-root.ts

@@ -0,0 +1,366 @@
+import { css, html, LitElement, type CSSResultGroup } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+import { ModalConfig } from '../src/modal-config';
+import { ModalManager } from '../src/modal-manager';
+import '../src/modal-manager';
+
+@customElement('app-root')
+export class AppRoot extends LitElement {
+  @query('modal-manager')
+  private modalManager!: ModalManager;
+
+  protected render() {
+    return html`
+      <modal-manager>
+        <div slot="slot-content-demo">
+          <p>Slotted Content</p>
+        </div>
+      </modal-manager>
+
+      <div class="actions">
+        <button @click=${this.showModal}>Modal</button>
+        <button @click=${this.showAllFeaturesModal}>All Features</button>
+        <button @click=${this.showErrorModal}>Error Modal</button>
+        <button @click=${this.showCustomContentModal}>
+          Custom Content Modal
+        </button>
+        <button @click=${this.showSlottedContentModal}>
+          Slotted Content Modal
+        </button>
+        <button @click=${this.showProcessingModal}>Processing Modal</button>
+        <button @click=${this.showCompleteModal}>
+          Processing Complete Modal
+        </button>
+        <button @click=${this.showUserClosedModalCallbackModal}>
+          Modal Closed Callback
+        </button>
+        <button @click=${this.showModalUserCannotClose}>
+          Unclosable Modal
+        </button>
+        <button @click=${this.showModalUserCannotClickBackdrop}>
+          Unclickable Backdrop
+        </button>
+        <button @click=${this.showOverflowModal}>Text-heavy Modal</button>
+        <button @click=${this.showModalWithoutLogo}>Modal Without Logo</button>
+        <button @click=${this.showModalWithLeftNavButton}>
+          Modal With Left Nav Button
+        </button>
+      </div>
+
+      <h3>Some Content</h3>
+
+      <img src="./assets/images/200x200.jpg" style="float:right" />
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere
+        sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac
+        tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor
+        scelerisque quam, sit amet porta tortor consectetur non. Cras
+        sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis
+        laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula
+        aliquam. Pellentesque habitant morbi tristique senectus et netus et
+        malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet
+        volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.
+      </p>
+
+      <p>
+        In laoreet scelerisque tortor, at convallis nisl efficitur vehicula.
+        Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt
+        erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat
+        condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo
+        feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in
+        lacus fermentum tristique. In porttitor malesuada sapien non posuere.
+        Phasellus mollis mauris ultrices est consectetur, id pulvinar magna
+        suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula
+        cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id
+        maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam
+        cursus posuere ultricies.
+      </p>
+
+      <p>
+        Maecenas porta ac nulla sed vestibulum. Suspendisse aliquam fermentum
+        mi, id luctus tortor aliquet gravida. Maecenas sed tincidunt quam.
+        Mauris cursus ante sit amet enim egestas, vitae pellentesque metus
+        hendrerit. Sed quis tortor id dui mollis blandit quis ac nunc.
+        Suspendisse tincidunt nisl quis nunc tincidunt, et finibus ipsum
+        elementum. Maecenas congue, neque eget volutpat pulvinar, augue nisl
+        interdum elit, et porta mi augue ut sapien.
+      </p>
+
+      <p>
+        Fusce vel imperdiet justo. Aenean sollicitudin blandit nunc. Cras vitae
+        orci id lorem condimentum tempor. Aliquam ac lectus sed mi suscipit
+        sollicitudin at convallis nisl. Sed semper elementum sagittis. Nam
+        fermentum nulla velit, non tempor massa fermentum non. Duis id ante eget
+        elit gravida semper ac quis ligula. Duis vel libero ligula. Curabitur
+        tempor sed velit nec egestas. Vivamus sit amet volutpat purus. Integer
+        imperdiet mattis erat, vitae dignissim odio accumsan quis. Fusce
+        bibendum lectus quis est molestie, eget scelerisque elit interdum. Etiam
+        imperdiet a leo vitae ultricies. Etiam pretium quam eget sem mollis,
+        quis elementum libero vulputate. Praesent aliquet dictum augue a luctus.
+      </p>
+
+      <p>
+        Maecenas vulputate iaculis mauris nec lobortis. Sed nibh ante, vehicula
+        nec varius et, condimentum in massa. Curabitur a turpis porta, auctor
+        magna in, iaculis ante. Suspendisse potenti. Donec massa orci,
+        sollicitudin in nulla ut, fringilla dignissim elit. Suspendisse
+        porttitor lorem nec sem volutpat ullamcorper. Curabitur blandit est
+        tristique velit pharetra rhoncus. Aliquam vitae mauris ex.
+      </p>
+    `;
+  }
+
+  showModal() {
+    const config = new ModalConfig();
+    config.headline = 'Success';
+    config.message = 'Thank you for your support!';
+
+    this.modalManager.showModal({
+      config,
+    });
+  }
+
+  showErrorModal() {
+    const config = new ModalConfig();
+    config.headline = 'Error';
+    config.message = 'An error occurred while processing your donation.';
+    config.headerColor = '#691916';
+    config.bodyColor = '#fff';
+
+    this.modalManager.showModal({
+      config,
+    });
+  }
+
+  showBillAlert() {
+    alert('Bill <3 You');
+  }
+
+  buttonPress() {
+    alert('You pressed a button.');
+  }
+
+  showAllFeaturesModal() {
+    const config = new ModalConfig();
+    config.title = html`Donation Received`;
+    config.subtitle = html`Thanks a bunch!`;
+    config.headline = html`A Headline that catches attention and might spill
+    over to multiple lines!`;
+    config.message = html`A long informative message for your users that let
+    them know about something`;
+    config.headerColor = 'purple';
+    config.showProcessingIndicator = true;
+    config.processingImageMode = 'complete';
+
+    const someContent = html`
+      <div style="text-align: center; margin-top: 10px;">
+        <button @click=${this.buttonPress}>I'm A Button To Press</button>
+      </div>
+    `;
+
+    this.modalManager.showModal({
+      config,
+      customModalContent: someContent,
+    });
+  }
+
+  showCustomContentModal() {
+    const config = new ModalConfig();
+    config.title = 'Custom Content';
+    config.headline = html`<span class="sr-only"
+      >Also support screen-reader only</span
+    >`;
+
+    const someContent = html`
+      <style>
+        a:focus {
+          outline: 2px solid blue;
+        }
+      </style>
+      Can contain any markup, including web components. Event listeners also
+      work. Try clicking on the picture.
+      <span class="sr-only">Also support screen-reader only</span>
+      <div style="text-align: center">
+        <a href="https://www.billmurraystory.com/" style="display: block;"
+          >Bill Murray Stories</a
+        >
+        <img src="./assets/images/100x100.jpg" @click=${this.showBillAlert} />
+      </div>
+    `;
+
+    this.modalManager.showModal({
+      config,
+      customModalContent: someContent,
+    });
+  }
+
+  showSlottedContentModal() {
+    const config = new ModalConfig();
+    config.title = 'Slotted Content';
+
+    const someContent = html`
+      Can slot content from the top-level:
+      <slot name="slot-content-demo"></slot>
+    `;
+
+    this.modalManager.showModal({
+      config,
+      customModalContent: someContent,
+    });
+  }
+
+  showOverflowModal() {
+    const config = new ModalConfig();
+
+    config.title = html`Lorem Ipsum`;
+    config.subtitle = html`Subtitle`;
+    config.headline = html`Everything Important`;
+    config.message = html`
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere
+        sollicitudin aliquam. Aenean vel felis arcu. Maecenas convallis dolor ac
+        tortor tristique, congue scelerisque turpis congue. Vestibulum porttitor
+        scelerisque quam, sit amet porta tortor consectetur non. Cras
+        sollicitudin sit amet lacus ac egestas. Nam sollicitudin sem at sagittis
+        laoreet. Donec nec nisl erat. Curabitur interdum in enim vehicula
+        aliquam. Pellentesque habitant morbi tristique senectus et netus et
+        malesuada fames ac turpis egestas. Fusce tempus sit amet tortor laoreet
+        volutpat. Vivamus non vehicula felis, aliquet hendrerit odio.
+      </p>
+
+      <p>
+        In laoreet scelerisque tortor, at convallis nisl efficitur vehicula.
+        Donec eu erat a turpis fermentum blandit vitae ut erat. Mauris tincidunt
+        erat sit amet ante suscipit porta. Fusce mollis metus sit amet erat
+        condimentum, eu maximus lacus aliquam. Sed cursus lacus eget sem commodo
+        feugiat. Praesent semper lorem eu sollicitudin blandit. Sed id risus in
+        lacus fermentum tristique. In porttitor malesuada sapien non posuere.
+        Phasellus mollis mauris ultrices est consectetur, id pulvinar magna
+        suscipit. Integer sodales sapien in augue tincidunt, ac tempor ligula
+        cursus. Mauris id justo et dui blandit luctus. Morbi mattis id metus id
+        maximus. Suspendisse quis lobortis erat, sed dignissim neque. Etiam
+        cursus posuere ultricies.
+      </p>
+    `;
+
+    config.headerColor = '#36A483';
+
+    this.modalManager.showModal({
+      config,
+    });
+  }
+
+  showModalWithoutLogo() {
+    const config = new ModalConfig();
+    config.headline = 'Success';
+    config.title = html`Donation Received`;
+    config.message = 'Thank you for your support!';
+    config.headerColor = '#194880';
+    config.showHeaderLogo = false;
+    this.modalManager.showModal({
+      config,
+    });
+  }
+
+  showCompleteModal() {
+    const config = new ModalConfig();
+    config.showProcessingIndicator = true;
+    config.processingImageMode = 'complete';
+    this.modalManager.showModal({
+      config,
+    });
+  }
+
+  showProcessingModal() {
+    const config = new ModalConfig();
+    config.headerColor = '#497fbf';
+    config.showProcessingIndicator = true;
+    config.processingImageMode = 'processing';
+    config.showCloseButton = false;
+    config.closeOnBackdropClick = false;
+    this.modalManager.showModal({
+      config,
+    });
+
+    setTimeout(this.showCompleteModal.bind(this), 1500);
+  }
+
+  showUserClosedModalCallbackModal() {
+    const config = new ModalConfig();
+    config.message = 'When you close this modal another will open.';
+
+    this.modalManager.showModal({
+      config,
+      userClosedModalCallback: () => {
+        const config = new ModalConfig();
+        config.message = "I'm another modal";
+        config.headerColor = '#497fbf';
+        this.modalManager.showModal({ config });
+      },
+    });
+  }
+
+  showModalUserCannotClose() {
+    const config = new ModalConfig();
+    config.message =
+      'User cannot close this. Will close automatically in 2 seconds.';
+    config.showCloseButton = false;
+    config.closeOnBackdropClick = false;
+    this.modalManager.showModal({
+      config,
+    });
+
+    setTimeout(this.modalManager.closeModal.bind(this.modalManager), 2000);
+  }
+
+  showModalWithLeftNavButton() {
+    const config = new ModalConfig();
+    config.message = 'This modal has a left nav button.';
+    config.showLeftNavButton = true;
+    config.leftNavButtonText = 'Back';
+
+    this.modalManager.showModal({
+      config,
+      userPressedLeftNavButtonCallback: () => {
+        const config = new ModalConfig();
+        config.message =
+          "I'm the previous modal (or anything else you want to do here)";
+        config.headerColor = '#497fbf';
+        this.modalManager.showModal({ config });
+      },
+    });
+  }
+
+  showModalUserCannotClickBackdrop() {
+    const config = new ModalConfig();
+    config.message = 'Clicking on the backdrop will not close this.';
+    config.showCloseButton = true;
+    config.closeOnBackdropClick = false;
+    this.modalManager.showModal({
+      config,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      modal-manager {
+        display: none;
+        --modalTitleLineHeight: 4.5rem;
+      }
+
+      modal-manager[mode='open'] {
+        display: block;
+      }
+
+      .actions {
+        position: fixed;
+        background-color: rgba(255, 255, 255, 0.9);
+        border: 1px solid black;
+        padding: 10px;
+        top: 10px;
+        left: 10px;
+      }
+    `;
+  }
+}

package/dist/demo/app-root.d.ts

@@ -0,0 +1,22 @@
+import { LitElement, type CSSResultGroup } from 'lit';
+import '../src/modal-manager';
+export declare class AppRoot extends LitElement {
+    private modalManager;
+    protected render(): import("lit-html").TemplateResult<1>;
+    showModal(): void;
+    showErrorModal(): void;
+    showBillAlert(): void;
+    buttonPress(): void;
+    showAllFeaturesModal(): void;
+    showCustomContentModal(): void;
+    showSlottedContentModal(): void;
+    showOverflowModal(): void;
+    showModalWithoutLogo(): void;
+    showCompleteModal(): void;
+    showProcessingModal(): void;
+    showUserClosedModalCallbackModal(): void;
+    showModalUserCannotClose(): void;
+    showModalWithLeftNavButton(): void;
+    showModalUserCannotClickBackdrop(): void;
+    static get styles(): CSSResultGroup;
+}