@internetarchive/bookreader 5.0.0-10-alpha-1 → 5.0.0-100

package/src/BookReaderComponent/BookReaderComponent.js

@@ -1,112 +0,0 @@
-/**
- * BookReaderTemplate to load BookNavigator components
- */
-
-import { LitElement, html, css } from 'lit-element';
-
-import '../ItemNavigator/ItemNavigator.js';
-import '../BookNavigator/BookNavigator.js';
-
-export class BookReader extends LitElement {
-  static get properties() {
-    return {
-      base64Json: { type: String },
-      baseHost: { type: String },
-    };
-  }
-
-  constructor() {
-    super();
-    this.base64Json = '';
-    this.baseHost = 'https://archive.org';
-  }
-
-  firstUpdated() {
-    this.fetchData();
-  }
-
-  /**
-   * Fetch metadata response from public metadata API
-   * convert response to base64 data
-   * set base64 data to props
-   */
-  async fetchData() {
-    const ocaid = new URLSearchParams(location.search).get('ocaid');
-    const response = await fetch(`${this.baseHost}/metadata/${ocaid}`);
-    const bookMetadata = await response.json();
-    const jsonBtoa = btoa(JSON.stringify(bookMetadata));
-    this.setBaseJSON(jsonBtoa);
-  }
-
-  /**
-   * Set base64 data to prop
-   * @param {string} value - base64 string format
-   */
-  setBaseJSON(value) {
-    this.base64Json = value;
-  }
-
-  render() {
-    return html`
-      <div class="ia-bookreader">
-        <item-navigator
-          itemType="bookreader"
-          basehost=${this.baseHost}
-          item=${this.base64Json}>
-          <div slot="bookreader">
-            <slot name="bookreader"></slot>
-          </div>
-        </item-navigator>
-      </div>
-    `;
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        --primaryBGColor: var(--black, #000);
-        --secondaryBGColor: #222;
-        --tertiaryBGColor: #333;
-        --primaryTextColor: var(--white, #fff);
-        --primaryCTAFill: #194880;
-        --primaryCTABorder: #c5d1df;
-        --secondaryCTAFill: #333;
-        --secondaryCTABorder: #999;
-        --primaryErrorCTAFill: #e51c26;
-        --primaryErrorCTABorder: #f8c6c8;
-      }
-
-      .ia-bookreader {
-        background-color: var(--primaryBGColor);
-        position: relative;
-        height: auto;
-      }
-
-      item-navigator {
-        display: block;
-        width: 100%;
-        color: var(--primaryTextColor);
-        --menuButtonLabelDisplay: block;
-        --menuWidth: 320px;
-        --menuSliderBg: var(--secondaryBGColor);
-        --activeButtonBg: var(--tertiaryBGColor);
-        --subpanelRightBorderColor: var(--secondaryCTABorder);
-        --animationTiming: 100ms;
-        --iconFillColor: var(--primaryTextColor);
-        --iconStrokeColor: var(--primaryTextColor);
-        --menuSliderHeaderIconHeight: 2rem;
-        --menuSliderHeaderIconWidth: 2rem;
-        --iconWidth: 2.4rem;
-        --iconHeight: 2.4rem;
-        --shareLinkColor: var(--primaryTextColor);
-        --shareIconBorder: var(--primaryTextColor);
-        --shareIconBg: var(--secondaryBGColor);
-        --activityIndicatorLoadingDotColor: var(--primaryTextColor);
-        --activityIndicatorLoadingRingColor: var(--primaryTextColor);
-      }
-    `;
-  }
-}
-
-window.customElements.define("ia-bookreader", BookReader);

package/src/ItemNavigator/ItemNavigator.js

@@ -1,376 +0,0 @@
-import { css, html, LitElement } from "lit-element";
-import { nothing } from "lit-html";
-import { IAMenuSlider } from "@internetarchive/ia-menu-slider";
-import IAIcon from "@internetarchive/ia-icons";
-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 {(open, toggle, close)} detail.action
-   *     @param {string} detail.menuId - menu id to be shown
-   */
-  manageSideMenuEvents({ detail }) {
-    const { action = '', menuId = '' } = detail;
-    if (!menuId) { return; }
-    switch (action) {
-    case 'open':
-      this.openShortcut(menuId);
-      break;
-    case 'toggle':
-      this.openMenu = menuId;
-      this.toggleMenu();
-      break;
-    default:
-      this.closeMenu();
-    }
-  }
-
-  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() {
-    return html`
-      <button class="toggle-menu" @click=${this.toggleMenu.bind(this)}>
-        <div>
-          <ia-icon icon="ellipses" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>
-        </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);

package/src/ItemNavigator/providers/sharing.js

@@ -1,29 +0,0 @@
-import { html } from 'lit-element';
-
-/* register subpanel */
-import { IASharingOptions } from '@internetarchive/ia-sharing-options';
-customElements.define('ia-sharing-options', IASharingOptions);
-
-export default class {
-  constructor(metadata = {}, baseHost, baseItemType) {
-    this.itemType = baseItemType;
-    const label = `Share this ${this.reconcileItemType}`;
-    this.icon = html`<ia-icon icon="share" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>`;
-    this.label = label;
-    this.id = 'share';
-    this.component = html`<ia-sharing-options
-      identifier="${metadata.identifier}"
-      type="book"
-      creator="${metadata.creator}"
-      description="${metadata.title}"
-      baseHost="${baseHost}"
-    ></ia-sharing-options>`;
-  }
-
-  get reconcileItemType() {
-    if (this.itemType === 'bookreader') {
-      return 'book';
-    }
-    return 'item';
-  }
-}

package/src/css/_MobileNav.scss

@@ -1,194 +0,0 @@
-@import '../../node_modules/jquery.mmenu/dist/css/jquery.mmenu';
-@import '../../node_modules/jquery.mmenu/dist/addons/navbars/jquery.mmenu.navbars';
-
-.mm-menu .mm-navbar a, .mm-menu .mm-navbar>* {
-  color: $controlsText;
-  font-size: $brFontSizeBase;
-}
-.mm-menu {
-  color: $controlsText;
-  background: $mobileMenuBG;
-  > .mm-navbar {
-    background: $controlsBG;
-  }
-}
-.mm-panel {
-  font-size: $brFontSizeSmaller;
-}
-#mm-blocker {
-  z-index: $brZindexFullscreen + 2;
-}
-.mm-panel h1 {
-  margin-top: 0;
-  color: $brColorThemeBlueDarker;
-  font-size: $brFontSizeBase;
-}
-
-.mm-menu {
-  .mm-listview {
-    > li {
-      .mm-next,
-      .mm-next:before,
-      &:after,
-      .mm-arrow:after,
-      .mm-next:after {
-        border-color: $controlsText;
-      }
-    }
-  }
-}
-
-.mm-menu .mm-btn:after,
-.mm-menu .mm-btn:before {
-  border-color: $iconStroke;
-}
-
-/* Needed to override mmenu style */
-html.mm-background .BookReader {
-  background-color: $brColorMainBg;
-}
-
-.BRmobileMenu {
-  button { -webkit-appearance: initial; }
-  .BRaction { display: block; width: 100%; }
-  div.share-social button { padding: 0 5px; height: 40px; text-align: left; }
-  a {
-    color: inherit;
-  }
-}
-
-.BRtoolbarMobileTitle {
-  overflow:hidden;
-  width: 100%;
-  white-space: nowrap;
-  text-align: center;
-  font-size: $brFontSizeBase;
-  line-height: 40px;
-  display: block;
-  margin-right: 10px;
-}
-.BRmobileHamburgerWrapper {
-  display: block;
-  padding: 0 30px 0 50px;
-}
-
-.BRmobileHamburger {
-  background: transparent url('icons/hamburger.svg') 50% 50% no-repeat;
-  display: block;
-  width: 40px;
-  height: 40px;
-  position: absolute;
-  top: 0;
-  left: 10px;
-  border: none;
-  outline: none;
-}
-
-.DrawerIconWrapper {
-  display: block;
-  float: left;
-  width: 20px;
-  height:20px;
-  margin-right: 10px;
-  text-align: center;
-  position:relative;
-}
-.DrawerIcon {
-  height: 18px;
-  width: auto;
-  position: absolute;
-  left: 0;
-  top: 1px;
-}
-.DrawerSettingsTitle {
-  color: $controlsText;
-  font-size: $brFontSizeBase;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-.DrawerSettingsLayoutWrapper {
-  text-align: center;
-  padding: 0;
-  margin-bottom: 20px;
-}
-.DrawerLayoutButton {
-  border:none;
-  background:none;
-  color: $controlsText;
-  line-height: 18px;
-}
-.DrawerLayoutButton:active {
-  color: grey;
-}
-
-.BRmobileShare {
-  div.share-title { font-weight: bold; font-size: $brFontSizeLarger; line-height: 1.5; }
-  div.share-social { margin: 10px 0 20px 0; }
-  p { font-weight: bold; }
-  fieldset { padding: 0; border: 0; margin-bottom: 30px; }
-  fieldset label { display: block; }
-  fieldset input[type=text] { width: 95%; }
-  button.share-finished { display: none; }
-  div.share-embed { border: 1px solid #ccc; padding: 0 10px; }
-  .open-to-this-page { display: block; margin: 10px 0; }
-}
-
-.BRmobileHamburgerWrapper { display: none; }
-.BRmobileMenu { display: none; }
-.BRtoolbar.responsive {display: none;}
-
-/* Mobile Only */
-@media (max-width: $brBreakPointMobile) {
-  .BRbodyMobileNavEnabled,
-  .BRbodyMobileNavEnabledFullscreen.BRfullscreenActive {
-    .BRtoolbar.responsive {
-      display: block;
-      height: 40px;
-      box-sizing: border-box;
-      width: 100%;
-      color: $controlsText;
-      background: $controlsBG;
-
-      .BRtoolbarbuttons { display: none; }
-      .BRmobileHamburgerWrapper { display: block; }
-      .BRmobileMenu { display: block; }
-    }
-  }
-
-}
-
-.BRcheckbox-label-filters {
-  position: relative;
-  bottom: 2px;
-}
-
-/* Desktop Only */
-@media (min-width: ($brBreakPointMobile + 1)) {
-  .BRtoolbar.responsive { display: block; }
-}
-
-li.BRtable-contents-el {
-  line-height: 150%;
-  padding: 10px 10px 10px 20px;
-  overflow: hidden;
-  color: $controlsText;
-
-  &.chapter-clickable {
-    font-weight: normal;
-  }
-
-  &.current-chapter {
-    background-color: lightblue;
-  }
-  //resetting mmenu styling for span inside .table-contents-el
-  > span {
-    display: inline;
-    padding: 0;
-    white-space: normal;
-  }
-
-  .BRTOCElementPage {
-    font-size: 0.85em;
-    opacity: .8;
-  }
-}