@internetarchive/bookreader 5.0.0-4 → 5.0.0-40-a1

package/src/BookNavigator/search/search-results.js

@@ -1,12 +1,11 @@
 /* eslint-disable class-methods-use-this */
-import { nothing } from 'lit-html';
-import { css, html, LitElement } from 'lit-element';
+import { css, html, LitElement, nothing } from 'lit';
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
-import { BookSearchResult } from './a-search-result.js';
+import './a-search-result.js';
 import checkmarkIcon from '../assets/icon_checkmark.js';
 import closeIcon from '../assets/icon_close.js';
+import buttonCSS from '../assets/button-base.js';
 
-customElements.define('book-search-result', BookSearchResult);
 
 export class IABookSearchResults extends LitElement {
   static get properties() {
@@ -91,10 +90,7 @@ export class IABookSearchResults extends LitElement {
   }
 
   dispatchSearchCanceled() {
-    this.dispatchEvent(new CustomEvent('bookSearchCanceled', {
-      bubbles: true,
-      composed: true,
-    }));
+    this.dispatchEvent(new Event('bookSearchCanceled'));
   }
 
   get resultsCount() {
@@ -123,6 +119,7 @@ export class IABookSearchResults extends LitElement {
       <div class="loading">
         <ia-activity-indicator mode="processing"></ia-activity-indicator>
         <p>Searching</p>
+        <button class="ia-button external cancel-search" @click=${this.cancelSearch}>Cancel</button>
       </div>
     `;
   }
@@ -189,7 +186,7 @@ export class IABookSearchResults extends LitElement {
     const searchResultBorder = css`var(--searchResultBorder, #adaedc)`;
     const activeButtonBg = css`(--tertiaryBGColor, #333)`;
 
-    return css`
+    const mainCSS = css`
       :host {
         display: block;
         height: 100%;
@@ -349,17 +346,6 @@ export class IABookSearchResults extends LitElement {
         font-size: 1.2rem;
       }
 
-      .loading button {
-        -webkit-appearance: none;
-        appearance: none;
-        padding: .5rem .7rem;
-        font: normal 1.4rem "Helvetica Neue", Helvetica, Arial, sans-serif;
-        border: 1px solid #656565;
-        border-radius: 3px;
-        cursor: pointer;
-        background: transparent;
-      }
-
       ia-activity-indicator {
         display: block;
         width: 40px;
@@ -367,5 +353,7 @@ export class IABookSearchResults extends LitElement {
         margin: 0 auto;
       }
     `;
+    return [buttonCSS, mainCSS];
   }
 }
+customElements.define('ia-book-search-results', IABookSearchResults);

package/src/BookNavigator/sharing.js

@@ -0,0 +1,27 @@
+import { html } from 'lit';
+import '@internetarchive/icon-share/icon-share';
+import '@internetarchive/ia-sharing-options';
+
+export default class SharingProvider {
+  constructor({
+    item,
+    baseHost,
+    bookreader
+  }) {
+    const { identifier, creator, title } = item?.metadata;
+    const creatorToUse = Array.isArray(creator) ? creator[0] : creator;
+    const subPrefix = bookreader.options.subPrefix || '';
+    const label = `Share this book`;
+    this.icon = html`<ia-icon-share style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-share>`;
+    this.label = label;
+    this.id = 'share';
+    this.component = html`<ia-sharing-options
+      .identifier=${identifier}
+      .type=${`book`}
+      .creator=${creatorToUse}
+      .description=${title}
+      .baseHost=${baseHost}
+      .fileSubPrefix=${subPrefix}
+    ></ia-sharing-options>`;
+  }
+}

package/src/BookNavigator/visual-adjustments/visual-adjustments-provider.js

@@ -1,8 +1,6 @@
-import { html } from 'lit-element';
-
-/* define subpanel */
-import { IABookVisualAdjustments } from './visual-adjustments.js';
-customElements.define('ia-book-visual-adjustments', IABookVisualAdjustments);
+import { html } from 'lit';
+import '@internetarchive/icon-visual-adjustment/icon-visual-adjustment';
+import './visual-adjustments';
 
 const visualAdjustmentOptions = [{
   id: 'brightness',
@@ -30,11 +28,11 @@ const visualAdjustmentOptions = [{
   active: false,
 }];
 
-export default class {
+export default class VisualAdjustmentsProvider {
   constructor(options) {
-    const { onOptionChange = () => {}, bookContainerSelector, bookreader } = options;
-    this.onOptionChange = onOptionChange;
-    this.bookContainerSelector = bookContainerSelector;
+    const { onProviderChange, bookreader } = options;
+    this.onProviderChange = onProviderChange;
+    this.bookContainer = bookreader.refs.$brContainer;
     this.bookreader = bookreader;
 
     this.onAdjustmentChange = this.onAdjustmentChange.bind(this);
@@ -44,7 +42,7 @@ export default class {
     this.onZoomOut = this.onZoomOut.bind(this);
 
     this.activeCount = 0;
-    this.icon = html`<ia-icon icon="visualAdjustment" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>`;
+    this.icon = html`<ia-icon-visual-adjustment style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-visual-adjustment>`;
     this.label = 'Visual Adjustments';
     this.menuDetails = this.updateOptionsCount();
     this.id = 'adjustment';
@@ -63,7 +61,7 @@ export default class {
   }
 
   onZoomOut() {
-    this.bookreader.zoom();
+    this.bookreader.zoom(-1);
   }
 
   onAdjustmentChange(event) {
@@ -79,7 +77,7 @@ export default class {
       return newValue ? [...values, newValue] : values;
     }, []).join(' ');
 
-    document.querySelector(this.bookContainerSelector).style.setProperty('filter', filters);
+    this.bookContainer.css('filter', filters);
 
     this.optionUpdateComplete(event);
   }
@@ -87,7 +85,7 @@ export default class {
   optionUpdateComplete(event) {
     this.activeCount = event.detail.activeCount;
     this.updateOptionsCount(event);
-    this.onOptionChange(event);
+    this.onProviderChange();
   }
 
   updateOptionsCount() {

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

@@ -1,6 +1,6 @@
-import { css, html, LitElement } from "lit-element";
-import { repeat } from "lit-html/directives/repeat.js";
-import { nothing } from "lit-html";
+import { css, html, LitElement } from "lit";
+import { repeat } from "lit/directives/repeat.js";
+import { nothing } from "lit";
 import checkmarkIcon from '../assets/icon_checkmark.js';
 import "@internetarchive/icon-magnify-minus/icon-magnify-minus";
 import "@internetarchive/icon-magnify-plus/icon-magnify-plus";
@@ -277,3 +277,4 @@ export class IABookVisualAdjustments extends LitElement {
     }`;
   }
 }
+customElements.define('ia-book-visual-adjustments', IABookVisualAdjustments);

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

@@ -0,0 +1,114 @@
+import { html } from 'lit';
+
+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';
+
+const sortType = {
+  title_asc: 'title_asc',
+  title_desc: 'title_desc',
+  default: 'default'
+};
+export default class VolumesProvider {
+  /**
+   * @param {import('../../BookReader').default} bookreader
+   */
+  constructor({ baseHost, bookreader, onProviderChange }) {
+    this.onProviderChange = onProviderChange;
+    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;
+
+    /** @type {import('../../BookReader').default} */
+    this.bookreader = bookreader;
+
+    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 = sortType.default;
+
+    // get sort state from query param
+    if (this.bookreader.urlPlugin) {
+      this.bookreader.urlPlugin.pullFromAddressBar();
+
+      const urlSortValue = this.bookreader.urlPlugin.getUrlParam('sort');
+      if (urlSortValue === sortType.title_asc || urlSortValue === sortType.title_desc) {
+        this.sortOrderBy = urlSortValue;
+      }
+    }
+    this.sortVolumes(this.sortOrderBy);
+  }
+
+  get sortButton() {
+    const sortIcons = {
+      default: 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("default")}>${sortDescIcon}</button>
+      `,
+    };
+
+    return sortIcons[this.sortOrderBy];
+  }
+
+  /**
+   * @param {'default' | 'title_asc' | 'title_desc'} sortByType
+   */
+  sortVolumes(sortByType) {
+    let sortedFiles = [];
+
+    const files = this.viewableFiles;
+    sortedFiles = files.sort((a, b) => {
+      if (sortByType === sortType.title_asc) return a.title.localeCompare(b.title);
+      else if (sortByType === sortType.title_desc) return b.title.localeCompare(a.title);
+      else return a.orig_sort - b.orig_sort;
+    });
+
+    this.sortOrderBy = sortByType;
+    this.component.sortOrderBy = sortByType;
+    this.component.viewableFiles  = [...sortedFiles];
+    this.actionButton = this.sortButton;
+
+    if (this.bookreader.urlPlugin) {
+      this.bookreader.urlPlugin.pullFromAddressBar();
+      if (this.sortOrderBy !== sortType.default) {
+        this.bookreader.urlPlugin.setUrlParam('sort', sortByType);
+      } else {
+        this.bookreader.urlPlugin.removeUrlParam('sort');
+      }
+    }
+
+    this.onProviderChange(this.bookreader);
+
+    this.multipleFilesClicked(sortByType);
+  }
+
+  /**
+   * @param {'default' | '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/src/BookNavigator/volumes/volumes.js

@@ -0,0 +1,188 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+
+export class Volumes extends LitElement {
+  static get properties() {
+    return {
+      subPrefix: { type: String },
+      hostUrl: { type: String },
+      viewableFiles: { type: Array },
+      sortOrderBy: { type: String },
+    };
+  }
+
+  constructor() {
+    super();
+    this.hostUrl = '';
+    this.sortOrderBy = '';
+    this.subPrefix = '';
+    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) {
+    const hrefUrl = this.sortOrderBy === 'default'
+      ? `${this.hostUrl}${item.url_path}`
+      : `${this.hostUrl}${item.url_path}?sort=${this.sortOrderBy}`;
+
+    return html`
+      <li class="content active">
+        <div class="separator"></div>
+        <a class="container" href="${hrefUrl}">
+          <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' : '';
+
+    const hrefUrl = this.sortOrderBy === 'default'
+      ? `${this.hostUrl}${item.url_path}`
+      : `${this.hostUrl}${item.url_path}?sort=${this.sortOrderBy}`;
+
+    return html`
+      <li>
+        <div class="separator"></div>
+        <div class="content${activeClass}">
+          <a href="https://${hrefUrl}">
+            <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);

package/src/BookReader/DebugConsole.js

@@ -19,7 +19,7 @@ export class DebugConsole {
     </form>`);
     this.$log.append(this.$form);
 
-    this.$form.submit(ev => {
+    this.$form.on("submit", ev => {
       ev.preventDefault();
       const result = eval(this.$form.find('input').val());
       this.logToScreen([result]);
@@ -29,7 +29,7 @@ export class DebugConsole {
     console.log = (...args) => {
       _realLog(...args);
       this.logToScreen(args);
-    }
+    };
 
     window.onerror = (...args) => this.logToScreen(args);
   }
@@ -40,7 +40,7 @@ export class DebugConsole {
    */
   logToScreen(args) {
     const html = args.map(JSON.stringify).join(',');
-    const $lastEntry = this.$log.children('.log-entry:last-child')
+    const $lastEntry = this.$log.children('.log-entry:last-child');
     if ($lastEntry.find('.entry-code').html() == html) {
       $lastEntry.find('.count').text(`(${++this.currentRun})`);
     } else {