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

package/src/BookReader/PageContainer.js

@@ -2,6 +2,8 @@
 /** @typedef {import('./BookModel.js').PageModel} PageModel */
 /** @typedef {import('./ImageCache.js').ImageCache} ImageCache */
 
+import { sleep } from './utils.js';
+
 
 export class PageContainer {
   /**
@@ -9,12 +11,10 @@ export class PageContainer {
    * @param {object} opts
    * @param {boolean} opts.isProtected Whether we're in a protected book
    * @param {ImageCache} opts.imageCache
-   * @param {string} opts.loadingImage
    */
-  constructor(page, {isProtected, imageCache, loadingImage}) {
+  constructor(page, {isProtected, imageCache}) {
     this.page = page;
     this.imageCache = imageCache;
-    this.loadingImage = loadingImage;
     this.$container = $('<div />', {
       'class': `BRpagecontainer ${page ? `pagediv${page.index}` : 'BRemptypage'}`,
       css: { position: 'absolute' },
@@ -43,33 +43,127 @@ export class PageContainer {
       return;
     }
 
-    const alreadyLoaded = this.imageCache.imageLoaded(this.page.index, reduce);
-    const nextBestLoadedReduce = !alreadyLoaded && this.imageCache.getBestLoadedReduce(this.page.index, reduce);
+    const finalReduce = this.imageCache.getFinalReduce(this.page.index, reduce);
+    const newImageURI = this.page.getURI(finalReduce, 0);
 
-    // Add the actual, highres image
-    this.$img?.remove();
-    this.$img = this.imageCache
-      .image(this.page.index, reduce)
-      .prependTo(this.$container);
+    // Note: These must be computed _before_ we call .image()
+    const alreadyLoaded = this.imageCache.imageLoaded(this.page.index, finalReduce);
+    const nextBestLoadedReduce = this.imageCache.getBestLoadedReduce(this.page.index, reduce);
 
-    const backgroundLayers = [];
-    if (!alreadyLoaded) {
-      this.$container.addClass('BRpageloading');
-      backgroundLayers.push(`url("${this.loadingImage}") center/20px no-repeat`);
+    // Avoid removing/re-adding the image if it's already there
+    // This can be called quite a bit, so we need to be fast
+    if (this.$img?.data('src') == newImageURI) {
+      return this;
     }
-    if (nextBestLoadedReduce) {
-      backgroundLayers.push(`url("${this.page.getURI(nextBestLoadedReduce, 0)}") center/100% no-repeat`);
+
+    let $oldImg = this.$img;
+    this.$img = this.imageCache.image(this.page.index, finalReduce);
+    if ($oldImg) {
+      this.$img.insertAfter($oldImg);
+    } else {
+      this.$img.prependTo(this.$container);
     }
 
     if (!alreadyLoaded) {
-      this.$img
-        .css('background', backgroundLayers.join(','))
-        .one('loadend', async (ev) => {
-          $(ev.target).css({ 'background': '' })
-          $(ev.target).parent().removeClass('BRpageloading');
-        });
+      this.$container.addClass('BRpageloading');
     }
 
+    if (!alreadyLoaded && nextBestLoadedReduce) {
+      // If we have a slightly lower quality image loaded, use that as the background
+      // while the higher res one loads
+      const nextBestUri = this.page.getURI(nextBestLoadedReduce, 0);
+      if ($oldImg) {
+        if ($oldImg.data('src') == nextBestUri) {
+          // Do nothing! It's already showing the right thing
+        } else {
+          // We have a different src, need to update the src
+          this.imageCache.image(this.page.index, nextBestLoadedReduce, $oldImg[0]);
+        }
+      } else {
+        // We don't have an old <img>, so we need to create a new one
+        $oldImg = this.imageCache.image(this.page.index, nextBestLoadedReduce);
+        $oldImg.prependTo(this.$container);
+      }
+    }
+
+    this.$img
+      .one('load', async (ev) => {
+        this.$container.removeClass('BRpageloading');
+        // `load` can fire a little early, so wait a spell before removing the old image
+        // to avoid flicker
+        await sleep(100);
+        $oldImg?.remove();
+      });
+
     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 {PageModel} page
+ * @param {string} className
+ */
+export function createDIVPageLayer(page, className) {
+  const div = document.createElement("div");
+  div.style.width = `${page.width}px`;
+  div.style.height = `${page.height}px`;
+  div.setAttribute('class', `BRPageLayer ${className}`);
+  return div;
+}
+
+/**
+ * @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());
+
+  // Some style; corner radius 4px. Can't set this in CSS yet
+  rect.setAttribute("rx", "4");
+  rect.setAttribute("ry", "4");
+  return rect;
+}
+
+/**
+ * @param {string} layerClass
+ * @param {Array<{ l: number, r: number, b: number, t: number }>} boxes
+ * @param {PageModel} page
+ * @param {HTMLElement} containerEl
+ * @param {string[]} [rectClasses] CSS classes to add to the rects
+ */
+export function renderBoxesInPageContainerLayer(layerClass, boxes, page, containerEl, rectClasses = null) {
+  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);
+  }
+
+  for (const [i, box] of boxes.entries()) {
+    const rect = boxToSVGRect(box);
+    if (rectClasses) {
+      rect.setAttribute('class', rectClasses[i]);
+    }
+    svg.appendChild(rect);
+  }
+}

package/src/BookReader/ReduceSet.js

@@ -7,7 +7,7 @@
 /** @type {ReduceSet} */
 export const IntegerReduceSet = {
   floor: Math.floor,
-  decr(n) { return n - 1; }
+  decr(n) { return n - 1; },
 };
 
 /** @type {ReduceSet} */
@@ -17,8 +17,8 @@ export const Pow2ReduceSet = {
   },
   decr(n) {
     return 2 ** (Math.log2(n) - 1);
-  }
-}
+  },
+};
 
 export const NAMED_REDUCE_SETS = {
   pow2: Pow2ReduceSet,

package/src/BookReader/Toolbar/Toolbar.js

@@ -53,8 +53,8 @@ export class Toolbar {
         $('<a>')
           .attr({href: br.bookUrl, title: br.bookUrlTitle})
           .addClass('BRreturn')
-          .html(br.bookUrlText || br.bookTitle)
-      )
+          .html(br.bookUrlText || br.bookTitle),
+      );
     } else if (br.bookTitle) {
       $titleSectionEl.append(br.bookUrlText || br.bookTitle);
     }
@@ -75,8 +75,6 @@ export class Toolbar {
     br.$('.BRnavCntl').addClass('BRup');
     br.$('.pause').hide();
 
-    this.updateToolbarZoom(br.reduce); // Pretty format
-
     // We build in mode 2
     br.refs.$BRtoolbar.append();
 
@@ -115,7 +113,7 @@ export class Toolbar {
       onLoad: () => {
         br.trigger(EVENTS.stop);
         br.$('.BRpageviewValue').val(window.location.href);
-      }
+      },
     });
     br.$('.info').colorbox({
       inline: true,
@@ -123,35 +121,10 @@ export class Toolbar {
       href: br.$('.BRinfo'),
       onLoad: () => {
         br.trigger(EVENTS.stop);
-      }
+      },
     });
   }
 
-  /**
-   * @deprecated
-   * @todo .BRzoom doesn't exist anywhere, so this is likely dead code
-   * Update the displayed zoom factor based on reduction factor
-   * @param {number} reduce
-   */
-  updateToolbarZoom(reduce) {
-    const { br } = this;
-    // $$$ TODO preserve zoom/fit for each mode
-    const autofit = br.mode == br.constMode2up ? br.twoPage.autofit : br.onePage.autofit;
-    /** @type {string} */
-    let value;
-    if (autofit) {
-      value = autofit.slice(0,1).toUpperCase() + autofit.slice(1);
-    } else {
-      value = (100 / reduce)
-        .toFixed(2)
-        // Strip trailing zeroes and decimal if all zeroes
-        .replace(/0+$/,'')
-        .replace(/\.$/,'')
-        + '%';
-    }
-    br.$('.BRzoom').text(value);
-  }
-
   /**
    * @param {JQuery} $shareDiv
    */
@@ -212,11 +185,11 @@ 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')) {
-        params.page = br.getPageNum(br.currentIndex());
+        params.page = br.book.getPageNum(br.currentIndex());
       }
 
       if (br.getEmbedCode) {
@@ -232,20 +205,20 @@ 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
+        text: br.bookTitle,
       });
       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)}`;
     });
@@ -331,11 +304,11 @@ export class Toolbar {
   }
 }
 
-export function blankInfoDiv() {
+function blankInfoDiv() {
   return $(`
     <div class="BRfloat BRinfo">
       <div class="BRfloatHead">About this book
-        <button class="floatShut" href="javascript:;" onclick="$.fn.colorbox.close();"><span class="shift">Close</span></button>
+        <button class="floatShut" href="javascript:;" onclick="$.fn.colorbox.close();"><span class="br-colorbox-shift">Close</span></button>
       </div>
       <div class="BRfloatBody">
         <div class="BRfloatCover"></div>
@@ -351,12 +324,12 @@ export function blankInfoDiv() {
     </div>`);
 }
 
-export function blankShareDiv() {
+function blankShareDiv() {
   return $(`
     <div class="BRfloat BRshare">
       <div class="BRfloatHead">
         Share
-        <button class="floatShut" href="javascript:;" onclick="$.fn.colorbox.close();"><span class="shift">Close</span></button>
+        <button class="floatShut" href="javascript:;" onclick="$.fn.colorbox.close();"><span class="br-colorbox-shift">Close</span></button>
       </div>
     </div>`);
 }

package/src/BookReader/events.js

@@ -3,11 +3,11 @@ export const EVENTS = {
   /** Indicates that the fragment (a serialization of the reader
    * state) has changed. */
   fragmentChange: 'fragmentChange',
+  pageChanged: 'pageChanged',
   PostInit: 'PostInit',
   stop: 'stop',
   resize: 'resize',
-  // nav events:
-  navToggled: 'navToggled',
+  userAction: 'userAction', // event to know if user is actively reading
   // menu click events
   fullscreenToggled: 'fullscreenToggled',
   zoomOut: 'zoomOut',
@@ -16,5 +16,4 @@ export const EVENTS = {
   '2PageViewSelected': '2PageViewSelected',
   /* currently 3 represents thumbnail view */
   '3PageViewSelected': '3PageViewSelected',
-  mobileNavOpen: 'mobileNavOpen',
 };

package/src/BookReader/options.js

@@ -1,3 +1,4 @@
+// @ts-check
 /** @typedef {import('./BookModel.js').PageNumString} PageNumString */
 /** @typedef {import('./BookModel.js').LeafNum} LeafNum */
 
@@ -25,9 +26,13 @@ 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',
+  flipSpeed: 400,
 
   showToolbar: true,
   showNavbar: true,
@@ -61,7 +66,7 @@ export const DEFAULT_OPTIONS = {
     {reduce: 2, autofit: null},
     {reduce: 3, autofit: null},
     {reduce: 4, autofit: null},
-    {reduce: 6, autofit: null}
+    {reduce: 6, autofit: null},
   ],
 
   /** Object to hold parameters related to 1up mode */
@@ -79,7 +84,7 @@ export const DEFAULT_OPTIONS = {
     /** Width of book spine  $$$ consider sizing based on book length */
     bookSpineDivWidth: 64,
     /** @type {AutoFitValues} */
-    autofit: 'auto'
+    autofit: 'auto',
   },
 
   onePageMinBreakpoint: 800,
@@ -136,8 +141,18 @@ export const DEFAULT_OPTIONS = {
    * but going forward we'll keep them here.
    **/
   plugins: {
-    /** @type {import('../plugins/plugin.text_selection.js').TextSelectionPluginOptions} */
+    /** @type {import('../plugins/plugin.archive_analytics.js').ArchiveAnalyticsPlugin['options']}*/
+    archiveAnalytics: null,
+    /** @type {import('../plugins/plugin.autoplay.js').AutoplayPlugin['options']}*/
+    autoplay: null,
+    /** @type {import('../plugins/plugin.iiif.js').IiifPlugin['options']} */
+    iiif: null,
+    /** @type {import('../plugins/plugin.resume.js').ResumePlugin['options']} */
+    resume: null,
+    /** @type {import('../plugins/plugin.text_selection.js').TextSelectionPlugin['options']} */
     textSelection: null,
+    /** @type {import('../plugins/tts/plugin.tts.js').TtsPlugin['options']} */
+    tts: null,
   },
 
   /**
@@ -176,16 +191,32 @@ export const DEFAULT_OPTIONS = {
    */
   data: [],
 
-  /** Advanced methods for page rendering */
+  /** @type {import('../plugins/plugin.chapters.js').TocEntry[]} */
+  table_of_contents: null,
+
+  /**
+   * Advanced methods for page rendering.
+   * All option functions have their `this` object set to the BookReader instance.
+   **/
+
   /** @type {() => number} */
   getNumLeafs: null,
   /** @type {(index: number) => number} */
   getPageWidth: null,
   /** @type {(index: number) => number} */
   getPageHeight: null,
-  /** @type {(index: number, reduce: number, rotate: number) => *} */
+  /** @type {(index: number, reduce: number, rotate: number) => string} */
   getPageURI: null,
 
+  /**
+   * @type {(img: HTMLImageElement, uri: string) => Promise<void>}
+   * Render the page URI into the image element. Perform any necessary preloading,
+   * authentication, etc.
+   */
+  renderPageURI(img, uri) {
+    img.src = uri;
+  },
+
   /**
    * @type {(index: number) => 'L' | 'R'}
    * Return which side, left or right, that a given page should be displayed on
@@ -218,31 +249,31 @@ export const DEFAULT_OPTIONS = {
       visible: true,
       label: 'Flip left',
       className: 'book_left',
-      iconClassName: 'left-arrow'
+      iconClassName: 'left-arrow',
     },
     bookRight: {
       visible: true,
       label: 'Flip right',
       className: 'book_right',
-      iconClassName: 'left-arrow hflip'
+      iconClassName: 'left-arrow hflip',
     },
     onePage: {
       visible: true,
       label: 'One-page view',
       className: 'onepg',
-      iconClassName: 'onepg'
+      iconClassName: 'onepg',
     },
     twoPage: {
       visible: true,
       label: 'Two-page view',
       className: 'twopg',
-      iconClassName: 'twopg'
+      iconClassName: 'twopg',
     },
     thumbnail: {
       visible: true,
       label: 'Thumbnail view',
       className: 'thumb',
-      iconClassName: 'thumb'
+      iconClassName: 'thumb',
     },
     viewmode: {
       visible: true,
@@ -253,19 +284,19 @@ export const DEFAULT_OPTIONS = {
       visible: true,
       label: 'Zoom out',
       className: 'zoom_out',
-      iconClassName: 'magnify'
+      iconClassName: 'magnify',
     },
     zoomIn: {
       visible: true,
       label: 'Zoom in',
       className: 'zoom_in',
-      iconClassName: 'magnify plus'
+      iconClassName: 'magnify plus',
     },
     fullScreen: {
       visible: true,
       label: 'Toggle fullscreen',
       className: 'full',
-      iconClassName: 'fullscreen'
+      iconClassName: 'fullscreen',
     },
   },
 
@@ -275,6 +306,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
@@ -288,9 +325,24 @@ export const DEFAULT_OPTIONS = {
    * On init, by default, we want to use srcSet for images
    */
   useSrcSet: false,
+
+  /**
+   * @type {string}
+   * Path to the image to display when a page is unviewable (i.e. when
+   * displaying a preview of a book).
+   *
+   * Relative to the imagesBaseURL if a relative path is specified.
+   */
+  unviewablePageURI: './unviewable_page.png',
 };
 
-/** @typedef {'width' | 'height' | 'auto' | 'none'} AutoFitValues */
+/**
+ * @typedef {'width' | 'height' | 'auto' | 'none'} AutoFitValues
+ * - width: fill the width of the container
+ * - height: fill the height of the container
+ * - auto: fill the width or height of the container, whichever is smaller
+ * - none: do not autofit
+ **/
 
 /**
  * @typedef {object} ReductionFactor
@@ -318,3 +370,9 @@ export const DEFAULT_OPTIONS = {
 
 /** @typedef {typeof DEFAULT_OPTIONS} BookReaderOptions */
 
+/**
+ * Thrown when an error occurs while parsing options.
+ * Potentially recoverable and non-halting.
+ */
+export class OptionsParseError extends Error {
+}

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/ScrollClassAdder.js

@@ -0,0 +1,31 @@
+/** Adds a class while the given element is experiencing scrolling */
+export class ScrollClassAdder {
+  /**
+   * @param {HTMLElement} element
+   * @param {string} className
+   */
+  constructor(element, className) {
+    /** @type {HTMLElement} */
+    this.element = element;
+    /** @type {string} */
+    this.className = className;
+    this.timeout = null;
+  }
+
+  attach() {
+    this.element.addEventListener('scroll', this.onScroll);
+  }
+
+  detach() {
+    this.element.removeEventListener('scroll', this.onScroll);
+  }
+
+  onScroll = () => {
+    this.element.classList.add(this.className);
+    clearTimeout(this.timeout);
+    // TODO: Also remove class on mousemove, touch, click, etc.
+    this.timeout = setTimeout(() => {
+      this.element.classList.remove(this.className);
+    }, 600);
+  }
+}

package/src/BookReader/utils/SelectionObserver.js

@@ -0,0 +1,45 @@
+// @ts-check
+export class SelectionObserver {
+  selecting = false;
+  startedInSelector = false;
+  /** @type {HTMLElement} */
+  target = null;
+
+  /**
+   * @param {string} selector
+   * @param {function('started' | 'cleared', HTMLElement): any} handler
+   */
+  constructor(selector, handler) {
+    this.selector = selector;
+    this.handler = handler;
+  }
+
+  attach() {
+    // We can't just use selectstart, because safari on iOS just
+    // randomly decides when to fire it 😤
+    // document.addEventListener("selectstart", this._onSelectStart);
+    // This has to be on document :/
+    document.addEventListener("selectionchange", this._onSelectionChange);
+  }
+
+  detach() {
+    document.removeEventListener("selectionchange", this._onSelectionChange);
+  }
+
+  _onSelectionChange = () => {
+    const sel = window.getSelection();
+
+    if (!this.selecting && sel.toString()) {
+      const target = $(sel.anchorNode).closest(this.selector)[0];
+      if (!target) return;
+      this.target = target;
+      this.selecting = true;
+      this.handler('started', this.target);
+    }
+
+    if (this.selecting && (sel.isCollapsed || !sel.toString() || !$(sel.anchorNode).closest(this.selector)[0])) {
+      this.selecting = false;
+      this.handler('cleared', this.target);
+    }
+  };
+}

package/src/BookReader/utils/classes.js

@@ -31,6 +31,6 @@ export function exposeOverrideable(FromClass, fromMethod, fromTransform, ToClass
         return overrideFn.apply(newThis, arguments);
       };
       wrapper = overrideFn;
-    }
+    },
   });
 }