@internetarchive/bookreader 5.0.0-36 → 5.0.0-39

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

@@ -1,523 +0,0 @@
-import { render, nothing } from 'lit-html';
-import { LitElement, html, css } from 'lit-element';
-import { ModalConfig } from '@internetarchive/modal-manager';
-import buttonStyles from '../assets/button-base.js';
-import './bookmarks-loginCTA.js';
-
-const api = {
-  endpoint: '/services/bookmarks.php',
-  headers: {
-    'Content-Type': 'application/json',
-  },
-  delete(page) {
-    return fetch(`${this.endpoint}?identifier=${this.identifier}&page_num=${page}`, {
-      credentials: 'same-origin',
-      method: 'DELETE',
-      headers: this.headers,
-    });
-  },
-  get(page) {
-    return fetch(`${this.endpoint}?identifier=${this.identifier}&page_num=${page}`, {
-      credentials: 'same-origin',
-      method: 'GET',
-      headers: this.headers,
-    });
-  },
-  getAll() {
-    return fetch(`${this.endpoint}?identifier=${this.identifier}`, {
-      credentials: 'same-origin',
-      method: 'GET',
-      headers: this.headers,
-    });
-  },
-  post(bookmark) {
-    return this.sendBookmarkData(bookmark, 'POST');
-  },
-  put(bookmark) {
-    return this.sendBookmarkData(bookmark, 'POST');
-  },
-  sendBookmarkData(bookmark, method) {
-    const notes = {
-      note: bookmark.note,
-      color: bookmark.color,
-    };
-    return fetch(`${this.endpoint}?identifier=${this.identifier}&page_num=${bookmark.id}`, {
-      credentials: 'same-origin',
-      method,
-      headers: this.headers,
-      body: JSON.stringify({
-        notes,
-      }),
-    });
-  },
-};
-
-class IABookmarks extends LitElement {
-  static get properties() {
-    return {
-      activeBookmarkID: { type: String },
-      bookmarks: { type: Array },
-      bookreader: { type: Object },
-      options: { type: Object },
-      displayMode: { type: String },
-      editedBookmark: { type: Object },
-      deleteModalConfig: { type: Object},
-      modal: { attribute: false }
-    };
-  }
-
-  static get styles() {
-    const mainCss = css`
-      .bookmarks {
-        height: 100%;
-        overflow: hidden;
-        padding-bottom: 20px;
-      }
-
-      .list ia-bookmark-edit {
-        display: none;
-      }
-
-      .edit ia-bookmarks-list {
-        display: none;
-      }
-    `;
-
-    return [buttonStyles, mainCss];
-  }
-
-  static formatPage(page) {
-    return isNaN(+page) ? `(${page.replace(/\D/g, '')})` : page;
-  }
-
-  constructor() {
-    super();
-    this.bookmarks = [];
-    this.bookreader = {};
-    this.editedBookmark = {};
-    this.options = {};
-    this.modal = undefined;
-    /**
-     * Toggles display to either bookmarks or login cta
-     * @param {('bookmarks'|'login')} displayMode
-     */
-    this.displayMode = 'bookmarks';
-
-    this.bookmarkColors = [{
-      id: 0,
-      className: 'red',
-    }, {
-      id: 1,
-      className: 'blue',
-    }, {
-      id: 2,
-      className: 'green',
-    }];
-
-    // 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(changed) {
-    if (changed.has('options')) {
-      this.updateDisplay();
-    }
-
-    this.emitBookmarksChanged();
-  }
-
-  setup() {
-    this.api.identifier = this.bookreader.bookId;
-    if (this.displayMode === 'login') {
-      return;
-    }
-    this.setBREventListeners();
-    this.initializeBookmarks();
-  }
-
-  updateDisplay() {
-    if (this.displayMode === 'bookmarks') {
-      this.fetchUserBookmarks();
-    }
-  }
-
-  fetchUserBookmarks() {
-    this.fetchBookmarks()
-      .then(() => {
-        this.initializeBookmarks();
-      });
-  }
-
-  setBREventListeners() {
-    ['3PageViewSelected'].forEach((event) => {
-      window.addEventListener(`BookReader:${event}`, (e) => {
-        setTimeout(() => {
-          // wait a lil bit so bookreader can draw its DOM to attach onto
-          this.renderBookmarkButtons();
-        }, 100);
-      });
-    });
-    ['pageChanged', '1PageViewSelected', '2PageViewSelected'].forEach((event) => {
-      window.addEventListener(`BookReader:${event}`, (e) => {
-        setTimeout(() => {
-          // wait a lil bit so bookreader can draw its DOM to attach onto
-          this.renderBookmarkButtons();
-          this.markActiveBookmark();
-        }, 100);
-      });
-    });
-    ['zoomOut', 'zoomIn', 'resize'].forEach((event) => {
-      window.addEventListener(`BookReader:${event}`, () => {
-        this.renderBookmarkButtons();
-      });
-    });
-  }
-
-  initializeBookmarks() {
-    this.renderBookmarkButtons();
-    this.markActiveBookmark(true);
-    this.emitBookmarksChanged();
-  }
-
-  /**
-   * @typedef {object} Bookmark
-   * @property {number} id - bookreader page index, becomes key store
-   * @property {number} color - color number
-   * @property {string} page - bookmark's page label to display
-   * @property {string} note - optional, note that one can add
-   * @property {string} thumbnail - optional, image url
-   */
-  /**
-   * Formats bookmark view model
-   * @param {Object} bookmarkAttrs
-   * @param {number} bookmarkAttrs.leafNum
-   * @param {string} bookmarkAttrs.notes
-   *
-   * @returns Bookmark
-   */
-  formatBookmark({ leafNum = '', notes = {} }) {
-    const { note = '', color } = notes;
-    const nomalizedParams = {
-      note,
-      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 bookmark = {
-      ...nomalizedParams,
-      id: leafNum,
-      leafNum,
-      page,
-      thumbnail,
-    };
-
-    return bookmark;
-  }
-
-  fetchBookmarks() {
-    return this.api.getAll().then((res) => res.json()).then(({
-      success,
-      error = 'Something happened while fetching bookmarks.',
-      value: bkmrks = [],
-    }) => {
-      if (!success) {
-        throw new Error(`Failed to load bookmarks: ${error}`);
-      }
-
-      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(showSidePanel = false) {
-    this.dispatchEvent(new CustomEvent('bookmarksChanged', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        bookmarks: this.bookmarks,
-        showSidePanel
-      },
-    }));
-  }
-
-  emitBookmarkButtonClicked() {
-    this.dispatchEvent(new CustomEvent('bookmarkButtonClicked', {
-      bubbles: true,
-      composed: true,
-      detail: {
-        editedBookmark: this.editedBookmark,
-      },
-    }));
-  }
-
-  bookmarkButtonClicked(pageID) {
-    if (this.getBookmark(pageID)) {
-      this.confirmDeletion(pageID);
-    } else {
-      this.createBookmark(pageID);
-    }
-  }
-
-  renderBookmarkButtons() {
-    const pages = this.bookreader.$('.BRpagecontainer').not('.BRemptypage').get();
-
-    pages.forEach((pageEl) => {
-      const existingButton = pageEl.querySelector('.bookmark-button');
-      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 { isViewable } = pageData;
-
-      if (!isViewable) { return; }
-
-      const bookmarkButton = document.createElement('div');
-      ['mousedown', 'mouseup'].forEach((event) => {
-        bookmarkButton.addEventListener(event, (e) => e.stopPropagation());
-      });
-      bookmarkButton.classList.add('bookmark-button', bookmarkState);
-      if (pageBookmark) {
-        bookmarkButton.classList.add(this.getBookmarkColor(pageBookmark.color));
-      }
-      const pageSide = (pageEl.getAttribute('data-side') === 'L' && this.bookreader.mode === this.bookreader.constMode2up)
-        ? 'left' : 'right';
-
-      render(html`
-        <bookmark-button
-          @bookmarkButtonClicked=${() => this.bookmarkButtonClicked(pageID)}
-          state=${bookmarkState}
-          side=${pageSide}
-        ></bookmark-button>`, bookmarkButton);
-      pageEl.appendChild(bookmarkButton);
-    });
-  }
-
-  /**
-   * Notes which bookmark is active
-   *
-   * @param {boolean} atSetup - denotes the first time this is fired
-   */
-  markActiveBookmark(atSetup = false) {
-    const { mode, constMode2up, constModeThumb } = this.bookreader;
-    const currentIndex = this.bookreader.currentIndex();
-
-    if (mode === constModeThumb) {
-      // keep active bookmark the same
-      // no syncing until we can verify when a bookmark is "in view"
-      const requestedPageHasBookmark = this.bookmarks[currentIndex];
-      if (atSetup && requestedPageHasBookmark) {
-        this.activeBookmarkID = currentIndex;
-      }
-      return;
-    }
-    // In 2up, we prefer the right side of the page to bookmark
-    // so let's make sure we light that one up.
-    if (mode === constMode2up) {
-      const pagesInView = this.bookreader.displayedIndices;
-      const pagesHaveActiveBookmark = pagesInView.includes(+this.activeBookmarkID);
-      if (pagesHaveActiveBookmark) {
-        return;
-      }
-    }
-
-    // If a bookmark exists with the current index, set it as active
-    if (this.bookmarks[currentIndex]) {
-      this.activeBookmarkID = currentIndex;
-      return;
-    }
-
-    // No bookmark for this page
-    this.activeBookmarkID = '';
-  }
-
-  bookmarkEdited({ detail }) {
-    const closeEdit = detail.bookmark.id === this.editedBookmark.id;
-    this.editedBookmark = closeEdit ? {} : detail.bookmark;
-  }
-
-  /**
-   * Gets bookmark by pageindex
-   * @param {number} id
-   */
-  getBookmark(id) {
-    return this.bookmarks[id];
-  }
-
-  getBookmarkColor(id) {
-    return this.bookmarkColors.find((m) => m.id === id)?.className;
-  }
-
-  /**
-   * Adds bookmark for current page
-   */
-  addBookmark() {
-    let pageID = this.bookreader.currentIndex();
-    if (this.bookreader.mode === this.bookreader.constMode2up) {
-      const pagesInView = this.bookreader.displayedIndices;
-
-      // add bookmark to right hand page
-      pageID = pagesInView[pagesInView.length - 1];
-    }
-    this.createBookmark(pageID);
-  }
-
-  /**
-   * Creates bookmark for a given page
-   * @param {number} pageID
-   */
-  createBookmark(pageID) {
-    const existingBookmark = this.getBookmark(pageID);
-    if (existingBookmark) {
-      this.bookmarkEdited({ detail: { bookmark: existingBookmark } });
-      this.emitBookmarkButtonClicked();
-      return;
-    }
-
-    this.editedBookmark = this.formatBookmark({ leafNum: pageID });
-
-    this.api.post(this.editedBookmark);
-
-    this.bookmarks[pageID] = this.editedBookmark;
-    this.activeBookmarkID = pageID;
-    this.disableAddBookmarkButton = true;
-    this.renderBookmarkButtons();
-    this.emitBookmarkButtonClicked();
-  }
-
-  bookmarkSelected({ detail }) {
-    const { leafNum } = detail.bookmark;
-    this.bookreader.jumpToPage(`${this.bookreader.getPageNum(`${leafNum}`.replace(/\D/g, ''))}`);
-    this.activeBookmarkID = leafNum;
-  }
-
-  saveBookmark({ detail }) {
-    const existingBookmark = this.bookmarks[detail.bookmark.id];
-    Object.assign(existingBookmark, detail.bookmark);
-    this.api.put(existingBookmark);
-    this.editedBookmark = {};
-    this.renderBookmarkButtons();
-  }
-
-  confirmDeletion(pageID) {
-    const existingBookmark = this.getBookmark(pageID);
-    if (existingBookmark.note) {
-      this.displayDeletionModal(pageID);
-      return;
-    }
-    this.deleteBookmark({ detail: { id: `${pageID}` } });
-  }
-
-  displayDeletionModal(pageID) {
-    const customModalContent = html`
-      <delete-modal-actions
-        .deleteAction=${() => this.deleteBookmark({ detail: { id: `${pageID}` } })}
-        .cancelAction=${() => this.modal.closeModal()}
-        .pageID=${pageID}
-      ></delete-modal-actions>
-    `;
-
-
-    this.modal.showModal({
-      config: this.deleteModalConfig,
-      customModalContent,
-    });
-  }
-
-  deleteBookmark({ detail }) {
-    const { id } = detail;
-    const currBookmarks = this.bookmarks;
-    delete currBookmarks[id];
-    this.bookmarks = { ...currBookmarks };
-
-    this.api.delete(detail.id);
-    this.editedBookmark = {};
-    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 }
-   */
-  get shouldEnableAddBookmarkButton() {
-    const pageToCheck = this.bookreader.mode === this.bookreader.constMode2up
-      ? this.bookreader.displayedIndices[this.bookreader.displayedIndices.length - 1]
-      : this.bookreader.currentIndex();
-    const pageHasBookmark = this.getBookmark(pageToCheck);
-    return !!pageHasBookmark;
-  }
-
-
-  get allowAddingBookmark() {
-    return this.bookreader.mode !== this.bookreader.constModeThumb;
-  }
-
-  get addBookmarkButton() {
-    return html`
-      <button
-        class="ia-button primary"
-        ?disabled=${this.shouldEnableAddBookmarkButton}
-        @click=${this.addBookmark}>
-        Add bookmark
-      </button>
-    `;
-  }
-
-  get bookmarksList() {
-    return html`
-      <ia-bookmarks-list
-        @bookmarkEdited=${this.bookmarkEdited}
-        @bookmarkSelected=${this.bookmarkSelected}
-        @saveBookmark=${this.saveBookmark}
-        @deleteBookmark=${this.deleteBookmark}
-        .editedBookmark=${this.editedBookmark}
-        .bookmarks=${{ ...this.bookmarks }}
-        .activeBookmarkID=${this.activeBookmarkID}
-        .bookmarkColors=${this.bookmarkColors}
-        .defaultBookmarkColor=${this.defaultColor}>
-      </ia-bookmarks-list>
-    `;
-  }
-
-  render() {
-    const { loginUrl } = this.options;
-    const bookmarks = html`
-      ${this.bookmarksList}
-      ${this.allowAddingBookmark ? this.addBookmarkButton : nothing}
-    `;
-    return html`
-      <section class="bookmarks">
-        ${this.displayMode === 'login' ? html`<bookmarks-login @click=${this.loginClick} .url=${loginUrl}></bookmarks-login>` : bookmarks}
-      </section>
-    `;
-  }
-}
-
-customElements.define('ia-bookmarks', IABookmarks);

package/stat/BookNavigator/br-fullscreen-mgr.js

@@ -1,82 +0,0 @@
-import Debouncer from '../util/debouncer';
-
-/**
- * Manages fullscreen size
- * so that bookreader chrome is always visible
- * This is a shim to hold us until we update loan bar
- * https://drive.google.com/drive/folders/1Ym9FDMZPiM4EbNh3NU-_2h8kizIYaLWt
- */
-export default class BRFullscreenMgr {
-  constructor(brSelector = '#BookReader') {
-    this.debounceTime = 250;
-    this.savedScrollY = 0;
-    this.savedScrollX = 0;
-    this.brSelector  = brSelector;
-
-    this.setup = this.setup.bind(this);
-    this.teardown = this.teardown.bind(this);
-    this.resizeBookReaderContainer = this.resizeBookReaderContainer.bind(this);
-    this.handleResizeEvent = this.handleResizeEvent.bind(this);
-    this.handleBookReaderHeight = new Debouncer(
-      this.resizeBookReaderContainer, this.debounceTime, this,
-    );
-  }
-
-  get brDom() {
-    return document.querySelector(this.brSelector);
-  }
-
-  /**
-   * Sets bookreader height
-   * & adds resize, orientationchange listeners
-   * & passes captured scroll positions
-   *
-   * @param {object} brInstance
-   */
-  setup(brInstance) {
-    this.bookreader = brInstance;
-
-    this.resizeBookReaderContainer();
-    window.addEventListener('resize', this.handleResizeEvent);
-  }
-
-  /**
-   * Resets BookReader height
-   * & removes event handlers, resets captured scroll positions
-   */
-  teardown() {
-    this.brDom.setAttribute('style', '');
-    window.removeEventListener('resize', this.handleResizeEvent);
-    window.scrollTo(this.savedScrollX, this.savedScrollY);
-    this.savedScrollX = 0;
-    this.savedScrollY = 0;
-  }
-
-  /**
-   * Event listener for resize & orientationchange
-   */
-  handleResizeEvent() {
-    this.handleBookReaderHeight.execute();
-  }
-
-  /**
-   * Calculates & sets BookReader's needed height to
-   * take the loan bar into account
-   * + appends fullscreen classes to DOM
-   */
-  resizeBookReaderContainer() {
-    const { scrollX, scrollY } = window;
-    this.savedScrollX = scrollX;
-    this.savedScrollY = scrollY;
-    this.bookreader.updateBrClasses();
-
-    const loanbar = document.querySelector('.BookReaderMessage');
-    const loanbarHeight = loanbar?.offsetHeight ?? 0;
-    const windowHeight = window.innerHeight;
-    const newHeight = `${(windowHeight - loanbarHeight)}px`;
-    this.brDom.style.height = newHeight;
-    this.brDom.style.top = loanbarHeight;
-    window.scrollTo(0, 0);
-    console.log('resizeBookReaderContainer');
-  }
-}

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

@@ -1,49 +0,0 @@
-import { LitElement, html, css } from 'lit-element';
-
-export default class DeleteModalActions extends LitElement {
-  static get styles() {
-    return css`
-      div {
-        display: flex;
-        justify-content: center;
-        padding-top: 2rem;
-      }
-
-      button {
-        appearance: none;
-        padding: 0.5rem 1rem;
-        margin: 0 .5rem;
-        box-sizing: border-box;
-        font: 1.3rem "Helvetica Neue", Helvetica, Arial, sans-serif;
-        color: var(--primaryTextColor);
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        background: var(--primaryCTAFill);
-      }
-
-      .delete {
-        background: var(--primaryErrorCTAFill);
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      cancelAction: { type: Function },
-      deleteAction: { type: Function },
-      pageID: { type: String },
-    };
-  }
-
-  render() {
-    return html`
-      <div>
-        <button class="delete" @click=${() => this.deleteAction({ detail: { id: `${this.pageID}` } })}>Delete</button>
-        <button @click=${() => this.cancelAction()}>Cancel</button>
-      </div>
-    `;
-  }
-}
-
-customElements.define('delete-modal-actions', DeleteModalActions);