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

package/src/{BookNavigator → plugins}/bookmarks/bookmarks-list.js

@@ -1,9 +1,8 @@
-import { nothing } from 'lit-html';
-import { repeat } from 'lit-html/directives/repeat.js';
-import { css, html, LitElement } from 'lit-element';
+import { repeat } from 'lit/directives/repeat.js';
+import { css, html, LitElement, nothing } from 'lit';
 import './bookmark-edit.js';
 import '@internetarchive/icon-edit-pencil/icon-edit-pencil.js';
-import bookmarkColorsCSS from '../assets/bookmark-colors.js';
+import bookmarkColorsCSS from './bookmark-colors.js';
 
 export class IABookmarksList extends LitElement {
   static get properties() {
@@ -100,24 +99,23 @@ export class IABookmarksList extends LitElement {
     const { className } = this.bookmarkColorInfo(bookmark.color);
     const activeClass = bookmark.id === this.activeBookmarkID ? 'active' : '';
     return html`
-      <li
-        @click=${() => this.emitSelectedEvent(bookmark)}
-        tabindex="0"
-        data-pageIndex=${bookmark.id}
-      >
+      <li data-pageIndex=${bookmark.id}>
         <div class="separator"></div>
-        <div class="content ${activeClass}">
-          <button
-            class="edit"
-            @click=${e => this.editBookmark(e, bookmark)}
-            title="Edit this bookmark"
-          >
-            <ia-icon-edit-pencil></ia-icon-edit-pencil>
-          </button>
-          <h4>
-            <icon-bookmark class=${className}></icon-bookmark>
-            <span> Page ${bookmark.page}</span>
-          </h4>
+        <div class="bookmark-card ${activeClass}">
+          <div class="bookmark-header" @click=${() => this.emitSelectedEvent(bookmark)}>
+            <button>
+              <icon-bookmark class=${className} aria-label="${className} bookmark"></icon-bookmark>
+              <span> Page ${bookmark.page}</span>
+            </button>
+            <button
+              class="edit"
+              @click=${e => this.editBookmark(e, bookmark)}
+              title="Edit this bookmark"
+              aria-expanded=${editMode ? 'true' : 'false'}
+            >
+              <ia-icon-edit-pencil aria-hidden="true"></ia-icon-edit-pencil>
+            </button>
+          </div>
           ${!editMode && bookmark.note ? html`<p>${bookmark.note}</p>` : nothing}
           ${editMode ? this.editBookmarkComponent : nothing}
         </div>
@@ -209,19 +207,24 @@ export class IABookmarksList extends LitElement {
         font-style: italic;
       }
 
-      h4 {
+      .bookmark-header {
+        display: flex;
+        align-items: center;
         margin: 0;
         font-size: 1.4rem;
+        font-weight: bold;
       }
-      h4 * {
-        display: inline-block;
-      }
-      h4 icon-bookmark {
-        vertical-align: bottom;
+
+      .bookmark-header > button:first-child {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px;
       }
-      h4 span {
-        vertical-align: top;
-        padding-top: 1%;
+
+      ia-icon-edit-pencil {
+        pointer-events: none;
       }
 
       p {
@@ -244,38 +247,34 @@ export class IABookmarksList extends LitElement {
         display: none;
       }
       li {
-        cursor: pointer;
-        outline: none;
         position: relative;
       }
-      li .content {
-        padding: 2px 0 4px 2px;
+
+      li .bookmark-card {
         border: var(--activeBorderWidth) solid transparent;
-        padding: .2rem 0 .4rem .2rem;
+        border-radius: 4px;
       }
-      li .content.active {
+
+      li .bookmark-card.active {
         border: var(--activeBorderWidth) solid #538bc5;
       }
-      li button.edit {
-        padding: 5px 2px 0 0;
+
+      .bookmark-header button {
         background: transparent;
         cursor: pointer;
-        height: 40px;
-        width: 40px;
-        position: absolute;
-        right: 2px;
-        top: 2px;
-        text-align: right;
         -webkit-appearance: none;
         appearance: none;
-        outline: none;
         box-sizing: border-box;
         border: none;
+        padding: 0;
+        text-align: left;
       }
-      li button.edit > * {
-        display: block;
-        height: 100%;
-        width: 100%;
+
+      li button.edit {
+        height: 34px;
+        width: 34px;
+        flex-shrink: 0;
+        text-align: center;
       }
     `;
 

package/src/{BookNavigator → plugins}/bookmarks/bookmarks-loginCTA.js

@@ -1,20 +1,15 @@
-import { LitElement, html, css } from 'lit-element';
-import buttonStyles from '../assets/button-base.js';
+import { LitElement, html } from 'lit';
+import buttonStyles from '../../css/button-base.js';
 
 class BookmarksLogin extends LitElement {
   static get properties() {
     return {
-      url: { type: String }
-    }
+      url: { type: String },
+    };
   }
 
   static get styles() {
-    const mainCss = css`
-      a {
-        text-decoration: none;
-      }
-    `;
-    return [buttonStyles, mainCss];
+    return buttonStyles;
   }
 
   constructor() {

package/src/plugins/bookmarks/bookmarks-provider.js

@@ -0,0 +1,63 @@
+import { html } from 'lit';
+import './delete-modal-actions.js';
+import './bookmark-button.js';
+import './ia-bookmarks.js';
+
+import './bookmark-edit.js';
+import './bookmarks-list.js';
+import '@internetarchive/icon-bookmark';
+
+
+export default class BookmarksProvider {
+  constructor(options) {
+    const {
+      baseHost,
+      signedIn,
+      bookreader,
+      modal,
+      onProviderChange,
+    } = options;
+
+    const referrerStr = `referer=${encodeURIComponent(location.href)}`;
+    const loginUrl = `https://${baseHost}/account/login?${referrerStr}`;
+
+    this.component = document.createElement('ia-bookmarks');
+    this.component.bookreader = bookreader;
+    this.component.displayMode = signedIn ? 'bookmarks' : 'login';
+    this.component.modal = modal;
+    this.component.loginOptions = {
+      loginClicked: this.bookmarksLoginClicked,
+      loginUrl,
+    };
+    this.bindEvents();
+
+    this.icon = html`<icon-bookmark aria-hidden="true" role="presentation" state="hollow" style="--iconWidth: 16px; --iconHeight: 24px;"></icon-bookmark>`;
+    this.label = 'Bookmarks';
+    this.id = 'bookmarks';
+    this.onProviderChange = onProviderChange;
+    this.component.setup();
+    this.updateMenu(this.component.bookmarks.length);
+  }
+
+  updateMenu(count) {
+    this.menuDetails = `(${count})`;
+  }
+
+  bindEvents() {
+    this.component.addEventListener('bookmarksChanged', this.bookmarksChanged.bind(this));
+  }
+
+  bookmarksChanged({ detail }) {
+    const bookmarksLength = Object.keys(detail.bookmarks).length;
+    this.updateMenu(bookmarksLength);
+    this.onProviderChange(detail.bookmarks, detail.showSidePanel);
+  }
+
+  bookmarksLoginClicked() {
+    window.archive_analytics?.send_event_no_sampling(
+      'BookReader',
+      `BookmarksLogin`,
+      window.location.path,
+    );
+  }
+}

package/src/{BookNavigator → plugins/bookmarks}/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 → plugins}/bookmarks/ia-bookmarks.js

@@ -1,6 +1,7 @@
-import { render, nothing } from 'lit-html';
-import { LitElement, html, css } from 'lit-element';
-import buttonStyles from '../assets/button-base.js';
+import { LitElement, html, css, render } from 'lit';
+// eslint-disable-next-line no-unused-vars
+import { ModalConfig, ModalManager } from '@internetarchive/modal-manager';
+import buttonStyles from '../../css/button-base.js';
 import './bookmarks-loginCTA.js';
 
 const api = {
@@ -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
@@ -101,6 +109,7 @@ class IABookmarks extends LitElement {
 
     this.bookmarkColors = [{
       id: 0,
+      // FIXME: This is also used as the aria-label
       className: 'red',
     }, {
       id: 1,
@@ -113,21 +122,58 @@ 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');
+    this.api.identifier = this.getIdentifier();
+    if (this.displayMode === 'login') {
+      return;
+    }
+    this.fetchUserBookmarks();
+    this.setBREventListeners();
   }
 
-  initializeBookmarks() {
-    this.displayMode = 'bookmarks';
+  /**
+   * get identifier for current book including sub-files
+   *
+   * @returns Identifer
+   */
+  getIdentifier() {
+    if (this.bookreader.bookId !== this.bookreader.subPrefix) {
+      return `${this.bookreader.bookId}/${this.bookreader.subPrefix}`;
+    }
+
+    return this.bookreader.bookId;
+  }
+
+  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 +193,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();
@@ -181,8 +227,8 @@ class IABookmarks extends LitElement {
       color: this.getBookmarkColor(color) ? color : this.defaultColor.id,
     };
 
-    const page = IABookmarks.formatPage(this.bookreader.getPageNum(leafNum));
-    const thumbnail = this.bookreader.getPageURI(`${leafNum}`.replace(/\D/g, ''), 32); // Request thumbnail 1/32 the size of original image
+    const page = IABookmarks.formatPage(this.bookreader.book.getPageNum(leafNum));
+    const thumbnail = this.bookreader.book.getPageURI(`${leafNum}`.replace(/\D/g, ''), 32); // Request thumbnail 1/32 the size of original image
     const bookmark = {
       ...nomalizedParams,
       id: leafNum,
@@ -194,27 +240,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,12 +304,14 @@ 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';
       // eslint-disable-next-line
-      const pageData = this.bookreader._models.book.getPage(pageID);
+      const pageData = this.bookreader.book.getPage(pageID);
       const { isViewable } = pageData;
 
       if (!isViewable) { return; }
@@ -375,7 +431,7 @@ class IABookmarks extends LitElement {
 
   bookmarkSelected({ detail }) {
     const { leafNum } = detail.bookmark;
-    this.bookreader.jumpToPage(`${this.bookreader.getPageNum(`${leafNum}`.replace(/\D/g, ''))}`);
+    this.bookreader.jumpToPage(`${this.bookreader.book.getPageNum(`${leafNum}`.replace(/\D/g, ''))}`);
     this.activeBookmarkID = leafNum;
   }
 
@@ -390,33 +446,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 +476,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 }
@@ -483,15 +524,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>
     `;
   }