@internetarchive/ia-item-navigator 1.1.0 → 2.0.0-alpha1

package/src/menus/share-providers/pinterest.ts

@@ -0,0 +1,23 @@
+import '@internetarchive/icon-pinterest/icon-pinterest';
+import { TemplateResult, html } from 'lit';
+import Provider from './provider';
+import { ProviderParams } from './share-provider-interface';
+
+export default class extends Provider {
+  name: string;
+
+  icon: TemplateResult;
+
+  class: string;
+
+  constructor(params: ProviderParams) {
+    super(params);
+    this.name = 'Pinterest';
+    this.icon = html`<ia-icon-pinterest></ia-icon-pinterest>`;
+    this.class = 'pinterest';
+  }
+
+  override get url(): string {
+    return `http://www.pinterest.com/pin/create/button/?url=https://${this.baseHost}/details/${this.itemPath}&description=${this.encodedDescription}+%3A+${this.encodedCreator}${this.encodedPromoCopy}`;
+  }
+}

package/src/menus/share-providers/provider.ts

@@ -0,0 +1,63 @@
+import { TemplateResult } from 'lit';
+import { ProviderParams } from './share-provider-interface';
+
+export default class Provider {
+  promoCopy: string;
+
+  description: string;
+
+  creator: string;
+
+  fileSubPrefix: string;
+
+  identifier: string;
+
+  baseHost: string;
+
+  name: string | undefined;
+
+  icon: TemplateResult | string | undefined;
+
+  class: string | undefined;
+
+  constructor(params: ProviderParams) {
+    this.promoCopy =
+      ' : Free Download, Borrow, and Streaming : Internet Archive';
+
+    this.description = params?.description || '';
+    this.creator = params?.creator || '';
+    this.fileSubPrefix = params?.fileSubPrefix || '';
+    this.identifier = params?.identifier || '';
+    this.baseHost = params?.baseHost || '';
+  }
+
+  get encodedDescription(): string {
+    return this.encodeString(this.description);
+  }
+
+  get encodedCreator(): string {
+    return this.encodeString(this.creator);
+  }
+
+  get encodedPromoCopy(): string {
+    return this.encodeString(this.promoCopy);
+  }
+
+  get itemPath(): string {
+    const encodedFileSubPrefix = this.fileSubPrefix
+      ? encodeURIComponent(this.fileSubPrefix)
+      : '';
+    return encodedFileSubPrefix
+      ? `${this.identifier}/${encodedFileSubPrefix}`
+      : this.identifier;
+  }
+
+  get url(): string {
+    return `https://${this.baseHost}/details/${this.itemPath}`;
+  }
+
+  encodeString(str: string): string {
+    if (!str) return '';
+    return encodeURIComponent(str.replace(/\s/g, '+')).replace(/%2B/g, '+');
+  }
+}

package/src/menus/share-providers/share-provider-interface.ts

@@ -0,0 +1,17 @@
+import { TemplateResult } from 'lit';
+
+export type ProviderParams = {
+  class: string;
+  icon: TemplateResult | string;
+  name: string;
+
+  promoCopy: string;
+  description: string;
+  creator: string;
+
+  // ia item
+  fileSubPrefix: string;
+  identifier: string;
+  baseHost: string;
+  itemPath: string;
+};

package/src/menus/share-providers/tumblr.ts

@@ -0,0 +1,23 @@
+import '@internetarchive/icon-tumblr/icon-tumblr';
+import { TemplateResult, html } from 'lit';
+import Provider from './provider';
+import { ProviderParams } from './share-provider-interface';
+
+export default class extends Provider {
+  name: string;
+
+  icon: TemplateResult;
+
+  class: string;
+
+  constructor(params: ProviderParams) {
+    super(params);
+    this.name = 'Tumblr';
+    this.icon = html`<ia-icon-tumblr></ia-icon-tumblr>`;
+    this.class = 'tumblr';
+  }
+
+  override get url(): string {
+    return `https://www.tumblr.com/share/video?embed=%3Ciframe+width%3D%22640%22+height%3D%22480%22+frameborder%3D%220%22+allowfullscreen+src%3D%22https%3A%2F%2F${this.baseHost}%2Fembed%2F%22+webkitallowfullscreen%3D%22true%22+mozallowfullscreen%3D%22true%22%26gt%3B%26lt%3B%2Fiframe%3E&name=${this.encodedDescription}+%3A+${this.encodedCreator}${this.encodedPromoCopy}`;
+  }
+}

package/src/menus/share-providers/twitter.ts

@@ -0,0 +1,23 @@
+import '@internetarchive/icon-twitter/icon-twitter';
+import { TemplateResult, html } from 'lit';
+import Provider from './provider';
+import { ProviderParams } from './share-provider-interface';
+
+export default class TwitterProvider extends Provider {
+  name: string;
+
+  icon: TemplateResult;
+
+  class: string;
+
+  constructor(params: ProviderParams) {
+    super(params);
+    this.name = 'Twitter';
+    this.icon = html`<ia-icon-twitter></ia-icon-twitter>`;
+    this.class = 'twitter';
+  }
+
+  override get url(): string {
+    return `https://twitter.com/intent/tweet?url=https://${this.baseHost}/details/${this.itemPath}&via=internetarchive&text=${this.encodedDescription}+%3A+${this.encodedCreator}${this.encodedPromoCopy}`;
+  }
+}

package/test/ia-sharing-options.test.js

@@ -0,0 +1,78 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import sinon from 'sinon';
+import '../src/ia-sharing-options.js';
+
+const identifier = 'goody';
+const itemType = 'book';
+const creator = 'Welsh, Charles';
+const description = 'The history of Little Goody Two-Shoes : otherwise called Mrs. Margery Two-Shoes ... [1766 edition]';
+
+const container = (optionalFileSubprefix = '') => (
+  html`<ia-sharing-options
+    identifier="${identifier}"
+    type="${itemType}"
+    creator="${creator}"
+    description="${description}"
+    baseHost="archive.org"
+    fileSubPrefix="${optionalFileSubprefix}"
+  ></ia-sharing-options>`
+);
+
+describe('<ia-sharing-options>', () => {
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  it('sets default properties', async () => {
+    const el = await fixture(container());
+
+    expect(el.identifier).to.equal(identifier);
+    expect(el.type).to.equal(itemType);
+    expect(el.creator).to.equal(creator);
+    expect(el.description).to.equal(description);
+  });
+
+  it('renders buttons for each sharing method', async () => {
+    const el = await fixture(container());
+
+    await el.updateComplete;
+
+    el.sharingOptions.forEach((option) => {
+      const button = el.shadowRoot.querySelector(`a.${option.class}`);
+      expect(button).to.exist;
+      expect(button.getAttribute('href')).to.equal(option.url);
+    });
+  });
+
+  it('toggles visibility of embed options', async () => {
+    const el = await fixture(container());
+
+    el.toggleEmbedOptions(new Event('click'));
+    await el.updateComplete;
+
+    expect(el.embedOptionsVisible).to.equal(true);
+  });
+
+  it('does not show internal header by default', async () => {
+    const el = await fixture(container());
+    expect(el.shadowRoot.querySelector('header')).to.be.null;
+  });
+
+  it('does shows internal header when requested', async () => {
+    const el = await fixture(container());
+    el.renderHeader = true;
+    await el.updateComplete;
+    expect(el.shadowRoot.querySelector('header')).to.not.be.null;
+  });
+
+  it('sets file subprefix to end of share URLs if present', async () => {
+    const optionalFileSubprefix = 'foo- bar - 123-';
+    const el = await fixture(container(optionalFileSubprefix));
+
+    el.sharingOptions.forEach((option) => {
+      if (option.name !== 'Tumblr') {
+        expect(option.url).to.contain(encodeURIComponent(optionalFileSubprefix));
+      }
+    });
+  });
+});

package/test/{ia-item-navigator.test.ts → iaux-item-navigator.test.ts}

@@ -4,10 +4,10 @@ import Sinon from 'sinon';
 
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { ModalManager } from '@internetarchive/modal-manager';
-import { ItemNavigator } from '../src/item-navigator';
-import '../src/item-navigator';
+import { ItemNavigator } from '../src/iaux-item-navigator';
+import '../src/iaux-item-navigator';
 
-import { ItemStub, menuProvider, shortcut } from '../test/ia-stub';
+import { ItemStub, menuProvider, shortcut } from './ia-stub';
 import {
   ManageFullscreenEvent,
   ToggleSideMenuOpenEvent,
@@ -24,7 +24,9 @@ describe('ItemNavigator', () => {
   describe('Theaters', () => {
     it('shows <ia-no-theater-available> if told', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
+        html`<iaux-item-navigator
+          .item=${new ItemStub()}
+        ></iaux-item-navigator>`,
       );
       el.viewAvailable = false;
       await el.updateComplete;
@@ -33,7 +35,9 @@ describe('ItemNavigator', () => {
     });
     it('opens main slot by default', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
+        html`<iaux-item-navigator
+          .item=${new ItemStub()}
+        ></iaux-item-navigator>`,
       );
 
       expect(el.viewAvailable).to.be.true;
@@ -45,14 +49,14 @@ describe('ItemNavigator', () => {
   describe('`el.loaded`', () => {
     it('toggles the spinning loader', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator></ia-item-navigator>`,
+        html`<iaux-item-navigator></iaux-item-navigator>`,
       );
       expect(el.loaded).to.be.null; // initial load
       expect(el.shadowRoot?.querySelector('ia-itemnav-loader')).to.exist;
     });
     it('hides reader section if `!loaded`', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator></ia-item-navigator>`,
+        html`<iaux-item-navigator></iaux-item-navigator>`,
       );
 
       expect(
@@ -61,7 +65,9 @@ describe('ItemNavigator', () => {
     });
     it('shows reader when `loaded` ', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
+        html`<iaux-item-navigator
+          .item=${new ItemStub()}
+        ></iaux-item-navigator>`,
       );
 
       el.loaded = true;
@@ -75,7 +81,7 @@ describe('ItemNavigator', () => {
     });
     it('listens to `@loadingStateUpdated` to update `loaded` for <no-theater-available>', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator></ia-item-navigator>`,
+        html`<iaux-item-navigator></iaux-item-navigator>`,
       );
 
       await el.updateComplete;
@@ -98,9 +104,9 @@ describe('ItemNavigator', () => {
     it('uses one', async () => {
       const sharedObserver = new SharedResizeObserver();
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator
+        html`<iaux-item-navigator
           .sharedObserver=${sharedObserver}
-        ></ia-item-navigator>`,
+        ></iaux-item-navigator>`,
       );
 
       expect(el.sharedObserver).to.equal(sharedObserver);
@@ -111,9 +117,9 @@ describe('ItemNavigator', () => {
       const addObserverSpy = Sinon.spy(sharedObserver, 'addObserver');
 
       await fixture<ItemNavigator>(
-        html`<ia-item-navigator
+        html`<iaux-item-navigator
           .sharedObserver=${sharedObserver}
-        ></ia-item-navigator>`,
+        ></iaux-item-navigator>`,
       );
 
       expect(addObserverSpy.callCount).to.equal(2);
@@ -123,9 +129,9 @@ describe('ItemNavigator', () => {
       const removeObserverSpy = Sinon.spy(sharedObserver, 'removeObserver');
 
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator
+        html`<iaux-item-navigator
           .sharedObserver=${sharedObserver}
-        ></ia-item-navigator>`,
+        ></iaux-item-navigator>`,
       );
 
       el.disconnectedCallback();
@@ -135,7 +141,7 @@ describe('ItemNavigator', () => {
     });
     it('sets menu to overlay if container width is <= 600px', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator></ia-item-navigator>`,
+        html`<iaux-item-navigator></iaux-item-navigator>`,
       );
 
       expect(el.openMenuState).to.equal('shift'); // as starting point
@@ -162,7 +168,7 @@ describe('ItemNavigator', () => {
     it('uses one', async () => {
       const modal = new ModalManager();
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .modal=${modal}></ia-item-navigator>`,
+        html`<iaux-item-navigator .modal=${modal}></iaux-item-navigator>`,
       );
       expect(el.modal).to.equal(modal);
     });
@@ -172,7 +178,7 @@ describe('ItemNavigator', () => {
     it('creates reflected attribute `viewportinfullscreen`', async () => {
       /** to help with external styling adjustmnents */
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator></ia-item-navigator>`,
+        html`<iaux-item-navigator></iaux-item-navigator>`,
       );
       expect(el.getAttribute('viewportinfullscreen')).to.be.null;
 
@@ -183,7 +189,7 @@ describe('ItemNavigator', () => {
     });
     it('@ViewportInFullScreen', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator></ia-item-navigator>`,
+        html`<iaux-item-navigator></iaux-item-navigator>`,
       );
       expect(el.viewportInFullscreen).to.be.null;
 
@@ -211,7 +217,9 @@ describe('ItemNavigator', () => {
   describe('el.menuOpened', () => {
     it('toggles side menu open', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
+        html`<iaux-item-navigator
+          .item=${new ItemStub()}
+        ></iaux-item-navigator>`,
       );
 
       el.menuContents = [menuProvider];
@@ -238,7 +246,9 @@ describe('ItemNavigator', () => {
 
     it('opens menu shortcut with `@manageSideMenuEvents`', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
+        html`<iaux-item-navigator
+          .item=${new ItemStub()}
+        ></iaux-item-navigator>`,
       );
       const detail = {
         menuId: 'fullscreen',
@@ -303,7 +313,9 @@ describe('ItemNavigator', () => {
   describe('el.menuContents', () => {
     it('draws side menu when populated', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
+        html`<iaux-item-navigator
+          .item=${new ItemStub()}
+        ></iaux-item-navigator>`,
       );
 
       el.menuContents = [menuProvider];
@@ -324,7 +336,9 @@ describe('ItemNavigator', () => {
   describe('`el.menuShortcuts`', () => {
     it('displays shortcut & toggle side menu button', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
+        html`<iaux-item-navigator
+          .item=${new ItemStub()}
+        ></iaux-item-navigator>`,
       );
 
       const anotherShortcut = {
@@ -350,7 +364,9 @@ describe('ItemNavigator', () => {
   describe('Menu events', () => {
     it('`el.setMenuShortcuts`', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
+        html`<iaux-item-navigator
+          .item=${new ItemStub()}
+        ></iaux-item-navigator>`,
       );
       expect(el.menuShortcuts.length).to.equal(0);
 
@@ -365,7 +381,9 @@ describe('ItemNavigator', () => {
     });
     it('`el.setMenuContents`', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
+        html`<iaux-item-navigator
+          .item=${new ItemStub()}
+        ></iaux-item-navigator>`,
       );
       expect(el.menuContents.length).to.equal(0);
 
@@ -378,7 +396,9 @@ describe('ItemNavigator', () => {
     });
     it('`el.setOpenMenu`', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
+        html`<iaux-item-navigator
+          .item=${new ItemStub()}
+        ></iaux-item-navigator>`,
       );
 
       el.setOpenMenu({
@@ -400,7 +420,9 @@ describe('ItemNavigator', () => {
     });
     it('`el.closeMenu`', async () => {
       const el = await fixture<ItemNavigator>(
-        html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
+        html`<iaux-item-navigator
+          .item=${new ItemStub()}
+        ></iaux-item-navigator>`,
       );
 
       el.menuOpened = true;

package/test/iaux-sharing-options.test.ts

@@ -0,0 +1,84 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import sinon from 'sinon';
+import '../src/menus/iaux-sharing-options';
+import type { IauxSharingOptions } from '../src/menus/iaux-sharing-options';
+
+const identifier = 'goody';
+const itemType = 'book';
+const creator = 'Welsh, Charles';
+const description =
+  'The history of Little Goody Two-Shoes : otherwise called Mrs. Margery Two-Shoes ... [1766 edition]';
+
+const container = (optionalFileSubprefix = '') =>
+  html`<iaux-sharing-options
+    identifier="${identifier}"
+    type="${itemType}"
+    creator="${creator}"
+    description="${description}"
+    baseHost="archive.org"
+    fileSubPrefix="${optionalFileSubprefix}"
+  ></iaux-sharing-options>`;
+
+describe('<iaux-sharing-options>', () => {
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  it('sets default properties', async () => {
+    const el = (await fixture(container())) as IauxSharingOptions;
+
+    expect(el.identifier).to.equal(identifier);
+    expect(el.type).to.equal(itemType);
+    expect(el.creator).to.equal(creator);
+    expect(el.description).to.equal(description);
+  });
+
+  it('renders buttons for each sharing method', async () => {
+    const el = (await fixture(container())) as IauxSharingOptions;
+
+    await el.updateComplete;
+
+    el.sharingOptions.forEach(option => {
+      const button =
+        el.shadowRoot && el.shadowRoot.querySelector(`a.${option.class}`);
+      expect(button).to.exist;
+      expect(button?.getAttribute('href')).to.equal(option.url);
+    });
+  });
+
+  it('toggles visibility of embed options', async () => {
+    const el = (await fixture(container())) as IauxSharingOptions;
+
+    el.toggleEmbedOptions(new Event('click'));
+    await el.updateComplete;
+
+    expect(el.embedOptionsVisible).to.equal(true);
+  });
+
+  it('does not show internal header by default', async () => {
+    const el = (await fixture(container())) as IauxSharingOptions;
+    expect(el.shadowRoot?.querySelector('header')).to.be.null;
+  });
+
+  it('does shows internal header when requested', async () => {
+    const el = (await fixture(container())) as IauxSharingOptions;
+    el.renderHeader = true;
+    await el.updateComplete;
+    expect(el.shadowRoot?.querySelector('header')).to.not.be.null;
+  });
+
+  it('sets file subprefix to end of share URLs if present', async () => {
+    const optionalFileSubprefix = 'foo- bar - 123-';
+    const el = (await fixture(
+      container(optionalFileSubprefix),
+    )) as IauxSharingOptions;
+
+    el.sharingOptions.forEach(option => {
+      if (option.name !== 'Tumblr') {
+        expect(option.url).to.contain(
+          encodeURIComponent(optionalFileSubprefix),
+        );
+      }
+    });
+  });
+});

package/dist/src/item-navigator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"item-navigator.js","sourceRoot":"","sources":["../../src/item-navigator.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  PropertyValues,\n  CSSResult,\n  TemplateResult,\n  nothing,\n} from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MetadataResponse } from '@internetarchive/search-service';\nimport {\n  SharedResizeObserver,\n  SharedResizeObserverResizeHandlerInterface,\n} from '@internetarchive/shared-resize-observer';\nimport { ModalManager } from '@internetarchive/modal-manager';\nimport '@internetarchive/icon-ellipses/icon-ellipses';\n\nimport './menu-slider/ia-menu-slider';\nimport './loader';\n\nimport {\n  ToggleSideMenuOpenEvent,\n  ToggleSidePanelOpenEvent,\n  SetSideMenuContentsEvent,\n  SetSideMenuShortcutsEvent,\n  loadingStateUpdatedEvent,\n  ManageFullscreenEvent,\n} from './interfaces/event-interfaces';\n\nimport {\n  MenuProviderInterface,\n  MenuShortcutInterface,\n  MenuId,\n} from './interfaces/menu-interfaces';\nimport './no-theater-available';\n\n@customElement('ia-item-navigator')\nexport class ItemNavigator\n  extends LitElement\n  implements SharedResizeObserverResizeHandlerInterface\n{\n  @property({\n    type: Object,\n    converter: (value: string | MetadataResponse | null): MetadataResponse => {\n      if (value && typeof value === 'string') {\n        return new MetadataResponse(JSON.parse(atob(value)));\n      }\n      return value as MetadataResponse;\n    },\n  })\n  item?: MetadataResponse;\n\n  @property({ type: Boolean }) viewAvailable: Boolean = true;\n\n  @property({ type: String }) baseHost = 'archive.org';\n\n  @property({\n    converter: (arg: string | boolean | null) => {\n      if (typeof arg === 'boolean') {\n        return arg;\n      }\n      return arg === 'true';\n    },\n  })\n  signedIn = false;\n\n  @property({ type: Array }) menuContents: MenuProviderInterface[] = [];\n\n  @property({ type: Array }) menuShortcuts: MenuShortcutInterface[] = [];\n\n  @property({ type: Boolean, reflect: true, attribute: true })\n  viewportInFullscreen: boolean | null = null;\n\n  @property({ type: Boolean }) menuOpened = false;\n\n  @property({ type: String }) openMenu?: MenuId;\n\n  @property({ attribute: false }) modal?: ModalManager;\n\n  @property({ attribute: false }) sharedObserver?: SharedResizeObserver;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) loaded:\n    | true\n    | null = null;\n\n  @state() openMenuState: 'overlay' | 'shift' = 'shift';\n\n  @query('#frame') private frame!: HTMLDivElement;\n\n  @query('slot[name=\"header\"]') private headerSlot!: HTMLSlotElement;\n\n  @query('slot[name=\"main\"]') private mainSlot!: HTMLSlotElement;\n\n  disconnectedCallback() {\n    this.removeResizeObserver();\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('sharedObserver')) {\n      const oldObserver = changed.get('sharedObserver') as SharedResizeObserver;\n      oldObserver?.removeObserver(this.resizeObserverConfig);\n      this.setResizeObserver();\n    }\n  }\n\n  /** Shared observer */\n  handleResize(entry: ResizeObserverEntry): void {\n    const { width } = entry.contentRect;\n    if (width <= 600) {\n      this.openMenuState = 'overlay';\n      return;\n    }\n    this.openMenuState = 'shift';\n  }\n\n  private setResizeObserver(): void {\n    this.sharedObserver?.addObserver(this.resizeObserverConfig);\n    this.sharedObserver?.addObserver({\n      target: this.headerSlot,\n      handler: {\n        handleResize: ({ contentRect }) => {\n          if (contentRect.height) {\n            this.requestUpdate();\n          }\n        },\n      },\n    });\n  }\n\n  private removeResizeObserver(): void {\n    this.sharedObserver?.removeObserver(this.resizeObserverConfig);\n  }\n\n  get resizeObserverConfig(): {\n    handler: SharedResizeObserverResizeHandlerInterface;\n    target: Element;\n  } {\n    return {\n      handler: this,\n      target: this.frame,\n    };\n  }\n  /** End shared observer */\n\n  get loaderTitle() {\n    return this.viewportInFullscreen ? 'Internet Archive' : '';\n  }\n\n  get loadingArea() {\n    return html`\n      <div class=\"loading-area\">\n        <div class=\"loading-view\">\n          <ia-itemnav-loader\n            .loaderMessage=${this.loaderTitle}\n          ></ia-itemnav-loader>\n        </div>\n      </div>\n    `;\n  }\n\n  slotChange(e: Event, type: 'header' | 'main'): void {\n    const slottedContent = (\n      e.target as HTMLSlotElement\n    ).assignedNodes()?.[0] as HTMLElement;\n\n    this.dispatchEvent(\n      new CustomEvent('slotChange', {\n        detail: { slot: slottedContent, type },\n      }),\n    );\n    this.requestUpdate();\n  }\n\n  render(): TemplateResult {\n    const displayReaderClass = this.loaded ? '' : 'hidden';\n    const headerHeight =\n      (this.headerSlot?.assignedNodes()[0] as HTMLElement)?.offsetHeight || 0;\n    return html`\n      <div id=\"frame\" class=${this.menuClass}>\n        <slot\n          name=\"header\"\n          style=${`height: ${headerHeight}px`}\n          @slotchange=${(e: Event) => this.slotChange(e, 'header')}\n        ></slot>\n        <div class=\"menu-and-reader\">\n          ${this.shouldRenderMenu ? this.renderSideMenu : nothing}\n          <div id=\"reader\" class=${displayReaderClass}>\n            ${this.renderViewport}\n          </div>\n          ${!this.loaded ? this.loadingArea : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  get noTheaterView() {\n    return html`<ia-no-theater-available\n      .identifier=${this.item?.metadata?.identifier}\n      @loadingStateUpdated=${this.loadingStateUpdated}\n    ></ia-no-theater-available>`;\n  }\n\n  get renderViewport(): TemplateResult | typeof nothing {\n    if (!this.viewAvailable) {\n      return this.noTheaterView;\n    }\n\n    const slotVisibility = !this.loaded ? 'opacity: 0;' : 'opacity: 1;';\n    return html`\n      <div slot=\"main\" style=${slotVisibility}>\n        <slot\n          name=\"main\"\n          @slotchange=${(e: Event) => this.slotChange(e, 'main')}\n        ></slot>\n      </div>\n    `;\n  }\n\n  loadingStateUpdated(e: loadingStateUpdatedEvent): void {\n    const { loaded } = e.detail;\n    this.loaded = loaded || null;\n  }\n\n  /** Fullscreen Management */\n  manageViewportFullscreen(e: ManageFullscreenEvent): void {\n    const fullscreenStatus = !!e.detail.isFullScreen;\n    this.viewportInFullscreen = !fullscreenStatus ? null : fullscreenStatus;\n\n    const event = new CustomEvent('fullscreenToggled', {\n      detail: e.detail,\n    }) as ManageFullscreenEvent;\n\n    this.dispatchEvent(event);\n  }\n  /** End Fullscreen Management */\n\n  /** Side menu */\n  get shouldRenderMenu(): boolean {\n    return !!this.menuContents?.length;\n  }\n\n  toggleMenu(): void {\n    this.menuOpened = !this.menuOpened;\n  }\n\n  closeMenu(): void {\n    this.menuOpened = false;\n  }\n\n  setOpenMenu(e: ToggleSidePanelOpenEvent): void {\n    const { id } = e.detail;\n    this.openMenu = id !== this.openMenu ? id : undefined;\n  }\n\n  setMenuContents(e: SetSideMenuContentsEvent): void {\n    const updatedContents = [...e.detail];\n    this.menuContents = updatedContents;\n  }\n\n  setMenuShortcuts(e: SetSideMenuShortcutsEvent) {\n    this.menuShortcuts = [...e.detail];\n  }\n\n  /** Toggles Side Menu & Sets viewable subpanel  */\n  manageSideMenuEvents(e: ToggleSideMenuOpenEvent): void {\n    const { menuId, action } = e.detail;\n    if (!menuId) {\n      return;\n    }\n\n    if (action === 'open') {\n      this.openShortcut(menuId);\n    } else if (action === 'toggle') {\n      this.openMenu = menuId;\n      this.toggleMenu();\n    }\n  }\n\n  get menuToggleButton() {\n    return html`\n      <button\n        class=\"toggle-menu\"\n        @click=${this.toggleMenu}\n        title=\"Toggle theater side panels\"\n      >\n        <div>\n          <ia-icon-ellipses\n            style=\"width: var(--iconWidth); height: var(--iconHeight);\"\n          ></ia-icon-ellipses>\n        </div>\n      </button>\n    `;\n  }\n\n  get selectedMenuId(): MenuId | '' {\n    return this.openMenu || '';\n  }\n\n  get renderSideMenu(): TemplateResult {\n    const drawerState = this.menuOpened ? '' : 'hidden';\n    return html`\n      <nav>\n        <div class=\"minimized\">${this.shortcuts} ${this.menuToggleButton}</div>\n        <div id=\"menu\" class=${drawerState}>\n          <ia-menu-slider\n            .menus=${this.menuContents}\n            .selectedMenu=${this.selectedMenuId}\n            @menuTypeSelected=${this.setOpenMenu}\n            @menuSliderClosed=${this.closeMenu}\n            manuallyHandleClose\n            open\n          ></ia-menu-slider>\n        </div>\n      </nav>\n    `;\n  }\n  /** End Side menu */\n\n  /** Menu Shortcuts */\n  openShortcut(selectedMenuId: MenuId = ''): void {\n    this.openMenu = selectedMenuId;\n    this.menuOpened = true;\n  }\n\n  get shortcuts(): TemplateResult {\n    const shortcuts = this.menuShortcuts.map(({ icon, id }) => {\n      if (id === 'fullscreen') {\n        return html`${icon}`;\n      }\n\n      return html`\n        <button class=\"shortcut ${id}\" @click=\"${() => this.openShortcut(id)}\">\n          ${icon}\n        </button>\n      `;\n    });\n    return html`<div class=\"shortcuts\">${shortcuts}</div>`;\n  }\n  /** End Menu Shortcuts */\n\n  /** Misc Render */\n  get menuClass(): string {\n    const hasMenuOrShortcuts =\n      this.menuContents?.length || this.menuShortcuts?.length;\n    const drawerState = this.menuOpened && hasMenuOrShortcuts ? 'open' : '';\n    const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';\n    return `${drawerState} ${fullscreenState} ${this.openMenuState}`;\n  }\n\n  static get styles(): CSSResult {\n    const subnavWidth = css`var(--menuWidth, 320px)`;\n    const transitionTiming = css`var(--animationTiming, 200ms)`;\n    const transitionEffect = css`transform ${transitionTiming} ease-out`;\n    const menuMargin = css`var(--theaterMenuMargin, 42px)`;\n    const theaterBg = css`var(--theaterBgColor, #000)`;\n\n    return css`\n      :host,\n      #frame,\n      .menu-and-reader {\n        position: relative;\n        overflow: hidden;\n        display: block;\n      }\n\n      :host,\n      #frame,\n      .loading-area,\n      .loading-view {\n        min-height: inherit;\n        height: inherit;\n      }\n\n      slot {\n        display: block;\n        width: 100%;\n      }\n\n      slot * {\n        display: block;\n        height: inherit;\n      }\n\n      #frame {\n        background-color: ${theaterBg};\n        color-scheme: dark;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #frame.fullscreen {\n        position: fixed;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 9;\n      }\n\n      .loading-view {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .loading-area {\n        width: 100%;\n      }\n\n      ia-itemnav-loader {\n        display: block;\n        width: 100%;\n      }\n\n      .hidden {\n        display: none !important;\n      }\n\n      button {\n        cursor: pointer;\n        padding: 0;\n        border: 0;\n      }\n\n      button:focus,\n      button:active {\n        outline: none;\n      }\n\n      .menu-and-reader {\n        position: relative;\n        display: flex;\n        flex: 1;\n      }\n\n      nav button {\n        background: none;\n      }\n\n      nav .minimized {\n        background: rgba(0, 0, 0, 0.7);\n        padding-top: 6px;\n        position: absolute;\n        width: ${menuMargin};\n        z-index: 2;\n        left: 0;\n        border-bottom-right-radius: 5%;\n      }\n\n      nav .minimized button {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin-bottom: 0.2rem;\n        margin: auto;\n        display: inline-flex;\n        vertical-align: middle;\n        -webkit-box-align: center;\n        align-items: center;\n        -webkit-box-pack: center;\n        justify-content: center;\n        width: ${menuMargin};\n        height: ${menuMargin};\n      }\n\n      nav .minimized button.toggle-menu > * {\n        border: 2px solid var(--iconStrokeColor);\n        border-radius: var(--iconWidth);\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n        margin: auto;\n      }\n\n      ia-icon-ellipses {\n        width: var(--iconWidth);\n        height: var(--iconHeight);\n      }\n\n      #menu {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        z-index: 3;\n        overflow: hidden;\n        transform: translateX(-${subnavWidth});\n        width: ${subnavWidth};\n        transform: translateX(calc(${subnavWidth} * -1));\n        transition: ${transitionEffect};\n      }\n\n      #reader {\n        position: relative;\n        z-index: 1;\n        transform: translateX(0);\n        width: 100%;\n        display: flex;\n      }\n\n      #reader > * {\n        width: 100%;\n        display: flex;\n        flex: 1;\n      }\n\n      .open.overlay #reader {\n        transition: none;\n      }\n\n      .open #menu {\n        width: ${subnavWidth};\n        transform: translateX(0);\n        transition: ${transitionEffect};\n      }\n\n      .open.shift #reader {\n        width: calc(100% - ${subnavWidth});\n        margin-left: ${subnavWidth};\n        transition: ${transitionEffect};\n      }\n    `;\n  }\n}\n"]}

package/dist/test/ia-item-navigator.test.d.ts

@@ -1 +0,0 @@
-import '../src/item-navigator';