@internetarchive/bookreader 5.0.0-94 → 5.0.0-95

package/src/BookReader/ModeCoordinateSpace.js

@@ -1,29 +0,0 @@
-import { calcScreenDPI } from './utils.js';
-
-/**
- * There are a few different "coordinate spaces" at play in BR:
- * (1) World units: i.e. inches. Unless otherwise stated, all computations
- *     are done in world units.
- * (2) Rendered Pixels: i.e. img.width = '300'. Note this does _not_ take
- *     into account zoom scaling.
- * (3) Visible Pixels: Just rendered pixels, but taking into account scaling.
- */
-export class ModeCoordinateSpace {
-  screenDPI = calcScreenDPI();
-
-  /**
-   * @param {{ scale: number }} mode
-   */
-  constructor(mode) {
-    this.mode = mode;
-  }
-
-  worldUnitsToRenderedPixels = (/** @type {number} */inches) => inches * this.screenDPI;
-  renderedPixelsToWorldUnits = (/** @type {number} */px) => px / this.screenDPI;
-
-  renderedPixelsToVisiblePixels = (/** @type {number} */px) => px * this.mode.scale;
-  visiblePixelsToRenderedPixels = (/** @type {number} */px) => px / this.mode.scale;
-
-  worldUnitsToVisiblePixels = (/** @type {number} */px) => this.renderedPixelsToVisiblePixels(this.worldUnitsToRenderedPixels(px));
-  visiblePixelsToWorldUnits = (/** @type {number} */px) => this.renderedPixelsToWorldUnits(this.visiblePixelsToRenderedPixels(px));
-}

package/src/BookReader/ModeSmoothZoom.js

@@ -1,312 +0,0 @@
-// @ts-check
-import interact from 'interactjs';
-import { isIOS, isSamsungInternet } from '../util/browserSniffing.js';
-import { sleep } from './utils.js';
-/** @typedef {import('./utils/HTMLDimensionsCacher.js').HTMLDimensionsCacher} HTMLDimensionsCacher */
-
-/**
- * @typedef {object} SmoothZoomable
- * @property {HTMLElement} $container
- * @property {HTMLElement} $visibleWorld
- * @property {import("./options.js").AutoFitValues} autoFit
- * @property {number} scale
- * @property {HTMLDimensionsCacher} htmlDimensionsCacher
- * @property {function(): void} [attachScrollListeners]
- * @property {function(): void} [detachScrollListeners]
- */
-
-/** Manages pinch-zoom, ctrl-wheel, and trackpad pinch smooth zooming. */
-export class ModeSmoothZoom {
-  /** Position (in unit-less, [0, 1] coordinates) in client to scale around */
-  scaleCenter = { x: 0.5, y: 0.5 };
-
-  /** @param {SmoothZoomable} mode */
-  constructor(mode) {
-    /** @type {SmoothZoomable} */
-    this.mode = mode;
-
-    /** Whether a pinch is currently happening */
-    this.pinching = false;
-    /** Non-null when a scale has been enqueued/is being processed by the buffer function */
-    this.pinchMoveFrame = null;
-    /** Promise for the current/enqueued pinch move frame. Resolves when it is complete. */
-    this.pinchMoveFramePromise = Promise.resolve();
-    this.oldScale = 1;
-    /** @type {{ scale: number, clientX: number, clientY: number }}} */
-    this.lastEvent = null;
-    this.attached = false;
-
-    /** @type {function(function(): void): any} */
-    this.bufferFn = window.requestAnimationFrame.bind(window);
-  }
-
-  attach() {
-    if (this.attached) return;
-
-    this.attachCtrlZoom();
-
-    // GestureEvents work only on Safari; they're too glitchy to use
-    // fully, but they can sometimes help error correct when interact
-    // misses an end/start event on Safari due to Safari bugs.
-    this.mode.$container.addEventListener('gesturestart', this._pinchStart);
-    this.mode.$container.addEventListener('gesturechange', this._preventEvent);
-    this.mode.$container.addEventListener('gestureend', this._pinchEnd);
-
-    if (isIOS()) {
-      this.touchesMonitor = new TouchesMonitor(this.mode.$container);
-      this.touchesMonitor.attach();
-    }
-
-    this.mode.$container.style.touchAction = "pan-x pan-y";
-
-    // The pinch listeners
-    this.interact = interact(this.mode.$container);
-    this.interact.gesturable({
-      listeners: {
-        start: this._pinchStart,
-        end: this._pinchEnd,
-      },
-    });
-    if (isSamsungInternet()) {
-      // Samsung internet pinch-zoom will not work unless we disable
-      // all touch actions. So use interact.js' built-in drag support
-      // to handle moving on that browser.
-      this.mode.$container.style.touchAction = "none";
-      this.interact
-        .draggable({
-          inertia: {
-            resistance: 2,
-            minSpeed: 100,
-            allowResume: true,
-          },
-          listeners: { move: this._dragMove },
-        });
-    }
-
-
-    this.attached = true;
-  }
-
-  detach() {
-    this.detachCtrlZoom();
-
-    // GestureEvents work only on Safari; they interfere with Hammer,
-    // so block them.
-    this.mode.$container.removeEventListener('gesturestart', this._pinchStart);
-    this.mode.$container.removeEventListener('gesturechange', this._preventEvent);
-    this.mode.$container.removeEventListener('gestureend', this._pinchEnd);
-
-    this.touchesMonitor?.detach?.();
-
-    // The pinch listeners
-    this.interact.unset();
-    interact.removeDocument(document);
-
-    this.attached = false;
-  }
-
-  /** @param {Event} ev */
-  _preventEvent = (ev) => {
-    ev.preventDefault();
-    return false;
-  }
-
-  _pinchStart = async () => {
-    // Safari calls gesturestart twice!
-    if (this.pinching) return;
-    if (isIOS()) {
-      // Safari sometimes causes a pinch to trigger when there's only one touch!
-      await sleep(0); // touches monitor can receive the touch event late
-      if (this.touchesMonitor.touches < 2) return;
-    }
-    this.pinching = true;
-
-    // Do this in case the pinchend hasn't fired yet.
-    this.oldScale = 1;
-    this.mode.$visibleWorld.classList.add("BRsmooth-zooming");
-    this.mode.$visibleWorld.style.willChange = "transform";
-    this.mode.autoFit = "none";
-    this.detachCtrlZoom();
-    this.mode.detachScrollListeners?.();
-
-    this.interact.gesturable({
-      listeners: {
-        start: this._pinchStart,
-        move: this._pinchMove,
-        end: this._pinchEnd,
-      },
-    });
-  }
-
-  /** @param {{ scale: number, clientX: number, clientY: number }}} e */
-  _pinchMove = async (e) => {
-    if (!this.pinching) return;
-    this.lastEvent = {
-      scale: e.scale,
-      clientX: e.clientX,
-      clientY: e.clientY,
-    };
-    if (!this.pinchMoveFrame) {
-      // Buffer these events; only update the scale when request animation fires
-      this.pinchMoveFrame = this.bufferFn(this._drawPinchZoomFrame);
-    }
-  }
-
-  _pinchEnd = async () => {
-    if (!this.pinching) return;
-    this.pinching = false;
-    this.interact.gesturable({
-      listeners: {
-        start: this._pinchStart,
-        end: this._pinchEnd,
-      },
-    });
-    // Want this to happen after the pinchMoveFrame,
-    // if one is in progress; otherwise setting oldScale
-    // messes up the transform.
-    await this.pinchMoveFramePromise;
-    this.scaleCenter = { x: 0.5, y: 0.5 };
-    this.oldScale = 1;
-    this.mode.$visibleWorld.classList.remove("BRsmooth-zooming");
-    this.mode.$visibleWorld.style.willChange = "auto";
-    this.attachCtrlZoom();
-    this.mode.attachScrollListeners?.();
-  }
-
-  _drawPinchZoomFrame = async () => {
-    // Because of the buffering/various timing locks,
-    // this can be called after the pinch has ended, which
-    // results in a janky zoom after the pinch.
-    if (!this.pinching) {
-      this.pinchMoveFrame = null;
-      return;
-    }
-
-    this.mode.$container.style.overflow = "hidden";
-    this.pinchMoveFramePromiseRes = null;
-    this.pinchMoveFramePromise = new Promise(
-      (res) => (this.pinchMoveFramePromiseRes = res),
-    );
-    this.updateScaleCenter({
-      clientX: this.lastEvent.clientX,
-      clientY: this.lastEvent.clientY,
-    });
-    const curScale = this.mode.scale;
-    const newScale = curScale * this.lastEvent.scale / this.oldScale;
-
-    if (curScale != newScale) {
-      this.mode.scale = newScale;
-      await this.pinchMoveFramePromise;
-    }
-    this.mode.$container.style.overflow = "auto";
-    this.oldScale = this.lastEvent.scale;
-    this.pinchMoveFrame = null;
-  }
-
-  _dragMove = async (e) => {
-    if (this.pinching) {
-      await this._pinchEnd();
-    }
-    this.mode.$container.scrollTop -= e.dy;
-    this.mode.$container.scrollLeft -= e.dx;
-  }
-
-  /** @private */
-  attachCtrlZoom() {
-    window.addEventListener("wheel", this._handleCtrlWheel, { passive: false });
-  }
-
-  /** @private */
-  detachCtrlZoom() {
-    window.removeEventListener("wheel", this._handleCtrlWheel);
-  }
-
-  /** @param {WheelEvent} ev **/
-  _handleCtrlWheel = (ev) => {
-    if (!ev.ctrlKey) return;
-    ev.preventDefault();
-    const zoomMultiplier =
-        // Zooming on macs was painfully slow; likely due to their better
-        // trackpads. Give them a higher zoom rate.
-        /Mac/i.test(navigator.platform)
-          ? 0.045
-          : // This worked well for me on Windows
-          0.03;
-
-    // Zoom around the cursor
-    this.updateScaleCenter(ev);
-    this.mode.autoFit = "none";
-    this.mode.scale *= 1 - Math.sign(ev.deltaY) * zoomMultiplier;
-  }
-
-  /**
-   * @param {object} param0
-   * @param {number} param0.clientX
-   * @param {number} param0.clientY
-   */
-  updateScaleCenter({ clientX, clientY }) {
-    const bc = this.mode.htmlDimensionsCacher.boundingClientRect;
-    this.scaleCenter = {
-      x: (clientX - bc.left) / this.mode.htmlDimensionsCacher.clientWidth,
-      y: (clientY - bc.top) / this.mode.htmlDimensionsCacher.clientHeight,
-    };
-  }
-
-  /**
-   * @param {number} newScale
-   * @param {number} oldScale
-   */
-  updateViewportOnZoom(newScale, oldScale) {
-    const container = this.mode.$container;
-    const { scrollTop: T, scrollLeft: L } = container;
-    const W = this.mode.htmlDimensionsCacher.clientWidth;
-    const H = this.mode.htmlDimensionsCacher.clientHeight;
-
-    // Scale factor change
-    const F = newScale / oldScale;
-
-    // Where in the viewport the zoom is centered on
-    const XPOS = this.scaleCenter.x;
-    const YPOS = this.scaleCenter.y;
-    const oldCenter = {
-      x: L + XPOS * W,
-      y: T + YPOS * H,
-    };
-    const newCenter = {
-      x: F * oldCenter.x,
-      y: F * oldCenter.y,
-    };
-
-    container.scrollTop = newCenter.y - YPOS * H;
-    container.scrollLeft = newCenter.x - XPOS * W;
-    this.pinchMoveFramePromiseRes?.();
-  }
-}
-
-export class TouchesMonitor {
-  /**
-   * @param {HTMLElement} container
-   */
-  constructor(container) {
-    /** @type {HTMLElement} */
-    this.container = container;
-    this.touches = 0;
-  }
-
-  attach() {
-    this.container.addEventListener("touchstart", this._updateTouchCount);
-    this.container.addEventListener("touchend", this._updateTouchCount);
-  }
-
-  detach() {
-    this.container.removeEventListener("touchstart", this._updateTouchCount);
-    this.container.removeEventListener("touchend", this._updateTouchCount);
-  }
-
-  /**
-   * @param {TouchEvent} ev
-   */
-  _updateTouchCount = (ev) => {
-    this.touches = ev.touches.length;
-  }
-}

package/src/BookReader/ModeThumb.js

@@ -1,344 +0,0 @@
-// @ts-check
-import { notInArray, clamp } from './utils.js';
-import { EVENTS } from './events.js';
-import { DragScrollable } from './DragScrollable.js';
-/** @typedef {import('../BookREader.js').default} BookReader */
-/** @typedef {import('./BookModel.js').PageIndex} PageIndex */
-/** @typedef {import('./BookModel.js').BookModel} BookModel */
-
-/** @typedef {JQuery} $lazyLoadImgPlaceholder * jQuery element with data attributes: leaf, reduce */
-
-export class ModeThumb {
-  name = 'thumb'
-
-  /**
-   * @param {BookReader} br
-   * @param {BookModel} bookModel
-   */
-  constructor(br, bookModel) {
-    this.br = br;
-    this.book = bookModel;
-  }
-
-  /**
-   * Draws the thumbnail view
-   * @param {number} [seekIndex] If seekIndex is defined, the view will be drawn
-   *    with that page visible (without any animated scrolling).
-   *
-   * Creates place holder for image to load after gallery has been drawn
-   */
-  drawLeafs(seekIndex) {
-    const { floor } = Math;
-    const { book } = this;
-    const viewWidth = this.br.refs.$brContainer.prop('scrollWidth') - 20; // width minus buffer
-
-    let leafHeight;
-    let rightPos = 0;
-    let bottomPos = 0;
-    let maxRight = 0;
-    let currentRow = 0;
-    let leafIndex = 0;
-    /** @type {Array<{ leafs?: Array<{num: PageIndex, left: number}>, height?: number, top?: number }>} */
-    const leafMap = [];
-
-    // Will be set to top of requested seek index, if set
-    let seekTop;
-
-    // Calculate the position of every thumbnail.  $$$ cache instead of calculating on every draw
-    // make `leafMap`
-    for (const page of book.pagesIterator({ combineConsecutiveUnviewables: true })) {
-      const leafWidth = this.br.thumbWidth;
-      if (rightPos + (leafWidth + this.br.thumbPadding) > viewWidth) {
-        currentRow++;
-        rightPos = 0;
-        leafIndex = 0;
-      }
-
-      // Init current row in leafMap
-      if (!leafMap[currentRow]) {
-        leafMap[currentRow] = {};
-      }
-      if (!leafMap[currentRow].leafs) {
-        leafMap[currentRow].leafs = [];
-        leafMap[currentRow].height = 0;
-        leafMap[currentRow].top = 0;
-      }
-      leafMap[currentRow].leafs[leafIndex] = {
-        num: page.index,
-        left: rightPos,
-      };
-
-      leafHeight = floor((page.height * this.br.thumbWidth) / page.width);
-      if (leafHeight > leafMap[currentRow].height) {
-        leafMap[currentRow].height = leafHeight;
-      }
-      if (leafIndex === 0) { bottomPos += this.br.thumbPadding + leafMap[currentRow].height; }
-      rightPos += leafWidth + this.br.thumbPadding;
-      if (rightPos > maxRight) { maxRight = rightPos; }
-      leafIndex++;
-
-      if (page.index == seekIndex) {
-        seekTop = bottomPos - this.br.thumbPadding - leafMap[currentRow].height;
-      }
-    }
-
-    // reset the bottom position based on thumbnails
-    this.br.refs.$brPageViewEl.height(bottomPos);
-
-    const pageViewBuffer = floor((this.br.refs.$brContainer.prop('scrollWidth') - maxRight) / 2) - 14;
-
-    // If seekTop is defined, seeking was requested and target found
-    if (typeof(seekTop) != 'undefined') {
-      this.br.refs.$brContainer.scrollTop(seekTop);
-    }
-
-    const scrollTop = this.br.refs.$brContainer.prop('scrollTop');
-    const scrollBottom = scrollTop + this.br.refs.$brContainer.height();
-
-    let leafTop = 0;
-    let leafBottom = 0;
-    const rowsToDisplay = [];
-    const imagesToDisplay = [];
-
-    // Visible leafs with least/greatest index
-    let leastVisible = book.getNumLeafs() - 1;
-    let mostVisible = 0;
-
-    // Determine the thumbnails in view
-    for (let i = 0; i < leafMap.length; i++) {
-      if (!leafMap[i]) { continue; }
-      leafBottom += this.br.thumbPadding + leafMap[i].height;
-      const topInView = (leafTop >= scrollTop) && (leafTop <= scrollBottom);
-      const bottomInView = (leafBottom >= scrollTop) && (leafBottom <= scrollBottom);
-      const middleInView = (leafTop <= scrollTop) && (leafBottom >= scrollBottom);
-      if (topInView || bottomInView || middleInView) {
-        rowsToDisplay.push(i);
-        if (leafMap[i].leafs[0].num < leastVisible) {
-          leastVisible = leafMap[i].leafs[0].num;
-        }
-        if (leafMap[i].leafs[leafMap[i].leafs.length - 1].num > mostVisible) {
-          mostVisible = leafMap[i].leafs[leafMap[i].leafs.length - 1].num;
-        }
-      }
-      if (leafTop > leafMap[i].top) { leafMap[i].top = leafTop; }
-      leafTop = leafBottom;
-    }
-    // at this point, `rowsToDisplay` now has all the rows in view
-
-    // create a buffer of preloaded rows before and after the visible rows
-    const firstRow = rowsToDisplay[0];
-    const lastRow = rowsToDisplay[rowsToDisplay.length - 1];
-    for (let i = 1; i < this.br.thumbRowBuffer + 1; i++) {
-      if (lastRow + i < leafMap.length) { rowsToDisplay.push(lastRow + i); }
-    }
-    for (let i = 1; i < this.br.thumbRowBuffer; i++) {
-      if (firstRow - i >= 0) { rowsToDisplay.push(firstRow - i); }
-    }
-    rowsToDisplay.sort((a, b) => a - b);
-
-    // Create the thumbnail divs and images (lazy loaded)
-    for (const row of rowsToDisplay) {
-      if (notInArray(row, this.br.displayedRows)) {
-        if (!leafMap[row]) { continue; }
-        for (const { num: leaf, left: leafLeft } of leafMap[row].leafs) {
-          const leafWidth = this.br.thumbWidth;
-          const leafHeight = floor((book.getPageHeight(leaf) * this.br.thumbWidth) / book.getPageWidth(leaf));
-          const leafTop = leafMap[row].top;
-          let left = leafLeft + pageViewBuffer;
-          if ('rl' == this.br.pageProgression) {
-            left = viewWidth - leafWidth - left;
-          }
-
-          left += this.br.thumbPadding;
-          imagesToDisplay.push(leaf);
-
-          /* get thumbnail's reducer */
-          const idealReduce = floor(book.getPageWidth(leaf) / this.br.thumbWidth);
-          const nearestFactor2 = 2 * Math.round(idealReduce / 2);
-          const thumbReduce = nearestFactor2;
-
-          const pageContainer = this.br._createPageContainer(leaf)
-            .update({
-              dimensions: {
-                width: leafWidth,
-                height: leafHeight,
-                top: leafTop,
-                left,
-              },
-              reduce: thumbReduce,
-            });
-
-          pageContainer.$container.data('leaf', leaf).on('mouseup', event => {
-            // We want to suppress the fragmentChange triggers in `updateFirstIndex` and `switchMode`
-            // because otherwise it repeatedly triggers listeners and we get in an infinite loop.
-            // We manually trigger the `fragmentChange` once at the end.
-            this.br.updateFirstIndex(leaf, { suppressFragmentChange: true });
-            // as per request in webdev-4042, we want to switch 1-up mode while clicking on thumbnail leafs
-            this.br.switchMode(this.br.constMode1up, { suppressFragmentChange: true });
-
-            // shift viewModeOrder after clicking on thumbsnail leaf
-            const nextModeID = this.br.viewModeOrder.shift();
-            this.br.viewModeOrder.push(nextModeID);
-            this.br._components.navbar.updateViewModeButton($('.viewmode'), 'twopg', 'Two-page view');
-
-            this.br.trigger(EVENTS.fragmentChange);
-            event.stopPropagation();
-          });
-
-          this.br.refs.$brPageViewEl.append(pageContainer.$container);
-        }
-      }
-    }
-
-    // Remove thumbnails that are not to be displayed
-    for (const row of this.br.displayedRows) {
-      if (notInArray(row, rowsToDisplay)) {
-        for (const { num: index } of leafMap[row]?.leafs) {
-          if (!imagesToDisplay?.includes(index)) {
-            this.br.$(`.pagediv${index}`)?.remove();
-          }
-        }
-      }
-    }
-
-    // Update which page is considered current to make sure a visible page is the current one
-    const currentIndex = this.br.currentIndex();
-    if (currentIndex < leastVisible) {
-      this.br.updateFirstIndex(leastVisible);
-    } else if (currentIndex > mostVisible) {
-      this.br.updateFirstIndex(mostVisible);
-    }
-
-    // remember what rows are displayed
-    this.br.displayedRows = rowsToDisplay.slice();
-
-    // remove previous highlights
-    this.br.$('.BRpagedivthumb_highlight').removeClass('BRpagedivthumb_highlight');
-
-    // highlight current page
-    this.br.$('.pagediv' + this.br.currentIndex()).addClass('BRpagedivthumb_highlight');
-  }
-
-  /**
-   * Replaces placeholder image with real one
-   *
-   * @param {$lazyLoadImgPlaceholder} imgPlaceholder
-   */
-  lazyLoadImage(imgPlaceholder) {
-    const leaf =  $(imgPlaceholder).data('leaf');
-    const reduce =  $(imgPlaceholder).data('reduce');
-    const $img = this.br.imageCache.image(leaf, reduce);
-    const $parent = $(imgPlaceholder).parent();
-    /* March 16, 2021 (isa) - manually append & remove, `replaceWith` currently loses closure scope */
-    $($parent).append($img);
-    $(imgPlaceholder).remove();
-  }
-
-  /**
-   * @param {'in' | 'out'} direction
-   */
-  zoom(direction) {
-    const oldColumns = this.br.thumbColumns;
-    switch (direction) {
-    case 'in':
-      this.br.thumbColumns -= 1;
-      break;
-    case 'out':
-      this.br.thumbColumns += 1;
-      break;
-    default:
-      console.error(`Unsupported direction: ${direction}`);
-    }
-
-    // Limit zoom in/out columns
-    this.br.thumbColumns = clamp(
-      this.br.thumbColumns,
-      this.br.options.thumbMinZoomColumns,
-      this.br.options.thumbMaxZoomColumns,
-    );
-
-    if (this.br.thumbColumns != oldColumns) {
-      this.br.displayedRows = [];  /* force a gallery redraw */
-      this.prepare();
-    }
-  }
-
-  /**
-   * Returns the width per thumbnail to display the requested number of columns
-   * Note: #BRpageview must already exist since its width is used to calculate the
-   *       thumbnail width
-   * @param {number} thumbnailColumns
-   */
-  getThumbnailWidth(thumbnailColumns) {
-    const DEFAULT_THUMBNAIL_WIDTH = 100;
-
-    const padding = (thumbnailColumns + 1) * this.br.thumbPadding;
-    const width = (this.br.refs.$brPageViewEl.width() - padding) / (thumbnailColumns + 0.5); // extra 0.5 is for some space at sides
-    const idealThumbnailWidth = Math.floor(width);
-    return idealThumbnailWidth > 0 ? idealThumbnailWidth : DEFAULT_THUMBNAIL_WIDTH;
-  }
-
-  prepare() {
-    this.br.refs.$brContainer.empty();
-    this.br.refs.$brContainer.css({
-      overflowY: 'scroll',
-      overflowX: 'auto',
-    });
-
-    this.br.refs.$brPageViewEl = $("<div class='BRpageview'></div>");
-    this.br.refs.$brContainer.append(this.br.refs.$brPageViewEl);
-    this.dragScrollable = this.dragScrollable || new DragScrollable(this.br.refs.$brContainer[0], {preventDefault: true});
-
-    this.br.bindGestures(this.br.refs.$brContainer);
-
-    // $$$ keep select enabled for now since disabling it breaks keyboard
-    //     nav in FF 3.6 (https://bugs.edge.launchpad.net/bookreader/+bug/544666)
-    // disableSelect(this.br.$('#BRpageview'));
-    this.br.thumbWidth = this.getThumbnailWidth(this.br.thumbColumns);
-    this.br.reduce = this.book.getPageWidth(0) / this.br.thumbWidth;
-    this.br.displayedRows = [];
-    // Draw leafs with current index directly in view (no animating to the index)
-    this.drawLeafs(this.br.currentIndex());
-    this.br.updateBrClasses();
-  }
-
-  /**
-   * @param {PageIndex} index
-   */
-  jumpToIndex(index) {
-    const { floor } = Math;
-    const { book } = this;
-    const viewWidth = this.br.refs.$brContainer.prop('scrollWidth') - 20; // width minus buffer
-    const leafWidth = this.br.thumbWidth;
-    let leafTop = 0;
-    let rightPos = 0;
-    let bottomPos = 0;
-    let rowHeight = 0;
-    let leafIndex = 0;
-
-    for (let i = 0; i <= index; i++) {
-      if (rightPos + (leafWidth + this.br.thumbPadding) > viewWidth) {
-        rightPos = 0;
-        rowHeight = 0;
-        leafIndex = 0;
-      }
-
-      const leafHeight = floor((book.getPageHeight(leafIndex) * this.br.thumbWidth) / book.getPageWidth(leafIndex));
-      if (leafHeight > rowHeight) { rowHeight = leafHeight; }
-      if (leafIndex == 0) {
-        leafTop = bottomPos;
-        bottomPos += this.br.thumbPadding + rowHeight;
-      }
-      rightPos += leafWidth + this.br.thumbPadding;
-      leafIndex++;
-    }
-    this.br.updateFirstIndex(index);
-    if (this.br.refs.$brContainer.prop('scrollTop') == leafTop) {
-      this.br.drawLeafs();
-    } else {
-      this.br.animating = true;
-      this.br.refs.$brContainer.stop(true)
-        .animate({ scrollTop: leafTop }, 'fast', () => { this.br.animating = false; });
-    }
-  }
-}