@internetarchive/bookreader 5.0.0-18

package/src/BookReader/ModeSmoothZoom.js

@@ -0,0 +1,177 @@
+// @ts-check
+import Hammer from "hammerjs";
+/** @typedef {import('./utils/HTMLDimensionsCacher.js').HTMLDimensionsCacher} HTMLDimensionsCacher */
+
+/**
+ * @typedef {object} SmoothZoomable
+ * @property {HTMLElement} $container
+ * @property {HTMLElement} $visibleWorld
+ * @property {number} scale
+ * @property {{ x: number, y: number }} scaleCenter
+ * @property {HTMLDimensionsCacher} htmlDimensionsCacher
+ * @property {function(): void} [attachScrollListeners]
+ * @property {function(): void} [detachScrollListeners]
+ */
+
+/** Manages pinch-zoom, ctrl-wheel, and trackpad pinch smooth zooming. */
+export class ModeSmoothZoom {
+  /** @param {SmoothZoomable} mode */
+  constructor(mode) {
+    /** @type {SmoothZoomable} */
+    this.mode = mode;
+
+    /** 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, center: { x: number, y: number }}} */
+    this.lastEvent = null;
+    this.attached = false;
+
+    /** @type {function(function(): void): any} */
+    this.bufferFn = window.requestAnimationFrame.bind(window);
+
+    // Hammer.js by default set userSelect to None; we don't want that!
+    // TODO: Is there any way to do this not globally on Hammer?
+    delete Hammer.defaults.cssProps.userSelect;
+    this.hammer = new Hammer.Manager(this.mode.$container, {
+      touchAction: "pan-x pan-y",
+    });
+
+    this.hammer.add(new Hammer.Pinch());
+  }
+
+  attach() {
+    if (this.attached) return;
+
+    this.attachCtrlZoom();
+
+    // GestureEvents work only on Safari; they interfere with Hammer,
+    // so block them.
+    this.mode.$container.addEventListener('gesturestart', this._preventEvent);
+    this.mode.$container.addEventListener('gesturechange', this._preventEvent);
+    this.mode.$container.addEventListener('gestureend', this._preventEvent);
+
+    // The pinch listeners
+    this.hammer.on("pinchstart", this._pinchStart);
+    this.hammer.on("pinchmove", this._pinchMove);
+    this.hammer.on("pinchend", this._pinchEnd);
+    this.hammer.on("pinchcancel", this._pinchCancel);
+
+    this.attached = true;
+  }
+
+  detach() {
+    this.detachCtrlZoom();
+
+    // GestureEvents work only on Safari; they interfere with Hammer,
+    // so block them.
+    this.mode.$container.removeEventListener('gesturestart', this._preventEvent);
+    this.mode.$container.removeEventListener('gesturechange', this._preventEvent);
+    this.mode.$container.removeEventListener('gestureend', this._preventEvent);
+
+    // The pinch listeners
+    this.hammer.off("pinchstart", this._pinchStart);
+    this.hammer.off("pinchmove", this._pinchMove);
+    this.hammer.off("pinchend", this._pinchEnd);
+    this.hammer.off("pinchcancel", this._pinchCancel);
+
+    this.attached = false;
+  }
+
+  /** @param {Event} ev */
+  _preventEvent = (ev) => {
+    ev.preventDefault();
+    return false;
+  }
+
+  _pinchStart = () => {
+    // Do this in case the pinchend hasn't fired yet.
+    this.oldScale = 1;
+    this.mode.$visibleWorld.style.willChange = "transform";
+    this.detachCtrlZoom();
+    this.mode.detachScrollListeners?.();
+  }
+
+  /** @param {{ scale: number, center: { x: number, y: number }}} e */
+  _pinchMove = async (e) => {
+    this.lastEvent = e;
+    if (!this.pinchMoveFrame) {
+      let pinchMoveFramePromiseRes = null;
+      this.pinchMoveFramePromise = new Promise(
+        (res) => (pinchMoveFramePromiseRes = res)
+      );
+
+      // Buffer these events; only update the scale when request animation fires
+      this.pinchMoveFrame = this.bufferFn(() => {
+        this.updateScaleCenter({
+          clientX: this.lastEvent.center.x,
+          clientY: this.lastEvent.center.y,
+        });
+        this.mode.scale *= this.lastEvent.scale / this.oldScale;
+        this.oldScale = this.lastEvent.scale;
+        this.pinchMoveFrame = null;
+        pinchMoveFramePromiseRes();
+      });
+    }
+  }
+
+  _pinchEnd = async () => {
+    // Want this to happen after the pinchMoveFrame,
+    // if one is in progress; otherwise setting oldScale
+    // messes up the transform.
+    await this.pinchMoveFramePromise;
+    this.mode.scaleCenter = { x: 0.5, y: 0.5 };
+    this.oldScale = 1;
+    this.mode.$visibleWorld.style.willChange = "auto";
+    this.attachCtrlZoom();
+    this.mode.attachScrollListeners?.();
+  }
+
+  _pinchCancel = async () => {
+    // iOS fires pinchcancel ~randomly; it looks like it sometimes
+    // thinks the pinch becomes a pan, at which point it cancels?
+    await this._pinchEnd();
+  }
+
+  /** @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.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.mode.scaleCenter = {
+      x: (clientX - bc.left) / this.mode.htmlDimensionsCacher.clientWidth,
+      y: (clientY - bc.top) / this.mode.htmlDimensionsCacher.clientHeight,
+    };
+  }
+}

package/src/BookReader/ModeThumb.js

@@ -0,0 +1,336 @@
+// @ts-check
+import { notInArray, clamp } from './utils.js';
+import { EVENTS } from './events.js';
+/** @typedef {import('../BookREader.js').default} BookReader */
+/** @typedef {import('./BookModel.js').PageIndex} PageIndex */
+/** @typedef {import('./BookModel.js').BookModel} BookModel */
+
+/** @typedef {JQuery} $lazyLoadImgPlaceholder * jQuery element with data attributes: leaf, reduce */
+
+export class ModeThumb {
+  /**
+   * @param {BookReader} br
+   * @param {BookModel} bookModel
+   */
+  constructor(br, bookModel) {
+    this.br = br;
+    this.book = bookModel;
+  }
+
+  /**
+   * Draws the thumbnail view
+   * @param {number} [seekIndex] If seekIndex is defined, the view will be drawn
+   *    with that page visible (without any animated scrolling).
+   *
+   * Creates place holder for image to load after gallery has been drawn
+   */
+  drawLeafs(seekIndex) {
+    const { floor } = Math;
+    const { book } = this;
+    const viewWidth = this.br.refs.$brContainer.prop('scrollWidth') - 20; // width minus buffer
+
+    let leafHeight;
+    let rightPos = 0;
+    let bottomPos = 0;
+    let maxRight = 0;
+    let currentRow = 0;
+    let leafIndex = 0;
+    /** @type {Array<{ leafs?: Array<{num: PageIndex, left: number}>, height?: number, top?: number }>} */
+    const leafMap = [];
+
+    // Will be set to top of requested seek index, if set
+    let seekTop;
+
+    // Calculate the position of every thumbnail.  $$$ cache instead of calculating on every draw
+    // make `leafMap`
+    for (const page of book.pagesIterator({ combineConsecutiveUnviewables: true })) {
+      const leafWidth = this.br.thumbWidth;
+      if (rightPos + (leafWidth + this.br.thumbPadding) > viewWidth) {
+        currentRow++;
+        rightPos = 0;
+        leafIndex = 0;
+      }
+
+      // Init current row in leafMap
+      if (!leafMap[currentRow]) {
+        leafMap[currentRow] = {};
+      }
+      if (!leafMap[currentRow].leafs) {
+        leafMap[currentRow].leafs = [];
+        leafMap[currentRow].height = 0;
+        leafMap[currentRow].top = 0;
+      }
+      leafMap[currentRow].leafs[leafIndex] = {
+        num: page.index,
+        left: rightPos,
+      };
+
+      leafHeight = floor((page.height * this.br.thumbWidth) / page.width);
+      if (leafHeight > leafMap[currentRow].height) {
+        leafMap[currentRow].height = leafHeight;
+      }
+      if (leafIndex === 0) { bottomPos += this.br.thumbPadding + leafMap[currentRow].height; }
+      rightPos += leafWidth + this.br.thumbPadding;
+      if (rightPos > maxRight) { maxRight = rightPos; }
+      leafIndex++;
+
+      if (page.index == seekIndex) {
+        seekTop = bottomPos - this.br.thumbPadding - leafMap[currentRow].height;
+      }
+    }
+
+    // reset the bottom position based on thumbnails
+    this.br.refs.$brPageViewEl.height(bottomPos);
+
+    const pageViewBuffer = floor((this.br.refs.$brContainer.prop('scrollWidth') - maxRight) / 2) - 14;
+
+    // If seekTop is defined, seeking was requested and target found
+    if (typeof(seekTop) != 'undefined') {
+      this.br.refs.$brContainer.scrollTop(seekTop);
+    }
+
+    const scrollTop = this.br.refs.$brContainer.prop('scrollTop');
+    const scrollBottom = scrollTop + this.br.refs.$brContainer.height();
+
+    let leafTop = 0;
+    let leafBottom = 0;
+    const rowsToDisplay = [];
+    const imagesToDisplay = [];
+
+    // Visible leafs with least/greatest index
+    let leastVisible = book.getNumLeafs() - 1;
+    let mostVisible = 0;
+
+    // Determine the thumbnails in view
+    for (let i = 0; i < leafMap.length; i++) {
+      if (!leafMap[i]) { continue; }
+      leafBottom += this.br.thumbPadding + leafMap[i].height;
+      const topInView = (leafTop >= scrollTop) && (leafTop <= scrollBottom);
+      const bottomInView = (leafBottom >= scrollTop) && (leafBottom <= scrollBottom);
+      const middleInView = (leafTop <= scrollTop) && (leafBottom >= scrollBottom);
+      if (topInView || bottomInView || middleInView) {
+        rowsToDisplay.push(i);
+        if (leafMap[i].leafs[0].num < leastVisible) {
+          leastVisible = leafMap[i].leafs[0].num;
+        }
+        if (leafMap[i].leafs[leafMap[i].leafs.length - 1].num > mostVisible) {
+          mostVisible = leafMap[i].leafs[leafMap[i].leafs.length - 1].num;
+        }
+      }
+      if (leafTop > leafMap[i].top) { leafMap[i].top = leafTop; }
+      leafTop = leafBottom;
+    }
+    // at this point, `rowsToDisplay` now has all the rows in view
+
+    // create a buffer of preloaded rows before and after the visible rows
+    const firstRow = rowsToDisplay[0];
+    const lastRow = rowsToDisplay[rowsToDisplay.length - 1];
+    for (let i = 1; i < this.br.thumbRowBuffer + 1; i++) {
+      if (lastRow + i < leafMap.length) { rowsToDisplay.push(lastRow + i); }
+    }
+    for (let i = 1; i < this.br.thumbRowBuffer; i++) {
+      if (firstRow - i >= 0) { rowsToDisplay.push(firstRow - i); }
+    }
+    rowsToDisplay.sort();
+
+    // Create the thumbnail divs and images (lazy loaded)
+    for (const row of rowsToDisplay) {
+      if (notInArray(row, this.br.displayedRows)) {
+        if (!leafMap[row]) { continue; }
+        for (const { num: leaf, left: leafLeft } of leafMap[row].leafs) {
+          const leafWidth = this.br.thumbWidth;
+          const leafHeight = floor((book.getPageHeight(leaf) * this.br.thumbWidth) / book.getPageWidth(leaf));
+          const leafTop = leafMap[row].top;
+          let left = leafLeft + pageViewBuffer;
+          if ('rl' == this.br.pageProgression) {
+            left = viewWidth - leafWidth - left;
+          }
+
+          left += this.br.thumbPadding;
+          imagesToDisplay.push(leaf);
+
+          /* get thumbnail's reducer */
+          const idealReduce = floor(book.getPageWidth(leaf) / this.br.thumbWidth);
+          const nearestFactor2 = 2 * Math.round(idealReduce / 2);
+          const thumbReduce = nearestFactor2;
+
+          const pageContainer = this.br._createPageContainer(leaf)
+            .update({
+              dimensions: {
+                width: leafWidth,
+                height: leafHeight,
+                top: leafTop,
+                left,
+              },
+              reduce: thumbReduce,
+            });
+
+          pageContainer.$container.data('leaf', leaf).on('mouseup', event => {
+            // We want to suppress the fragmentChange triggers in `updateFirstIndex` and `switchMode`
+            // because otherwise it repeatedly triggers listeners and we get in an infinite loop.
+            // We manually trigger the `fragmentChange` once at the end.
+            this.br.updateFirstIndex(leaf, { suppressFragmentChange: true });
+            // as per request in webdev-4042, we want to switch 1-up mode while clicking on thumbnail leafs
+            this.br.switchMode(this.br.constMode1up, { suppressFragmentChange: true });
+
+            // 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.trigger(EVENTS.fragmentChange);
+            event.stopPropagation();
+          });
+
+          this.br.refs.$brPageViewEl.append(pageContainer.$container);
+        }
+      }
+    }
+
+    // Remove thumbnails that are not to be displayed
+    for (const row of this.br.displayedRows) {
+      if (notInArray(row, rowsToDisplay)) {
+        for (const { num: index } of leafMap[row]?.leafs) {
+          if (!imagesToDisplay?.includes(index)) {
+            this.br.$(`.pagediv${index}`)?.remove();
+          }
+        }
+      }
+    }
+
+    // Update which page is considered current to make sure a visible page is the current one
+    const currentIndex = this.br.currentIndex();
+    if (currentIndex < leastVisible) {
+      this.br.updateFirstIndex(leastVisible);
+    } else if (currentIndex > mostVisible) {
+      this.br.updateFirstIndex(mostVisible);
+    }
+
+    // remember what rows are displayed
+    this.br.displayedRows = rowsToDisplay.slice();
+
+    // remove previous highlights
+    this.br.$('.BRpagedivthumb_highlight').removeClass('BRpagedivthumb_highlight');
+
+    // highlight current page
+    this.br.$('.pagediv' + this.br.currentIndex()).addClass('BRpagedivthumb_highlight');
+
+    this.br.updateToolbarZoom(this.br.reduce);
+  }
+
+  /**
+   * Replaces placeholder image with real one
+   *
+   * @param {$lazyLoadImgPlaceholder} imgPlaceholder
+   */
+  lazyLoadImage(imgPlaceholder) {
+    const leaf =  $(imgPlaceholder).data('leaf');
+    const reduce =  $(imgPlaceholder).data('reduce');
+    const $img = this.br.imageCache.image(leaf, reduce);
+    const $parent = $(imgPlaceholder).parent();
+    /* March 16, 2021 (isa) - manually append & remove, `replaceWith` currently loses closure scope */
+    $($parent).append($img);
+    $(imgPlaceholder).remove();
+  }
+
+  /**
+   * @param {1 | -1} direction
+   */
+  zoom(direction) {
+    const oldColumns = this.br.thumbColumns;
+    switch (direction) {
+    case -1:
+      this.br.thumbColumns += 1;
+      break;
+    case 1:
+      this.br.thumbColumns -= 1;
+      break;
+    }
+
+    this.br.thumbColumns = clamp(this.br.thumbColumns, 2, 8);
+
+    if (this.br.thumbColumns != oldColumns) {
+      this.br.displayedRows = [];  /* force a gallery redraw */
+      this.prepare();
+    }
+  }
+
+  /**
+   * Returns the width per thumbnail to display the requested number of columns
+   * Note: #BRpageview must already exist since its width is used to calculate the
+   *       thumbnail width
+   * @param {number} thumbnailColumns
+   */
+  getThumbnailWidth(thumbnailColumns) {
+    const DEFAULT_THUMBNAIL_WIDTH = 100;
+
+    const padding = (thumbnailColumns + 1) * this.br.thumbPadding;
+    const width = (this.br.refs.$brPageViewEl.width() - padding) / (thumbnailColumns + 0.5); // extra 0.5 is for some space at sides
+    const idealThumbnailWidth = Math.floor(width);
+    return idealThumbnailWidth > 0 ? idealThumbnailWidth : DEFAULT_THUMBNAIL_WIDTH;
+  }
+
+  prepare() {
+    this.br.refs.$brContainer.empty();
+    this.br.refs.$brContainer.css({
+      overflowY: 'scroll',
+      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.br.bindGestures(this.br.refs.$brContainer);
+
+    // $$$ keep select enabled for now since disabling it breaks keyboard
+    //     nav in FF 3.6 (https://bugs.edge.launchpad.net/bookreader/+bug/544666)
+    // disableSelect(this.br.$('#BRpageview'));
+    this.br.thumbWidth = this.getThumbnailWidth(this.br.thumbColumns);
+    this.br.reduce = this.book.getPageWidth(0) / this.br.thumbWidth;
+    this.br.displayedRows = [];
+    // Draw leafs with current index directly in view (no animating to the index)
+    this.drawLeafs(this.br.currentIndex());
+    this.br.updateBrClasses();
+  }
+
+  /**
+   * @param {PageIndex} index
+   */
+  jumpToIndex(index) {
+    const { floor } = Math;
+    const { book } = this;
+    const viewWidth = this.br.refs.$brContainer.prop('scrollWidth') - 20; // width minus buffer
+    const leafWidth = this.br.thumbWidth;
+    let leafTop = 0;
+    let rightPos = 0;
+    let bottomPos = 0;
+    let rowHeight = 0;
+    let leafIndex = 0;
+
+    for (let i = 0; i <= index; i++) {
+      if (rightPos + (leafWidth + this.br.thumbPadding) > viewWidth) {
+        rightPos = 0;
+        rowHeight = 0;
+        leafIndex = 0;
+      }
+
+      const leafHeight = floor((book.getPageHeight(leafIndex) * this.br.thumbWidth) / book.getPageWidth(leafIndex));
+      if (leafHeight > rowHeight) { rowHeight = leafHeight; }
+      if (leafIndex == 0) {
+        leafTop = bottomPos;
+        bottomPos += this.br.thumbPadding + rowHeight;
+      }
+      rightPos += leafWidth + this.br.thumbPadding;
+      leafIndex++;
+    }
+    this.br.updateFirstIndex(index);
+    if (this.br.refs.$brContainer.prop('scrollTop') == leafTop) {
+      this.br.drawLeafs();
+    } else {
+      this.br.animating = true;
+      this.br.refs.$brContainer.stop(true)
+        .animate({ scrollTop: leafTop }, 'fast', () => { this.br.animating = false; });
+    }
+  }
+}