@internetarchive/bookreader 5.0.0-10-alpha-3 → 5.0.0-101

package/src/BookReader/Navbar/Navbar.js

@@ -1,9 +1,11 @@
+// @ts-check
 /** @typedef {import("../../BookReader.js").default} BookReader */
 
 import 'jquery-ui/ui/widget.js';
 import 'jquery-ui/ui/widgets/mouse.js';
 import 'jquery-ui/ui/widgets/slider.js';
 import { EVENTS } from '../events.js';
+import { throttle } from '../utils.js';
 
 export class Navbar {
   /**
@@ -21,12 +23,14 @@ export class Navbar {
 
     /** @type {Object} controls will be switch over "this.maximumControls" */
     this.minimumControls = [
-      'viewmode'
+      'viewmode',
     ];
     /** @type {Object} controls will be switch over "this.minimumControls" */
     this.maximumControls = [
-      'book_left', 'book_right', 'zoom_in', 'zoom_out', 'onepg', 'twopg', 'thumb'
+      'book_left', 'book_right', 'zoom_in', 'zoom_out', 'onepg', 'twopg', 'thumb',
     ];
+
+    this.updateNavIndexThrottled = throttle(this.updateNavIndex.bind(this), 250, false);
   }
 
   controlFor(controlName) {
@@ -38,7 +42,7 @@ export class Navbar {
     return `<li>
       <button class="BRicon ${option.className}" title="${option.label}">
         <div class="icon icon-${option.iconClassName}"></div>
-        <span class="tooltip">${option.label}</span>
+        <span class="BRtooltip">${option.label}</span>
       </button>
     </li>`;
   }
@@ -112,11 +116,71 @@ export class Navbar {
       this.updateViewModeButton(
         $button,
         currentViewModeButton.className,
-        currentViewModeButton.title
+        currentViewModeButton.title,
       );
     });
   }
 
+  bindControlClickHandlers() {
+    const jIcons = this.$nav.find('.BRicon');
+
+    // Map of jIcon class -> click handler
+    const navigationControls = {
+      book_left: () => {
+        this.br.trigger(EVENTS.stop);
+        this.br.left();
+      },
+      book_right: () => {
+        this.br.trigger(EVENTS.stop);
+        this.br.right();
+      },
+      book_top: this.br.first.bind(this.br),
+      book_bottom: this.br.last.bind(this.br),
+      book_leftmost: this.br.leftmost.bind(this.br),
+      book_rightmost: this.br.rightmost.bind(this.br),
+      onepg: () => {
+        this.br.switchMode('1up');
+      },
+      thumb: () => {
+        this.br.switchMode('thumb');
+      },
+      twopg: () => {
+        this.br.switchMode('2up');
+      },
+      zoom_in: () => {
+        this.br.trigger(EVENTS.stop);
+        this.br.zoom(1);
+        this.br.trigger(EVENTS.zoomIn);
+      },
+      zoom_out: () => {
+        this.br.trigger(EVENTS.stop);
+        this.br.zoom(-1);
+        this.br.trigger(EVENTS.zoomOut);
+      },
+      full: () => {
+        if (this.br.ui == 'embed') {
+          const url = this.br.$('.BRembedreturn a').attr('href');
+          window.open(url);
+        } else {
+          this.br.toggleFullscreen();
+        }
+      },
+    };
+
+    // custom event for auto-loan-renew in ia-book-actions
+    // - to know if user is actively reading
+    this.$nav.find('nav.BRcontrols li button').on('click', () => {
+      this.br.trigger(EVENTS.userAction);
+    });
+
+    for (const control in navigationControls) {
+      jIcons.filter(`.${control}`).on('click.bindNavigationHandlers', () => {
+        navigationControls[control]();
+        return false;
+      });
+    }
+  }
+
   /**
    * Toggle viewmode button to change page view
    */
@@ -127,7 +191,7 @@ export class Navbar {
       .removeClass()
       .addClass(`icon icon-${iconClass}`)
       .end()
-      .find('.tooltip')
+      .find('.BRtooltip')
       .text(tooltipText);
   }
 
@@ -135,16 +199,43 @@ export class Navbar {
    * Switch navbar controls on mobile and desktop
    */
   switchNavbarControls() {
-    // we don't want navbar controls switching with liner-notes
-    if (this.br.options.bookType !== 'linerNotes') {
-      if (this.br.refs.$brContainer.prop('clientWidth') < 640) {
+    if (this.br.refs.$brContainer.prop('clientWidth') < 640) {
+      this.showMinimumNavPageNum();
+      // we don't want navbar controls switching with liner-notes
+      if (this.br.options.bookType !== 'linerNotes') {
         this.showMinimumNavbarControls();
-      } else {
+      }
+    } else {
+      this.showMaximumNavPageNum();
+      // we don't want navbar controls switching with liner-notes
+      if (this.br.options.bookType !== 'linerNotes') {
         this.showMaximumNavbarControls();
       }
     }
   }
 
+  /**
+   * Switch Book Nav page number display to minimum/mobile
+   */
+  showMinimumNavPageNum() {
+    const minElement = document.querySelector('.BRcurrentpage.BRmin');
+    const maxElement = document.querySelector('.BRcurrentpage.BRmax');
+
+    if (minElement) minElement.classList.remove('hide');
+    if (maxElement) maxElement.classList.add('hide');
+  }
+
+  /**
+   * Switch Book Nav page number display to maximum/desktop
+   */
+  showMaximumNavPageNum() {
+    const minElement = document.querySelector('.BRcurrentpage.BRmin');
+    const maxElement = document.querySelector('.BRcurrentpage.BRmax');
+
+    if (minElement) minElement.classList.add('hide');
+    if (maxElement) maxElement.classList.remove('hide');
+  }
+
   /**
    * Switch Book Navbar controls to minimised
    * NOTE: only `this.minimumControls` and `this.maximumControls` switch on resize
@@ -200,7 +291,10 @@ export class Navbar {
                   <div class="BRpager"></div>
                   <div class="BRnavline"></div>
                 </div>
-                <p><span class='BRcurrentpage'></span></p>
+                <p>
+                  <span class="BRcurrentpage BRmax"></span>
+                  <span class="BRcurrentpage BRmin"></span>
+                </p>
               </li>
               ${this._renderControls()}
             </ul>
@@ -213,9 +307,9 @@ export class Navbar {
     const $slider = this.$root.find('.BRpager').slider({
       animate: true,
       min: 0,
-      max: br.getNumLeafs() - 1,
+      max: br.book.getNumLeafs() - 1,
       value: br.currentIndex(),
-      range: "min"
+      range: "min",
     });
 
     $slider.on('slide', (event, ui) => {
@@ -240,53 +334,25 @@ 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
+  * @param {boolean} [useMaxFormat = false]
   * @return {string}
   */
-  getNavPageNumString(index) {
+  getNavPageNumString(index, useMaxFormat = false) {
     const { br } = this;
     // Accessible index starts at 0 (alas) so we add 1 to make human
-    const pageNum = br.getPageNum(index);
-    const pageType = br.getPageProp(index, 'pageType');
-    const numLeafs = br.getNumLeafs();
+    const pageNum = br.book.getPageNum(index);
+    const pageType = br.book.getPageProp(index, 'pageType');
+    const numLeafs = br.book.getNumLeafs();
 
     if (!this.maxPageNum) {
       // Calculate Max page num (used for pagination display)
       let maxPageNum = 0;
       let pageNumVal;
       for (let i = 0; i < numLeafs; i++) {
-        pageNumVal = br.getPageNum(i);
+        pageNumVal = parseFloat(br.book.getPageNum(i));
         if (!isNaN(pageNumVal) && pageNumVal > maxPageNum) {
           maxPageNum = pageNumVal;
         }
@@ -294,7 +360,8 @@ export class Navbar {
       this.maxPageNum = maxPageNum;
     }
 
-    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum);
+    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum, useMaxFormat);
+
   }
 
   /**
@@ -302,7 +369,8 @@ export class Navbar {
    * @param {number} index
    */
   updateNavPageNum(index) {
-    this.$root.find('.BRcurrentpage').html(this.getNavPageNumString(index));
+    this.$root.find('.BRcurrentpage.BRmax').html(this.getNavPageNumString(index, true));
+    this.$root.find('.BRcurrentpage.BRmin').html(this.getNavPageNumString(index));
   }
 
   /**
@@ -322,18 +390,27 @@ export class Navbar {
  * @param {number} index
  * @param {number} numLeafs
  * @param {number|string} pageNum
- * @param {*} pageType @deprecated
+ * @param {*} pageType - Deprecated
  * @param {number} maxPageNum
+ * @param {boolean} [useMaxFormat = false]
  * @return {string}
  */
-export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum) {
+export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum, useMaxFormat = false) {
   const pageIsAsserted = pageNum[0] != 'n';
+  const pageIndex = index + 1;
+
+  if (!pageIsAsserted) {
+    pageNum = '—';
+  }
+
+  if (useMaxFormat === true) {
+    return `Page ${pageNum} (${pageIndex}/${numLeafs})`;
+  }
 
   if (!pageIsAsserted) {
-    const pageIndex = index + 1;
-    return `(${pageIndex} of ${numLeafs})`; // Page (8 of 10)
+    return `(${pageIndex} of ${numLeafs})`;
   }
 
-  const bookLengthLabel = maxPageNum ? ` of ${maxPageNum}` : '';
+  const bookLengthLabel = (maxPageNum && parseFloat(pageNum)) ? ` of ${maxPageNum}` : '';
   return `${pageNum}${bookLengthLabel}`;
 }

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,16 +11,17 @@ 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' },
-    }).attr('data-side', page?.pageSide);
+    })
+      .attr('data-side', page?.pageSide)
+      .attr('data-index', page?.index)
+      .attr('data-page-num', page?.getPageNum());
 
     if (isProtected) {
       this.$container.append($('<div class="BRscreen" />'));
@@ -43,33 +46,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,7 +17,7 @@ export const Pow2ReduceSet = {
   },
   decr(n) {
     return 2 ** (Math.log2(n) - 1);
-  }
+  },
 };
 
 export const NAMED_REDUCE_SETS = {

package/src/BookReader/Toolbar/Toolbar.js

@@ -53,12 +53,17 @@ 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);
     }
 
+    // Call _bindNavigationHandlers on the plugins
+    for (const plugin of Object.values(br.plugins)) {
+      plugin._configureToolbar(br.refs.$BRtoolbar);
+    }
+
     // const $hamburger = br.refs.$BRtoolbar.find('BRtoolbarHamburger');
     return br.refs.$BRtoolbar;
   }
@@ -75,8 +80,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 +118,7 @@ export class Toolbar {
       onLoad: () => {
         br.trigger(EVENTS.stop);
         br.$('.BRpageviewValue').val(window.location.href);
-      }
+      },
     });
     br.$('.info').colorbox({
       inline: true,
@@ -123,35 +126,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 +190,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 +210,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 +309,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 +329,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',
 };