@internetarchive/bookreader 5.0.0-48 → 5.0.0-49-a1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-48",
+  "version": "5.0.0-49-a1",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "@babel/plugin-proposal-class-properties": "7.16.7",
     "@babel/plugin-proposal-decorators": "7.17.9",
     "@babel/preset-env": "7.16.11",
-    "@open-wc/testing-helpers": "^2.1.3",
+    "@open-wc/testing-helpers": "^2.1.4",
     "@types/jest": "^29.1.1",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "babel-loader": "8.2.5",

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

@@ -213,8 +213,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,
@@ -297,7 +297,7 @@ class IABookmarks extends LitElement {
       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; }
@@ -417,7 +417,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;
   }
 

package/src/BookReader/BookModel.js

@@ -26,39 +26,10 @@ export class BookModel {
 
     /** @type {{width: number, height: number}} memoize storage */
     this._medianPageSize = null;
-    /** @deprecated @type {{width: number, height: number}} memoize storage */
-    this._medianPageSizePixels = null;
     /** @type {[PageData[], number]} */
     this._getDataFlattenedCached = null;
   }
 
-  /**
-   * @deprecated Use getMedianPageSizeInches
-   * Memoized
-   * @return {{width: number, height: number}}
-   */
-  getMedianPageSize() {
-    if (this._medianPageSizePixels) {
-      return this._medianPageSizePixels;
-    }
-
-    // A little expensive but we just do it once
-    const widths = [];
-    const heights = [];
-    for (let i = 0; i < this.getNumLeafs(); i++) {
-      widths.push(this.getPageWidth(i));
-      heights.push(this.getPageHeight(i));
-    }
-
-    widths.sort();
-    heights.sort();
-    this._medianPageSizePixels = {
-      width: widths[Math.floor(widths.length / 2)],
-      height: heights[Math.floor(heights.length / 2)]
-    };
-    return this._medianPageSizePixels;
-  }
-
   /** Get median width/height of page in inches. Memoized for performance. */
   getMedianPageSizeInches() {
     if (this._medianPageSize) {

package/src/BookReader/Mode1UpLit.js

@@ -205,7 +205,7 @@ export class Mode1UpLit extends LitElement {
       this.throttledUpdateRenderedPages();
       this.br.displayedIndices = this.visiblePages.map(p => p.index);
       this.br.updateFirstIndex(this.br.displayedIndices[0]);
-      this.br.updateNavIndexThrottled();
+      this.br._components.navbar.updateNavIndexThrottled();
     }
     if (changedProps.has('scale')) {
       const oldVal = changedProps.get('scale');

package/src/BookReader/Mode2Up.js

@@ -90,7 +90,6 @@ export class Mode2Up {
 
     this.displayedIndices = [this.br.twoPage.currentIndexL, this.br.twoPage.currentIndexR];
     this.br.displayedIndices = this.displayedIndices;
-    this.br.updateToolbarZoom(this.br.reduce);
     this.br.trigger('pageChanged');
   }
 
@@ -118,7 +117,7 @@ export class Mode2Up {
 
     // Prepare view with new center to minimize visual glitches
     const drawNewSpread = true;
-    this.prepareTwoPageView(oldCenter.percentageX, oldCenter.percentageY, drawNewSpread);
+    this.prepare(oldCenter.percentageX, oldCenter.percentageY, drawNewSpread);
   }
 
   /**
@@ -150,7 +149,7 @@ export class Mode2Up {
    * @param {number} centerPercentageY
    * @param {Boolean} drawNewSpread
    */
-  prepareTwoPageView(centerPercentageX, centerPercentageY, drawNewSpread = false) {
+  prepare(centerPercentageX, centerPercentageY, drawNewSpread = false) {
     // Some decisions about two page view:
     //
     // Both pages will be displayed at the same height, even if they were different physical/scanned
@@ -241,7 +240,6 @@ export class Mode2Up {
     this.br.displayedIndices = [];
 
     this.drawLeafs();
-    this.br.updateToolbarZoom(this.br.reduce);
     this.br.updateBrClasses();
 
     this.smoothZoomer = this.smoothZoomer || new ModeSmoothZoom(this);
@@ -391,7 +389,7 @@ export class Mode2Up {
 
     // Leaf edges
     this.br.twoPage.edgeWidth = spreadSize.totalLeafEdgeWidth; // The combined width of both edges
-    this.br.twoPage.leafEdgeWidthL = this.br.leafEdgeWidth(this.br.twoPage.currentIndexL);
+    this.br.twoPage.leafEdgeWidthL = this.leafEdgeWidth(this.br.twoPage.currentIndexL);
     this.br.twoPage.leafEdgeWidthR = this.br.twoPage.edgeWidth - this.br.twoPage.leafEdgeWidthL;
 
 
@@ -528,21 +526,6 @@ export class Mode2Up {
     return spreadSize.reduce;
   }
 
-  /**
-   * Returns true if the pages extend past the edge of the view
-   * @deprecated slated for deprecation by v5.0.0
-   * @return {boolean}
-   */
-  isZoomedIn() {
-    let isZoomedIn = false;
-    if (this.br.twoPage.autofit != 'auto') {
-      if (this.br.reduce < this.getAutofitReduce()) {
-        isZoomedIn = true;
-      }
-    }
-    return isZoomedIn;
-  }
-
   calculateReductionFactors() {
     this.br.twoPage.reductionFactors = this.br.reductionFactors.concat([
       {
@@ -553,14 +536,6 @@ export class Mode2Up {
     this.br.twoPage.reductionFactors.sort(this.br._reduceSort);
   }
 
-  /**
-   * Set the cursor for two page view
-   * @deprecated Since version 4.3.3. Will be deleted in version 5.0
-   */
-  setCursor() {
-    console.warn('Call to deprecated method, Mode2Up.setCursor. No-op.');
-  }
-
   /**
    * @param {Number|null} index to flip back one spread, pass index=null
    */
@@ -584,7 +559,7 @@ export class Mode2Up {
       if (prev.pageSide == 'R') index--;
     }
 
-    this.br.updateNavIndexThrottled(index);
+    this.br._components.navbar.updateNavIndexThrottled(index);
 
     const previousIndices = this.book.getSpreadIndices(index);
 
@@ -614,8 +589,8 @@ export class Mode2Up {
     this.br.refs.$brContainer.addClass("BRpageFlipping");
     const leftLeaf = this.br.twoPage.currentIndexL;
 
-    const oldLeafEdgeWidthL = this.br.leafEdgeWidth(this.br.twoPage.currentIndexL);
-    const newLeafEdgeWidthL = this.br.leafEdgeWidth(newIndexL);
+    const oldLeafEdgeWidthL = this.leafEdgeWidth(this.br.twoPage.currentIndexL);
+    const newLeafEdgeWidthL = this.leafEdgeWidth(newIndexL);
     const leafEdgeTmpW = oldLeafEdgeWidthL - newLeafEdgeWidthL;
 
     const currWidthL   = this.getPageWidth(leftLeaf);
@@ -782,7 +757,7 @@ export class Mode2Up {
     }
     if (index > this.br.lastDisplayableIndex()) return;
 
-    this.br.updateNavIndexThrottled(index);
+    this.br._components.navbar.updateNavIndexThrottled(index);
 
     this.br.animating = true;
 
@@ -808,9 +783,9 @@ export class Mode2Up {
   flipRightToLeft(newIndexL, newIndexR) {
     this.br.refs.$brContainer.addClass("BRpageFlipping");
 
-    const oldLeafEdgeWidthL = this.br.leafEdgeWidth(this.br.twoPage.currentIndexL);
+    const oldLeafEdgeWidthL = this.leafEdgeWidth(this.br.twoPage.currentIndexL);
     const oldLeafEdgeWidthR = this.br.twoPage.edgeWidth - oldLeafEdgeWidthL;
-    const newLeafEdgeWidthL = this.br.leafEdgeWidth(newIndexL);
+    const newLeafEdgeWidthL = this.leafEdgeWidth(newIndexL);
     const newLeafEdgeWidthR = this.br.twoPage.edgeWidth - newLeafEdgeWidthL;
 
     const leafEdgeTmpW = oldLeafEdgeWidthR - newLeafEdgeWidthR;

package/src/BookReader/ModeThumb.js

@@ -177,7 +177,7 @@ export class ModeThumb {
             // shift viewModeOrder after clicking on thumbsnail leaf
             const nextModeID = this.br.viewModeOrder.shift();
             this.br.viewModeOrder.push(nextModeID);
-            this.br.updateViewModeButton($('.viewmode'), 'twopg', 'Two-page view');
+            this.br._components.navbar.updateViewModeButton($('.viewmode'), 'twopg', 'Two-page view');
 
             this.br.trigger(EVENTS.fragmentChange);
             event.stopPropagation();
@@ -215,8 +215,6 @@ export class ModeThumb {
 
     // highlight current page
     this.br.$('.pagediv' + this.br.currentIndex()).addClass('BRpagedivthumb_highlight');
-
-    this.br.updateToolbarZoom(this.br.reduce);
   }
 
   /**

package/src/BookReader/Navbar/Navbar.js

@@ -4,6 +4,7 @@ import 'jquery-ui/ui/widget.js';
 import 'jquery-ui/ui/widgets/mouse.js';
 import 'jquery-ui/ui/widgets/slider.js';
 import { EVENTS } from '../events.js';
+import { throttle } from '../utils.js';
 
 export class Navbar {
   /**
@@ -27,6 +28,8 @@ export class Navbar {
     this.maximumControls = [
       'book_left', 'book_right', 'zoom_in', 'zoom_out', 'onepg', 'twopg', 'thumb'
     ];
+
+    this.updateNavIndexThrottled = throttle(this.updateNavIndex.bind(this), 250, false);
   }
 
   controlFor(controlName) {
@@ -213,7 +216,7 @@ export class Navbar {
     const $slider = this.$root.find('.BRpager').slider({
       animate: true,
       min: 0,
-      max: br.getNumLeafs() - 1,
+      max: br.book.getNumLeafs() - 1,
       value: br.currentIndex(),
       range: "min"
     });
@@ -248,16 +251,16 @@ export class Navbar {
   getNavPageNumString(index) {
     const { br } = this;
     // Accessible index starts at 0 (alas) so we add 1 to make human
-    const pageNum = br.getPageNum(index);
-    const pageType = br.getPageProp(index, 'pageType');
-    const numLeafs = br.getNumLeafs();
+    const pageNum = br.book.getPageNum(index);
+    const pageType = br.book.getPageProp(index, 'pageType');
+    const numLeafs = br.book.getNumLeafs();
 
     if (!this.maxPageNum) {
       // Calculate Max page num (used for pagination display)
       let maxPageNum = 0;
       let pageNumVal;
       for (let i = 0; i < numLeafs; i++) {
-        pageNumVal = br.getPageNum(i);
+        pageNumVal = br.book.getPageNum(i);
         if (!isNaN(pageNumVal) && pageNumVal > maxPageNum) {
           maxPageNum = pageNumVal;
         }

package/src/BookReader/Toolbar/Toolbar.js

@@ -75,8 +75,6 @@ export class Toolbar {
     br.$('.BRnavCntl').addClass('BRup');
     br.$('.pause').hide();
 
-    this.updateToolbarZoom(br.reduce); // Pretty format
-
     // We build in mode 2
     br.refs.$BRtoolbar.append();
 
@@ -127,31 +125,6 @@ export class Toolbar {
     });
   }
 
-  /**
-   * @deprecated
-   * @todo .BRzoom doesn't exist anywhere, so this is likely dead code
-   * Update the displayed zoom factor based on reduction factor
-   * @param {number} reduce
-   */
-  updateToolbarZoom(reduce) {
-    const { br } = this;
-    // $$$ TODO preserve zoom/fit for each mode
-    const autofit = br.mode == br.constMode2up ? br.twoPage.autofit : br.onePage.autofit;
-    /** @type {string} */
-    let value;
-    if (autofit) {
-      value = autofit.slice(0,1).toUpperCase() + autofit.slice(1);
-    } else {
-      value = (100 / reduce)
-        .toFixed(2)
-        // Strip trailing zeroes and decimal if all zeroes
-        .replace(/0+$/,'')
-        .replace(/\.$/,'')
-        + '%';
-    }
-    br.$('.BRzoom').text(value);
-  }
-
   /**
    * @param {JQuery} $shareDiv
    */
@@ -216,7 +189,7 @@ export class Toolbar {
       const params = {};
       params.mode = $(form.find('.fieldset-embed input[name=pages]:checked')).val();
       if (form.find('.fieldset-embed input[name=thispage]').prop('checked')) {
-        params.page = br.getPageNum(br.currentIndex());
+        params.page = br.book.getPageNum(br.currentIndex());
       }
 
       if (br.getEmbedCode) {
@@ -331,7 +304,7 @@ export class Toolbar {
   }
 }
 
-export function blankInfoDiv() {
+function blankInfoDiv() {
   return $(`
     <div class="BRfloat BRinfo">
       <div class="BRfloatHead">About this book
@@ -351,7 +324,7 @@ export function blankInfoDiv() {
     </div>`);
 }
 
-export function blankShareDiv() {
+function blankShareDiv() {
   return $(`
     <div class="BRfloat BRshare">
       <div class="BRfloatHead">