@internetarchive/bookreader 5.0.0-38 → 5.0.0-39

package/stat/BookNavigator/visual-adjustments/visual-adjustments.js

@@ -1,280 +0,0 @@
-import { css, html, LitElement } from "lit-element";
-import { repeat } from "lit-html/directives/repeat.js";
-import { nothing } from "lit-html";
-import checkmarkIcon from '../assets/icon_checkmark.js';
-import "@internetarchive/icon-magnify-minus/icon-magnify-minus";
-import "@internetarchive/icon-magnify-plus/icon-magnify-plus";
-
-const namespacedEvent = (eventName) => `visualAdjustment${eventName}`;
-
-const events = {
-  optionChange: namespacedEvent("OptionChanged"),
-  zoomIn: namespacedEvent("ZoomIn"),
-  zoomOut: namespacedEvent("ZoomOut"),
-};
-
-export class IABookVisualAdjustments extends LitElement {
-  static get properties() {
-    return {
-      activeCount: { type: Number },
-      options: { type: Array },
-      renderHeader: { type: Boolean },
-      showZoomControls: { type: Boolean },
-    };
-  }
-
-  constructor() {
-    super();
-
-    this.activeCount = 0;
-    this.options = [];
-    this.renderHeader = false;
-    this.showZoomControls = true;
-  }
-
-  firstUpdated() {
-    this.activeCount = this.activeOptions.length;
-    this.emitOptionChangedEvent();
-  }
-
-  /** Gets list of active options
-   * @return array
-   */
-  get activeOptions() {
-    return this.options.reduce(
-      (results, option) => (option.active ? [...results, option.id] : results),
-      []
-    );
-  }
-
-  /**
-   * Returns blob that will be emitted by event
-   */
-  prepareEventDetails(changedOptionId = "") {
-    return {
-      options: this.options,
-      activeCount: this.activeCount,
-      changedOptionId,
-    };
-  }
-
-  /**
-   * Fires custom event when options change
-   * Provides state details: { options, activeCount, changedOptionId }
-   *
-   * @param { string } changedOptionId
-   */
-  emitOptionChangedEvent(changedOptionId = "") {
-    const detail = this.prepareEventDetails(changedOptionId);
-    this.dispatchEvent(
-      new CustomEvent(events.optionChange, {
-        bubbles: true,
-        composed: true,
-        detail,
-      })
-    );
-  }
-
-  emitZoomIn() {
-    this.dispatchEvent(new CustomEvent(events.zoomIn));
-  }
-
-  emitZoomOut() {
-    this.dispatchEvent(new CustomEvent(events.zoomOut));
-  }
-
-  /**
-   * Updates adjustment & component state
-   * updates params of available ajdustment options list
-   * updates active adjustment count
-   * triggers custom event
-   * @param { string } optionName
-   */
-  changeActiveStateFor(optionName) {
-    const updatedOptions = [...this.options];
-    const checkedOption = updatedOptions.find(
-      (option) => option.id === optionName
-    );
-    checkedOption.active = !checkedOption.active;
-    this.options = updatedOptions;
-    this.activeCount = this.activeOptions.length;
-    this.emitOptionChangedEvent(checkedOption.id);
-  }
-
-  setRangeValue(id, value) {
-    const updatedOptions = [...this.options];
-    updatedOptions.find((o) => o.id === id).value = value;
-    this.options = [...updatedOptions];
-  }
-
-  /* render */
-  rangeSlider(option) {
-    return html`
-      <div class=${`range${option.active ? " visible" : ""}`}>
-        <input
-          type="range"
-          name="${option.id}_range"
-          min=${option.min || 0}
-          max=${option.max || 100}
-          step=${option.step || 1}
-          .value=${option.value}
-          @input=${(e) => this.setRangeValue(option.id, e.target.value)}
-          @change=${() => this.emitOptionChangedEvent()}
-        />
-        <p>${option.value}%</p>
-      </div>
-    `;
-  }
-
-  adjustmentCheckbox(option) {
-    const formID = `adjustment_${option.id}`;
-    return html`<li>
-      <label for="${formID}">
-        <span class="name">${option.name}</span>
-        <input
-          type="checkbox"
-          name="${formID}"
-          id="${formID}"
-          @change=${() => this.changeActiveStateFor(option.id)}
-          ?checked=${option.active}
-        />
-        <span class="icon"></span>
-      </label>
-      ${option.value !== undefined ? this.rangeSlider(option) : nothing}
-    </li>`;
-  }
-
-  get headerSection() {
-    const activeAdjustments = this.activeCount
-      ? html`<p>(${this.activeCount} active)</p>`
-      : nothing;
-    const header = html`<header>
-      <h3>Visual adjustments</h3>
-      ${activeAdjustments}
-    </header>`;
-    return this.renderHeader ? header : nothing;
-  }
-
-  get zoomControls() {
-    return html`
-      <h4>Zoom</h4>
-      <button class="zoom_out" @click=${this.emitZoomOut} title="zoom out">
-        <ia-icon-magnify-minus></ia-icon-magnify-minus>
-      </button>
-      <button class="zoom_in" @click=${this.emitZoomIn} title="zoom in">
-        <ia-icon-magnify-plus></ia-icon-magnify-plus>
-      </button>
-    `;
-  }
-
-  /** @inheritdoc */
-  render() {
-    return html`
-      ${this.headerSection}
-      <ul>
-        ${repeat(this.options, (option) => option.id, this.adjustmentCheckbox.bind(this))}
-      </ul>
-      ${this.showZoomControls ? this.zoomControls : nothing}
-    `;
-  }
-
-  static get styles() {
-    return css`
-    :host {
-      display: block;
-      height: 100%;
-      overflow-y: auto;
-      font-size: 1.4rem;
-      box-sizing: border-box;
-    }
-
-    header {
-      display: flex;
-      align-items: baseline;
-    }
-
-    h3 {
-      padding: 0;
-      margin: 0 1rem 0 0;
-      font-size: 1.6rem;
-    }
-
-    header p {
-      padding: 0;
-      margin: 0;
-      font-size: 1.2rem;
-      font-weight: bold;
-      font-style: italic;
-    }
-
-    ul {
-      padding: 1rem 2rem 0 0;
-      list-style: none;
-      margin-top: 0;
-    }
-
-    [type="checkbox"] {
-      display: none;
-    }
-
-    label {
-      display: flex;
-      justify-content: space-between;
-      align-items: baseline;
-      font-size: 1.4rem;
-      font-weight: bold;
-      line-height: 150%;
-      vertical-align: middle;
-    }
-
-    .icon {
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      margin-left: .7rem;
-      border: 1px solid var(--primaryTextColor);
-      border-radius: 2px;
-      background: var(--activeButtonBg) 50% 50% no-repeat;
-    }
-    :checked + .icon {
-      background-image: url('${checkmarkIcon}');
-    }
-
-    .range {
-      display: none;
-      padding-top: .5rem;
-    }
-    .range.visible {
-      display: flex;
-    }
-
-    .range p {
-      margin-left: 1rem;
-    }
-
-    h4 {
-      padding: 1rem 0;
-      margin: 0;
-      font-size: 1.4rem;
-    }
-
-    button {
-      -webkit-appearance: none;
-      appearance: none;
-      border: none;
-      border-radius: 0;
-      background: transparent;
-      outline: none;
-      cursor: pointer;
-      --iconFillColor: var(--primaryTextColor);
-      --iconStrokeColor: var(--primaryTextColor);
-      height: 4rem;
-      width: 4rem;
-    }
-
-    button * {
-      display: inline-block;
-    }`;
-  }
-}
-customElements.define('ia-book-visual-adjustments', IABookVisualAdjustments);

package/stat/BookNavigator/volumes/volumes-provider.js

@@ -1,83 +0,0 @@
-import { html } from 'lit-element';
-
-import sortDescIcon from '../assets/icon_sort_desc.js';
-import sortAscIcon from '../assets/icon_sort_asc.js';
-import sortNeutralIcon from '../assets/icon_sort_neutral.js';
-import volumesIcon from '../assets/icon_volumes.js';
-
-import './volumes.js';
-
-export default class VolumesProvider {
-
-  constructor(baseHost, bookreader, optionChange) {
-    this.optionChange = optionChange;
-    this.component = document.createElement("viewable-files");
-
-    const files = bookreader.options.multipleBooksList.by_subprefix;
-    this.viewableFiles = Object.keys(files).map(item => files[item]);
-    this.volumeCount = Object.keys(files).length;
-
-    this.component.subPrefix = bookreader.options.subPrefix || "";
-    this.component.hostUrl = baseHost;
-    this.component.viewableFiles = this.viewableFiles;
-
-    this.id = "volumes";
-    this.label = `Viewable files (${this.volumeCount})`;
-    this.icon = html`${volumesIcon}`;
-
-    this.sortOrderBy = "orig_sort";
-    this.sortVolumes("orig_sort");
-  }
-
-  get sortButton() {
-    const sortIcons = {
-      orig_sort: html`
-        <button class="sort-by neutral-icon" aria-label="Sort volumes in initial order" @click=${() => this.sortVolumes("title_asc")}>${sortNeutralIcon}</button>
-      `,
-      title_asc: html`
-        <button class="sort-by asc-icon" aria-label="Sort volumes in ascending order" @click=${() => this.sortVolumes("title_desc")}>${sortAscIcon}</button>
-      `,
-      title_desc: html`
-        <button class="sort-by desc-icon" aria-label="Sort volumes in descending order" @click=${() => this.sortVolumes("orig_sort")}>${sortDescIcon}</button>
-      `,
-    };
-
-    return sortIcons[this.sortOrderBy];
-  }
-
-  /**
-   * @param {'orig_sort' | 'title_asc' | 'title_desc'} sortByType
-   */
-  sortVolumes(sortByType) {
-    let sortedFiles = [];
-
-    const files = this.viewableFiles;
-    sortedFiles = files.sort((a, b) => {
-      if (sortByType === 'orig_sort') return a.orig_sort - b.orig_sort;
-      else if (sortByType === 'title_asc') return a.title.localeCompare(b.title);
-      else return b.title.localeCompare(a.title);
-    });
-
-    this.sortOrderBy = sortByType;
-    this.component.viewableFiles  = [...sortedFiles];
-    this.actionButton = this.sortButton;
-    this.optionChange(this.bookreader);
-
-    this.multipleFilesClicked(sortByType);
-  }
-
-  /**
-   * @param {'orig_sort' | 'title_asc' | 'title_desc'} orderBy
-   */
-  multipleFilesClicked(orderBy) {
-    if (!window.archive_analytics) {
-      return;
-    }
-    window.archive_analytics?.send_event_no_sampling(
-      'BookReader',
-      `VolumesSort|${orderBy}`,
-      window.location.path,
-    );
-  }
-
-}

package/stat/BookNavigator/volumes/volumes.js

@@ -1,178 +0,0 @@
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
-import { repeat } from 'lit-html/directives/repeat';
-
-export class Volumes extends LitElement {
-  static get properties() {
-    return {
-      subPrefix: { type: String },
-      hostUrl: { type: String },
-      viewableFiles: { type: Array },
-    };
-  }
-
-  constructor() {
-    super();
-    this.subPrefix = '';
-    this.hostUrl = '';
-    this.viewableFiles = [];
-  }
-
-  firstUpdated() {
-    const activeFile = this.shadowRoot.querySelector('.content.active');
-    // allow for css animations to run before scrolling to active file
-    setTimeout(() => {
-      // scroll active file into view if needed
-      // note: `scrollIntoViewIfNeeded` handles auto-scroll gracefully for Chrome, Safari
-      // Firefox does not have this capability yet as it does not support `scrollIntoViewIfNeeded`
-      if (activeFile?.scrollIntoViewIfNeeded) {
-        activeFile?.scrollIntoViewIfNeeded(true);
-        return;
-      }
-
-      // Todo: support `scrollIntoView` or `parentContainer.crollTop = x` for FF & "IE 11"
-      // currently, the hard `position: absolutes` misaligns subpanel when `scrollIntoView` is applied :(
-    }, 350);
-  }
-
-  volumeItemWithImageTitle(item) {
-    return html`
-      <li class="content active">
-        <div class="separator"></div>
-        <a class="container" href="${this.hostUrl}${item.url_path}">
-          <div class="image">
-            <img src="${item.image}">
-          </div>
-          <div class="text">
-            <p class="item-title">${item.title}</p>
-            <small>by: ${item.author}</small>
-          </div>
-        </a>
-      </li>
-    `;
-  }
-
-  volumeItem(item) {
-    const activeClass = this.subPrefix === item.file_subprefix ? ' active' : '';
-    return html`
-      <li>
-        <div class="separator"></div>
-        <div class="content${activeClass}">
-          <a href="https://${this.hostUrl}${item.url_path}">
-            <p class="item-title">${item.title}</p>
-          </a>
-        </div>
-      </li>
-    `;
-  }
-
-  get volumesList() {
-    const volumes = repeat(this.viewableFiles, volume => volume?.file_prefix, this.volumeItem.bind(this));
-    return html`
-      <ul>
-        ${volumes}
-        <div class="separator"></div> 
-      </ul>
-    `;
-  }
-
-  render() {
-    return html`
-      ${this.viewableFiles.length ? this.volumesList : nothing}
-    `;
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        overflow-y: auto;
-        box-sizing: border-box;
-        color: var(--primaryTextColor);
-        margin-top: 14px;
-        margin-bottom: 2rem;
-        --activeBorderWidth: 2px;
-      }
-
-      a {
-        color: #ffffff;
-        text-decoration: none
-      }
-
-      img {
-        width: 35px;
-        height: 45px;
-      }
-
-      ul {
-        padding: 0;
-        list-style: none;
-        margin: var(--activeBorderWidth) 0.5rem 1rem 0;
-      }
-
-      ul > li:first-child .separator {
-        display: none;
-      }
-
-      li {
-        cursor: pointer;
-        outline: none;
-        position: relative;
-      }
-
-      li .content {
-        padding: 2px 0 4px 2px;
-        border: var(--activeBorderWidth) solid transparent;
-        padding: .2rem 0 .4rem .2rem;
-      }
-      
-      li .content.active {
-        border: var(--activeBorderWidth) solid #538bc5;
-      }
-
-      small {
-        font-style: italic;
-        white-space: initial;
-      }
-
-      .container {
-        display: flex;
-        align-items: center;
-        justify-content: center
-      }
-
-      .item-title {
-        margin-block-start: 0em;
-        margin-block-end: 0em;
-        font-size: 14px;
-        font-weight: bold;
-        word-wrap: break-word;
-        padding-left: 5px;
-      }
-
-      .separator {
-        background-color: var(--secondaryBGColor);
-        width: 98%;
-        margin: 1px auto;
-        height: 1px;
-      }
-
-      .text {
-        padding-left: 10px;
-      }
-
-      .icon {
-        display: inline-block;
-        width: 14px;
-        height: 14px;
-        margin-left: .7rem;
-        border: 1px solid var(--primaryTextColor);
-        border-radius: 2px;
-        background: var(--activeButtonBg) 50% 50% no-repeat;
-      }
-
-    `;
-  }
-}
-
-customElements.define('viewable-files', Volumes);