@internetarchive/bookreader 5.0.0-9-multiple-files → 5.0.0-90

package/src/BookReader/ModeCoordinateSpace.js

@@ -0,0 +1,29 @@
+import { calcScreenDPI } from './utils';
+
+/**
+ * There are a few different "coordinate spaces" at play in BR:
+ * (1) World units: i.e. inches. Unless otherwise stated, all computations
+ *     are done in world units.
+ * (2) Rendered Pixels: i.e. img.width = '300'. Note this does _not_ take
+ *     into account zoom scaling.
+ * (3) Visible Pixels: Just rendered pixels, but taking into account scaling.
+ */
+export class ModeCoordinateSpace {
+  screenDPI = calcScreenDPI();
+
+  /**
+   * @param {{ scale: number }} mode
+   */
+  constructor(mode) {
+    this.mode = mode;
+  }
+
+  worldUnitsToRenderedPixels = (/** @type {number} */inches) => inches * this.screenDPI;
+  renderedPixelsToWorldUnits = (/** @type {number} */px) => px / this.screenDPI;
+
+  renderedPixelsToVisiblePixels = (/** @type {number} */px) => px * this.mode.scale;
+  visiblePixelsToRenderedPixels = (/** @type {number} */px) => px / this.mode.scale;
+
+  worldUnitsToVisiblePixels = (/** @type {number} */px) => this.renderedPixelsToVisiblePixels(this.worldUnitsToRenderedPixels(px));
+  visiblePixelsToWorldUnits = (/** @type {number} */px) => this.renderedPixelsToWorldUnits(this.visiblePixelsToRenderedPixels(px));
+}

package/src/BookReader/ModeSmoothZoom.js

@@ -0,0 +1,312 @@
+// @ts-check
+import interact from 'interactjs';
+import { isIOS, isSamsungInternet } from '../util/browserSniffing.js';
+import { sleep } from './utils.js';
+/** @typedef {import('./utils/HTMLDimensionsCacher.js').HTMLDimensionsCacher} HTMLDimensionsCacher */
+
+/**
+ * @typedef {object} SmoothZoomable
+ * @property {HTMLElement} $container
+ * @property {HTMLElement} $visibleWorld
+ * @property {import("./options.js").AutoFitValues} autoFit
+ * @property {number} scale
+ * @property {HTMLDimensionsCacher} htmlDimensionsCacher
+ * @property {function(): void} [attachScrollListeners]
+ * @property {function(): void} [detachScrollListeners]
+ */
+
+/** Manages pinch-zoom, ctrl-wheel, and trackpad pinch smooth zooming. */
+export class ModeSmoothZoom {
+  /** Position (in unit-less, [0, 1] coordinates) in client to scale around */
+  scaleCenter = { x: 0.5, y: 0.5 };
+
+  /** @param {SmoothZoomable} mode */
+  constructor(mode) {
+    /** @type {SmoothZoomable} */
+    this.mode = mode;
+
+    /** Whether a pinch is currently happening */
+    this.pinching = false;
+    /** Non-null when a scale has been enqueued/is being processed by the buffer function */
+    this.pinchMoveFrame = null;
+    /** Promise for the current/enqueued pinch move frame. Resolves when it is complete. */
+    this.pinchMoveFramePromise = Promise.resolve();
+    this.oldScale = 1;
+    /** @type {{ scale: number, clientX: number, clientY: number }}} */
+    this.lastEvent = null;
+    this.attached = false;
+
+    /** @type {function(function(): void): any} */
+    this.bufferFn = window.requestAnimationFrame.bind(window);
+  }
+
+  attach() {
+    if (this.attached) return;
+
+    this.attachCtrlZoom();
+
+    // GestureEvents work only on Safari; they're too glitchy to use
+    // fully, but they can sometimes help error correct when interact
+    // misses an end/start event on Safari due to Safari bugs.
+    this.mode.$container.addEventListener('gesturestart', this._pinchStart);
+    this.mode.$container.addEventListener('gesturechange', this._preventEvent);
+    this.mode.$container.addEventListener('gestureend', this._pinchEnd);
+
+    if (isIOS()) {
+      this.touchesMonitor = new TouchesMonitor(this.mode.$container);
+      this.touchesMonitor.attach();
+    }
+
+    this.mode.$container.style.touchAction = "pan-x pan-y";
+
+    // The pinch listeners
+    this.interact = interact(this.mode.$container);
+    this.interact.gesturable({
+      listeners: {
+        start: this._pinchStart,
+        end: this._pinchEnd,
+      },
+    });
+    if (isSamsungInternet()) {
+      // Samsung internet pinch-zoom will not work unless we disable
+      // all touch actions. So use interact.js' built-in drag support
+      // to handle moving on that browser.
+      this.mode.$container.style.touchAction = "none";
+      this.interact
+        .draggable({
+          inertia: {
+            resistance: 2,
+            minSpeed: 100,
+            allowResume: true,
+          },
+          listeners: { move: this._dragMove },
+        });
+    }
+
+
+    this.attached = true;
+  }
+
+  detach() {
+    this.detachCtrlZoom();
+
+    // GestureEvents work only on Safari; they interfere with Hammer,
+    // so block them.
+    this.mode.$container.removeEventListener('gesturestart', this._pinchStart);
+    this.mode.$container.removeEventListener('gesturechange', this._preventEvent);
+    this.mode.$container.removeEventListener('gestureend', this._pinchEnd);
+
+    this.touchesMonitor?.detach?.();
+
+    // The pinch listeners
+    this.interact.unset();
+    interact.removeDocument(document);
+
+    this.attached = false;
+  }
+
+  /** @param {Event} ev */
+  _preventEvent = (ev) => {
+    ev.preventDefault();
+    return false;
+  }
+
+  _pinchStart = async () => {
+    // Safari calls gesturestart twice!
+    if (this.pinching) return;
+    if (isIOS()) {
+      // Safari sometimes causes a pinch to trigger when there's only one touch!
+      await sleep(0); // touches monitor can receive the touch event late
+      if (this.touchesMonitor.touches < 2) return;
+    }
+    this.pinching = true;
+
+    // Do this in case the pinchend hasn't fired yet.
+    this.oldScale = 1;
+    this.mode.$visibleWorld.classList.add("BRsmooth-zooming");
+    this.mode.$visibleWorld.style.willChange = "transform";
+    this.mode.autoFit = "none";
+    this.detachCtrlZoom();
+    this.mode.detachScrollListeners?.();
+
+    this.interact.gesturable({
+      listeners: {
+        start: this._pinchStart,
+        move: this._pinchMove,
+        end: this._pinchEnd,
+      },
+    });
+  }
+
+  /** @param {{ scale: number, clientX: number, clientY: number }}} e */
+  _pinchMove = async (e) => {
+    if (!this.pinching) return;
+    this.lastEvent = {
+      scale: e.scale,
+      clientX: e.clientX,
+      clientY: e.clientY,
+    };
+    if (!this.pinchMoveFrame) {
+      // Buffer these events; only update the scale when request animation fires
+      this.pinchMoveFrame = this.bufferFn(this._drawPinchZoomFrame);
+    }
+  }
+
+  _pinchEnd = async () => {
+    if (!this.pinching) return;
+    this.pinching = false;
+    this.interact.gesturable({
+      listeners: {
+        start: this._pinchStart,
+        end: this._pinchEnd,
+      },
+    });
+    // Want this to happen after the pinchMoveFrame,
+    // if one is in progress; otherwise setting oldScale
+    // messes up the transform.
+    await this.pinchMoveFramePromise;
+    this.scaleCenter = { x: 0.5, y: 0.5 };
+    this.oldScale = 1;
+    this.mode.$visibleWorld.classList.remove("BRsmooth-zooming");
+    this.mode.$visibleWorld.style.willChange = "auto";
+    this.attachCtrlZoom();
+    this.mode.attachScrollListeners?.();
+  }
+
+  _drawPinchZoomFrame = async () => {
+    // Because of the buffering/various timing locks,
+    // this can be called after the pinch has ended, which
+    // results in a janky zoom after the pinch.
+    if (!this.pinching) {
+      this.pinchMoveFrame = null;
+      return;
+    }
+
+    this.mode.$container.style.overflow = "hidden";
+    this.pinchMoveFramePromiseRes = null;
+    this.pinchMoveFramePromise = new Promise(
+      (res) => (this.pinchMoveFramePromiseRes = res),
+    );
+    this.updateScaleCenter({
+      clientX: this.lastEvent.clientX,
+      clientY: this.lastEvent.clientY,
+    });
+    const curScale = this.mode.scale;
+    const newScale = curScale * this.lastEvent.scale / this.oldScale;
+
+    if (curScale != newScale) {
+      this.mode.scale = newScale;
+      await this.pinchMoveFramePromise;
+    }
+    this.mode.$container.style.overflow = "auto";
+    this.oldScale = this.lastEvent.scale;
+    this.pinchMoveFrame = null;
+  }
+
+  _dragMove = async (e) => {
+    if (this.pinching) {
+      await this._pinchEnd();
+    }
+    this.mode.$container.scrollTop -= e.dy;
+    this.mode.$container.scrollLeft -= e.dx;
+  }
+
+  /** @private */
+  attachCtrlZoom() {
+    window.addEventListener("wheel", this._handleCtrlWheel, { passive: false });
+  }
+
+  /** @private */
+  detachCtrlZoom() {
+    window.removeEventListener("wheel", this._handleCtrlWheel);
+  }
+
+  /** @param {WheelEvent} ev **/
+  _handleCtrlWheel = (ev) => {
+    if (!ev.ctrlKey) return;
+    ev.preventDefault();
+    const zoomMultiplier =
+        // Zooming on macs was painfully slow; likely due to their better
+        // trackpads. Give them a higher zoom rate.
+        /Mac/i.test(navigator.platform)
+          ? 0.045
+          : // This worked well for me on Windows
+          0.03;
+
+    // Zoom around the cursor
+    this.updateScaleCenter(ev);
+    this.mode.autoFit = "none";
+    this.mode.scale *= 1 - Math.sign(ev.deltaY) * zoomMultiplier;
+  }
+
+  /**
+   * @param {object} param0
+   * @param {number} param0.clientX
+   * @param {number} param0.clientY
+   */
+  updateScaleCenter({ clientX, clientY }) {
+    const bc = this.mode.htmlDimensionsCacher.boundingClientRect;
+    this.scaleCenter = {
+      x: (clientX - bc.left) / this.mode.htmlDimensionsCacher.clientWidth,
+      y: (clientY - bc.top) / this.mode.htmlDimensionsCacher.clientHeight,
+    };
+  }
+
+  /**
+   * @param {number} newScale
+   * @param {number} oldScale
+   */
+  updateViewportOnZoom(newScale, oldScale) {
+    const container = this.mode.$container;
+    const { scrollTop: T, scrollLeft: L } = container;
+    const W = this.mode.htmlDimensionsCacher.clientWidth;
+    const H = this.mode.htmlDimensionsCacher.clientHeight;
+
+    // Scale factor change
+    const F = newScale / oldScale;
+
+    // Where in the viewport the zoom is centered on
+    const XPOS = this.scaleCenter.x;
+    const YPOS = this.scaleCenter.y;
+    const oldCenter = {
+      x: L + XPOS * W,
+      y: T + YPOS * H,
+    };
+    const newCenter = {
+      x: F * oldCenter.x,
+      y: F * oldCenter.y,
+    };
+
+    container.scrollTop = newCenter.y - YPOS * H;
+    container.scrollLeft = newCenter.x - XPOS * W;
+    this.pinchMoveFramePromiseRes?.();
+  }
+}
+
+export class TouchesMonitor {
+  /**
+   * @param {HTMLElement} container
+   */
+  constructor(container) {
+    /** @type {HTMLElement} */
+    this.container = container;
+    this.touches = 0;
+  }
+
+  attach() {
+    this.container.addEventListener("touchstart", this._updateTouchCount);
+    this.container.addEventListener("touchend", this._updateTouchCount);
+  }
+
+  detach() {
+    this.container.removeEventListener("touchstart", this._updateTouchCount);
+    this.container.removeEventListener("touchend", this._updateTouchCount);
+  }
+
+  /**
+   * @param {TouchEvent} ev
+   */
+  _updateTouchCount = (ev) => {
+    this.touches = ev.touches.length;
+  }
+}

package/src/BookReader/ModeThumb.js

@@ -1,6 +1,7 @@
 // @ts-check
 import { notInArray, clamp } from './utils.js';
 import { EVENTS } from './events.js';
+import { DragScrollable } from './DragScrollable.js';
 /** @typedef {import('../BookREader.js').default} BookReader */
 /** @typedef {import('./BookModel.js').PageIndex} PageIndex */
 /** @typedef {import('./BookModel.js').BookModel} BookModel */
@@ -131,7 +132,7 @@ export class ModeThumb {
     for (let i = 1; i < this.br.thumbRowBuffer; i++) {
       if (firstRow - i >= 0) { rowsToDisplay.push(firstRow - i); }
     }
-    rowsToDisplay.sort();
+    rowsToDisplay.sort((a, b) => a - b);
 
     // Create the thumbnail divs and images (lazy loaded)
     for (const row of rowsToDisplay) {
@@ -176,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();
@@ -214,8 +215,6 @@ export class ModeThumb {
 
     // highlight current page
     this.br.$('.pagediv' + this.br.currentIndex()).addClass('BRpagedivthumb_highlight');
-
-    this.br.updateToolbarZoom(this.br.reduce);
   }
 
   /**
@@ -234,20 +233,27 @@ export class ModeThumb {
   }
 
   /**
-   * @param {1 | -1} direction
+   * @param {'in' | 'out'} direction
    */
   zoom(direction) {
     const oldColumns = this.br.thumbColumns;
     switch (direction) {
-    case -1:
-      this.br.thumbColumns += 1;
-      break;
-    case 1:
+    case 'in':
       this.br.thumbColumns -= 1;
       break;
+    case 'out':
+      this.br.thumbColumns += 1;
+      break;
+    default:
+      console.error(`Unsupported direction: ${direction}`);
     }
 
-    this.br.thumbColumns = clamp(this.br.thumbColumns, 2, 8);
+    // Limit zoom in/out columns
+    this.br.thumbColumns = clamp(
+      this.br.thumbColumns,
+      this.br.options.thumbMinZoomColumns,
+      this.br.options.thumbMaxZoomColumns,
+    );
 
     if (this.br.thumbColumns != oldColumns) {
       this.br.displayedRows = [];  /* force a gallery redraw */
@@ -274,12 +280,12 @@ export class ModeThumb {
     this.br.refs.$brContainer.empty();
     this.br.refs.$brContainer.css({
       overflowY: 'scroll',
-      overflowX: 'auto'
+      overflowX: 'auto',
     });
 
     this.br.refs.$brPageViewEl = $("<div class='BRpageview'></div>");
     this.br.refs.$brContainer.append(this.br.refs.$brPageViewEl);
-    this.br.refs.$brContainer.dragscrollable({preventDefault:true});
+    this.dragScrollable = this.dragScrollable || new DragScrollable(this.br.refs.$brContainer[0], {preventDefault: true});
 
     this.br.bindGestures(this.br.refs.$brContainer);
 
@@ -330,7 +336,7 @@ export class ModeThumb {
     } else {
       this.br.animating = true;
       this.br.refs.$brContainer.stop(true)
-        .animate({ scrollTop: leafTop }, 'fast', () => { this.br.animating = false });
+        .animate({ scrollTop: leafTop }, 'fast', () => { this.br.animating = false; });
     }
   }
 }

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 {
   /**
@@ -21,12 +22,14 @@ export class Navbar {
 
     /** @type {Object} controls will be switch over "this.maximumControls" */
     this.minimumControls = [
-      'viewmode'
+      'viewmode',
     ];
     /** @type {Object} controls will be switch over "this.minimumControls" */
     this.maximumControls = [
-      'book_left', 'book_right', 'zoom_in', 'zoom_out', 'onepg', 'twopg', 'thumb'
+      'book_left', 'book_right', 'zoom_in', 'zoom_out', 'onepg', 'twopg', 'thumb',
     ];
+
+    this.updateNavIndexThrottled = throttle(this.updateNavIndex.bind(this), 250, false);
   }
 
   controlFor(controlName) {
@@ -38,7 +41,7 @@ export class Navbar {
     return `<li>
       <button class="BRicon ${option.className}" title="${option.label}">
         <div class="icon icon-${option.iconClassName}"></div>
-        <span class="tooltip">${option.label}</span>
+        <span class="BRtooltip">${option.label}</span>
       </button>
     </li>`;
   }
@@ -112,7 +115,7 @@ export class Navbar {
       this.updateViewModeButton(
         $button,
         currentViewModeButton.className,
-        currentViewModeButton.title
+        currentViewModeButton.title,
       );
     });
   }
@@ -127,7 +130,7 @@ export class Navbar {
       .removeClass()
       .addClass(`icon icon-${iconClass}`)
       .end()
-      .find('.tooltip')
+      .find('.BRtooltip')
       .text(tooltipText);
   }
 
@@ -135,16 +138,43 @@ export class Navbar {
    * Switch navbar controls on mobile and desktop
    */
   switchNavbarControls() {
-    // we don't want navbar controls switching with liner-notes
-    if (this.br.options.bookType !== 'linerNotes') {
-      if (this.br.refs.$brContainer.prop('clientWidth') < 640) {
+    if (this.br.refs.$brContainer.prop('clientWidth') < 640) {
+      this.showMinimumNavPageNum();
+      // we don't want navbar controls switching with liner-notes
+      if (this.br.options.bookType !== 'linerNotes') {
         this.showMinimumNavbarControls();
-      } else {
+      }
+    } else {
+      this.showMaximumNavPageNum();
+      // we don't want navbar controls switching with liner-notes
+      if (this.br.options.bookType !== 'linerNotes') {
         this.showMaximumNavbarControls();
       }
     }
   }
 
+  /**
+   * Switch Book Nav page number display to minimum/mobile
+   */
+  showMinimumNavPageNum() {
+    const minElement = document.querySelector('.BRcurrentpage.BRmin');
+    const maxElement = document.querySelector('.BRcurrentpage.BRmax');
+
+    if (minElement) minElement.classList.remove('hide');
+    if (maxElement) maxElement.classList.add('hide');
+  }
+
+  /**
+   * Switch Book Nav page number display to maximum/desktop
+   */
+  showMaximumNavPageNum() {
+    const minElement = document.querySelector('.BRcurrentpage.BRmin');
+    const maxElement = document.querySelector('.BRcurrentpage.BRmax');
+
+    if (minElement) minElement.classList.add('hide');
+    if (maxElement) maxElement.classList.remove('hide');
+  }
+
   /**
    * Switch Book Navbar controls to minimised
    * NOTE: only `this.minimumControls` and `this.maximumControls` switch on resize
@@ -200,7 +230,10 @@ export class Navbar {
                   <div class="BRpager"></div>
                   <div class="BRnavline"></div>
                 </div>
-                <p><span class='BRcurrentpage'></span></p>
+                <p>
+                  <span class="BRcurrentpage BRmax"></span>
+                  <span class="BRcurrentpage BRmin"></span>
+                </p>
               </li>
               ${this._renderControls()}
             </ul>
@@ -213,9 +246,9 @@ 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"
+      range: "min",
     });
 
     $slider.on('slide', (event, ui) => {
@@ -240,53 +273,25 @@ export class Navbar {
     return this.$nav;
   }
 
-  /**
-   * Initialize the navigation bar when embedded
-   */
-  initEmbed() {
-    const { br } = this;
-    // IA-specific
-    const thisLink = (window.location + '')
-      .replace('?ui=embed','')
-      .replace('/stream/', '/details/')
-      .replace('#', '/');
-    const logoHtml = br.showLogo ? `<a class="logo" href="${br.logoURL}" target="_blank"></a>` : '';
-
-    br.refs.$BRfooter = this.$root = $('<div class="BRfooter"></div>');
-    br.refs.$BRnav = this.$nav = $(
-      `<div class="BRnav BRnavEmbed">
-          ${logoHtml}
-          <span class="BRembedreturn">
-             <a href="${thisLink}" target="_blank">${br.bookTitle}</a>
-          </span>
-          <span class="BRtoolbarbuttons">
-            <button class="BRicon book_left"></button>
-            <button class="BRicon book_right"></button>
-            <button class="BRicon full"></button>
-          </span>
-      </div>`);
-    this.$root.append(this.$nav);
-    br.refs.$br.append(this.$root);
-  }
-
   /**
   * Returns the textual representation of the current page for the navbar
   * @param {number} index
+  * @param {boolean} [useMaxFormat = false]
   * @return {string}
   */
-  getNavPageNumString(index) {
+  getNavPageNumString(index, useMaxFormat = false) {
     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 = parseFloat(br.book.getPageNum(i));
         if (!isNaN(pageNumVal) && pageNumVal > maxPageNum) {
           maxPageNum = pageNumVal;
         }
@@ -294,7 +299,8 @@ export class Navbar {
       this.maxPageNum = maxPageNum;
     }
 
-    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum);
+    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum, useMaxFormat);
+
   }
 
   /**
@@ -302,7 +308,8 @@ export class Navbar {
    * @param {number} index
    */
   updateNavPageNum(index) {
-    this.$root.find('.BRcurrentpage').html(this.getNavPageNumString(index));
+    this.$root.find('.BRcurrentpage.BRmax').html(this.getNavPageNumString(index, true));
+    this.$root.find('.BRcurrentpage.BRmin').html(this.getNavPageNumString(index));
   }
 
   /**
@@ -322,18 +329,27 @@ export class Navbar {
  * @param {number} index
  * @param {number} numLeafs
  * @param {number|string} pageNum
- * @param {*} pageType @deprecated
+ * @param {*} pageType - Deprecated
  * @param {number} maxPageNum
+ * @param {boolean} [useMaxFormat = false]
  * @return {string}
  */
-export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum) {
+export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum, useMaxFormat = false) {
   const pageIsAsserted = pageNum[0] != 'n';
+  const pageIndex = index + 1;
+
+  if (!pageIsAsserted) {
+    pageNum = '—';
+  }
+
+  if (useMaxFormat === true) {
+    return `Page ${pageNum} (${pageIndex}/${numLeafs})`;
+  }
 
   if (!pageIsAsserted) {
-    const pageIndex = index + 1;
-    return `Page (${pageIndex} of ${numLeafs})`; // Page (8 of 10)
+    return `(${pageIndex} of ${numLeafs})`;
   }
 
-  const bookLengthLabel = maxPageNum ? ` of ${maxPageNum}` : '';
-  return `Page ${pageNum}${bookLengthLabel}`;
+  const bookLengthLabel = (maxPageNum && parseFloat(pageNum)) ? ` of ${maxPageNum}` : '';
+  return `${pageNum}${bookLengthLabel}`;
 }