@internetarchive/ia-item-navigator 0.0.0-a12 → 0.0.0-a13

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/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');
-  }
-}

package/src/item-navigator-js.js

@@ -1,372 +0,0 @@
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
-import { IAMenuSlider } from '@internetarchive/ia-menu-slider';
-import { ModalConfig } from '@internetarchive/modal-manager';
-
-export default class ItemNavigator extends LitElement {
-  static get properties() {
-    return {
-      baseHost: { type: String },
-      item: {
-        type: Object,
-        converter(value) {
-          return !value ? {} : JSON.parse(atob(value));
-        },
-      },
-      itemType: { type: String },
-      menuShortcuts: {
-        type: Array,
-        hasChanged(newVal, oldVal) {
-          if (newVal !== oldVal) {
-            return true;
-          }
-          return false;
-        },
-      },
-      menuOpened: { type: Boolean },
-      menuContents: { type: Array },
-      openMenu: { type: String },
-      signedIn: {
-        type: Boolean,
-        converter: (arg) => {
-          if (typeof (arg) === 'boolean') {
-            return arg;
-          }
-          return arg === 'true';
-        },
-      },
-      viewportInFullscreen: { type: Boolean },
-    };
-  }
-
-  constructor() {
-    /** TODO: Request BookModel.js
-    * Request BookNavigator.js
-    * Show loading spinner
-    * When JS assets loaded:
-    * - render book-navigator component
-    */
-    super();
-    this.baseHost = 'archive.org';
-    this.item = {};
-    this.itemType = '';
-    this.menuOpened = false;
-    this.signedIn = false;
-    this.menuShortcuts = [];
-    this.menuContents = [];
-    this.viewportInFullscreen = false;
-    this.openMenu = '';
-    this.renderModalManager();
-  }
-
-  showItemNavigatorModal({ detail }) {
-    this.modal.showModal({
-      config: this.modalConfig,
-      customModalContent: detail.customModalContent,
-    });
-  }
-
-  closeItemNavigatorModal() {
-    this.modal.closeModal();
-  }
-
-  /**
-   * Event handler - handles viewport slot going into fullscreen
-   * @param {Event} e - custom event object
-   */
-  manageViewportFullscreen({ detail }) {
-    const { isFullScreen } = detail;
-    this.viewportInFullscreen = isFullScreen;
-  }
-
-  /**
-   * Event handler - handles viewport slot going into fullscreen
-   * @param {Event} e - custom event object
-   *   @param {object} event.detail - custom event detail
-   *     @param {string} detail.action - open, toggle, close
-   *     @param {string} detail.menuId - menu id to be shown
-   */
-  manageSideMenuEvents({ detail }) {
-    const { action = '', menuId = '' } = detail;
-    if (menuId) {
-      if (action === 'open') {
-        this.openShortcut(menuId);
-      } else if  (action === 'toggle') {
-        this.openMenu = menuId;
-        this.toggleMenu();
-      }
-    }
-  }
-
-  toggleMenu() {
-    this.menuOpened = !this.menuOpened;
-  }
-
-  closeMenu() {
-    this.menuOpened = false;
-  }
-
-  /**
-   * Opens menu to selected menu
-   * @param {string} selectedMenuId
-   */
-  openShortcut(selectedMenuId = '') {
-    // open sidemenu to proper tab
-    this.openMenu = selectedMenuId;
-    this.menuOpened = true;
-  }
-
-  setOpenMenu({ detail }) {
-    const { id } = detail;
-    this.openMenu = id === this.openMenu ? '' : id;
-  }
-
-  setMenuContents({ detail }) {
-    this.menuContents = [...detail];
-  }
-
-  setMenuShortcuts({ detail }) {
-    this.menuShortcuts = [...detail];
-  }
-
-  /**
-   * computes classes for item-navigator <section> node
-   */
-  get menuClass() {
-    const drawerState = this.menuOpened ? 'open' : '';
-    const fullscreenState = this.viewportInFullscreen ? 'fullscreen' : '';
-    return `${drawerState} ${fullscreenState}`;
-  }
-
-  get menuToggleButton() {
-    // <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
-    return html`
-      <button class="toggle-menu" @click=${this.toggleMenu.bind(this)} title="Toggle theater side panels">
-        <div>
-          <ia-icon-ellipses style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-ellipses>
-        </div>
-      </button>
-    `;
-  }
-
-  get menuSlider() {
-    return html`
-      <div id="menu">
-        <ia-menu-slider
-          .menus=${this.menuContents}
-          .open=${true}
-          .selectedMenu=${this.openMenu}
-          @menuTypeSelected=${this.setOpenMenu}
-          @menuSliderClosed=${this.closeMenu}
-          ?manuallyHandleClose=${true}
-          ?animateMenuOpen=${false}
-        ></ia-menu-slider>
-      </div>
-    `;
-  }
-
-  /**
-   * Returns the shortcut buttons for minimized view
-   * @return html
-   */
-  get shortcuts() {
-    // todo: aria tags
-    const shortcuts = this.menuShortcuts.map(({
-      icon,
-      id,
-    }) => html`
-        <button class="shortcut ${id}" @click="${(e) => { this.openShortcut(id); }}">
-          ${icon}
-        </button>
-      `);
-
-    return html`<div class="shortcuts">${shortcuts}</div>`;
-  }
-
-  /**
-   * Returns the side menu given it's open/close state
-   * @return html
-   */
-  get renderSideMenu() {
-    // todo: aria tags
-    return html`
-      <nav>
-        <div class="minimized">
-          ${this.shortcuts}
-          ${this.menuToggleButton}
-        </div>
-        ${this.menuSlider}
-      </nav>
-    `;
-  }
-
-  /**
-   * Given a itemType, this chooses the proper viewport component
-   * @return html
-   */
-  get renderViewport() {
-    if (this.itemType === 'bookreader') {
-      return html`
-        <book-navigator
-          .baseHost=${this.baseHost}
-          .book=${this.item}
-          ?signedIn=${this.signedIn}
-          ?sideMenuOpen=${this.menuOpened}
-          @ViewportInFullScreen=${this.manageViewportFullscreen}
-          @updateSideMenu=${this.manageSideMenuEvents}
-          @menuUpdated=${this.setMenuContents}
-          @menuShortcutsUpdated=${this.setMenuShortcuts}
-          @showItemNavigatorModal=${this.showItemNavigatorModal}
-          @closeItemNavigatorModal=${this.closeItemNavigatorModal}
-        >
-          <div slot="bookreader">
-            <slot name="bookreader"></slot>
-          </div>
-        </book-navigator>
-      `;
-    }
-    return html`<div class="viewport"></div>`;
-  }
-
-  renderModalManager() {
-    this.modal = document.createElement('modal-manager');
-    this.modal.setAttribute('id', 'item-navigator-modal');
-    this.modalConfig = new ModalConfig();
-    this.modalConfig.title = 'Delete Bookmark';
-    this.modalConfig.headline = 'This bookmark contains a note. Deleting it will permanently delete the note. Are you sure?';
-    this.modalConfig.headerColor = '#194880';
-    document.body.appendChild(this.modal);
-  }
-
-  render() {
-    const renderMenu = this.menuContents.length || this.menuShortcuts.length;
-    return html`
-      <div id="frame" class=${this.menuClass}>
-        <slot name="item-nav-header"></slot>
-        <div class="menu-and-reader">
-          ${renderMenu ? this.renderSideMenu : nothing}
-          <div id="reader">
-            ${this.renderViewport}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  static get styles() {
-    const subnavWidth = css`var(--menuWidth, 320px)`;
-    const tabletPlusQuery = css`@media (min-width: 640px)`;
-    const transitionTiming = css`var(--animationTiming, 200ms)`;
-    const transitionEffect = css`transform ${transitionTiming} ease-out`;
-
-    return css`
-      #frame {
-        position: relative;
-        overflow: hidden;
-      }
-
-      #frame.fullscreen,
-      #frame.fullscreen #reader {
-        height: 100vh;
-      }
-
-      button {
-        cursor: pointer;
-        padding: 0;
-        border: 0;
-      }
-
-      button:focus,
-      button:active {
-        outline: none;
-      }
-
-      .menu-and-reader {
-        position: relative;
-      }
-
-      nav button {
-        background: none;
-      }
-
-      nav .minimized {
-        background: rgba(0, 0, 0, .7);
-        border-bottom-right-radius: 5%;
-        position: absolute;
-        padding-top: .6rem;
-        left: 0;
-        width: 4rem;
-        z-index: 2;
-      }
-
-      nav .minimized button {
-        width: var(--iconWidth);
-        height: var(--iconHeight);
-        margin: auto;
-        display: inline-flex;
-        vertical-align: middle;
-        -webkit-box-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        justify-content: center;
-        width: 4rem;
-        height: 4rem;
-      }
-
-      nav .minimized button.toggle-menu > * {
-        border: 2px solid var(--iconStrokeColor);
-        border-radius: var(--iconWidth);
-        width: var(--iconWidth);
-        height: var(--iconHeight);
-        margin: auto;
-      }
-
-      #menu {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 3;
-        overflow: hidden;
-        transform: translateX(-${subnavWidth});
-        width: ${subnavWidth};
-        transform: translateX(calc(${subnavWidth} * -1));
-        transition: ${transitionEffect};
-      }
-
-      #reader {
-        position: relative;
-        z-index: 1;
-        transition: ${transitionEffect};
-        transform: translateX(0);
-        width: 100%;
-      }
-
-      .open #menu {
-        width: ${subnavWidth};
-        transform: translateX(0);
-        transition: ${transitionEffect};
-      }
-
-      ${tabletPlusQuery} {
-        .open #reader {
-          transition: ${transitionEffect};
-          transform: translateX(${subnavWidth});
-          width: calc(100% - ${subnavWidth});
-        }
-      }
-
-      #loading-indicator {
-        display: none;
-      }
-
-      #loading-indicator.visible {
-        display: block;
-      }
-    `;
-  }
-}
-
-// customElements.define('ia-icon', IAIcon);
-customElements.define('ia-menu-slider', IAMenuSlider);
-customElements.define('item-navigator', ItemNavigator);