@internetarchive/bookreader 5.0.0-28-remove-url-defaults → 5.0.0-29

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

@@ -0,0 +1,280 @@
+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

@@ -0,0 +1,83 @@
+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

@@ -0,0 +1,178 @@
+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);