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

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

@@ -1,7 +1,10 @@
-import { html } from 'lit-element';
-import { nothing } from 'lit-html';
-
-import './search-results';
+// @ts-check
+import { html, nothing } from 'lit';
+import '@internetarchive/icon-search/icon-search.js';
+import './search-results.js';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideResults} SearchInsideResults */
+/** @typedef {import('@/src/BookReader.js').default} BookReader */
 
 let searchState = {
   query: '',
@@ -10,8 +13,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 */
@@ -26,12 +32,12 @@ export default class {
     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';
@@ -69,13 +75,20 @@ export default class {
       errorMessage: '',
     };
     const updateMenuFor = {
-      searchCanceled: true
+      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;
@@ -89,11 +102,14 @@ export default class {
     this.bookreader.search(searchState.query);
   }
 
+  /**
+   * @param {CustomEvent<{props: {instance: BookReader, results: SearchInsideResults}}>} event
+   */
   onSearchRequestError(event, errorType = 'default') {
-    const { detail: { props = {} } } = event;
-    const { instance = null } = props;
+    const { detail: { props } } = event;
+    const { instance, results } = props;
     if (instance) {
-      /* keep bookreader instance reference up-to-date */
+      /** @type {BookReader} keep bookreader instance reference up-to-date */
       this.bookreader = instance;
     }
     const errorMessages = {
@@ -104,6 +120,7 @@ export default class {
     };
 
     const messageToShow = errorMessages[errorType] ?? errorMessages.default;
+    searchState.query = results?.q || '';
     searchState.results = [];
     searchState.resultsCount = 0;
     searchState.queryInProgress = false;
@@ -126,7 +143,7 @@ export default class {
   }
 
   searchCanceledInMenu() {
-    this.bookreader?.cancelSearchRequest();
+    this.bookreader.plugins.search.cancelSearchRequest();
   }
 
   onSearchResultsCleared() {
@@ -137,8 +154,23 @@ export default class {
       queryInProgress: false,
       errorMessage: '',
     };
-    this.updateMenu();
-    this.bookreader?.searchView?.clearSearchFieldAndResults();
+    this.updateMenu({ openMenu: false });
+    this.bookreader.plugins.search.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');
+      }
+    }
   }
 
   /**
@@ -148,7 +180,7 @@ export default class {
   updateMenu(searchUpdates = {}) {
     this.menuDetails = this.getMenuDetails();
     this.component = this.getComponent();
-    this.onSearchChange(this.bookreader, searchUpdates);
+    this.onProviderChange(this.bookreader, searchUpdates);
   }
 
   getComponent() {
@@ -168,14 +200,10 @@ export default class {
   `;
   }
 
+  /**
+   * @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.plugins.search.jumpToMatch(detail.match.matchIndex);
   }
 }

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 '@internetarchive/ia-activity-indicator/ia-activity-indicator';
-import './a-search-result.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { css, html, LitElement, nothing } from 'lit';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator.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() {
@@ -24,11 +23,12 @@ export class IABookSearchResults extends LitElement {
   constructor() {
     super();
 
+    /** @type {SearchInsideMatch[]} */
     this.results = [];
     this.query = '';
     this.queryInProgress = false;
     this.renderHeader = false;
-    this.renderSearchAllFields = false;
+    this.renderSearchAllFiles = false;
     this.displayResultImages = false;
     this.errorMessage = '';
 
@@ -61,6 +61,9 @@ export class IABookSearchResults extends LitElement {
 
   setQuery(e) {
     this.query = e.currentTarget.value;
+    if (!this.query) {
+      this.cancelSearch();
+    }
   }
 
   performSearch(e) {
@@ -78,7 +81,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,
@@ -130,10 +141,12 @@ 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>${unsafeHTML(match.html)}</p>
+            </li>
           `)}
       </ul>
     `;
@@ -149,6 +162,7 @@ export class IABookSearchResults extends LitElement {
             name="query"
             alt="Search inside this book."
             @keyup=${this.setQuery}
+            @search=${this.setQuery}
             .value=${this.query}
           />
         </fieldset>

package/src/BookNavigator/sharing.js

@@ -0,0 +1,27 @@
+import { html } from 'lit';
+import { iauxShareIcon } from '@internetarchive/ia-item-navigator/dist/src/menus/share-panel.js';
+import '@internetarchive/ia-item-navigator/dist/src/menus/share-panel.js';
+
+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.subPrefix || '';
+    const label = `Share this book`;
+    this.icon = html`${iauxShareIcon}`;
+    this.label = label;
+    this.id = 'share';
+    this.component = html`<iaux-in-share-panel
+      .identifier=${identifier}
+      .type=${`book`}
+      .creator=${creatorToUse}
+      .description=${title}
+      .baseHost=${baseHost}
+      .fileSubPrefix=${subPrefix}
+    ></iaux-in-share-panel>`;
+  }
+}

package/src/BookNavigator/viewable-files.js

@@ -0,0 +1,95 @@
+import { html } from 'lit';
+
+import { viewableFilesIcon  } from '@internetarchive/ia-item-navigator/dist/src/menus/viewable-files.js';
+import '@internetarchive/ia-item-navigator/dist/src/menus/viewable-files.js';
+
+/**
+ * * @typedef { 'title_asc' | 'title_desc' | 'default'} SortTypesT
+ */
+const sortTypes = {
+  title_asc: 'title_asc',
+  title_desc: 'title_desc',
+  default: 'default',
+};
+export default class ViewableFilesProvider {
+  /**
+   * @param {import('../BookReader').default} bookreader
+   */
+  constructor({ baseHost, bookreader, onProviderChange }) {
+    /** @type {import('../BookReader').default} */
+    this.bookreader = bookreader;
+    this.onProviderChange = onProviderChange;
+    this.baseHost = baseHost;
+
+    const files = bookreader.options.multipleBooksList.by_subprefix;
+    this.viewableFiles = Object.keys(files).map(item => files[item]);
+    this.volumeCount = Object.keys(files).length;
+
+    this.id = "volumes";
+    this.label = `Viewable files (${this.volumeCount})`;
+    this.icon = html`${viewableFilesIcon}`;
+    this.sortOrderBy = sortTypes.default;
+
+    this.component = document.createElement("iaux-in-viewable-files-panel");
+    this.component.addSortToUrl = true;
+    this.component.subPrefix = bookreader.options.subPrefix || "";
+    this.component.baseHost = baseHost;
+    this.component.fileList = [...this.viewableFiles];
+
+    this.sortFilesComponent = document.createElement("iaux-in-sort-files-button");
+    this.sortFilesComponent.fileListRaw = this.viewableFiles;
+    this.sortFilesComponent.addEventListener('fileListSorted', (e) => this.handleFileListSorted(e));
+    this.actionButton = this.sortFilesComponent;
+
+    // get sort state from query param
+    if (this.bookreader.urlPlugin) {
+      this.bookreader.urlPlugin.pullFromAddressBar();
+
+      const urlSortValue = this.bookreader.urlPlugin.getUrlParam('sort');
+      if (urlSortValue === sortTypes.title_asc || urlSortValue === sortTypes.title_desc) {
+        this.sortOrderBy = urlSortValue;
+      }
+    }
+
+    this.sortFilesComponent.sortVolumes(this.sortOrderBy);
+
+    this.onProviderChange(this.bookreader);
+  }
+
+  /** @param { SortTypesT } sortType */
+  async handleFileListSorted(event) {
+    const { sortType, sortedFiles } = event.detail;
+
+    this.viewableFiles = sortedFiles;
+    this.sortOrderBy = sortType;
+
+    // update the component
+    this.component.fileList = [...this.viewableFiles];
+    await this.component.updateComplete;
+
+    if (this.bookreader.urlPlugin) {
+      this.bookreader.urlPlugin.pullFromAddressBar();
+      if (this.sortOrderBy !== sortTypes.default) {
+        this.bookreader.urlPlugin.setUrlParam('sort', this.sortOrderBy);
+      } else {
+        this.bookreader.urlPlugin.removeUrlParam('sort');
+      }
+    }
+
+    this.onProviderChange(this.bookreader);
+
+    this.multipleFilesClicked(this.sortOrderBy);
+  }
+
+  /**
+   * @param { SortTypesT } orderBy
+   */
+  multipleFilesClicked(orderBy) {
+    window.archive_analytics?.send_event(
+      'BookReader',
+      `VolumesSort|${orderBy}`,
+      window.location.path,
+    );
+  }
+
+}

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

@@ -1,4 +1,5 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
+import '@internetarchive/icon-visual-adjustment/icon-visual-adjustment.js';
 import './visual-adjustments.js';
 
 const visualAdjustmentOptions = [{
@@ -19,19 +20,19 @@ const visualAdjustmentOptions = [{
   value: 100,
 }, {
   id: 'invert',
-  name: 'Inverted colors (dark mode)',
+  name: 'Invert colors (dark mode)',
   active: false,
 }, {
   id: 'grayscale',
-  name: 'Grayscale',
+  name: 'Convert to grayscale',
   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,10 +42,10 @@ 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';
+    this.id = 'visualAdjustments';
     this.component = html`
       <ia-book-visual-adjustments
         .options=${visualAdjustmentOptions}
@@ -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,9 +1,9 @@
-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";
+import "@internetarchive/icon-magnify-minus/icon-magnify-minus.js";
+import "@internetarchive/icon-magnify-plus/icon-magnify-plus.js";
 
 const namespacedEvent = (eventName) => `visualAdjustment${eventName}`;
 
@@ -43,7 +43,7 @@ export class IABookVisualAdjustments extends LitElement {
   get activeOptions() {
     return this.options.reduce(
       (results, option) => (option.active ? [...results, option.id] : results),
-      []
+      [],
     );
   }
 
@@ -71,7 +71,7 @@ export class IABookVisualAdjustments extends LitElement {
         bubbles: true,
         composed: true,
         detail,
-      })
+      }),
     );
   }
 
@@ -93,7 +93,7 @@ export class IABookVisualAdjustments extends LitElement {
   changeActiveStateFor(optionName) {
     const updatedOptions = [...this.options];
     const checkedOption = updatedOptions.find(
-      (option) => option.id === optionName
+      (option) => option.id === optionName,
     );
     checkedOption.active = !checkedOption.active;
     this.options = updatedOptions;
@@ -157,7 +157,7 @@ export class IABookVisualAdjustments extends LitElement {
 
   get zoomControls() {
     return html`
-      <h4>Zoom</h4>
+      <h4>Adjust zoom</h4>
       <button class="zoom_out" @click=${this.emitZoomOut} title="zoom out">
         <ia-icon-magnify-minus></ia-icon-magnify-minus>
       </button>