@internetarchive/bookreader 5.0.0-3 → 5.0.0-30-d

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

@@ -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 */
@@ -234,20 +235,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 */
@@ -279,7 +287,7 @@ export class ModeThumb {
 
     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 +338,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

@@ -240,35 +240,6 @@ 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
@@ -331,9 +302,9 @@ export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum
 
   if (!pageIsAsserted) {
     const pageIndex = index + 1;
-    return `Page (${pageIndex} of ${numLeafs})`; // Page (8 of 10)
+    return `(${pageIndex} of ${numLeafs})`; // Page (8 of 10)
   }
 
   const bookLengthLabel = maxPageNum ? ` of ${maxPageNum}` : '';
-  return `Page ${pageNum}${bookLengthLabel}`;
+  return `${pageNum}${bookLengthLabel}`;
 }

package/src/BookReader/PageContainer.js

@@ -58,14 +58,14 @@ export class PageContainer {
       backgroundLayers.push(`url("${this.loadingImage}") center/20px no-repeat`);
     }
     if (nextBestLoadedReduce) {
-      backgroundLayers.push(`url("${this.page.getURI(nextBestLoadedReduce, 0)}") center/100% no-repeat`);
+      backgroundLayers.push(`url("${this.page.getURI(nextBestLoadedReduce, 0)}") center/100% 100% no-repeat`);
     }
 
     if (!alreadyLoaded) {
       this.$img
         .css('background', backgroundLayers.join(','))
         .one('loadend', async (ev) => {
-          $(ev.target).css({ 'background': '' })
+          $(ev.target).css({ 'background': '' });
           $(ev.target).parent().removeClass('BRpageloading');
         });
     }
@@ -73,3 +73,48 @@ export class PageContainer {
     return this;
   }
 }
+
+
+/**
+ * @param {PageModel} page
+ * @param {string} className
+ */
+export function createSVGPageLayer(page, className) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  svg.setAttribute("viewBox", `0 0 ${page.width} ${page.height}`);
+  svg.setAttribute('class', `BRPageLayer ${className}`);
+  svg.setAttribute('preserveAspectRatio', 'none');
+  return svg;
+}
+
+/**
+ * @param {{ l: number, r: number, b: number, t: number }} box
+ */
+export function boxToSVGRect({ l: left, r: right, b: bottom, t: top }) {
+  const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  rect.setAttribute("x", left.toString());
+  rect.setAttribute("y", top.toString());
+  rect.setAttribute("width", (right - left).toString());
+  rect.setAttribute("height", (bottom - top).toString());
+  return rect;
+}
+
+/**
+ * @param {string} layerClass
+ * @param {Array<{ l: number, r: number, b: number, t: number }>} boxes
+ * @param {PageModel} page
+ * @param {HTMLElement} containerEl
+ */
+export function renderBoxesInPageContainerLayer(layerClass, boxes, page, containerEl) {
+  const mountedSvg = containerEl.querySelector(`.${layerClass}`);
+  // Create the layer if it's not there
+  const svg = mountedSvg || createSVGPageLayer(page, layerClass);
+  if (!mountedSvg) {
+    // Insert after the image if the image is already loaded.
+    const imgEl = containerEl.querySelector('.BRpageimage');
+    if (imgEl) $(svg).insertAfter(imgEl);
+    else $(svg).prependTo(containerEl);
+  }
+  boxes.forEach(box => svg.appendChild(boxToSVGRect(box)));
+}

package/src/BookReader/ReduceSet.js

@@ -18,7 +18,7 @@ export const Pow2ReduceSet = {
   decr(n) {
     return 2 ** (Math.log2(n) - 1);
   }
-}
+};
 
 export const NAMED_REDUCE_SETS = {
   pow2: Pow2ReduceSet,

package/src/BookReader/Toolbar/Toolbar.js

@@ -54,7 +54,7 @@ export class Toolbar {
           .attr({href: br.bookUrl, title: br.bookUrlTitle})
           .addClass('BRreturn')
           .html(br.bookUrlText || br.bookTitle)
-      )
+      );
     } else if (br.bookTitle) {
       $titleSectionEl.append(br.bookUrlText || br.bookTitle);
     }
@@ -212,7 +212,7 @@ export class Toolbar {
     $form.appendTo($shareDiv);
 
     $form.find('.fieldset-embed input').on('change', event => {
-      const form = $(event.target).parents('form:first');
+      const form = $(event.target).parents('form').first();
       const params = {};
       params.mode = $(form.find('.fieldset-embed input[name=pages]:checked')).val();
       if (form.find('.fieldset-embed input[name=thispage]').prop('checked')) {
@@ -232,12 +232,12 @@ export class Toolbar {
     // Bind share buttons
 
     // Use url without hashes
-    $form.find('.facebook-share-button').click(() => {
+    $form.find('.facebook-share-button').on("click", () => {
       const params = $.param({ u: this._getSocialShareUrl() });
       const url = 'https://www.facebook.com/sharer.php?' + params;
       createPopup(url, 600, 400, 'Share');
     });
-    $form.find('.twitter-share-button').click(() => {
+    $form.find('.twitter-share-button').on("click", () => {
       const params = $.param({
         url: this._getSocialShareUrl(),
         text: br.bookTitle
@@ -245,7 +245,7 @@ export class Toolbar {
       const url = 'https://twitter.com/intent/tweet?' + params;
       createPopup(url, 600, 400, 'Share');
     });
-    $form.find('.email-share-button').click(() => {
+    $form.find('.email-share-button').on("click", () => {
       const body = `${br.bookTitle}\n\n${this._getSocialShareUrl()}`;
       window.location.href = `mailto:?subject=${encodeURI(br.bookTitle)}&body=${encodeURI(body)}`;
     });

package/src/BookReader/options.js

@@ -25,6 +25,10 @@ export const DEFAULT_OPTIONS = {
   thumbMaxLoading: 4,
   /** spacing between thumbnails */
   thumbPadding: 10,
+  /** min zoom in columns */
+  thumbMinZoomColumns: 2,
+  /** max zoom out columns */
+  thumbMaxZoomColumns: 8,
 
   /** @type {number | 'fast' | 'slow'} speed for flip animation */
   flipSpeed: 'fast',
@@ -275,6 +279,12 @@ export const DEFAULT_OPTIONS = {
    */
   startFullscreen: false,
 
+  /**
+   * @type {Boolean}
+   * will show logo at fullscreen mode
+  */
+  enableFSLogoShortcut: false,
+
   /**
    * @type {Boolean}
    * On init, by default, we want to handle resizing bookreader

package/src/BookReader/utils/HTMLDimensionsCacher.js

@@ -0,0 +1,44 @@
+// @ts-check
+import { debounce } from '../utils';
+
+/**
+ * Computing these things repeatedly is expensive (the browser needs to
+ * do a lot of computations/redrawing to make sure these are correct),
+ * so we store them here, and only recompute them when necessary:
+ * - window resize could have cause the container to change size
+ * - zoom could have cause scrollbars to appear/disappear, changing
+ *   the client size.
+ */
+export class HTMLDimensionsCacher {
+  clientWidth = 100;
+  clientHeight = 100;
+
+  boundingClientRect = { top: 0, left: 0 };
+
+  /**
+   * @param {HTMLElement} element
+   */
+  constructor(element) {
+    /** @type {HTMLElement} */
+    this.element = element;
+  }
+
+  updateClientSizes = () => {
+    const bc = this.element.getBoundingClientRect();
+    this.clientWidth = this.element.clientWidth;
+    this.clientHeight = this.element.clientHeight;
+    this.boundingClientRect.top = bc.top;
+    this.boundingClientRect.left = bc.left;
+  }
+  debouncedUpdateClientSizes = debounce(this.updateClientSizes, 150, false);
+
+  /** @param {EventTarget} win */
+  attachResizeListener(win = window) {
+    win.addEventListener('resize', this.debouncedUpdateClientSizes);
+  }
+
+  /** @param {EventTarget} win */
+  detachResizeListener(win = window) {
+    win.removeEventListener('resize', this.debouncedUpdateClientSizes);
+  }
+}

package/src/BookReader/utils.js

@@ -40,6 +40,24 @@ export function notInArray(value, array) {
   return !array.includes(value);
 }
 
+/**
+ * Determines the active element, going into shadow doms.
+ * @return {Element}
+ */
+export function getActiveElement(doc = document, recurseShadowDom = true) {
+  const activeElement = doc.activeElement;
+  if (recurseShadowDom && activeElement?.shadowRoot) {
+    return getActiveElement(activeElement.shadowRoot, true);
+  }
+  return activeElement;
+}
+
+/** Check if an input field/textarea is active. Also checks shadow DOMs. */
+export function isInputActive(doc = document) {
+  const activeEl = getActiveElement(doc);
+  return activeEl?.tagName == "INPUT" || activeEl?.tagName == "TEXTAREA";
+}
+
 /**
  * @param {HTMLIFrameElement} iframe
  * @return {Document}
@@ -80,16 +98,17 @@ export function encodeURIComponentPlus(value) {
 }
 
 /**
+ * @template {Function} T
  * Returns a function, that, as long as it continues to be invoked, will not
  * be triggered. The function will be called after it stops being called for
  * N milliseconds. If `immediate` is passed, trigger the function on the
  * leading edge, instead of the trailing.
  * @see https://davidwalsh.name/javascript-debounce-function
  *
- * @param {Function} func
+ * @param {T} func
  * @param {number} wait
  * @param {boolean} immediate
- * @return {Function}
+ * @return {T}
  */
 export function debounce(func, wait, immediate) {
   let timeout;
@@ -108,12 +127,13 @@ export function debounce(func, wait, immediate) {
 }
 
 /**
+ * @template T
  * Throttle function
  * @see https://remysharp.com/2010/07/21/throttling-function-calls
- * @param {Function} fn
+ * @param {T} fn
  * @param {number} threshold
  * @param {boolean} delay
- * @return {Function}
+ * @return {T}
  */
 export function throttle(fn, threshold, delay) {
   threshold || (threshold = 250);
@@ -160,14 +180,6 @@ export function PolyfilledCustomEvent(eventName, {bubbles = false, cancelable =
   return event;
 }
 
-/**
- * Promise based sleep - resolves at default 500ms
- * @param {Number} wait time in milliseconds
- */
-export function sleep(ms = 500) {
-  return new Promise(res => setTimeout(res(true), ms));
-}
-
 /*
  * Returns the number pixels something should be rendered at to be ~1n on the users
  * screen when measured with a ruler.
@@ -179,7 +191,50 @@ export function calcScreenDPI() {
   const dpi = el.offsetWidth;
   document.body.removeChild(el);
 
-  const screenDPI = dpi * devicePixelRatio;
+  // Do you believe in magic... numbers? We tested on some devices, and the displayed
+  // size of `width: 1in` was less than desired. On @pezvi's mac, it was ~75% ; on
+  // @cdrini's laptop it was ~85%. Since we want to avoid things appearing too small,
+  // let's just use a multiplier of 1.25
+  const screenDPI = dpi * 1.25;
   // This will return 0 in testing; never want it to be 0!
   return screenDPI == 0 ? 100 : screenDPI;
 }
+
+/**
+ * @param {number[]} nums
+ * @returns {number}
+ */
+export function sum(nums) {
+  return nums.reduce((cur, acc) => cur + acc, 0);
+}
+
+/**
+ * @template T
+ * @param {Generator<T>} gen
+ * @returns {T[]}
+ */
+export function genToArray(gen) {
+  const result = [];
+  for (const item of gen) {
+    result.push(item);
+  }
+  return result;
+}
+
+/**
+ * Check if arrays contain the same elements. Does reference comparison.
+ * @param {Array} arr1
+ * @param {Array} arr2
+ */
+export function arrEquals(arr1, arr2) {
+  return arr1.length == arr2.length && arr1.every((x, i) => x == arr2[i]);
+}
+
+/**
+ * Check if array has changed; namely to be used with lit's property.hasChanged
+ * @param {Array} [arr1]
+ * @param {Array} [arr2]
+ */
+export function arrChanged(arr1, arr2) {
+  return arr1 && arr2 && !arrEquals(arr1, arr2);
+}