@internetarchive/ia-item-navigator 0.0.0-a7 → 0.0.1

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,242 +0,0 @@
-/* eslint-disable no-console */
-import {
-  css,
-  html,
-  LitElement,
-  customElement,
-  property,
-  state,
-} from 'lit-element';
-import { MetadataResponse } from '@internetarchive/search-service';
-
-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;
-
-  @state() fileCount: number = 0;
-
-  @state() loaded: boolean = false;
-
-  @state() private shortcutOrder = ['visualMods'];
-
-  firstUpdated() {
-    this.loaded = true;
-  }
-
-  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();
-    }
-  }
-
-  render() {
-    const { identifier = '' } = this.itemMD?.metadata;
-    return html`
-      <section>
-        <div>
-          <h2>${identifier}</h2>
-        </div>
-        <img src=${this.imageUrl} alt=${`${identifier} thumbnail`} />
-        <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,60 +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')}
-    ></ia-visual-mods>`;
-  }
-
-  toggleFullscreen() {
-    this.updated('toggleFullscreen');
-  }
-}