@internetarchive/bookreader 5.0.0-6-multiple-files → 5.0.0-60

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

@@ -1,7 +1,7 @@
-import { html } from 'lit-element';
-import { nothing } from 'lit-html';
-
+import { html, nothing } from 'lit';
+import '@internetarchive/icon-search/icon-search';
 import './search-results';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
 
 let searchState = {
   query: '',
@@ -10,8 +10,11 @@ let searchState = {
   queryInProgress: false,
   errorMessage: '',
 };
-export default class {
-  constructor(onSearchChange = () => {}, brInstance) {
+export default class SearchProvider {
+  constructor({
+    onProviderChange,
+    bookreader
+  }) {
     /* search menu events */
     this.onBookSearchInitiated = this.onBookSearchInitiated.bind(this);
     /* bookreader search events */
@@ -20,16 +23,18 @@ export default class {
     this.onSearchResultsClicked = this.onSearchResultsClicked.bind(this);
     this.onSearchResultsChange = this.onSearchResultsChange.bind(this);
     this.onSearchResultsCleared = this.onSearchResultsCleared.bind(this);
+    this.searchCanceledInMenu = this.searchCanceledInMenu.bind(this);
+
     /* class methods */
     this.bindEventListeners = this.bindEventListeners.bind(this);
     this.getMenuDetails = this.getMenuDetails.bind(this);
     this.getComponent = this.getComponent.bind(this);
-    this.advanceToPage = this.advanceToPage.bind(this);
     this.updateMenu = this.updateMenu.bind(this);
 
-    this.onSearchChange = onSearchChange;
-    this.bookreader = brInstance;
-    this.icon = html`<ia-icon icon="search" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>`;
+    this.onProviderChange = onProviderChange;
+    /** @type {import('@/src/BookReader.js').default} */
+    this.bookreader = bookreader;
+    this.icon = html`<ia-icon-search style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-search>`;
     this.label = 'Search inside';
     this.menuDetails = this.getMenuDetails();
     this.id = 'search';
@@ -39,7 +44,7 @@ export default class {
 
   getMenuDetails() {
     const { resultsCount, query, queryInProgress } = searchState;
-    if (queryInProgress || !query) { return nothing }
+    if (queryInProgress || !query) { return nothing; }
     const unit = resultsCount === 1 ? 'result' : 'results';
     return html`(${resultsCount} ${unit})`;
   }
@@ -47,14 +52,40 @@ export default class {
   bindEventListeners() {
     window.addEventListener('BookReader:SearchStarted', this.onSearchStarted);
     window.addEventListener('BookReader:SearchCallback', this.onSearchResultsChange);
-    window.addEventListener('BookReader:SearchCallbackEmpty', (event) => { this.onSearchRequestError(event, 'noResults') });
-    window.addEventListener('BookReader:SearchCallbackNotIndexed', (event) => { this.onSearchRequestError(event, 'notIndexed') });
-    window.addEventListener('BookReader:SearchCallbackError', (event) => { this.onSearchRequestError(event) });
-    window.addEventListener('BookReader:SearchResultsCleared', () => { this.onSearchResultsCleared() });
+    window.addEventListener('BookReader:SearchCallbackEmpty', (event) => { this.onSearchRequestError(event, 'noResults'); });
+    window.addEventListener('BookReader:SearchCallbackNotIndexed', (event) => { this.onSearchRequestError(event, 'notIndexed'); });
+    window.addEventListener('BookReader:SearchCallbackError', (event) => { this.onSearchRequestError(event); });
+    window.addEventListener('BookReader:SearchResultsCleared', () => { this.onSearchResultsCleared(); });
+    window.addEventListener('BookReader:SearchCanceled', (e) => { this.onSearchCanceled(e); });
+  }
+
+  /**
+   * Cancel search handler
+   * resets `searchState`
+   */
+  onSearchCanceled() {
+    searchState = {
+      query: '',
+      results: [],
+      resultsCount: 0,
+      queryInProgress: false,
+      errorMessage: '',
+    };
+    const updateMenuFor = {
+      searchCanceled: true
+    };
+    this.updateMenu(updateMenuFor);
+
+    if (this.bookreader.urlPlugin) {
+      this.updateSearchInUrl();
+    }
   }
 
   onSearchStarted(e) {
-    const { term = '' } = e.detail.props;
+    const { term = '', instance } = e.detail.props;
+    if (instance) {
+      this.bookreader = instance;
+    }
     searchState.query = term;
     searchState.results = [];
     searchState.resultsCount = 0;
@@ -79,10 +110,11 @@ export default class {
       noResults: '0 results',
       notIndexed: `This book hasn't been indexed for searching yet.  We've just started indexing it,
        so search should be available soon.  Please try again later.  Thanks!`,
-      default: 'Sorry, there was an error with your search.  The text may still be processing.',
+      default: 'Sorry, there was an error with your search.  Please try again.',
     };
 
     const messageToShow = errorMessages[errorType] ?? errorMessages.default;
+    searchState.query = instance?.searchResults?.q || '';
     searchState.results = [];
     searchState.resultsCount = 0;
     searchState.queryInProgress = false;
@@ -104,6 +136,10 @@ export default class {
     this.updateMenu();
   }
 
+  searchCanceledInMenu() {
+    this.bookreader?.cancelSearchRequest();
+  }
+
   onSearchResultsCleared() {
     searchState = {
       query: '',
@@ -111,15 +147,34 @@ export default class {
       resultsCount: 0,
       queryInProgress: false,
       errorMessage: '',
+    };
+    this.updateMenu({ openMenu: false });
+    this.bookreader?.searchView?.clearSearchFieldAndResults(false);
+    if (this.bookreader.urlPlugin) {
+      this.updateSearchInUrl();
+    }
+  }
+
+  /** update URL `q=<term>` query param in URL */
+  updateSearchInUrl() {
+    if (this.bookreader.urlPlugin) {
+      this.bookreader.urlPlugin.pullFromAddressBar();
+      if (searchState.query) {
+        this.bookreader.urlPlugin.setUrlParam('q', searchState.query);
+      } else {
+        this.bookreader.urlPlugin.removeUrlParam('q');
+      }
     }
-    this.updateMenu();
-    this.bookreader?.searchView?.clearSearchFieldAndResults();
   }
 
-  updateMenu() {
+  /**
+   * Relays how to update side menu given the context of a search update
+    @param {{searchCanceled: boolean}} searchUpdates
+   */
+  updateMenu(searchUpdates = {}) {
     this.menuDetails = this.getMenuDetails();
     this.component = this.getComponent();
-    this.onSearchChange(this.bookreader);
+    this.onProviderChange(this.bookreader, searchUpdates);
   }
 
   getComponent() {
@@ -134,18 +189,15 @@ export default class {
       @resultSelected=${this.onSearchResultsClicked}
       @bookSearchInitiated=${this.onBookSearchInitiated}
       @bookSearchResultsCleared=${this.onSearchResultsCleared}
+      @bookSearchCanceled=${this.searchCanceledInMenu}
     ></ia-book-search-results>
   `;
   }
 
+  /**
+   * @param {{ detail: {match: SearchInsideMatch} }} param0
+   */
   onSearchResultsClicked({ detail }) {
-    const page = detail.match.par[0].page;
-    this.advanceToPage(page);
-  }
-
-  advanceToPage(leaf) {
-    const page = this.bookreader.leafNumToIndex(leaf);
-    this.bookreader._searchPluginGoToResult(page);
-    this.bookreader.updateSearchHilites();
+    this.bookreader._searchPluginGoToResult(detail.match.matchIndex);
   }
 }

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

@@ -1,11 +1,12 @@
 /* eslint-disable class-methods-use-this */
-import { nothing } from 'lit-html';
-import { css, html, LitElement } from 'lit-element';
+import { escapeHTML } from '../../BookReader/utils.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { css, html, LitElement, nothing } from 'lit';
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
-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';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
 
 export class IABookSearchResults extends LitElement {
   static get properties() {
@@ -23,6 +24,7 @@ export class IABookSearchResults extends LitElement {
   constructor() {
     super();
 
+    /** @type {SearchInsideMatch[]} */
     this.results = [];
     this.query = '';
     this.queryInProgress = false;
@@ -60,6 +62,9 @@ export class IABookSearchResults extends LitElement {
 
   setQuery(e) {
     this.query = e.currentTarget.value;
+    if (!this.query) {
+      this.cancelSearch();
+    }
   }
 
   performSearch(e) {
@@ -77,7 +82,15 @@ export class IABookSearchResults extends LitElement {
     }));
   }
 
-  selectResult() {
+  /**
+   * @param {SearchInsideMatch} match
+   */
+  selectResult(match) {
+    this.dispatchEvent(new CustomEvent('resultSelected', {
+      bubbles: true,
+      composed: true,
+      detail: { match },
+    }));
     this.dispatchEvent(new CustomEvent('closeMenu', {
       bubbles: true,
       composed: true,
@@ -90,10 +103,7 @@ export class IABookSearchResults extends LitElement {
   }
 
   dispatchSearchCanceled() {
-    this.dispatchEvent(new CustomEvent('bookSearchCanceled', {
-      bubbles: true,
-      composed: true,
-    }));
+    this.dispatchEvent(new Event('bookSearchCanceled'));
   }
 
   get resultsCount() {
@@ -122,6 +132,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>
     `;
   }
@@ -131,10 +142,17 @@ export class IABookSearchResults extends LitElement {
     return html`
       <ul class="results ${resultsClass}">
         ${this.results.map(match => html`
-            <book-search-result
-              .match=${match}
-              @resultSelected=${this.selectResult}
-            ></book-search-result>
+            <li @click=${this.selectResult.bind(this, match)}>
+              ${match.cover ? html`<img src="${match.cover}" />` : nothing}
+              <h4>${match.title || nothing}</h4>
+              <p class="page-num">Page ${match.displayPageNumber}</p>
+              <p>
+                ${
+                  // [^] matches any character, including line breaks
+                  unsafeHTML(escapeHTML(match.text).replace(/{{{([^]+?)}}}/g, '<mark>$1</mark>'))
+                }
+              </p>
+            </li>
           `)}
       </ul>
     `;
@@ -150,6 +168,7 @@ export class IABookSearchResults extends LitElement {
             name="query"
             alt="Search inside this book."
             @keyup=${this.setQuery}
+            @search=${this.setQuery}
             .value=${this.query}
           />
         </fieldset>
@@ -188,7 +207,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%;
@@ -348,17 +367,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;
@@ -366,6 +374,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,5 +1,6 @@
-import { html } from 'lit-element';
-import './visual-adjustments.js';
+import { html } from 'lit';
+import '@internetarchive/icon-visual-adjustment/icon-visual-adjustment';
+import './visual-adjustments';
 
 const visualAdjustmentOptions = [{
   id: 'brightness',
@@ -27,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);
@@ -41,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';
@@ -60,7 +61,7 @@ export default class {
   }
 
   onZoomOut() {
-    this.bookreader.zoom();
+    this.bookreader.zoom(-1);
   }
 
   onAdjustmentChange(event) {
@@ -76,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);
   }
@@ -84,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";

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

@@ -1,76 +1,111 @@
-import { html } from 'lit-element';
-import sortAscendingIcon from '../assets/icon_sort_ascending.js';
-import sortDescendingIcon from '../assets/icon_sort_descending.js';
+import { html } from 'lit';
 
-import './volumes.js';
+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");
 
-  constructor(optionChange, volumes, bookreader) {
-    this.optionChange = optionChange
-    this.component = document.createElement('viewable-files');
-
-    const files = bookreader.options.multipleBooksList?.by_subprefix
+    const files = bookreader.options.multipleBooksList.by_subprefix;
     this.viewableFiles = Object.keys(files).map(item => files[item]);
     this.volumeCount = Object.keys(files).length;
-    this.isFirstLoad = true
-    this.isSortAscending = false;
 
-    this.component.subPrefix = bookreader.options === undefined ? 'theworksofplato01platiala' : bookreader.options.subPrefix;
-    this.component.hostUrl = volumes.baseHost;
+    /** @type {import('../../BookReader').default} */
+    this.bookreader = bookreader;
+
+    this.component.subPrefix = bookreader.options.subPrefix || "";
+    this.component.hostUrl = baseHost;
     this.component.viewableFiles = this.viewableFiles;
 
-    this.id = 'multiple-books';
-    this.label = `Viewable Files (${this.volumeCount})`
-    this.icon = html`<ia-icon icon="volumes" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>`;
-    this.actionButton = this.headerIcon
-    this.sortVolumes()
-  }
+    this.id = "volumes";
+    this.label = `Viewable files (${this.volumeCount})`;
+    this.icon = html`${volumesIcon}`;
 
-  get sortAscendingIcon() {
-    const iconStyle = 'background: transparent; border: none; position: absolute; right: 25px';
-    return html`<button style=${iconStyle} class="sort-asc icon" aria-label="Sort volumes in ascending order" @click=${() => this.sortVolumes()}>${sortAscendingIcon}</button>`;
-  }
+    this.sortOrderBy = sortType.default;
 
-  get sortDescendingIcon() {
-    const iconStyle = 'background: transparent; border: none; position: absolute; right: 25px';
-    return html`<button style=${iconStyle} class="sort-desc icon" aria-label="Sort volumes in descending order" @click=${() => this.sortVolumes()}>${sortDescendingIcon}</button>`;
+    // 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 headerIcon() {
-    return this.isSortAscending ? this.sortAscendingIcon : this.sortDescendingIcon;
+  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];
   }
 
-  sortVolumes() {
-    this.isSortAscending = !this.isSortAscending;
-    const sortedFiles = this.viewableFiles.sort((a, b) => {
-      if (this.isSortAscending) return a.title.localeCompare(b.title);
-      else return b.title.localeCompare(a.title);
-    })
-
-    this.component.viewableFiles  = [...sortedFiles]
-    if (!this.isFirstLoad) {
-      this.actionButton = this.headerIcon
-      this.optionChange(this.bookreader)
-    } else {
-      this.isFirstLoad = false
+  /**
+   * @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');
+      }
     }
-  }
 
-  bindEvents() {
-    this.component.addEventListener('click', this.multiplefilesClicked.bind(this));
+    this.onProviderChange(this.bookreader);
+
+    this.multipleFilesClicked(sortByType);
   }
 
-  multiplefilesClicked({ detail }) {
-    // maybe some analytics?
-    if (window.archive_analytics) {
-      window.archive_analytics?.send_event_no_sampling(
-        'BookReader',
-        `VolumesSort`,
-        window.location.path,
-      );
-    }
+  /**
+   * @param {'default' | 'title_asc' | 'title_desc'} orderBy
+   */
+  multipleFilesClicked(orderBy) {
+    window.archive_analytics?.send_event(
+      'BookReader',
+      `VolumesSort|${orderBy}`,
+      window.location.path,
+    );
   }
 
 }