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

package/src/BookNavigator/bookmarks/ia-bookmarks.js

@@ -1,5 +1,6 @@
-import { render, nothing } from 'lit-html';
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css, render } from 'lit';
+// eslint-disable-next-line no-unused-vars
+import { ModalConfig, ModalManager } from '@internetarchive/modal-manager';
 import buttonStyles from '../assets/button-base.js';
 import './bookmarks-loginCTA.js';
 
@@ -57,9 +58,11 @@ class IABookmarks extends LitElement {
       activeBookmarkID: { type: String },
       bookmarks: { type: Array },
       bookreader: { type: Object },
-      options: { type: Object },
       displayMode: { type: String },
       editedBookmark: { type: Object },
+      deleteModalConfig: { type: Object},
+      modal: { attribute: false },
+      loginOptions: { type: Object, attribute: false }
     };
   }
 
@@ -92,7 +95,12 @@ class IABookmarks extends LitElement {
     this.bookmarks = [];
     this.bookreader = {};
     this.editedBookmark = {};
-    this.options = {};
+    /** @type {ModalManager} */
+    this.modal = undefined;
+    this.loginOptions = {
+      loginClicked: () => {},
+      loginUrl: '',
+    };
     /**
      * Toggles display to either bookmarks or login cta
      * @param {('bookmarks'|'login')} displayMode
@@ -113,21 +121,45 @@ class IABookmarks extends LitElement {
     // eslint-disable-next-line
     this.defaultColor = this.bookmarkColors[0];
     this.api = api;
+    this.deleteModalConfig = new ModalConfig({
+      title: 'Delete Bookmark',
+      headline: 'This bookmark contains a note. Deleting it will permanently delete the note. Are you sure?',
+      headerColor: '#194880',
+    });
   }
 
-  updated() {
+  updated(changed) {
+    if (changed.has('displayMode')) {
+      this.updateDisplay();
+    }
+
     this.emitBookmarksChanged();
   }
 
   setup() {
     this.api.identifier = this.bookreader.bookId;
-    this.fetchBookmarks()
-      .then(() => this.initializeBookmarks())
-      .catch((err) => this.displayMode = 'login');
+    if (this.displayMode === 'login') {
+      return;
+    }
+    this.fetchUserBookmarks();
+    this.setBREventListeners();
   }
 
-  initializeBookmarks() {
-    this.displayMode = 'bookmarks';
+  updateDisplay() {
+    if (this.displayMode === 'bookmarks') {
+      this.fetchUserBookmarks();
+    }
+  }
+
+  async fetchUserBookmarks() {
+    if (!this.api.identifier) {
+      return;
+    }
+    await this.fetchBookmarks();
+    this.initializeBookmarks();
+  }
+
+  setBREventListeners() {
     ['3PageViewSelected'].forEach((event) => {
       window.addEventListener(`BookReader:${event}`, (e) => {
         setTimeout(() => {
@@ -147,12 +179,12 @@ class IABookmarks extends LitElement {
     });
     ['zoomOut', 'zoomIn', 'resize'].forEach((event) => {
       window.addEventListener(`BookReader:${event}`, () => {
-        if (this.bookreader.mode === this.bookreader.constModeThumb) {
-          this.renderBookmarkButtons();
-        }
+        this.renderBookmarkButtons();
       });
     });
+  }
 
+  initializeBookmarks() {
     this.renderBookmarkButtons();
     this.markActiveBookmark(true);
     this.emitBookmarksChanged();
@@ -194,27 +226,35 @@ class IABookmarks extends LitElement {
     return bookmark;
   }
 
-  fetchBookmarks() {
-    return this.api.getAll().then((res) => res.json()).then(({
+  async fetchBookmarks() {
+    const resText = await this.api.getAll().then(r=> r.text());
+    let parsedResponse;
+    try {
+      parsedResponse = JSON.parse(resText);
+    } catch (e) {
+      parsedResponse = {error : e.message};
+    }
+
+    const {
       success,
       error = 'Something happened while fetching bookmarks.',
       value: bkmrks = [],
-    }) => {
-      if (!success) {
-        throw new Error(`Failed to load bookmarks: ${error}`);
-      }
+    } = parsedResponse;
 
-      const bookmarks = {};
-      Object.keys(bkmrks).forEach((leafNum) => {
-        const bookmark = bkmrks[leafNum];
-        const formattedLeafNum = parseInt(leafNum, 10);
-        const formattedBookmark = this.formatBookmark({ ...bookmark, leafNum: formattedLeafNum });
-        bookmarks[leafNum] = formattedBookmark;
-      });
+    if (!success) {
+      console?.warn('Error fetching bookmarks', error);
+    }
 
-      this.bookmarks = bookmarks;
-      return bookmarks;
+    const bookmarks = {};
+    Object.keys(bkmrks).forEach((leafNum) => {
+      const bookmark = bkmrks[leafNum];
+      const formattedLeafNum = parseInt(leafNum, 10);
+      const formattedBookmark = this.formatBookmark({ ...bookmark, leafNum: formattedLeafNum });
+      bookmarks[leafNum] = formattedBookmark;
     });
+
+    this.bookmarks = bookmarks;
+    return bookmarks;
   }
 
   emitBookmarksChanged() {
@@ -250,7 +290,9 @@ class IABookmarks extends LitElement {
 
     pages.forEach((pageEl) => {
       const existingButton = pageEl.querySelector('.bookmark-button');
-      if (existingButton) { existingButton.remove(); }
+      if (existingButton) {
+        existingButton.remove();
+      }
       const pageID = +pageEl.classList.value.match(/pagediv\d+/)[0].replace(/\D/g, '');
       const pageBookmark = this.getBookmark(pageID);
       const bookmarkState = pageBookmark ? 'filled' : 'hollow';
@@ -390,33 +432,26 @@ class IABookmarks extends LitElement {
   confirmDeletion(pageID) {
     const existingBookmark = this.getBookmark(pageID);
     if (existingBookmark.note) {
-      this.emitShowModal(pageID);
+      this.displayDeletionModal(pageID);
       return;
     }
     this.deleteBookmark({ detail: { id: `${pageID}` } });
   }
 
-  emitShowModal(pageID) {
-    this.dispatchEvent(new CustomEvent('showItemNavigatorModal', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        customModalContent: html`
-          <delete-modal-actions
-            .deleteAction=${() => this.deleteBookmark({ detail: { id: `${pageID}` } })}
-            .cancelAction=${() => this.emitCloseModal()}
-            .pageID=${pageID}
-          ></delete-modal-actions>
-        `,
-      },
-    }));
-  }
+  displayDeletionModal(pageID) {
+    const customModalContent = html`
+      <delete-modal-actions
+        .deleteAction=${() => this.deleteBookmark({ detail: { id: `${pageID}` } })}
+        .cancelAction=${() => this.modal.closeModal()}
+        .pageID=${pageID}
+      ></delete-modal-actions>
+    `;
 
-  emitCloseModal() {
-    this.dispatchEvent(new CustomEvent('closeItemNavigatorModal', {
-      bubbles: true,
-      composed: true,
-    }));
+
+    this.modal.showModal({
+      config: this.deleteModalConfig,
+      customModalContent,
+    });
   }
 
   deleteBookmark({ detail }) {
@@ -427,18 +462,10 @@ class IABookmarks extends LitElement {
 
     this.api.delete(detail.id);
     this.editedBookmark = {};
-    this.emitCloseModal();
+    this.modal.closeModal();
     this.renderBookmarkButtons();
   }
 
-  /**
-   * call `loginClicked` callback
-   */
-  loginClick() {
-    const { loginClicked = () => {} } = this.options;
-    loginClicked();
-  }
-
   /**
    * Tells us if we should allow user to add bookmark via menu panel
    * returns { Boolean }
@@ -460,6 +487,7 @@ class IABookmarks extends LitElement {
     return html`
       <button
         class="ia-button primary"
+        tabindex="-1"
         ?disabled=${this.shouldEnableAddBookmarkButton}
         @click=${this.addBookmark}>
         Add bookmark
@@ -483,15 +511,23 @@ class IABookmarks extends LitElement {
     `;
   }
 
+  get bookmarkHelperMessage() {
+    return html`<p>Please use 1up or 2up view modes to add bookmark.</p>`;
+  }
+
   render() {
-    const { loginUrl } = this.options;
     const bookmarks = html`
       ${this.bookmarksList}
-      ${this.allowAddingBookmark ? this.addBookmarkButton : nothing}
+      ${this.allowAddingBookmark ? this.addBookmarkButton : this.bookmarkHelperMessage}
     `;
     return html`
       <section class="bookmarks">
-        ${this.displayMode === 'login' ? html`<bookmarks-login @click=${this.loginClick} .url=${loginUrl}></bookmarks-login>` : bookmarks}
+      ${ this.displayMode === 'login'
+      ? html`<bookmarks-login
+        @click=${() => this.loginOptions.loginClicked()}
+        .url=${this.loginOptions.loginUrl}></bookmarks-login>`
+      : bookmarks
+      }
       </section>
     `;
   }

package/src/BookNavigator/delete-modal-actions.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
 
 export default class DeleteModalActions extends LitElement {
   static get styles() {

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

@@ -1,10 +1,7 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
+import '@internetarchive/icon-dl/icon-dl';
+import './downloads';
 
-/* register subpanel */
-import { IABookDownloads } from './downloads';
-customElements.define('ia-book-downloads', IABookDownloads);
-
-let downloads = [];
 const menuBase = {
   pdf: {
     type: 'Encrypted Adobe PDF',
@@ -18,25 +15,33 @@ const menuBase = {
   }
 };
 
-export default class {
-  constructor() {
-    this.icon = html`<ia-icon icon="download" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>`;
+const publicMenuBase = {
+  pdf: "PDF",
+  epub: "ePub"
+};
+
+export default class DownloadsProvider {
+
+  constructor({ bookreader }) {
+    this.icon = html`<ia-icon-dl style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon-dl>`;
     this.label = 'Downloadable files';
     this.menuDetails = '';
+    this.downloads = [];
     this.id = 'downloads';
     this.component = '';
+    this.isBookProtected = bookreader?.options?.isProtected || false;
 
     this.computeAvailableTypes = this.computeAvailableTypes.bind(this);
     this.update = this.update.bind(this);
   }
 
-
   update(downloadTypes) {
     this.computeAvailableTypes(downloadTypes);
     this.component = this.menu;
+    this.component.isBookProtected = this.isBookProtected;
 
-    const ending = downloads.length === 1 ? '' : 's';
-    this.menuDetails = `(${downloads.length} format${ending})`;
+    const ending = this.downloads.length === 1 ? '' : 's';
+    this.menuDetails = `(${this.downloads.length} format${ending})`;
   }
 
   /**
@@ -45,22 +50,23 @@ export default class {
    * @param  availableTypes
    */
   computeAvailableTypes(availableTypes = []) {
-    const menuData = availableTypes.reduce((found, incoming = [], index) => {
+    const menuData = availableTypes.reduce((found, incoming = []) => {
       const [ type = '', link = '' ] = incoming;
       const formattedType = type.toLowerCase();
       const downloadOption = menuBase[formattedType] || null;
+
       if (downloadOption) {
-        const menuInfo = Object.assign({}, downloadOption, { url: link });
+        const menuButtonText = this.isBookProtected ? menuBase[formattedType].type : publicMenuBase[formattedType];
+        const menuInfo = Object.assign({}, downloadOption, { url: link,  type: menuButtonText});
         found.push(menuInfo);
       }
       return found;
     }, []);
 
-    downloads = menuData;
+    this.downloads = menuData;
   }
 
-
   get menu () {
-    return html`<ia-book-downloads .downloads=${downloads}></ia-book-downloads>`;
+    return html`<ia-book-downloads .downloads=${this.downloads}></ia-book-downloads>`;
   }
 }

package/src/BookNavigator/downloads/downloads.js

@@ -1,11 +1,12 @@
-import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
+import { css, html, LitElement, nothing } from 'lit';
+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 },
     };
   }
 
@@ -14,6 +15,7 @@ export class IABookDownloads extends LitElement {
     this.downloads = [];
     this.expiration = 0;
     this.renderHeader = false;
+    this.isBookProtected = false;
   }
 
   get formatsCount() {
@@ -31,7 +33,7 @@ export class IABookDownloads extends LitElement {
     return this.downloads.map(option => (
       html`
         <li>
-          <a class="button" href="${option.url}">Get ${option.type}</a>
+          <a class="ia-button link primary" href="${option.url}">Get ${option.type}</a>
           ${option.note ? html`<p>${option.note}</p>` : html``}
         </li>
       `
@@ -50,18 +52,24 @@ export class IABookDownloads extends LitElement {
     `;
   }
 
+  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>
-      <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="button external" href="https://www.adobe.com/solutions/ebook/digital-editions/download.html" rel="noopener noreferrer" target="_blank">Install Adobe Digital Editions</a>
+      ${this.isBookProtected ? this.accessProtectedBook : nothing}
     `;
   }
 
   static get styles() {
-    return css`
+    const mainCss = css`
       :host {
         display: block;
         height: 100%;
@@ -79,24 +87,6 @@ export class IABookDownloads extends LitElement {
         justify-self: end;
       }
 
-      .button {
-        color: var(--primaryTextColor);
-        background: var(--primaryCTAFill);
-        border: 1px solid var(--primaryCTABorder);
-        display: inline-block;
-        padding: .6rem 1rem;
-        font-size: 1.4rem;
-        text-decoration: none;
-        text-shadow: 1px 1px #484848;
-        border-radius: 4px;
-      }
-
-      .button.external {
-        background: var(--secondaryCTAFill, transparent);
-        border: 1px solid var(--secondaryCTABorder, #999);
-        text-shadow: none;
-      }
-
       header {
         display: flex;
         align-items: center;
@@ -109,7 +99,6 @@ export class IABookDownloads extends LitElement {
         font-weight: bold;
         font-style: italic;
       }
-      
       header div {
         display: flex;
         align-items: baseline;
@@ -142,5 +131,8 @@ export class IABookDownloads extends LitElement {
         line-height: 140%;
       }
     `;
+
+    return [buttonStyles, mainCss];
   }
 }
+customElements.define('ia-book-downloads', IABookDownloads);

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

@@ -1,6 +1,5 @@
-import { nothing } from 'lit-html';
-import { html, LitElement } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html, LitElement, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export class BookSearchResult extends LitElement {
   static get properties() {
@@ -52,3 +51,4 @@ export class BookSearchResult extends LitElement {
     `;
   }
 }
+customElements.define('book-search-result', BookSearchResult);

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

@@ -1,9 +1,6 @@
-import { html } from 'lit-element';
-import { nothing } from 'lit-html';
-
-/* instantiate web component */
-import { IABookSearchResults } from './search-results';
-customElements.define('ia-book-search-results', IABookSearchResults);
+import { html, nothing } from 'lit';
+import '@internetarchive/icon-search/icon-search';
+import './search-results';
 
 let searchState = {
   query: '',
@@ -12,8 +9,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 */
@@ -22,6 +22,8 @@ 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);
@@ -29,9 +31,9 @@ export default class {
     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;
+    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';
@@ -41,7 +43,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})`;
   }
@@ -49,14 +51,36 @@ 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);
   }
 
   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;
@@ -81,10 +105,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;
@@ -106,6 +131,10 @@ export default class {
     this.updateMenu();
   }
 
+  searchCanceledInMenu() {
+    this.bookreader?.cancelSearchRequest();
+  }
+
   onSearchResultsCleared() {
     searchState = {
       query: '',
@@ -113,15 +142,19 @@ export default class {
       resultsCount: 0,
       queryInProgress: false,
       errorMessage: '',
-    }
-    this.updateMenu();
-    this.bookreader?.searchView?.clearSearchFieldAndResults();
+    };
+    this.updateMenu({ openMenu: false });
+    this.bookreader?.searchView?.clearSearchFieldAndResults(false);
   }
 
-  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() {
@@ -136,6 +169,7 @@ export default class {
       @resultSelected=${this.onSearchResultsClicked}
       @bookSearchInitiated=${this.onBookSearchInitiated}
       @bookSearchResultsCleared=${this.onSearchResultsCleared}
+      @bookSearchCanceled=${this.searchCanceledInMenu}
     ></ia-book-search-results>
   `;
   }
@@ -148,6 +182,5 @@ export default class {
   advanceToPage(leaf) {
     const page = this.bookreader.leafNumToIndex(leaf);
     this.bookreader._searchPluginGoToResult(page);
-    this.bookreader.updateSearchHilites();
   }
 }