@internetarchive/bookreader 5.0.0-88-alpha.8 → 5.0.0-88-alpha.10

package/dist/esm/BookReader/DragScrollable.js

@@ -0,0 +1,224 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// @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} */
+  var x;
+  /** @type {number} */
+  var 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
+  };
+}
+var 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) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    /** @param {MouseEvent} event */
+    _defineProperty(this, "_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 */
+    _defineProperty(this, "_dragContinueHandler", event => {
+      // User is dragging
+      // console.log('drag continue');
+      if (this._shouldAbort()) {
+        return true;
+      }
+      var lt = left_top(event);
+
+      // How much did the mouse move?
+      var delta = {
+        left: lt.left - this.lastCoord.left,
+        top: lt.top - this.lastCoord.top
+      };
+      var 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 */
+    _defineProperty(this, "_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?
+      var delta = {
+        left: Math.abs(this.lastCoord.left - this.firstCoord.left),
+        top: Math.abs(this.lastCoord.top - this.firstCoord.top)
+      };
+      var 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;
+      }
+    });
+    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() {
+    var isTouchDevice = !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator);
+    return isTouchDevice;
+  }
+}

package/dist/esm/BookReader/ImageCache.js

@@ -0,0 +1,122 @@
+// @ts-check
+/**
+ * Creates an image cache dictionary
+ * storing images in `<img>` tags so that
+ * BookReader can leverage browser caching
+ */
+/** @typedef {import("./BookModel").BookModel} BookModel */
+/** @typedef {import("./BookModel").PageIndex} PageIndex */
+/** @typedef {import("./ReduceSet").ReduceSet} ReduceSet */
+
+import { Pow2ReduceSet } from "./ReduceSet";
+export class ImageCache {
+  /**
+   * @param {BookModel} book
+   * @param {object} opts
+   * @param {boolean} [opts.useSrcSet]
+   * @param {ReduceSet} [opts.reduceSet]
+   */
+  constructor(book) {
+    var {
+      useSrcSet = false,
+      reduceSet = Pow2ReduceSet
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    this.book = book;
+    this.useSrcSet = useSrcSet;
+    this.reduceSet = reduceSet;
+    /** @type {{ [index: number]: { reduce: number, loaded: boolean }[] }} */
+    this.cache = {};
+    this.defaultScale = 8;
+  }
+
+  /**
+   * Get an image
+   * Checks cache first if image is available & of equal/better scale,
+   * if not, a new image gets created
+   *
+   * @param {PageIndex} index
+   * @param {Number} reduce
+   */
+  image(index, reduce) {
+    var cachedImages = this.cache[index] || [];
+    var sufficientImages = cachedImages.filter(x => x.loaded && x.reduce <= reduce);
+    if (sufficientImages.length) {
+      // Choose the largest reduction factor that meets our needs
+      var bestReduce = Math.max(...sufficientImages.map(e => e.reduce));
+      return this._serveImageElement(index, bestReduce);
+    } else {
+      // Don't use a cache entry; i.e. a fresh fetch will be made
+      // for this reduce
+      return this._serveImageElement(index, reduce);
+    }
+  }
+
+  /**
+   * Checks if an image of equal or greater quality has been loaded
+   * @param {PageIndex} index
+   * @param {Number} reduce
+   * @returns {Boolean}
+   */
+  imageLoaded(index, reduce) {
+    var _this$cache$index, _cacheImg$loaded;
+    var cacheImg = (_this$cache$index = this.cache[index]) === null || _this$cache$index === void 0 ? void 0 : _this$cache$index.find(e => e.reduce <= reduce);
+    return (_cacheImg$loaded = cacheImg === null || cacheImg === void 0 ? void 0 : cacheImg.loaded) !== null && _cacheImg$loaded !== void 0 ? _cacheImg$loaded : false;
+  }
+
+  /**
+   * Get the best image that's already loaded for the given index,
+   * trying to choose values less that the given reduce
+   * @param {PageIndex} index
+   * @param idealMaxReduce
+   * @returns {null | number}
+   */
+  getBestLoadedReduce(index) {
+    var _this$cache$index2;
+    var idealMaxReduce = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
+    var candidates = ((_this$cache$index2 = this.cache[index]) === null || _this$cache$index2 === void 0 ? void 0 : _this$cache$index2.filter(x => x.loaded)) || [];
+    if (!candidates.length) return null;
+    var lowerResImages = candidates.filter(e => e.reduce >= idealMaxReduce);
+    if (lowerResImages.length) {
+      // Choose the highest quality loaded lower res image
+      return Math.min(...lowerResImages.map(e => e.reduce));
+    }
+    // Otherwise choose whatever is closest to the reduce
+    var higherRestImages = candidates.filter(e => e.reduce < idealMaxReduce);
+    return Math.max(...higherRestImages.map(e => e.reduce));
+  }
+
+  /**
+   * @private
+   * Generates an image element on the fly from image info in cache
+   *
+   * @param {PageIndex} index
+   * @param {number} reduce
+   * @returns {JQuery<HTMLImageElement>} with base image classes
+   */
+  _serveImageElement(index, reduce) {
+    var _this$cache$index3;
+    var validReduce = this.reduceSet.floor(reduce);
+    var cacheEntry = (_this$cache$index3 = this.cache[index]) === null || _this$cache$index3 === void 0 ? void 0 : _this$cache$index3.find(e => e.reduce == validReduce);
+    if (!cacheEntry) {
+      cacheEntry = {
+        reduce: validReduce,
+        loaded: false
+      };
+      var entries = this.cache[index] || (this.cache[index] = []);
+      entries.push(cacheEntry);
+    }
+    var page = this.book.getPage(index);
+    var $img = $('<img />', {
+      'class': 'BRpageimage',
+      'alt': 'Book page image',
+      src: page.getURI(validReduce, 0)
+    }).data('reduce', validReduce);
+    if (this.useSrcSet) {
+      $img.attr('srcset', page.getURISrcSet(validReduce));
+    }
+    if (!cacheEntry.loaded) {
+      $img.one('load', () => cacheEntry.loaded = true);
+    }
+    return $img;
+  }
+}

package/dist/esm/BookReader/Mode1Up.js

@@ -0,0 +1,114 @@
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+// @ts-check
+import { Mode1UpLit } from './Mode1UpLit.js';
+import { DragScrollable } from './DragScrollable.js';
+/** @typedef {import('../BookReader.js').default} BookReader */
+/** @typedef {import('./BookModel.js').BookModel} BookModel */
+/** @typedef {import('./BookModel.js').PageIndex} PageIndex */
+
+export class Mode1Up {
+  /**
+   * @param {BookReader} br
+   * @param {BookModel} bookModel
+   */
+  constructor(br, bookModel) {
+    this.br = br;
+    this.book = bookModel;
+    this.mode1UpLit = new Mode1UpLit(bookModel, br);
+
+    /** @private */
+    this.$el = $(this.mode1UpLit)
+    // We CANNOT use `br-mode-1up` as a class, because it's the same
+    // as the name of the web component, and the webcomponents polyfill
+    // uses the name of component as a class for style scoping 😒
+    .addClass('br-mode-1up__root BRmode1up');
+
+    /** Has mode1up ever been rendered before? */
+    this.everShown = false;
+  }
+
+  // TODO: Might not need this anymore? Might want to delete.
+  /** @private */
+  get $brContainer() {
+    return this.br.refs.$brContainer;
+  }
+
+  /**
+   * This is called when we switch to one page view
+   */
+  prepare() {
+    var _this = this;
+    var startLeaf = this.br.currentIndex();
+    this.$brContainer.empty().css({
+      overflow: 'hidden'
+    }).append(this.$el);
+
+    // Need this in a setTimeout so that it happens after the browser has _actually_
+    // appended the element to the DOM
+    setTimeout(/*#__PURE__*/_asyncToGenerator(function* () {
+      if (!_this.everShown) {
+        _this.mode1UpLit.initFirstRender(startLeaf);
+        _this.everShown = true;
+        _this.mode1UpLit.requestUpdate();
+        yield _this.mode1UpLit.updateComplete;
+        new DragScrollable(_this.mode1UpLit, {
+          preventDefault: true,
+          dragSelector: '.br-mode-1up__visible-world',
+          // Only handle mouse events; let browser/interact.js handle touch
+          dragstart: 'mousedown',
+          dragcontinue: 'mousemove',
+          dragend: 'mouseup'
+        });
+      }
+      _this.mode1UpLit.jumpToIndex(startLeaf);
+      setTimeout(() => {
+        // Must explicitly call updateVisibleRegion, since no
+        // scroll event seems to fire.
+        _this.mode1UpLit.updateVisibleRegion();
+      });
+    }));
+    this.br.updateBrClasses();
+  }
+
+  /**
+   * BREAKING CHANGE: No longer supports pageX/pageY
+   * @param {PageIndex} index
+   * @param {number} [pageX] x position on the page (in pixels) to center on
+   * @param {number} [pageY] y position on the page (in pixels) to center on
+   * @param {boolean} [noAnimate]
+   */
+  jumpToIndex(index, pageX, pageY, noAnimate) {
+    // Only smooth for small distances
+    var distance = Math.abs(this.br.currentIndex() - index);
+    var smooth = !noAnimate && distance > 0 && distance <= 4;
+    this.mode1UpLit.jumpToIndex(index, {
+      smooth
+    });
+  }
+
+  /**
+   * @param {'in' | 'out'} direction
+   */
+  zoom(direction) {
+    switch (direction) {
+      case 'in':
+        this.mode1UpLit.zoomIn();
+        break;
+      case 'out':
+        this.mode1UpLit.zoomOut();
+        break;
+      default:
+        console.error("Unsupported direction: ".concat(direction));
+    }
+  }
+
+  /**
+   * Resize the current one page view
+   * Note this calls drawLeafs
+   */
+  resizePageView() {
+    this.mode1UpLit.htmlDimensionsCacher.updateClientSizes();
+    this.mode1UpLit.requestUpdate();
+  }
+}