@internetarchive/bookreader 5.0.0-18

package/src/BookNavigator/downloads/downloads.js

@@ -0,0 +1,138 @@
+import { css, html, LitElement } from 'lit-element';
+import { nothing } from 'lit-html';
+import buttonStyles from '../assets/button-base.js';
+export class IABookDownloads extends LitElement {
+  static get properties() {
+    return {
+      downloads: { type: Array },
+      expiration: { type: Number },
+      renderHeader: { type: Boolean },
+      isBookProtected: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.downloads = [];
+    this.expiration = 0;
+    this.renderHeader = false;
+    this.isBookProtected = false;
+  }
+
+  get formatsCount() {
+    const count = this.downloads.length;
+    return count ? html`<p>${count} format${count > 1 ? 's' : ''}</p>` : html``;
+  }
+
+  get loanExpiryMessage() {
+    return this.expiration
+      ? html`<h2>These files will expire in ${this.expiration} days.</h2>`
+      : html``;
+  }
+
+  renderDownloadOptions() {
+    return this.downloads.map(option => (
+      html`
+        <li>
+          <a class="ia-button link primary" href="${option.url}">Get ${option.type}</a>
+          ${option.note ? html`<p>${option.note}</p>` : html``}
+        </li>
+      `
+    ));
+  }
+
+  get header() {
+    if (!this.renderHeader) {
+      return nothing;
+    }
+    return html`
+      <header>
+        <h3>Downloadable files</h3>
+        ${this.formatsCount}
+      </header>
+    `;
+  }
+
+  get accessProtectedBook() {
+    return html`
+      <p>To access downloaded books, you need Adobe-compliant software on your device. The Internet Archive will administer this loan, but Adobe may also collect some information.</p>
+      <a class="ia-button external primary" href="https://www.adobe.com/solutions/ebook/digital-editions/download.html" rel="noopener noreferrer" target="_blank">Install Adobe Digital Editions</a>
+    `;
+  }
+
+  render() {
+    return html`
+      ${this.header}
+      ${this.loanExpiryMessage}
+      <ul>${this.renderDownloadOptions()}</ul>
+      ${this.isBookProtected ? this.accessProtectedBook : nothing}
+    `;
+  }
+
+  static get styles() {
+    const mainCss = css`
+      :host {
+        display: block;
+        height: 100%;
+        padding: 1.5rem 0;
+        overflow-y: auto;
+        font-size: 1.4rem;
+        box-sizing: border-box;
+      }
+
+      a.close ia-icon {
+        --iconWidth: 18px;
+        --iconHeight: 18px;
+      }
+      a.close {
+        justify-self: end;
+      }
+
+      header {
+        display: flex;
+        align-items: center;
+        padding: 0 2rem;
+      }
+      header p {
+        padding: 0;
+        margin: 0;
+        font-size: 1.2rem;
+        font-weight: bold;
+        font-style: italic;
+      }
+      header div {
+        display: flex;
+        align-items: baseline;
+      }      
+
+      h2 {
+        font-size: 1.6rem;
+      }
+
+      h3 {
+        padding: 0;
+        margin: 0 1rem 0 0;
+        font-size: 1.4rem;
+      }
+
+      ul {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+      }
+
+      p {
+        margin: .3rem 0 0 0;
+      }
+
+      li,
+      ul + p {
+        padding-bottom: 1.2rem;
+        font-size: 1.2rem;
+        line-height: 140%;
+      }
+    `;
+
+    return [buttonStyles, mainCss];
+  }
+}

package/src/BookNavigator/search/a-search-result.js

@@ -0,0 +1,55 @@
+import { nothing } from 'lit-html';
+import { html, LitElement } from 'lit-element';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+
+export class BookSearchResult extends LitElement {
+  static get properties() {
+    return {
+      match: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.matchRegex = new RegExp('{{{(.+?)}}}', 'g');
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  highlightedHit(hit) {
+    return html`
+      <p>${unsafeHTML(hit.replace(this.matchRegex, '<mark>$1</mark>'))}</p>
+    `;
+  }
+
+  resultSelected() {
+    this.dispatchEvent(new CustomEvent('resultSelected', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        match: this.match,
+      },
+    }));
+  }
+
+  render() {
+    const { match } = this;
+    const { par = [] } = match;
+    const [resultDetails = {}] = par;
+    const pageNumber = Number.isInteger(resultDetails.page)
+      ? html`<p class="page-num">Page -${resultDetails.page}-</p>` : nothing;
+    const coverImage = html`<img src="${match.cover}" />`;
+    return html`
+      <li @click=${this.resultSelected}>
+        ${match.cover ? coverImage : nothing}
+        <h4>${match.title || nothing}</h4>
+        ${pageNumber}
+        ${this.highlightedHit(match.text)}
+      </li>
+    `;
+  }
+}
+customElements.define('book-search-result', BookSearchResult);

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

@@ -0,0 +1,180 @@
+import { html } from 'lit-element';
+import { nothing } from 'lit-html';
+
+import './search-results';
+
+let searchState = {
+  query: '',
+  results: [],
+  resultsCount: 0,
+  queryInProgress: false,
+  errorMessage: '',
+};
+export default class {
+  constructor(onSearchChange = () => {}, brInstance) {
+    /* search menu events */
+    this.onBookSearchInitiated = this.onBookSearchInitiated.bind(this);
+    /* bookreader search events */
+    this.onSearchStarted = this.onSearchStarted.bind(this);
+    this.onSearchRequestError = this.onSearchRequestError.bind(this);
+    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.label = 'Search inside';
+    this.menuDetails = this.getMenuDetails();
+    this.id = 'search';
+    this.component = this.getComponent();
+    this.bindEventListeners();
+  }
+
+  getMenuDetails() {
+    const { resultsCount, query, queryInProgress } = searchState;
+    if (queryInProgress || !query) { return nothing; }
+    const unit = resultsCount === 1 ? 'result' : 'results';
+    return html`(${resultsCount} ${unit})`;
+  }
+
+  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: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);
+  }
+
+  onSearchStarted(e) {
+    const { term = '' } = e.detail.props;
+    searchState.query = term;
+    searchState.results = [];
+    searchState.resultsCount = 0;
+    searchState.queryInProgress = true;
+    searchState.errorMessage = '';
+    this.updateMenu();
+  }
+
+  onBookSearchInitiated({ detail }) {
+    searchState.query = detail.query;
+    this.bookreader.search(searchState.query);
+  }
+
+  onSearchRequestError(event, errorType = 'default') {
+    const { detail: { props = {} } } = event;
+    const { instance = null } = props;
+    if (instance) {
+      /* keep bookreader instance reference up-to-date */
+      this.bookreader = instance;
+    }
+    const errorMessages = {
+      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.  Please try again.',
+    };
+
+    const messageToShow = errorMessages[errorType] ?? errorMessages.default;
+    searchState.results = [];
+    searchState.resultsCount = 0;
+    searchState.queryInProgress = false;
+    searchState.errorMessage = html`<p class="error">${messageToShow}</p>`;
+    this.updateMenu();
+  }
+
+  onSearchResultsChange({ detail: { props = {} } }) {
+    const { instance = null, results: searchResults = [] } = props;
+    if (instance) {
+      /* keep bookreader instance reference up-to-date */
+      this.bookreader = instance;
+    }
+    const results = searchResults.matches || [];
+    const resultsCount = results.length;
+    const query = searchResults.q;
+    const queryInProgress = false;
+    searchState = { results, resultsCount, query, queryInProgress, errorMessage: '' };
+    this.updateMenu();
+  }
+
+  searchCanceledInMenu() {
+    this.bookreader?.cancelSearchRequest();
+  }
+
+  onSearchResultsCleared() {
+    searchState = {
+      query: '',
+      results: [],
+      resultsCount: 0,
+      queryInProgress: false,
+      errorMessage: '',
+    };
+    this.updateMenu();
+    this.bookreader?.searchView?.clearSearchFieldAndResults();
+  }
+
+  /**
+   * 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, searchUpdates);
+  }
+
+  getComponent() {
+    const { query, results, queryInProgress, errorMessage } = searchState;
+    return html`
+    <ia-book-search-results
+      .query=${query}
+      .results=${results}
+      .errorMessage=${errorMessage}
+      ?queryInProgress=${queryInProgress}
+      ?renderSearchAllFiles=${false}
+      @resultSelected=${this.onSearchResultsClicked}
+      @bookSearchInitiated=${this.onBookSearchInitiated}
+      @bookSearchResultsCleared=${this.onSearchResultsCleared}
+      @bookSearchCanceled=${this.searchCanceledInMenu}
+    ></ia-book-search-results>
+  `;
+  }
+
+  onSearchResultsClicked({ detail }) {
+    const page = detail.match.par[0].page;
+    this.advanceToPage(page);
+  }
+
+  advanceToPage(leaf) {
+    const page = this.bookreader.leafNumToIndex(leaf);
+    this.bookreader._searchPluginGoToResult(page);
+  }
+}