@internetarchive/bookreader 5.0.0-26 → 5.0.0-29

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

@@ -1,5 +1,7 @@
-import { render, nothing } from 'lit-html';
+import { render } from 'lit-html';
 import { LitElement, html, css } from 'lit-element';
+// 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 +59,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 +96,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,9 +122,18 @@ 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();
   }
 
@@ -124,13 +142,24 @@ class IABookmarks extends LitElement {
     if (this.displayMode === 'login') {
       return;
     }
+    this.setBREventListeners();
+    this.initializeBookmarks();
+  }
+
+  updateDisplay() {
+    if (this.displayMode === 'bookmarks') {
+      this.fetchUserBookmarks();
+    }
+  }
+
+  fetchUserBookmarks() {
     this.fetchBookmarks()
-      .then(() => this.initializeBookmarks())
-      .catch((err) => this.displayMode = 'login');
+      .then(() => {
+        this.initializeBookmarks();
+      });
   }
 
-  initializeBookmarks() {
-    this.displayMode = 'bookmarks';
+  setBREventListeners() {
     ['3PageViewSelected'].forEach((event) => {
       window.addEventListener(`BookReader:${event}`, (e) => {
         setTimeout(() => {
@@ -150,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();
@@ -198,13 +227,22 @@ class IABookmarks extends LitElement {
   }
 
   fetchBookmarks() {
-    return this.api.getAll().then((res) => res.json()).then(({
-      success,
-      error = 'Something happened while fetching bookmarks.',
-      value: bkmrks = [],
-    }) => {
+    return this.api.getAll().then((res) => {
+      let response;
+      try {
+        response = JSON.parse(res);
+      } catch (e) {
+        response = { error: e.message };
+      }
+      return response;
+    }).then((response) => {
+      const {
+        success,
+        error = 'Something happened while fetching bookmarks.',
+        value: bkmrks = [],
+      } = response;
       if (!success) {
-        throw new Error(`Failed to load bookmarks: ${error}`);
+        console?.warn('Error fetching bookmarks', error);
       }
 
       const bookmarks = {};
@@ -253,7 +291,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';
@@ -393,33 +433,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 }) {
@@ -430,18 +463,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 }
@@ -487,15 +512,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/downloads/downloads-provider.js

@@ -1,9 +1,6 @@
 import { html } from 'lit-element';
-
-/* register subpanel */
-import { IABookDownloads } from './downloads';
-
-customElements.define('ia-book-downloads', IABookDownloads);
+import '@internetarchive/icon-dl/icon-dl';
+import './downloads';
 
 const menuBase = {
   pdf: {
@@ -25,14 +22,14 @@ const publicMenuBase = {
 
 export default class DownloadsProvider {
 
-  constructor(isBookProtected) {
-    this.icon = html`<ia-icon icon="download" style="width: var(--iconWidth); height: var(--iconHeight);"></ia-icon>`;
+  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 = isBookProtected;
+    this.isBookProtected = bookreader?.options?.isProtected || false;
 
     this.computeAvailableTypes = this.computeAvailableTypes.bind(this);
     this.update = this.update.bind(this);
@@ -72,5 +69,4 @@ export default class DownloadsProvider {
   get menu () {
     return html`<ia-book-downloads .downloads=${this.downloads}></ia-book-downloads>`;
   }
-
 }

package/src/BookNavigator/downloads/downloads.js

@@ -136,3 +136,4 @@ export class IABookDownloads extends LitElement {
     return [buttonStyles, mainCss];
   }
 }
+customElements.define('ia-book-downloads', IABookDownloads);

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

@@ -1,6 +1,6 @@
 import { html } from 'lit-element';
 import { nothing } from 'lit-html';
-
+import '@internetarchive/icon-search/icon-search';
 import './search-results';
 
 let searchState = {
@@ -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 */
@@ -29,9 +32,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';
@@ -75,7 +78,10 @@ export default class {
   }
 
   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;
@@ -104,6 +110,7 @@ export default class {
     };
 
     const messageToShow = errorMessages[errorType] ?? errorMessages.default;
+    searchState.query = instance?.searchResults?.q || '';
     searchState.results = [];
     searchState.resultsCount = 0;
     searchState.queryInProgress = false;
@@ -148,7 +155,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() {

package/src/BookNavigator/sharing.js

@@ -0,0 +1,27 @@
+import { html } from 'lit-element';
+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 '@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';
@@ -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/volumes/volumes-provider.js

@@ -7,16 +7,26 @@ 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 {
-
-  constructor(baseHost, bookreader, optionChange) {
-    this.optionChange = optionChange;
+  /**
+   * @param {import('../../BookReader').default} bookreader
+   */
+  constructor({ baseHost, bookreader, onProviderChange }) {
+    this.onProviderChange = onProviderChange;
     this.component = document.createElement("viewable-files");
 
     const files = bookreader.options.multipleBooksList.by_subprefix;
     this.viewableFiles = Object.keys(files).map(item => files[item]);
     this.volumeCount = Object.keys(files).length;
 
+    /** @type {import('../../BookReader').default} */
+    this.bookreader = bookreader;
+
     this.component.subPrefix = bookreader.options.subPrefix || "";
     this.component.hostUrl = baseHost;
     this.component.viewableFiles = this.viewableFiles;
@@ -25,20 +35,30 @@ export default class VolumesProvider {
     this.label = `Viewable files (${this.volumeCount})`;
     this.icon = html`${volumesIcon}`;
 
-    this.sortOrderBy = "orig_sort";
-    this.sortVolumes("orig_sort");
+    this.sortOrderBy = sortType.default;
+
+    // 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 sortButton() {
     const sortIcons = {
-      orig_sort: html`
+      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("orig_sort")}>${sortDescIcon}</button>
+        <button class="sort-by desc-icon" aria-label="Sort volumes in descending order" @click=${() => this.sortVolumes("default")}>${sortDescIcon}</button>
       `,
     };
 
@@ -46,28 +66,39 @@ export default class VolumesProvider {
   }
 
   /**
-   * @param {'orig_sort' | 'title_asc' | 'title_desc'} sortByType
+   * @param {'default' | 'title_asc' | 'title_desc'} sortByType
    */
   sortVolumes(sortByType) {
     let sortedFiles = [];
 
     const files = this.viewableFiles;
     sortedFiles = files.sort((a, b) => {
-      if (sortByType === 'orig_sort') return a.orig_sort - b.orig_sort;
-      else if (sortByType === 'title_asc') return a.title.localeCompare(b.title);
-      else return b.title.localeCompare(a.title);
+      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;
-    this.optionChange(this.bookreader);
+
+    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');
+      }
+    }
+
+    this.onProviderChange(this.bookreader);
 
     this.multipleFilesClicked(sortByType);
   }
 
   /**
-   * @param {'orig_sort' | 'title_asc' | 'title_desc'} orderBy
+   * @param {'default' | 'title_asc' | 'title_desc'} orderBy
    */
   multipleFilesClicked(orderBy) {
     if (!window.archive_analytics) {

package/src/BookNavigator/volumes/volumes.js

@@ -8,13 +8,15 @@ export class Volumes extends LitElement {
       subPrefix: { type: String },
       hostUrl: { type: String },
       viewableFiles: { type: Array },
+      sortOrderBy: { type: String },
     };
   }
 
   constructor() {
     super();
-    this.subPrefix = '';
     this.hostUrl = '';
+    this.sortOrderBy = '';
+    this.subPrefix = '';
     this.viewableFiles = [];
   }
 
@@ -36,10 +38,14 @@ export class Volumes extends LitElement {
   }
 
   volumeItemWithImageTitle(item) {
+    const hrefUrl = this.sortOrderBy === 'default'
+      ? `${this.hostUrl}${item.url_path}`
+      : `${this.hostUrl}${item.url_path}?sort=${this.sortOrderBy}`;
+
     return html`
       <li class="content active">
         <div class="separator"></div>
-        <a class="container" href="${this.hostUrl}${item.url_path}">
+        <a class="container" href="${hrefUrl}">
           <div class="image">
             <img src="${item.image}">
           </div>
@@ -54,11 +60,16 @@ export class Volumes extends LitElement {
 
   volumeItem(item) {
     const activeClass = this.subPrefix === item.file_subprefix ? ' active' : '';
+
+    const hrefUrl = this.sortOrderBy === 'default'
+      ? `${this.hostUrl}${item.url_path}`
+      : `${this.hostUrl}${item.url_path}?sort=${this.sortOrderBy}`;
+
     return html`
       <li>
         <div class="separator"></div>
         <div class="content${activeClass}">
-          <a href="https://${this.hostUrl}${item.url_path}">
+          <a href="https://${hrefUrl}">
             <p class="item-title">${item.title}</p>
           </a>
         </div>

package/src/BookReader/options.js

@@ -279,6 +279,12 @@ export const DEFAULT_OPTIONS = {
    */
   startFullscreen: false,
 
+  /**
+   * @type {Boolean}
+   * will show logo at fullscreen mode
+  */
+  enableFSLogoShortcut: false,
+
   /**
    * @type {Boolean}
    * On init, by default, we want to handle resizing bookreader