@internetarchive/bookreader 5.0.0-11-multiple-files → 5.0.0-110

package/src/{BookNavigator → plugins}/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 */
@@ -20,16 +26,22 @@ 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
+        aria-hidden="true" role="presentation"
+        style="width: var(--iconWidth); height: var(--iconHeight);"
+      ></ia-icon-search>`;
     this.label = 'Search inside';
     this.menuDetails = this.getMenuDetails();
     this.id = 'search';
@@ -39,7 +51,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 +59,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;
@@ -68,21 +106,25 @@ 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 = {
       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 = results?.q || '';
     searchState.results = [];
     searchState.resultsCount = 0;
     searchState.queryInProgress = false;
@@ -104,6 +146,10 @@ export default class {
     this.updateMenu();
   }
 
+  searchCanceledInMenu() {
+    this.bookreader.plugins.search.cancelSearchRequest();
+  }
+
   onSearchResultsCleared() {
     searchState = {
       query: '',
@@ -111,15 +157,34 @@ export default class {
       resultsCount: 0,
       queryInProgress: false,
       errorMessage: '',
+    };
+    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');
+      }
     }
-    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 +199,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.plugins.search.jumpToMatch(detail.match.matchIndex);
   }
 }

package/src/{BookNavigator → plugins}/search/search-results.js

@@ -1,11 +1,17 @@
 /* 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 checkmarkIcon from '../assets/icon_checkmark.js';
-import closeIcon from '../assets/icon_close.js';
-
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { css, html, LitElement, nothing } from 'lit';
+import '@internetarchive/ia-activity-indicator';
+import checkmarkIconTemplate from '../../css/icon_checkmark.js';
+import closeIconTemplate from '@internetarchive/icon-close/index.js';
+import buttonCSS from '../../css/button-base.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { sharedStyles } from '../../css/sharedStyles.js';
+import { svgToDataUrl } from '../../util/lit.js';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideMatch} SearchInsideMatch */
+
+const checkmarkIconData = svgToDataUrl(checkmarkIconTemplate);
+const closeIconData = svgToDataUrl(closeIconTemplate);
 
 export class IABookSearchResults extends LitElement {
   static get properties() {
@@ -15,7 +21,6 @@ export class IABookSearchResults extends LitElement {
       queryInProgress: { type: Boolean },
       renderHeader: { type: Boolean },
       renderSearchAllFiles: { type: Boolean },
-      displayResultImages: { type: Boolean },
       errorMessage: { type: String },
     };
   }
@@ -23,12 +28,12 @@ export class IABookSearchResults extends LitElement {
   constructor() {
     super();
 
+    /** @type {SearchInsideMatch[]} */
     this.results = [];
     this.query = '';
     this.queryInProgress = false;
     this.renderHeader = false;
-    this.renderSearchAllFields = false;
-    this.displayResultImages = false;
+    this.renderSearchAllFiles = false;
     this.errorMessage = '';
 
     this.bindBookReaderListeners();
@@ -60,6 +65,9 @@ export class IABookSearchResults extends LitElement {
 
   setQuery(e) {
     this.query = e.currentTarget.value;
+    if (!this.query) {
+      this.cancelSearch();
+    }
   }
 
   performSearch(e) {
@@ -77,7 +85,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,21 +106,18 @@ export class IABookSearchResults extends LitElement {
   }
 
   dispatchSearchCanceled() {
-    this.dispatchEvent(new CustomEvent('bookSearchCanceled', {
-      bubbles: true,
-      composed: true,
-    }));
+    this.dispatchEvent(new Event('bookSearchCanceled'));
   }
 
   get resultsCount() {
     const count = this.results.length;
-    return count ? html`<p>(${count} result${count > 1 ? 's' : ''})</p>` : nothing;
+    return count ? `${count} result${count > 1 ? 's' : ''}` : nothing;
   }
 
   get headerSection() {
     const header = html`<header>
       <h3>Search inside</h3>
-      ${this.resultsCount}
+      ${this.resultsCount ? html`(${this.resultsCount})` : nothing}
     </header>`;
     return this.renderHeader ? header : nothing;
   }
@@ -120,40 +133,45 @@ export class IABookSearchResults extends LitElement {
   get loadingIndicator() {
     return html`
       <div class="loading">
-        <ia-activity-indicator mode="processing"></ia-activity-indicator>
+        <ia-activity-indicator mode="processing" aria-hidden="true" role="presentation"></ia-activity-indicator>
         <p>Searching</p>
+        <button class="ia-button external cancel-search" @click=${this.cancelSearch}>Cancel</button>
       </div>
     `;
   }
 
   get resultsSet() {
-    const resultsClass = this.displayResultImages ? 'show-image' : '';
     return html`
-      <ul class="results ${resultsClass}">
+    <nav aria-label="Search results">
+      <div>
+        ${this.resultsCount}
+        <a
+          href="#"
+          class="skip-link"
+          @click=${(e) => {
+      e.preventDefault();
+      this.shadowRoot.querySelector('.results li:last-child .result-item').focus();
+    }}
+        >Skip to last result</a>
+      </div>
+      <ul class="results">
         ${this.results.map(match => html`
-            <book-search-result
-              .match=${match}
-              @resultSelected=${this.selectResult}
-            ></book-search-result>
+            <li>
+              <button class="result-item" @click=${this.selectResult.bind(this, match)}>
+                <span class="page-num">Page ${match.displayPageNumber}</span> — <span lang=${ifDefined(match.lang)}>${unsafeHTML(match.html)}</span>
+              </button>
+            </li>
           `)}
       </ul>
-    `;
-  }
-
-  get searchForm() {
-    return html`
-      <form action="" method="get" @submit=${this.performSearch}>
-        <fieldset>
-          ${this.searchMultipleControls}
-          <input
-            type="search"
-            name="query"
-            alt="Search inside this book."
-            @keyup=${this.setQuery}
-            .value=${this.query}
-          />
-        </fieldset>
-      </form>
+        <a
+          href="#"
+          class="skip-link"
+          @click=${(e) => {
+      e.preventDefault();
+      this.shadowRoot.querySelector('.results li:first-child .result-item').focus();
+    }}
+        >Skip to first result</a>
+    </nav>
     `;
   }
 
@@ -163,21 +181,29 @@ export class IABookSearchResults extends LitElement {
     `;
   }
 
-  get searchCTA() {
-    return html`<p class="search-cta"><em>Please enter text to search for</em></p>`;
-  }
-
   render() {
     const showSearchCTA = (!this.queryInProgress && !this.errorMessage)
     && (!this.queryInProgress && !this.results.length);
     return html`
       ${this.headerSection}
-      ${this.searchForm}
-      <div class="results-container">
+      <form action="" method="get" @submit=${this.performSearch}>
+        ${this.searchMultipleControls}
+        <input
+          type="search"
+          name="query"
+          id="br-search-input"
+          @keyup=${this.setQuery}
+          @search=${this.setQuery}
+          .value=${this.query}
+        />
+        <label class="search-cta ${showSearchCTA ? '' : 'sr-only'}" for="br-search-input">
+          Please enter text to search for
+        </label>
+      </form>
+      <div class="results-container" aria-live="polite">
         ${this.queryInProgress ? this.loadingIndicator : nothing}
         ${this.errorMessage ? this.setErrorMessage : nothing}
         ${this.results.length ? this.resultsSet : nothing}
-        ${showSearchCTA ? this.searchCTA : nothing}
       </div>
     `;
   }
@@ -188,7 +214,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%;
@@ -198,6 +224,15 @@ export class IABookSearchResults extends LitElement {
         box-sizing: border-box;
       }
 
+      .skip-link {
+        position: absolute;
+        left: -9999px;
+      }
+      .skip-link:focus {
+        position: static;
+        left: auto;
+      }
+
       mark {
         padding: 0 .2rem;
         color: ${searchResultText};
@@ -225,9 +260,8 @@ export class IABookSearchResults extends LitElement {
         font-style: italic;
       }
 
-      fieldset {
+      form {
         padding: 0 0 1rem 0;
-        border: none;
       }
 
       [type="checkbox"] {
@@ -255,7 +289,7 @@ export class IABookSearchResults extends LitElement {
         border-radius: 2px;
       }
       :checked + label.checkbox:after {
-        background-image: url('${checkmarkIcon}');
+        background-image: url('${checkmarkIconData}');
       }
 
       label.checkbox[for="all_files"]:after {
@@ -269,7 +303,7 @@ export class IABookSearchResults extends LitElement {
         -webkit-appearance: textfield;
         width: 100%;
         height: 3rem;
-        padding: 0 1.5rem;
+        padding: 0 10px;
         box-sizing: border-box;
         font: normal 1.6rem "Helvetica qNeue", Helvetica, Arial, sans-serif;
         border-radius: 1.5rem;
@@ -281,22 +315,25 @@ export class IABookSearchResults extends LitElement {
       [type="search"]::-webkit-search-cancel-button {
         width: 18px;
         height: 18px;
+        margin-right: -5px;
         -webkit-appearance: none;
         appearance: none;
-        -webkit-mask: url('${closeIcon}') 0 0 no-repeat;
-        mask: url('${closeIcon}') 0 0 no-repeat;
+        -webkit-mask: url('${closeIconData}') 0 0 no-repeat;
+        mask: url('${closeIconData}') 0 0 no-repeat;
         -webkit-mask-size: 100%;
         mask-size: 100%;
         background: #fff;
       }
 
-      p.page-num {
+      .page-num {
         font-weight: bold;
         padding-bottom: 0;
       }
 
-      p.search-cta {
+      .search-cta {
+        padding: 10px 0;
         text-align: center;
+        font-style: italic;
       }
 
       .results-container {
@@ -309,33 +346,24 @@ export class IABookSearchResults extends LitElement {
         list-style: none;
       }
 
-      ul.show-image li {
-        display: grid;
-      }
-
-      li {
+      .result-item {
         cursor: pointer;
-        grid-template-columns: 30px 1fr;
-        grid-gap: 0 .5rem;
-      }
-
-      li img {
+        margin-top: 8px;
+        font-size: 12px;
+        padding: 5px;
+        border-radius: 4px;
         display: block;
         width: 100%;
+        /* Reset button styles */
+        background: none;
+        border: none;
+        text-align: left;
+        font-family: inherit;
+        transition: background-color 0.2s;
       }
 
-      li h4 {
-        grid-column: 2 / 3;
-        padding: 0 0 2rem 0;
-        margin: 0;
-        font-weight: normal;
-      }
-
-      li p {
-        grid-column: 2 / 3;
-        padding: 0 0 1.5rem 0;
-        margin: 0;
-        font-size: 1.2rem;
+      .result-item:hover {
+        background-color: rgba(255, 255, 255, 0.1);
       }
 
       .loading {
@@ -348,17 +376,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 +383,7 @@ export class IABookSearchResults extends LitElement {
         margin: 0 auto;
       }
     `;
+    return [sharedStyles, buttonCSS, mainCSS];
   }
 }
 customElements.define('ia-book-search-results', IABookSearchResults);

package/src/plugins/search/utils.js

@@ -0,0 +1,50 @@
+// @ts-check
+import { escapeHTML, escapeRegExp } from '../../BookReader/utils.js';
+/** @typedef {import('@/src/plugins/search/plugin.search.js').SearchInsideResults} SearchInsideResults */
+/** @typedef {import('@/src/plugins/search/plugin.search.js').LeafNum} LeafNum */
+/** @typedef {import('@/src/plugins/search/plugin.search.js').PageNumString} PageNumString */
+
+/**
+ * @param {string} match
+ * @param {string} preTag
+ * @param {string} postTag
+ * @returns {string}
+ */
+export function renderMatch(match, preTag, postTag) {
+  // Search results are returned as a text blob with the hits wrapped in
+  // triple mustaches. Hits occasionally include text beyond the search
+  // term, so everything within the staches is captured and wrapped.
+  const preTagRe = escapeRegExp(escapeHTML(preTag));
+  const postTagRe = escapeRegExp(escapeHTML(postTag));
+  // [^] matches any character, including line breaks
+  const regex = new RegExp(`${preTagRe}([^]+?)${postTagRe}`, 'g');
+  return escapeHTML(match)
+    .replace(regex, '<mark>$1</mark>')
+    // Fix trailing hyphens. This over-corrects but is net useful.
+    .replace(/(\b)- /g, '$1');
+}
+
+/**
+ * Attach some fields to search inside results
+ * @param {SearchInsideResults} results
+ * @param {(pageNum: LeafNum) => PageNumString} displayPageNumberFn
+ * @param {string} preTag
+ * @param {string} postTag
+ * @param {string | null} bookLanguage The ISO 639-1 language code of the book
+ */
+export function marshallSearchResults(results, displayPageNumberFn, preTag, postTag, bookLanguage) {
+  // Attach matchIndex to a few things to make it easier to identify
+  // an active/selected match
+
+  for (const [index, match] of results.matches.entries()) {
+    match.matchIndex = index;
+    match.displayPageNumber = displayPageNumberFn(match.par[0].page);
+    match.html = renderMatch(match.text, preTag, postTag);
+    match.lang = bookLanguage;
+    for (const par of match.par) {
+      for (const box of par.boxes) {
+        box.matchIndex = index;
+      }
+    }
+  }
+}