@internetarchive/ia-item-navigator 1.0.3 → 1.0.4

package/dist/test/ia-stub.js

@@ -1,35 +1,35 @@
-import { html } from 'lit';
-export class ItemStub {
-    constructor() {
-        this.rawResponse = '';
-        this.created = 1;
-        this.d1 = 'hello';
-        this.d2 = 'boop';
-        this.dir = 'whee';
-        this.files = [];
-        this.files_count = 0;
-        this.item_last_updated = 2020;
-        this.item_size = 111;
-        this.metadata = { identifier: 'foo' };
-        this.server = 'foo-server';
-        this.uniq = 2;
-        this.workable_servers = ['abc'];
-    }
-}
-export const shortcut = {
-    id: 'fullscreen',
-    icon: html `<i class="fas fullscreen-test"></i>`,
-};
-export const menuProvider = {
-    ...shortcut,
-    label: 'foo',
-    menuDetails: html `<div>foo</div>`,
-    selected: true,
-    followable: false,
-    href: 'https://archive.foo',
-    item: new ItemStub(),
-    baseHost: 'https://archive.foo',
-    subPrefix: 'bar',
-    updated: () => { },
-};
+import { html } from 'lit';
+export class ItemStub {
+    constructor() {
+        this.rawResponse = '';
+        this.created = 1;
+        this.d1 = 'hello';
+        this.d2 = 'boop';
+        this.dir = 'whee';
+        this.files = [];
+        this.files_count = 0;
+        this.item_last_updated = 2020;
+        this.item_size = 111;
+        this.metadata = { identifier: 'foo' };
+        this.server = 'foo-server';
+        this.uniq = 2;
+        this.workable_servers = ['abc'];
+    }
+}
+export const shortcut = {
+    id: 'fullscreen',
+    icon: html `<i class="fas fullscreen-test"></i>`,
+};
+export const menuProvider = {
+    ...shortcut,
+    label: 'foo',
+    menuDetails: html `<div>foo</div>`,
+    selected: true,
+    followable: false,
+    href: 'https://archive.foo',
+    item: new ItemStub(),
+    baseHost: 'https://archive.foo',
+    subPrefix: 'bar',
+    updated: () => { },
+};
 //# sourceMappingURL=ia-stub.js.map

package/dist/test/no-theater-available.test.d.ts

@@ -1 +1 @@
-import '../src/no-theater-available';
+import '../src/no-theater-available';

package/dist/test/no-theater-available.test.js

@@ -1,27 +1,27 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import '../src/no-theater-available';
-describe('IANoTheaterAvailable', () => {
-    it('Fires `loadingStateUpdated` on identifier change', async () => {
+import { html, fixture, expect } from '@open-wc/testing';
+import '../src/no-theater-available';
+describe('IANoTheaterAvailable', () => {
+    it('Fires `loadingStateUpdated` on identifier change', async () => {
         const el = await fixture(html `<ia-no-theater-available
         .identifier=${`foo`}
-      ></ia-no-theater-available>`);
-        let eventFired = false;
-        el.addEventListener('loadingStateUpdated', () => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            eventFired = true;
-        });
-        expect(eventFired).to.be.false;
-        el.identifier = 'bar';
-        await el.updateComplete;
-        expect(eventFired).to.be.true;
-    });
-    it('Has link to item download page', async () => {
-        var _a, _b;
+      ></ia-no-theater-available>`);
+        let eventFired = false;
+        el.addEventListener('loadingStateUpdated', () => {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            eventFired = true;
+        });
+        expect(eventFired).to.be.false;
+        el.identifier = 'bar';
+        await el.updateComplete;
+        expect(eventFired).to.be.true;
+    });
+    it('Has link to item download page', async () => {
+        var _a, _b;
         const el = await fixture(html `<ia-no-theater-available
         .identifier=${`foo`}
-      ></ia-no-theater-available>`);
-        expect(el.downloadUrl).to.equal('/download/foo');
-        expect((_b = (_a = el === null || el === void 0 ? void 0 : el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.href).to.contain(el.downloadUrl);
-    });
-});
+      ></ia-no-theater-available>`);
+        expect(el.downloadUrl).to.equal('/download/foo');
+        expect((_b = (_a = el === null || el === void 0 ? void 0 : el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.href).to.contain(el.downloadUrl);
+    });
+});
 //# sourceMappingURL=no-theater-available.test.js.map

package/index.ts

@@ -1 +1,3 @@
 export { ItemNavigator } from './src/item-navigator';
+export { MenuButton } from './src/menu-slider/menu-button';
+export { IaMenuSlider } from './src/menu-slider/ia-menu-slider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-item-navigator",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Internet Archive's Item Navigator, visually explore an item's contents.",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@internetarchive/ia-menu-slider": "^2.0.1",
+    "@internetarchive/icon-collapse-sidebar": "^1.3.4",
     "@internetarchive/icon-ellipses": "^1.3.4",
     "@internetarchive/icon-share": "^1.3.4",
     "@internetarchive/icon-visual-adjustment": "^1.3.4",
@@ -75,7 +75,7 @@
       ],
       "import/no-unresolved": "off",
       "import/extensions": [
-        "warn",
+        "off",
         {
           "js": "never",
           "ts": "never"

package/src/item-navigator.ts

@@ -13,10 +13,10 @@ import {
   SharedResizeObserver,
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
-import '@internetarchive/ia-menu-slider';
-
 import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/icon-ellipses/icon-ellipses';
+
+import './menu-slider/ia-menu-slider';
 import './loader';
 
 import {

package/src/menu-slider/ia-menu-slider.ts

@@ -0,0 +1,161 @@
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import menuSliderCSS from './styles/menu-slider';
+import '@internetarchive/icon-collapse-sidebar';
+import './menu-button';
+
+const sliderEvents = {
+  closeDrawer: 'menuSliderClosed',
+};
+
+@customElement('ia-menu-slider')
+export class IaMenuSlider extends LitElement {
+  static get styles() {
+    return menuSliderCSS;
+  }
+
+  @property({ type: Array }) menus = [];
+
+  @property({ type: Boolean }) open = false;
+
+  @property({ type: Boolean }) manuallyHandleClose = false;
+
+  @property({ type: String }) selectedMenu = '';
+
+  @property({ type: Object }) selectedMenuAction = nothing;
+
+  @property({ type: Boolean }) animateMenuOpen = false;
+
+  updated() {
+    const { actionButton } =
+      this.selectedMenuDetails || ({} as Record<string, any>);
+    const actionButtonHasChanged = actionButton !== this.selectedMenuAction;
+    if (actionButtonHasChanged) {
+      this.selectedMenuAction = actionButton || nothing;
+    }
+  }
+
+  /**
+   * Event handler, captures state of selected menu
+   */
+  setSelectedMenu({ detail }: CustomEvent) {
+    const { id } = detail;
+    this.selectedMenu = this.selectedMenu === id ? '' : id;
+    const { actionButton } =
+      this.selectedMenuDetails || ({} as Record<string, any>);
+    this.selectedMenuAction = actionButton || nothing;
+  }
+
+  /**
+   * closes menu drawer
+   */
+  closeMenu() {
+    if (!this.manuallyHandleClose) {
+      this.open = false;
+    }
+    const { closeDrawer } = sliderEvents;
+    const drawerClosed = new CustomEvent(closeDrawer, {
+      detail: this.selectedMenuDetails,
+    });
+    this.dispatchEvent(drawerClosed);
+  }
+
+  get selectedMenuDetails() {
+    const selectedMenu = this.menus.find(
+      menu => (menu as any).id === this.selectedMenu
+    );
+    return selectedMenu;
+  }
+
+  get selectedMenuComponent() {
+    const menuItem = this.selectedMenuDetails;
+    return menuItem && (menuItem as any)?.component
+      ? (menuItem as any).component
+      : html``;
+  }
+
+  /* render */
+
+  get sliderDetailsClass() {
+    const animate = this.animateMenuOpen ? 'animate' : '';
+    const state = this.open ? 'open' : '';
+    return `${animate} ${state}`;
+  }
+
+  get selectedMenuClass() {
+    return this.selectedMenu ? 'open' : '';
+  }
+
+  get menuItems() {
+    return this.menus.map(
+      (menu: Record<string, any>) =>
+        html`
+          <li>
+            <menu-button
+              @menuTypeSelected=${this.setSelectedMenu}
+              .icon=${menu.icon}
+              .label=${menu.label}
+              .menuDetails=${menu.menuDetails}
+              .id=${menu.id}
+              .selected=${menu.id === this.selectedMenu}
+              .followable=${menu.followable}
+              .href=${menu.href}
+            ></menu-button>
+          </li>
+        `
+    );
+  }
+
+  get renderMenuHeader() {
+    const { label = '', menuDetails = '' } =
+      this.selectedMenuDetails || ({} as Record<string, any>);
+    const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';
+    const actionBlock = this.selectedMenuAction
+      ? html`<span class="custom-action">${this.selectedMenuAction}</span>`
+      : nothing;
+    return html`
+      <header class="${headerClass}">
+        <div class="details">
+          <h3>${label}</h3>
+          <span class="extra-details">${menuDetails}</span>
+        </div>
+        ${actionBlock} ${this.closeButton}
+      </header>
+    `;
+  }
+
+  get closeButton() {
+    return html`
+      <button
+        class="close"
+        aria-label="Close this menu"
+        @click=${this.closeMenu}
+      >
+        <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>
+      </button>
+    `;
+  }
+
+  /** @inheritdoc */
+  render() {
+    return html`
+      <div class="main">
+        <div class="menu ${this.sliderDetailsClass}">
+          ${this.closeButton}
+          <ul class="menu-list">
+            ${this.menuItems}
+          </ul>
+          <div
+            class="content ${this.selectedMenuClass}"
+            @menuTypeSelected=${this.setSelectedMenu}
+          >
+            ${this.renderMenuHeader}
+            <section>
+              <div class="selected-menu">${this.selectedMenuComponent}</div>
+            </section>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/menu-slider/menu-button.ts

@@ -0,0 +1,80 @@
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import menuButtonCSS from './styles/menu-button';
+
+@customElement('menu-button')
+export class MenuButton extends LitElement {
+  static get styles() {
+    return menuButtonCSS;
+  }
+
+  @property({ type: String }) icon = '';
+
+  @property({ type: String }) href = '';
+
+  @property({ type: String }) label = '';
+
+  @property({ type: String }) menuDetails = '';
+
+  @property({ type: String }) id = '';
+
+  @property({ type: Boolean }) selected = false;
+
+  @property({ type: Boolean }) followable = false;
+
+  onClick(e: Event) {
+    e.preventDefault();
+    this.dispatchMenuTypeSelectedEvent();
+  }
+
+  dispatchMenuTypeSelectedEvent() {
+    this.dispatchEvent(
+      new CustomEvent('menuTypeSelected', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          id: this.id,
+        },
+      })
+    );
+  }
+
+  get buttonClass() {
+    return this.selected ? 'selected' : '';
+  }
+
+  get iconClass() {
+    return this.selected ? 'active' : '';
+  }
+
+  get menuItem() {
+    return html`
+      <span class="icon ${this.iconClass}"> ${this.icon} </span>
+      <span class="label">${this.label}</span>
+      <span class="menu-details">${this.menuDetails}</span>
+    `;
+  }
+
+  get linkButton() {
+    return html`
+      <a
+        href="${this.href}"
+        class="menu-item ${this.buttonClass}"
+        @click=${this.followable ? undefined : this.onClick}
+        >${this.menuItem}</a
+      >
+    `;
+  }
+
+  get clickButton() {
+    return html`
+      <button class="menu-item ${this.buttonClass}" @click=${this.onClick}>
+        ${this.menuItem}
+      </button>
+    `;
+  }
+
+  render() {
+    return this.href ? this.linkButton : this.clickButton;
+  }
+}

package/src/menu-slider/styles/menu-button.ts

@@ -0,0 +1,79 @@
+import { css } from 'lit';
+
+export default css`
+  a {
+    display: inline-block;
+    text-decoration: none;
+  }
+
+  .menu-item {
+    display: inline-flex;
+    width: 100%;
+    padding: 0;
+    font-size: 1.6rem;
+    text-align: left;
+    background: transparent;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    border: none;
+    cursor: pointer;
+  }
+
+  button.menu-item {
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0;
+  }
+
+  .menu-item:focus {
+    outline: none;
+  }
+
+  .label {
+    display: var(--menuButtonLabelDisplay, none);
+    padding: 0;
+    font-weight: 400;
+    color: var(--primaryTextColor);
+    text-align: left;
+    vertical-align: middle;
+    margin-left: 1rem;
+  }
+
+  .menu-details {
+    color: var(--primaryTextColor);
+    display: inline-block;
+    margin-left: 0.5rem;
+    font-style: italic;
+    font-size: 1.5rem;
+  }
+
+  .menu-item > .icon {
+    position: relative;
+    display: inline-flex;
+    z-index: 2;
+    min-width: 4.2rem;
+    max-width: 4.2rem;
+    height: 4.2rem;
+    vertical-align: middle;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+
+  .menu-item.selected .icon {
+    background-color: var(--activeButtonBg);
+    border-radius: 1rem 0 0 1rem;
+  }
+
+  .icon .fill-color {
+    fill: #999;
+  }
+
+  .icon.active .fill-color {
+    fill: #fff;
+  }
+`;

package/src/menu-slider/styles/menu-slider.ts

@@ -0,0 +1,119 @@
+import { css } from 'lit';
+
+const menuButtonWidth = css`42px`;
+const sliderWidth = css`var(--menuWidth, 320px)`;
+const transitionTiming = css`var(--animationTiming, 200ms)`;
+
+export default css`
+  .main {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  .animate {
+    transition: transform ${transitionTiming} ease-out;
+  }
+
+  .menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: ${sliderWidth};
+    padding: 0.5rem 0.5rem 0 0;
+    box-sizing: border-box;
+    font-size: 1.4rem;
+    color: var(--primaryTextColor);
+    background: var(--menuSliderBg);
+    transform: translateX(calc(${sliderWidth} * -1));
+  }
+
+  .menu > button.close {
+    right: 0.7rem;
+  }
+
+  button {
+    outline: none;
+    cursor: pointer;
+  }
+
+  header {
+    margin: 0 0 0.5rem 0;
+  }
+
+  header * {
+    margin: 0;
+    display: inline-block;
+  }
+  header button {
+    outline: none;
+    cursor: pointer;
+  }
+
+  header.with-secondary-action .details {
+    width: 80%;
+  }
+
+  header .details {
+    font-weight: bold;
+    width: 88%;
+  }
+
+  header .custom-action > *,
+  button.close {
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    --iconWidth: var(--menuSliderHeaderIconWidth);
+    --iconHeight: var(--menuSliderHeaderIconHeight);
+  }
+
+  header .custom-action,
+  button.close {
+    position: absolute;
+  }
+  button.close {
+    right: 0.5rem;
+  }
+
+  button.close * {
+    float: right;
+  }
+
+  .content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: ${menuButtonWidth};
+    z-index: 1;
+    transform: translateX(calc(${sliderWidth} * -1));
+    transition: transform ${transitionTiming} ease-out;
+    background: var(--activeButtonBg);
+    border-right: 0.2rem solid;
+    border-color: var(--subpanelRightBorderColor);
+    padding: 0.5rem 0 0 0.5rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .open {
+    transform: translateX(0);
+  }
+
+  .menu-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    background: var(--menuSliderBg);
+  }
+  .menu-list li {
+    margin-bottom: 0.2rem;
+  }
+
+  .content > section {
+    overflow: auto;
+    overscroll-behavior: contain;
+  }
+`;