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

package/src/BookReader/BookModel.js

@@ -4,11 +4,6 @@ import { clamp } from './utils.js';
 /** @typedef {import('./options.js').PageData} PageData */
 /** @typedef {import('../BookReader.js').default} BookReader */
 
-// URI to display when a page is not viewable.
-// TODO Render configurable html for the user instead.
-// FIXME Don't reference files on archive.org
-const UNVIEWABLE_PAGE_URI = '/bookreader/static/preview-default.png';
-
 /**
  * Contains information about the Book/Document independent of the way it is
  * being rendering. Nothing here should reference e.g. the mode, zoom, etc.
@@ -23,42 +18,15 @@ export class BookModel {
     this.br = br;
     this.reduceSet = br.reduceSet;
     this.ppi = br.options?.ppi ?? DEFAULT_OPTIONS.ppi;
+    /** @type {'lr' | 'rl'} Page progression */
+    this.pageProgression = br.options?.pageProgression ?? DEFAULT_OPTIONS.pageProgression;
 
     /** @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) {
@@ -72,12 +40,12 @@ export class BookModel {
       heights.push(page.heightInches);
     }
 
-    widths.sort();
-    heights.sort();
+    widths.sort((a, b) => a - b);
+    heights.sort((a, b) => a - b);
 
     this._medianPageSize = {
       width: widths[Math.floor(widths.length / 2)],
-      height: heights[Math.floor(heights.length / 2)]
+      height: heights[Math.floor(heights.length / 2)],
     };
     return this._medianPageSize;
   }
@@ -187,7 +155,17 @@ export class BookModel {
    */
   // eslint-disable-next-line no-unused-vars
   getPageURI(index, reduce, rotate) {
-    return !this.getPageProp(index, 'viewable', true) ? UNVIEWABLE_PAGE_URI : this.getPageProp(index, 'uri');
+    if (!this.getPageProp(index, 'viewable', true)) {
+      const uri = this.br.options.unviewablePageURI;
+      if (uri.startsWith('.')) {
+        // It's a relative path, so make it relative to the images path
+        return this.br.options.imagesBaseURL + uri;
+      } else {
+        return uri;
+      }
+    } else {
+      return this.getPageProp(index, 'uri');
+    }
   }
 
   /**
@@ -226,7 +204,7 @@ export class BookModel {
    * @return {[PageIndex, PageIndex]} eg [0, 1]
    */
   getSpreadIndices(pindex) {
-    if (this.br.pageProgression == 'rl') {
+    if (this.pageProgression == 'rl') {
       return this.getPageSide(pindex) == 'R' ? [pindex + 1, pindex] : [pindex, pindex - 1];
     } else {
       return this.getPageSide(pindex) == 'L' ? [pindex, pindex + 1] : [pindex - 1, pindex];
@@ -379,8 +357,9 @@ export class PageModel {
    * @param {PageIndex} index
    */
   constructor(book, index) {
-    // TODO: Get default from config
-    this.ppi = book._getDataProp(index, 'ppi', book.ppi);
+    // Values less than 10 cause the UI to not work correctly
+    const pagePPI = book._getDataProp(index, 'ppi', book.ppi);
+    this.ppi = Math.max(pagePPI < 10 ? book.ppi : pagePPI, 10);
     this.book = book;
     this.index = index;
     this.width = book.getPageWidth(index);
@@ -437,6 +416,42 @@ export class PageModel {
     return this.findNext();
   }
 
+  /** @type {PageModel | null} */
+  get left() {
+    return this.book.pageProgression === 'lr' ? this.prev : this.next;
+  }
+
+  /** @type {PageModel | null} */
+  get right() {
+    return this.book.pageProgression === 'lr' ? this.next : this.prev;
+  }
+
+  /**
+   * @type {{left: PageModel | null, right: PageModel | null}}
+   */
+  get spread() {
+    return {
+      left: this.pageSide === 'L' ? this : this.left,
+      right: this.pageSide === 'R' ? this : this.right,
+    };
+  }
+
+  /**
+   * @param {number} pages
+   */
+  goLeft(pages) {
+    const newIndex = this.book.pageProgression === 'lr' ? this.index - pages : this.index + pages;
+    return this.book.getPage(newIndex);
+  }
+
+  /**
+   * @param {number} pages
+   */
+  goRight(pages) {
+    const newIndex = this.book.pageProgression === 'lr' ? this.index + pages : this.index - pages;
+    return this.book.getPage(newIndex);
+  }
+
   /**
    * @param {number} reduce
    * @param {number} rotate
@@ -498,6 +513,26 @@ export class PageModel {
       return new PageModel(this.book, this.index - 1);
     }
   }
+
+  /**
+   * @param {object} [arg0]
+   * @param {boolean} [arg0.combineConsecutiveUnviewables] Whether to only yield the first page
+   * of a series of unviewable pages instead of each page
+   * @return {PageModel|void}
+   */
+  findLeft({ combineConsecutiveUnviewables = false } = {}) {
+    return this.book.pageProgression === 'lr' ? this.findPrev({ combineConsecutiveUnviewables }) : this.findNext({ combineConsecutiveUnviewables });
+  }
+
+  /**
+   * @param {object} [arg0]
+   * @param {boolean} [arg0.combineConsecutiveUnviewables] Whether to only yield the first page
+   * of a series of unviewable pages instead of each page
+   * @return {PageModel|void}
+   */
+  findRight({ combineConsecutiveUnviewables = false } = {}) {
+    return this.book.pageProgression === 'lr' ? this.findNext({ combineConsecutiveUnviewables }) : this.findPrev({ combineConsecutiveUnviewables });
+  }
 }
 
 // There are a few main ways we can reference a specific page in a book:

package/src/BookReader/DragScrollable.js

@@ -0,0 +1,233 @@
+// @ts-check
+/*
+ * jQuery dragscrollable Plugin
+ * Based off version: 1.0 (25-Jun-2009)
+ * Copyright (c) 2009 Miquel Herrera
+ *
+ * Portions Copyright (c) 2010 Reg Braithwaite
+ *          Copyright (c) 2010 Internet Archive / Michael Ang
+ *          Copyright (c) 2016 Internet Archive / Richard Caceres
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ *   http://www.opensource.org/licenses/mit-license.php
+ *   http://www.gnu.org/licenses/gpl.html
+ */
+
+/**
+ * @param {string} string_of_events
+ * @param {string} ns
+ * @returns
+ */
+function append_namespace(string_of_events, ns) {
+  return string_of_events
+    .split(' ')
+    .map(event_name => event_name + ns)
+    .join(' ');
+}
+
+function left_top(event) {
+  /** @type {number} */
+  let x;
+  /** @type {number} */
+  let y;
+  if (typeof(event.clientX) != 'undefined') {
+    x = event.clientX;
+    y = event.clientY;
+  }
+  else if (typeof(event.screenX) != 'undefined') {
+    x = event.screenX;
+    y = event.screenY;
+  }
+  else if (typeof(event.targetTouches) != 'undefined') {
+    x = event.targetTouches[0].pageX;
+    y = event.targetTouches[0].pageY;
+  }
+  else if (typeof(event.originalEvent) == 'undefined') {
+    console.error("don't understand x and y for " + event.type, event);
+  }
+  else if (typeof(event.originalEvent.clientX) != 'undefined') {
+    x = event.originalEvent.clientX;
+    y = event.originalEvent.clientY;
+  }
+  else if (typeof(event.originalEvent.screenX) != 'undefined') {
+    x = event.originalEvent.screenX;
+    y = event.originalEvent.screenY;
+  }
+  else if (typeof(event.originalEvent.targetTouches) != 'undefined') {
+    x = event.originalEvent.targetTouches[0].pageX;
+    y = event.originalEvent.targetTouches[0].pageY;
+  }
+
+  return { left: x, top: y };
+}
+
+const DEFAULT_OPTIONS = {
+  /**
+   * @type {String|HTMLElement} jQuery selector to apply to each wrapped element to
+   * find which will be the dragging elements. Defaults to the first child of scrollable
+   * element
+   */
+  dragSelector: '>:first',
+
+  /** Will the dragging element accept propagated events? default is yes, a propagated
+   * mouse event on a inner element will be accepted and processed. If set to false,
+   * only events originated on the draggable elements will be processed. */
+  acceptPropagatedEvent: true,
+
+  /**
+   * Prevents the event to propagate further effectively disabling other default actions
+   */
+  preventDefault: true,
+
+  dragstart: 'mousedown touchstart',
+  dragcontinue: 'mousemove touchmove',
+  dragend: 'mouseup touchend', // mouseleave
+  dragMinDistance: 5,
+  namespace: '.ds',
+
+  /** Scroll the window rather than the element */
+  scrollWindow: false,
+};
+
+/**
+ * Adds the ability to manage elements scroll by dragging
+ * one or more of its descendant elements. Options parameter
+ * allow to specifically select which inner elements will
+ * respond to the drag events.
+ *  usage examples:
+ *
+ *  To add the scroll by drag to the element id=viewport when dragging its
+ *  first child accepting any propagated events
+ *	`new DragScrollable($('#viewport')[0]);`
+ *
+ *  To add the scroll by drag ability to any element div of class viewport
+ *  when dragging its first descendant of class dragMe responding only to
+ *  evcents originated on the '.dragMe' elements.
+ *	```js
+ *  new DragScrollable($('div.viewport')[0], {
+ *      dragSelector: '.dragMe:first',
+ *	    acceptPropagatedEvent: false
+ *  });
+ * ```
+ *
+ *  Notice that some 'viewports' could be nested within others but events
+ *  would not interfere as acceptPropagatedEvent is set to false.
+ */
+export class DragScrollable {
+  /**
+   * @param {HTMLElement} element
+   * @param {Partial<DEFAULT_OPTIONS>} options
+   */
+  constructor(element, options = {}) {
+    this.handling_element = $(element);
+    /** @type {typeof DEFAULT_OPTIONS} */
+    this.settings = $.extend({}, DEFAULT_OPTIONS, options || {});
+    this.firstCoord = { left: 0, top: 0 };
+    this.lastCoord = { left: 0, top: 0 };
+
+    this.settings.dragstart = append_namespace(this.settings.dragstart, this.settings.namespace);
+    this.settings.dragcontinue = append_namespace(this.settings.dragcontinue, this.settings.namespace);
+    //settings.dragend = append_namespace(settings.dragend, settings.namespace);
+
+    // Set mouse initiating event on the desired descendant
+    this.handling_element.find(this.settings.dragSelector)
+      .on(this.settings.dragstart, this._dragStartHandler);
+  }
+
+  _shouldAbort() {
+    const isTouchDevice = !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator);
+    return isTouchDevice;
+  }
+
+  /** @param {MouseEvent} event */
+  _dragStartHandler = (event) => {
+    if (this._shouldAbort()) { return true; }
+
+    // mousedown, left click, check propagation
+    if (event.which > 1 ||
+    (!this.settings.acceptPropagatedEvent && event.target != this.handling_element[0])) {
+      return false;
+    }
+
+    // Initial coordinates will be the last when dragging
+    this.lastCoord = this.firstCoord = left_top(event);
+
+    this.handling_element
+      .on(this.settings.dragcontinue, this._dragContinueHandler)
+    //.on(this.settings.dragend, this._dragEndHandler)
+    ;
+
+    // Note, we bind using addEventListener so we can use "capture" binding
+    // instead of "bubble" binding
+    this.settings.dragend.split(' ').forEach(event_name => {
+      this.handling_element[0].addEventListener(event_name, this._dragEndHandler, true);
+    });
+
+    if (this.settings.preventDefault) {
+      event.preventDefault();
+      return false;
+    }
+  }
+
+  /** @param {MouseEvent} event */
+  _dragContinueHandler = (event) => { // User is dragging
+    // console.log('drag continue');
+    if (this._shouldAbort()) { return true; }
+
+    const lt = left_top(event);
+
+    // How much did the mouse move?
+    const delta = {
+      left: (lt.left - this.lastCoord.left),
+      top: (lt.top - this.lastCoord.top),
+    };
+
+    const scrollTarget = this.settings.scrollWindow ? $(window) : this.handling_element;
+
+    // Set the scroll position relative to what ever the scroll is now
+    scrollTarget.scrollLeft( scrollTarget.scrollLeft() - delta.left );
+    scrollTarget.scrollTop(	scrollTarget.scrollTop() - delta.top );
+
+    // Save where the cursor is
+    this.lastCoord = lt;
+
+    if (this.settings.preventDefault) {
+      event.preventDefault();
+      return false;
+    }
+  }
+
+  /** @param {MouseEvent} event */
+  _dragEndHandler = (event) => { // Stop scrolling
+    //console.log('dragEndHandler');
+
+    if (this._shouldAbort()) { return true; }
+
+    this.handling_element
+      .off(this.settings.dragcontinue)
+      // Note, for some reason, even though I removeEventListener below,
+      // this call to unbind is still necessary. I don't know why.
+      .off(this.settings.dragend);
+
+    // Note, we bind using addEventListener so we can use "capture" binding
+    // instead of "bubble" binding
+    this.settings.dragend.split(' ').forEach(event_name => {
+      this.handling_element[0].removeEventListener(event_name, this._dragEndHandler, true);
+    });
+
+    // How much did the mouse move total?
+    const delta = {
+      left: Math.abs(this.lastCoord.left - this.firstCoord.left),
+      top: Math.abs(this.lastCoord.top - this.firstCoord.top),
+    };
+    const distance = Math.max(delta.left, delta.top);
+
+    // Allow event to propagate if min distance was not achieved
+    if (this.settings.preventDefault && distance > this.settings.dragMinDistance) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      return false;
+    }
+  }
+}

package/src/BookReader/ImageCache.js

@@ -7,8 +7,10 @@
 /** @typedef {import("./BookModel").BookModel} BookModel */
 /** @typedef {import("./BookModel").PageIndex} PageIndex */
 /** @typedef {import("./ReduceSet").ReduceSet} ReduceSet */
+/** @typedef {import("./options").BookReaderOptions} BookReaderOptions */
 
 import { Pow2ReduceSet } from "./ReduceSet";
+import { DEFAULT_OPTIONS } from "./options";
 
 export class ImageCache {
   /**
@@ -16,11 +18,25 @@ export class ImageCache {
    * @param {object} opts
    * @param {boolean} [opts.useSrcSet]
    * @param {ReduceSet} [opts.reduceSet]
+   * @param {BookReaderOptions['renderPageURI']} [opts.renderPageURI]
    */
-  constructor(book, { useSrcSet = false, reduceSet = Pow2ReduceSet } = {}) {
+  constructor(
+    book,
+    {
+      useSrcSet = false,
+      reduceSet = Pow2ReduceSet,
+      renderPageURI = DEFAULT_OPTIONS.renderPageURI,
+    } = {},
+  ) {
+    /** @type {BookModel} */
     this.book = book;
+    /** @type {boolean} */
     this.useSrcSet = useSrcSet;
+    /** @type {ReduceSet} */
     this.reduceSet = reduceSet;
+    /** @type {BookReaderOptions['renderPageURI']} */
+    this.renderPageURI = renderPageURI;
+
     /** @type {{ [index: number]: { reduce: number, loaded: boolean }[] }} */
     this.cache = {};
     this.defaultScale = 8;
@@ -33,19 +49,35 @@ export class ImageCache {
    *
    * @param {PageIndex} index
    * @param {Number} reduce
+   * @param {HTMLImageElement?} [img]
    */
-  image(index, reduce) {
+  image(index, reduce, img = null) {
+    const finalReduce = this.getFinalReduce(index, reduce);
+    return this._serveImageElement(index, finalReduce, img);
+  }
+
+  /**
+   * Get the final reduce factor to use for the given index
+   *
+   * @param {PageIndex} index
+   * @param {Number} reduce
+   */
+  getFinalReduce(index, reduce) {
     const cachedImages = this.cache[index] || [];
     const sufficientImages = cachedImages
       .filter(x => x.loaded && x.reduce <= reduce);
+
     if (sufficientImages.length) {
       // Choose the largest reduction factor that meets our needs
       const bestReduce = Math.max(...sufficientImages.map(e => e.reduce));
-      return this._serveImageElement(index, bestReduce);
+      // Don't need to floor here, since we know the image is in the cache
+      // and hence was already floor'd by the below `else` clause before
+      // it was added
+      return bestReduce;
     } else {
       // Don't use a cache entry; i.e. a fresh fetch will be made
       // for this reduce
-      return this._serveImageElement(index, reduce);
+      return this.reduceSet.floor(reduce);
     }
   }
 
@@ -87,26 +119,27 @@ export class ImageCache {
    *
    * @param {PageIndex} index
    * @param {number} reduce
+   * @param {HTMLImageElement?} [img]
    * @returns {JQuery<HTMLImageElement>} with base image classes
    */
-  _serveImageElement(index, reduce) {
-    const validReduce = this.reduceSet.floor(reduce);
-    let cacheEntry = this.cache[index]?.find(e => e.reduce == validReduce);
+  _serveImageElement(index, reduce, img = null) {
+    let cacheEntry = this.cache[index]?.find(e => e.reduce == reduce);
     if (!cacheEntry) {
-      cacheEntry = { reduce: validReduce, loaded: false };
+      cacheEntry = { reduce, loaded: false };
       const entries = this.cache[index] || (this.cache[index] = []);
       entries.push(cacheEntry);
     }
     const page = this.book.getPage(index);
 
-    const $img = $('<img />', {
-      'class': 'BRpageimage',
-      'alt': 'Book page image',
-      src: page.getURI(validReduce, 0),
-    })
-      .data('reduce', validReduce);
+    const uri = page.getURI(reduce, 0);
+    const $img = $(img || document.createElement('img'))
+      .addClass('BRpageimage')
+      .attr('alt', 'Book page image')
+      .data('reduce', reduce)
+      .data('src', uri);
+    this.renderPageURI($img[0], uri);
     if (this.useSrcSet) {
-      $img.attr('srcset', page.getURISrcSet(validReduce));
+      $img.attr('srcset', page.getURISrcSet(reduce));
     }
     if (!cacheEntry.loaded) {
       $img.one('load', () => cacheEntry.loaded = true);