@internetarchive/bookreader 5.0.0-36 → 5.0.0-39

package/stat/BookReader/DragScrollable.js

@@ -1,233 +0,0 @@
-// @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/stat/BookReader/ImageCache.js

@@ -1,116 +0,0 @@
-// @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, { useSrcSet = false, reduceSet = Pow2ReduceSet } = {}) {
-    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) {
-    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);
-    } 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) {
-    const cacheImg = this.cache[index]?.find(e => e.reduce <= reduce);
-    return 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, idealMaxReduce = Infinity) {
-    const candidates = this.cache[index]?.filter(x => x.loaded) || [];
-    if (!candidates.length) return null;
-
-    const 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
-    const 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) {
-    const validReduce = this.reduceSet.floor(reduce);
-    let cacheEntry = this.cache[index]?.find(e => e.reduce == validReduce);
-    if (!cacheEntry) {
-      cacheEntry = { reduce: validReduce, 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);
-    if (this.useSrcSet) {
-      $img.attr('srcset', page.getURISrcSet(validReduce));
-    }
-    if (!cacheEntry.loaded) {
-      $img.one('load', () => cacheEntry.loaded = true);
-    }
-    return $img;
-  }
-}

package/stat/BookReader/Mode1Up.js

@@ -1,102 +0,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() {
-    const 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(async () => {
-      if (!this.everShown) {
-        this.mode1UpLit.initFirstRender(startLeaf);
-        this.everShown = true;
-        await this.mode1UpLit.requestUpdate();
-        new DragScrollable(this.mode1UpLit, {
-          preventDefault: true,
-          dragSelector: '.br-mode-1up__visible-world',
-          // Only handle mouse events; let browser/HammerJS handle touch
-          dragstart: 'mousedown',
-          dragcontinue: 'mousemove',
-          dragend: 'mouseup',
-        });
-      }
-      this.mode1UpLit.jumpToIndex(startLeaf);
-    });
-    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
-    const distance = Math.abs(this.br.currentIndex() - index);
-    const smooth = !noAnimate && 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: ${direction}`);
-    }
-  }
-
-  /**
-   * Resize the current one page view
-   * Note this calls drawLeafs
-   */
-  resizePageView() {
-    this.mode1UpLit.htmlDimensionsCacher.updateClientSizes();
-    this.mode1UpLit.requestUpdate();
-  }
-}