@internetarchive/bookreader 5.0.0-94 → 5.0.0-95

package/src/BookReader/Navbar/Navbar.js

@@ -1,355 +0,0 @@
-/** @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 {
-  /**
-   * @param {BookReader} br
-   */
-  constructor(br) {
-    this.br = br;
-
-    /** @type {JQuery} */
-    this.$root = null;
-    /** @type {JQuery} */
-    this.$nav = null;
-    /** @type {number} */
-    this.maxPageNum = null;
-
-    /** @type {Object} controls will be switch over "this.maximumControls" */
-    this.minimumControls = [
-      'viewmode',
-    ];
-    /** @type {Object} controls will be switch over "this.minimumControls" */
-    this.maximumControls = [
-      'book_left', 'book_right', 'zoom_in', 'zoom_out', 'onepg', 'twopg', 'thumb',
-    ];
-
-    this.updateNavIndexThrottled = throttle(this.updateNavIndex.bind(this), 250, false);
-  }
-
-  controlFor(controlName) {
-    const option = this.br.options.controls[controlName];
-    if (!option.visible) { return ''; }
-    if (option.template) {
-      return `<li>${option.template(this.br)}</li>`;
-    }
-    return `<li>
-      <button class="BRicon ${option.className}" title="${option.label}">
-        <div class="icon icon-${option.iconClassName}"></div>
-        <span class="BRtooltip">${option.label}</span>
-      </button>
-    </li>`;
-  }
-
-  /** @private */
-  _renderControls() {
-    return [
-      'bookLeft',
-      'bookRight',
-      'onePage',
-      'twoPage',
-      'thumbnail',
-      'viewmode',
-      'zoomOut',
-      'zoomIn',
-      'fullScreen',
-    ].map((mode) => (
-      this.controlFor(mode)
-    )).join('');
-  }
-
-  /** @private */
-  _bindViewModeButton() {
-    const { br } = this;
-    const viewModeOptions = br.options.controls.viewmode;
-    const viewModes = [{
-      mode: br.constMode1up,
-      className: 'onepg',
-      title: 'One-page view',
-    }, {
-      mode: br.constMode2up,
-      className: 'twopg',
-      title: 'Two-page view',
-    }, {
-      mode: br.constModeThumb,
-      className: 'thumb',
-      title: 'Thumbnail view',
-    }].filter((mode) => (
-      !viewModeOptions.excludedModes.includes(mode.mode)
-    ));
-    const viewModeOrder = viewModes.map((m) => m.mode);
-
-    if (viewModeOptions.excludedModes.includes(br.mode)) {
-      br.switchMode(viewModeOrder[0]);
-    }
-
-    // Reorder the viewModeOrder so the current view mode is at the end
-    const currentModeIndex = viewModeOrder.indexOf(br.mode);
-    for (let i = 0; i <= currentModeIndex; i++) {
-      viewModeOrder.push(viewModeOrder.shift());
-    }
-
-    if (viewModes.length < 2) {
-      this.$nav.find(`.${viewModeOptions.className}`).remove();
-    }
-
-    this.br.bind(EVENTS.PostInit, () => {
-      const $button = this.$nav.find(`.${viewModeOptions.className}`)
-        .off('.bindNavigationHandlers')
-        .on('click', (e) => {
-          const nextModeID = viewModeOrder.shift();
-          const newViewMode = viewModes.find((m) => m.mode === nextModeID);
-          const nextViewMode = viewModes.find((m) => m.mode === viewModeOrder[0]);
-
-          viewModeOrder.push(nextModeID);
-          br.viewModeOrder = viewModeOrder;
-          this.updateViewModeButton($(e.currentTarget), nextViewMode.className, nextViewMode.title);
-          br.switchMode(newViewMode.mode);
-        });
-      const currentViewModeButton = viewModes.find((m) => m.mode === viewModeOrder[0]);
-      this.updateViewModeButton(
-        $button,
-        currentViewModeButton.className,
-        currentViewModeButton.title,
-      );
-    });
-  }
-
-  /**
-   * Toggle viewmode button to change page view
-   */
-  updateViewModeButton($button, iconClass, tooltipText) {
-    $button
-      .attr('title', tooltipText)
-      .find('.icon')
-      .removeClass()
-      .addClass(`icon icon-${iconClass}`)
-      .end()
-      .find('.BRtooltip')
-      .text(tooltipText);
-  }
-
-  /**
-   * Switch navbar controls on mobile and desktop
-   */
-  switchNavbarControls() {
-    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 {
-      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
-   */
-  showMinimumNavbarControls() {
-    this.minimumControls.forEach((control) => {
-      const element = document.querySelector(`.controls .${control}`);
-      if (element) element.classList.remove('hide');
-    });
-    this.maximumControls.forEach((control) => {
-      const element = document.querySelector(`.controls .${control}`);
-      if (element) element.classList.add('hide');
-    });
-  }
-
-  /**
-   * Switch Book Navbar controls to maximized
-   * NOTE: only `this.minimumControls` and `this.maximumControls` switch on resize
-   */
-  showMaximumNavbarControls() {
-    this.maximumControls.forEach((control) => {
-      const element = document.querySelector(`.controls .${control}`);
-      if (element) element.classList.remove('hide');
-    });
-    this.minimumControls.forEach((control) => {
-      const element = document.querySelector(`.controls .${control}`);
-      if (element) element.classList.add('hide');
-    });
-  }
-
-  /**
-   * Initialize the navigation bar (bottom)
-   * @return {JQuery}
-   */
-  init() {
-    const { br } = this;
-    const { navbarTitle: title } = br.options;
-    const isRTL = br.pageProgression === 'rl';
-    const bookFlipLeft = isRTL ? 'book_flip_next' : 'book_flip_prev';
-    const bookFlipRight = isRTL ? 'book_flip_prev' : 'book_flip_next';
-
-    this.br.options.controls['bookLeft'].className = `book_left ${bookFlipLeft}`;
-    this.br.options.controls['bookRight'].className = `book_right ${bookFlipRight}`;
-
-    br.refs.$BRfooter = this.$root = $(`<div class="BRfooter"></div>`);
-    br.refs.$BRnav = this.$nav = $(
-      `<div class="BRnav BRnavDesktop">
-          ${title ? `<div class="BRnavTitle">${title}</div>` : ''}
-          <nav class="BRcontrols">
-            <ul class="controls">
-              <li class="scrubber">
-                <div class="BRnavpos">
-                  <div class="BRpager"></div>
-                  <div class="BRnavline"></div>
-                </div>
-                <p>
-                  <span class="BRcurrentpage BRmax"></span>
-                  <span class="BRcurrentpage BRmin"></span>
-                </p>
-              </li>
-              ${this._renderControls()}
-            </ul>
-          </nav>
-        </div>`);
-
-    this.$root.append(this.$nav);
-    br.refs.$br.append(this.$root);
-
-    const $slider = this.$root.find('.BRpager').slider({
-      animate: true,
-      min: 0,
-      max: br.book.getNumLeafs() - 1,
-      value: br.currentIndex(),
-      range: "min",
-    });
-
-    $slider.on('slide', (event, ui) => {
-      this.updateNavPageNum(ui.value);
-      return true;
-    });
-
-    $slider.on('slidechange', (event, ui) => {
-      this.updateNavPageNum(ui.value);
-      // recursion prevention for jumpToIndex
-      if ($slider.data('swallowchange')) {
-        $slider.data('swallowchange', false);
-      } else {
-        br.jumpToIndex(ui.value);
-      }
-      return true;
-    });
-
-    br.options.controls.viewmode.visible && this._bindViewModeButton();
-    this.updateNavPageNum(br.currentIndex());
-
-    return this.$nav;
-  }
-
-  /**
-  * Returns the textual representation of the current page for the navbar
-  * @param {number} index
-  * @param {boolean} [useMaxFormat = false]
-  * @return {string}
-  */
-  getNavPageNumString(index, useMaxFormat = false) {
-    const { br } = this;
-    // Accessible index starts at 0 (alas) so we add 1 to make human
-    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 = parseFloat(br.book.getPageNum(i));
-        if (!isNaN(pageNumVal) && pageNumVal > maxPageNum) {
-          maxPageNum = pageNumVal;
-        }
-      }
-      this.maxPageNum = maxPageNum;
-    }
-
-    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum, useMaxFormat);
-
-  }
-
-  /**
-   * Renders the navbar string to the DOM
-   * @param {number} index
-   */
-  updateNavPageNum(index) {
-    this.$root.find('.BRcurrentpage.BRmax').html(this.getNavPageNumString(index, true));
-    this.$root.find('.BRcurrentpage.BRmin').html(this.getNavPageNumString(index));
-  }
-
-  /**
-   * Update the nav bar display - does not cause navigation.
-   * @param {number} index
-   */
-  updateNavIndex(index) {
-    // We want to update the value, but normally moving the slider
-    // triggers jumpToIndex which triggers this method
-    index = index !== undefined ? index : this.br.currentIndex();
-    this.$root.find('.BRpager').data('swallowchange', true).slider('value', index);
-  }
-}
-
-/**
- * Renders the html for the page string
- * @param {number} index
- * @param {number} numLeafs
- * @param {number|string} pageNum
- * @param {*} pageType - Deprecated
- * @param {number} maxPageNum
- * @param {boolean} [useMaxFormat = false]
- * @return {string}
- */
-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) {
-    return `(${pageIndex} of ${numLeafs})`;
-  }
-
-  const bookLengthLabel = (maxPageNum && parseFloat(pageNum)) ? ` of ${maxPageNum}` : '';
-  return `${pageNum}${bookLengthLabel}`;
-}

package/src/BookReader/PageContainer.js

@@ -1,172 +0,0 @@
-// @ts-check
-/** @typedef {import('./BookModel.js').PageModel} PageModel */
-/** @typedef {import('./ImageCache.js').ImageCache} ImageCache */
-
-import { sleep } from './utils.js';
-
-
-export class PageContainer {
-  /**
-   * @param {PageModel} page
-   * @param {object} opts
-   * @param {boolean} opts.isProtected Whether we're in a protected book
-   * @param {ImageCache} opts.imageCache
-   */
-  constructor(page, {isProtected, imageCache}) {
-    this.page = page;
-    this.imageCache = imageCache;
-    this.$container = $('<div />', {
-      'class': `BRpagecontainer ${page ? `pagediv${page.index}` : 'BRemptypage'}`,
-      css: { position: 'absolute' },
-    })
-      .attr('data-side', page?.pageSide)
-      .attr('data-index', page?.index)
-      .attr('data-page-num', page?.getPageNum());
-
-    if (isProtected) {
-      this.$container.append($('<div class="BRscreen" />'));
-      this.$container.addClass('protected');
-    }
-
-    /** @type {JQuery<HTMLImageElement>} The main book page image */
-    this.$img = null;
-  }
-
-  /**
-   * @param {object} param0
-   * @param {{ width: number, height: number, top: number, left: number }} [param0.dimensions]
-   * @param {number} param0.reduce
-   */
-  update({dimensions = null, reduce = null}) {
-    if (dimensions) {
-      this.$container.css(dimensions);
-    }
-
-    if (reduce == null || !this.page) {
-      return;
-    }
-
-    const finalReduce = this.imageCache.getFinalReduce(this.page.index, reduce);
-    const newImageURI = this.page.getURI(finalReduce, 0);
-
-    // 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);
-
-    // 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;
-    }
-
-    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.$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

@@ -1,26 +0,0 @@
-/**
- * @typedef {object} ReduceSet Set of valid numbers for a reduce variable.
- * @property {(n: number) => number} floor
- * @property {(n: number) => number} decr Return the predecessor of the given element
- */
-
-/** @type {ReduceSet} */
-export const IntegerReduceSet = {
-  floor: Math.floor,
-  decr(n) { return n - 1; },
-};
-
-/** @type {ReduceSet} */
-export const Pow2ReduceSet = {
-  floor(n) {
-    return 2 ** (Math.floor(Math.log2(Math.max(1, n))));
-  },
-  decr(n) {
-    return 2 ** (Math.log2(n) - 1);
-  },
-};
-
-export const NAMED_REDUCE_SETS = {
-  pow2: Pow2ReduceSet,
-  integer: IntegerReduceSet,
-};