@internetarchive/ia-item-navigator 0.0.0-a8 → 0.0.2-a1

package/src/interfaces/nav-controller-interface.ts

@@ -1,18 +0,0 @@
-import { LitElement } from 'lit-element';
-import { MetadataResponse } from '@internetarchive/search-service';
-import { IntMenuShortcut } from './menu-interfaces';
-
-export interface IntNavController extends LitElement {
-  baseHost: string;
-  itemMD: MetadataResponse;
-  menuProviders: object;
-  menuShortcuts: IntMenuShortcut[];
-  sideMenuOpen: boolean;
-
-  emitLoadingStatusUpdate: (loaded: boolean) => void;
-
-  addMenuShortcut: (menuId: string) => void;
-  removeMenuShortcut: (menuId: string) => void;
-  sortMenuShortcuts: () => void;
-  emitMenuShortcutsUpdated: () => void;
-}

package/src/item-inspector/files-by-type/files-by-type-provider.ts

@@ -1,43 +0,0 @@
-import { html, TemplateResult } from 'lit-element';
-
-import './ia-files-by-type';
-import '@internetarchive/icon-share/icon-share';
-import {
-  IntMenuProvider,
-  IntProviderArgs,
-} from '../../interfaces/menu-interfaces';
-
-export class FilesByTypeProvider implements IntMenuProvider {
-  item: any = null;
-
-  baseHost: string = 'https://archive.org';
-
-  icon: TemplateResult = html`<p
-    style="color: #fff; font-size: var(--iconHeight);"
-  >
-    F
-  </p>`;
-
-  id: string = 'filesByType';
-
-  label: string = 'Files by type';
-
-  component: TemplateResult | null = null;
-
-  subPrefix: string = '';
-
-  constructor(shareArgs: IntProviderArgs) {
-    const { item, baseHost, subPrefix = '' } = shareArgs;
-    const { title = '' } = item.metadata;
-
-    this.item = item;
-    this.baseHost = baseHost;
-    this.subPrefix = subPrefix;
-
-    this.component = html`<ia-files-by-type
-      .item=${this.item}
-      .description="${title}"
-      .baseHost="${this.baseHost}"
-    ></ia-files-by-type>`;
-  }
-}

package/src/item-inspector/files-by-type/ia-files-by-type.ts

@@ -1,100 +0,0 @@
-import { MetadataResponse, File } from '@internetarchive/search-service';
-import { html, customElement, LitElement, property } from 'lit-element';
-
-interface CollapsedFileInt extends File {
-  [menuId: string]: any;
-  derivatives: [];
-}
-
-@customElement('ia-files-by-type')
-export default class IaFilesByType extends LitElement {
-  @property({ type: Object }) item: MetadataResponse = {} as MetadataResponse;
-
-  @property({ type: Array }) archivalArtifacts: File[] = [];
-
-  @property({ type: Array }) collapsedFiles: CollapsedFileInt[] = [];
-
-  firstUpdated() {
-    this.collapseFiles();
-  }
-
-  render() {
-    return html`
-      <div>
-        <p>there are ${this.collapsedFiles.length} original files</p>
-
-        <p>there are ${this.archivalArtifacts.length} archival artifacts</p>
-
-        <p></p>
-      </div>
-    `;
-  }
-
-  sortByViewer() {
-    //   const images = [];
-    //   const books = [];
-    //   const radio = [];
-    //   const audio = [];
-    //   const video = [];
-    //   const albums = [];
-    //   const software = [];
-    //  this.collapsedFiles.forEach((fi) => {
-    //   // if image
-    //   // sort by various viewers
-    //  })
-
-    return true;
-  }
-
-  collapseFiles() {
-    const { files = [] } = this?.item as MetadataResponse;
-
-    const archivalArtifacts: File[] = [];
-    const origDir: any = {};
-
-    files.forEach(fi => {
-      const { format, source, name, original = '' } = fi as File;
-      if (
-        format.toLowerCase() === 'metadata' ||
-        format.toLowerCase() === 'item tile'
-      ) {
-        archivalArtifacts.push(fi);
-        return;
-      }
-
-      let origEntry: any = {};
-      if (source === 'original') {
-        origEntry = origDir[name];
-        if (!origEntry) {
-          // add new
-          origDir[name] = { ...fi, derivatives: [] } as CollapsedFileInt;
-          origEntry = origDir[name];
-        } else {
-          // update
-          const merged = { ...origEntry, ...fi };
-          origDir[name] = merged;
-        }
-        return;
-      }
-
-      if (source === 'derivative') {
-        const keyToFile = original || '';
-        origEntry = origDir[keyToFile];
-        if (!origEntry && original) {
-          // add new
-          const fileFrame = { derivatives: [] } as CollapsedFileInt;
-          origEntry = fileFrame;
-          origEntry?.derivatives.push(fi);
-          origDir[keyToFile] = origEntry;
-          origEntry = origDir[keyToFile];
-        }
-        origEntry?.derivatives.push(fi);
-      }
-    });
-
-    this.archivalArtifacts = archivalArtifacts;
-    this.collapsedFiles = Object.keys(origDir).map(
-      (fileName: string) => origDir[fileName]
-    );
-  }
-}

package/src/item-inspector/item-inspector.ts

@@ -1,295 +0,0 @@
-/* eslint-disable no-console */
-import {
-  css,
-  html,
-  LitElement,
-  customElement,
-  property,
-  state,
-} from 'lit-element';
-import { MetadataResponse } from '@internetarchive/search-service';
-
-import {
-  ModalManagerInterface,
-  ModalConfig,
-} from '@internetarchive/modal-manager';
-import { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
-import { IntNavController } from '../interfaces/nav-controller-interface';
-import {
-  IntMenuProvider,
-  IntMenuShortcut,
-} from '../interfaces/menu-interfaces';
-import { IntManageFullscreenEvent } from '../interfaces/event-interfaces';
-
-import { ShareProvider } from './share-provider';
-import { FilesByTypeProvider } from './files-by-type/files-by-type-provider';
-import { VisualModsProvider } from './visual-mod-provider';
-
-// eslint-disable-next-line no-shadow
-enum ItemInspectorEvents {
-  menuUpdated = 'menuUpdated',
-  updateSideMenu = 'updateSideMenu',
-  PostInit = 'PostInit',
-  ViewportInFullScreen = 'ViewportInFullScreen',
-}
-
-interface menuProvidersInt {
-  [menuId: string]: IntMenuProvider;
-}
-
-@customElement('ia-item-inspector')
-export class IaItemInspector extends LitElement implements IntNavController {
-  @property({ type: Object }) itemMD: MetadataResponse = {
-    metadata: {},
-  } as MetadataResponse;
-
-  @property({ type: String }) baseHost = 'https://archive.org';
-
-  @property({ type: Object }) menuProviders: menuProvidersInt = {};
-
-  @property({ type: Array }) menuShortcuts: IntMenuShortcut[] = [];
-
-  @property({ type: Boolean }) sideMenuOpen = false;
-
-  @property({ type: Boolean }) fullscreenState = false;
-
-  @property({ attribute: false }) modal!: ModalManagerInterface;
-
-  @property({ attribute: false }) sharedRO!: SharedResizeObserverInterface;
-
-  @state() fileCount: number = 0;
-
-  @state() loaded: boolean = false;
-
-  @state() private shortcutOrder = ['visualMods'];
-
-  firstUpdated() {
-    this.loaded = true;
-    console.log('modal', this.modal);
-  }
-
-  updated(changed: any) {
-    if (changed.has('loaded')) {
-      setTimeout(() => this.emitLoadingStatusUpdate(this.loaded), 1000);
-    }
-
-    if (changed.has('itemMD') && this.itemMD) {
-      this.parseItemInfo();
-      this.setMenu();
-    }
-
-    if (changed.has('menuProviders') || changed.has('menuShortcuts')) {
-      this.updateMenuContents();
-    }
-  }
-
-  modalClosedCallback() {
-    console.log('item-inspector, modal closed');
-  }
-
-  openModal() {
-    const config = new ModalConfig();
-    const customModalContent = html`
-      Can contain any markup, including web components. Event listeners also
-      work. Try clicking on the picture.
-      <div style="text-align: center">
-        <a href="https://fillmurray.com" style="display: block">Fill Murray</a>
-        <img src="100x100.jpg" alt="foo" />
-      </div>
-    `;
-
-    this.modal.showModal({
-      config,
-      customModalContent,
-      userClosedModalCallback: this.modalClosedCallback,
-    });
-  }
-
-  render() {
-    const { identifier = '' } = this.itemMD?.metadata;
-    return html`
-      <section>
-        <div>
-          <h2>${identifier}</h2>
-        </div>
-        <img src=${this.imageUrl} alt=${`${identifier} thumbnail`} />
-        <button @click=${() => this.openModal()}>open modal</button>
-        <p style="font-size: 20px;">
-          Bacon ipsum dolor amet flank chicken leberkas sausage, meatball pork
-          belly jowl. Chislic bacon salami frankfurter shankle drumstick
-          andouille ball tip alcatra. Fatback beef ribs chicken, jerky ground
-          round hamburger pork chop biltong. Shoulder short loin rump jerky
-          kielbasa pork porchetta fatback ribeye pork belly sirloin chislic
-          turducken corned beef tri-tip. Chuck pancetta meatball tail, spare
-          ribs ham hock capicola pig. Ham hock hamburger chicken tri-tip venison
-          swine burgdoggen boudin meatloaf pastrami chuck. Tri-tip spare ribs
-          drumstick, tail rump hamburger burgdoggen swine t-bone tongue
-          andouille chislic alcatra. Pork loin jowl frankfurter, doner meatball
-          short loin ham hock filet mignon hamburger rump turkey bresaola
-          shoulder sirloin flank. Ribeye sausage pig t-bone bacon frankfurter
-          cupim capicola fatback pastrami ball tip pork belly. Picanha pancetta
-          andouille flank shankle venison tri-tip tail, kevin turkey turducken
-          chicken. Bacon picanha swine frankfurter, prosciutto chislic doner
-          alcatra pork loin corned beef jowl biltong meatball chuck. Bacon
-          burgdoggen pig fatback cupim t-bone. Cow pork loin bresaola brisket
-          shoulder filet mignon chicken. Sirloin bresaola porchetta beef
-          capicola meatloaf brisket shankle jerky turkey pork tri-tip swine
-          kevin salami. Meatball t-bone doner venison. Pig tri-tip chuck, shank
-          chicken pork chop landjaeger spare ribs jerky swine ham hock buffalo
-          sirloin. Leberkas pancetta tenderloin, meatloaf buffalo rump pastrami
-          chuck. Jerky cupim porchetta, tenderloin chuck andouille venison pork
-          salami. Chuck strip steak cupim, turducken ham hock kielbasa shoulder
-          porchetta chislic short loin tri-tip biltong cow corned beef.
-        </p>
-      </section>
-    `;
-  }
-
-  addMenuShortcut(menuId: keyof menuProvidersInt) {
-    if (this.menuShortcuts.find(m => m.id === menuId)) {
-      return;
-    }
-
-    const shortcut = this.menuProviders[menuId];
-    this.menuShortcuts.push(shortcut);
-    this.sortMenuShortcuts();
-    this.emitMenuShortcutsUpdated();
-  }
-
-  /**
-   * Removes a provider object from the menuShortcuts array and emits a
-   * menuShortcutsUpdated event.
-   */
-  removeMenuShortcut(menuId: string) {
-    this.menuShortcuts = this.menuShortcuts.filter(m => m.id !== menuId);
-    this.emitMenuShortcutsUpdated();
-  }
-
-  /**
-   * Sorts the menuShortcuts property by comparing each provider's id to
-   * the id in each iteration over the shortcutOrder array.
-   */
-  sortMenuShortcuts() {
-    this.menuShortcuts = this.shortcutOrder.reduce(
-      (shortcuts: IntMenuShortcut[], id) => {
-        const menu = this.menuShortcuts.find(m => m.id === id);
-
-        // eslint-disable-next-line no-param-reassign
-        if (menu) {
-          const newShortcuts = [...shortcuts, menu];
-          // eslint-disable-next-line no-param-reassign
-          shortcuts = newShortcuts;
-        }
-        return shortcuts;
-      },
-      []
-    );
-  }
-
-  emitMenuShortcutsUpdated() {
-    const event = new CustomEvent('menuShortcutsUpdated', {
-      detail: this.menuShortcuts,
-    });
-    this.dispatchEvent(event);
-  }
-
-  setMenu() {
-    const menuProviders = {
-      share: new ShareProvider({
-        item: this.itemMD,
-        baseHost: this.baseHost,
-        subPrefix: '',
-      }),
-      filesByType: new FilesByTypeProvider({
-        item: this.itemMD,
-        baseHost: this.baseHost,
-        subPrefix: '',
-      }),
-      visualMods: new VisualModsProvider({
-        updated: (modType: string) => {
-          if (modType === 'toggleFullscreen') {
-            this.updateFullscreenState();
-          }
-        },
-        item: this.itemMD,
-        baseHost: this.baseHost,
-        subPrefix: '',
-        // maybe DOM root for class configs?
-      }),
-    };
-
-    this.menuProviders = menuProviders;
-    this.addMenuShortcut('visualMods');
-  }
-
-  updateFullscreenState() {
-    const isFullScreen = !this.fullscreenState;
-    this.fullscreenState = isFullScreen;
-
-    const event = new CustomEvent('ViewportInFullScreen', {
-      detail: { isFullScreen },
-    } as IntManageFullscreenEvent);
-    this.dispatchEvent(event);
-  }
-
-  updateMenuContents() {
-    const { share, filesByType, visualMods } = this.menuProviders;
-    const availableMenus = [filesByType, share, visualMods].filter(
-      menu => !!menu
-    );
-
-    const event = new CustomEvent(ItemInspectorEvents.menuUpdated, {
-      detail: availableMenus,
-    });
-
-    this.dispatchEvent(event);
-  }
-
-  emitLoadingStatusUpdate(loaded: boolean) {
-    const event = new CustomEvent('loadingStateUpdated', {
-      detail: { loaded },
-    });
-    this.dispatchEvent(event);
-  }
-
-  parseItemInfo() {
-    this.fileCount = this.itemMD?.files?.length || 0;
-  }
-
-  get imageUrl() {
-    const { metadata = {} } = this.itemMD;
-    const url = `${this.baseHost}/download/${metadata?.identifier}/__ia_thumb.jpg`;
-    return url;
-  }
-
-  static get styles() {
-    const main = css`
-      :host {
-        display: block;
-        width: 100%;
-        margin: 0 auto;
-        position: relative;
-        overflow: auto;
-        background-color: black;
-        color: var(--primaryTextColor, #fff);
-      }
-
-      :host,
-      section {
-        min-height: inherit;
-        height: inherit;
-      }
-
-      section {
-        margin: auto;
-        width: 100%;
-        text-align: center;
-      }
-
-      img {
-        border: 1px solid var(--primaryTextColor, #fff);
-      }
-    `;
-    return [main];
-  }
-}

package/src/item-inspector/share-provider.ts

@@ -1,51 +0,0 @@
-import { html, TemplateResult } from 'lit-element';
-
-import '@internetarchive/ia-sharing-options';
-import '@internetarchive/icon-share/icon-share';
-import {
-  IntMenuProvider,
-  IntProviderArgs,
-} from '../interfaces/menu-interfaces';
-
-export class ShareProvider implements IntMenuProvider {
-  item: any = null;
-
-  baseHost: string = 'https://archive.org';
-
-  icon: TemplateResult = html`<ia-icon-share
-    style="width: var(--iconWidth); height: var(--iconHeight);"
-  ></ia-icon-share>`;
-
-  id: string = 'share';
-
-  label: string = 'Share this item';
-
-  component: TemplateResult | null = null;
-
-  subPrefix: string = '';
-
-  encodedSubPrefix: string = '';
-
-  constructor(shareArgs: IntProviderArgs) {
-    const { item, baseHost, subPrefix = '' } = shareArgs;
-    const { identifier = '', creator = '', title = '' } = item.metadata || {};
-    const encodedSubPrefix = encodeURIComponent(subPrefix);
-    const urlIdentifier =
-      subPrefix && subPrefix !== identifier
-        ? `${identifier}/${encodedSubPrefix}`
-        : identifier;
-
-    this.item = item;
-    this.baseHost = baseHost;
-    this.subPrefix = subPrefix;
-    this.encodedSubPrefix = encodedSubPrefix;
-
-    this.component = html`<ia-sharing-options
-      identifier=${urlIdentifier}
-      type="item"
-      creator="${creator}"
-      description="${title}"
-      baseHost="${this.baseHost}"
-    ></ia-sharing-options>`;
-  }
-}

package/src/item-inspector/visual-mod-provider.ts

@@ -1,65 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable max-classes-per-file */
-
-import { html, TemplateResult, customElement, LitElement } from 'lit-element';
-
-import '@internetarchive/ia-sharing-options';
-import '@internetarchive/icon-visual-adjustment/icon-visual-adjustment';
-import {
-  IntMenuProvider,
-  IntProviderArgs,
-} from '../interfaces/menu-interfaces';
-
-@customElement('ia-visual-mods')
-class VisualMods extends LitElement {
-  toggleFullscreen() {
-    this.dispatchEvent(new Event('fullscreenToggle'));
-  }
-
-  render() {
-    return html`<section>
-      <button @click=${this.toggleFullscreen}>Toggle Fullscreen</button>
-    </section>`;
-  }
-}
-
-export class VisualModsProvider implements IntMenuProvider {
-  item: any = null;
-
-  baseHost: string = 'https://archive.org';
-
-  icon: TemplateResult = html`<ia-icon-visual-adjustment
-    style="width: var(--iconWidth); height: var(--iconHeight);"
-  ></ia-icon-visual-adjustment>`;
-
-  id: string = 'visualMods';
-
-  label: string = 'Visual Modifications';
-
-  component: TemplateResult | null = null;
-
-  subPrefix: string = '';
-
-  encodedSubPrefix: string = '';
-
-  updated: any = () => {};
-
-  constructor(providerArgs: IntProviderArgs) {
-    const { item, baseHost, subPrefix = '', updated } = providerArgs;
-
-    this.updated = updated;
-
-    this.component = html`<ia-visual-mods
-      @fullscreenToggle=${() => this?.updated('toggleFullscreen')}
-      @openModa=${this.openModal}
-    ></ia-visual-mods>`;
-  }
-
-  openModal() {}
-
-  closeModal() {}
-
-  toggleFullscreen() {
-    this.updated('toggleFullscreen');
-  }
-}