@internetarchive/bookreader 5.0.0-88-alpha.8 → 5.0.0-88-alpha.10

package/dist/esm/BookReader/ModeThumb.js

@@ -0,0 +1,366 @@
+// @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 {
+  /**
+   * @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) {
+    var _this = this;
+    var {
+      floor
+    } = Math;
+    var {
+      book
+    } = this;
+    var viewWidth = this.br.refs.$brContainer.prop('scrollWidth') - 20; // width minus buffer
+
+    var leafHeight;
+    var rightPos = 0;
+    var bottomPos = 0;
+    var maxRight = 0;
+    var currentRow = 0;
+    var leafIndex = 0;
+    /** @type {Array<{ leafs?: Array<{num: PageIndex, left: number}>, height?: number, top?: number }>} */
+    var leafMap = [];
+
+    // Will be set to top of requested seek index, if set
+    var seekTop;
+
+    // Calculate the position of every thumbnail.  $$$ cache instead of calculating on every draw
+    // make `leafMap`
+    for (var page of book.pagesIterator({
+      combineConsecutiveUnviewables: true
+    })) {
+      var 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);
+    var 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);
+    }
+    var scrollTop = this.br.refs.$brContainer.prop('scrollTop');
+    var scrollBottom = scrollTop + this.br.refs.$brContainer.height();
+    var leafTop = 0;
+    var leafBottom = 0;
+    var rowsToDisplay = [];
+    var imagesToDisplay = [];
+
+    // Visible leafs with least/greatest index
+    var leastVisible = book.getNumLeafs() - 1;
+    var mostVisible = 0;
+
+    // Determine the thumbnails in view
+    for (var i = 0; i < leafMap.length; i++) {
+      if (!leafMap[i]) {
+        continue;
+      }
+      leafBottom += this.br.thumbPadding + leafMap[i].height;
+      var topInView = leafTop >= scrollTop && leafTop <= scrollBottom;
+      var bottomInView = leafBottom >= scrollTop && leafBottom <= scrollBottom;
+      var 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
+    var firstRow = rowsToDisplay[0];
+    var lastRow = rowsToDisplay[rowsToDisplay.length - 1];
+    for (var _i = 1; _i < this.br.thumbRowBuffer + 1; _i++) {
+      if (lastRow + _i < leafMap.length) {
+        rowsToDisplay.push(lastRow + _i);
+      }
+    }
+    for (var _i2 = 1; _i2 < this.br.thumbRowBuffer; _i2++) {
+      if (firstRow - _i2 >= 0) {
+        rowsToDisplay.push(firstRow - _i2);
+      }
+    }
+    rowsToDisplay.sort((a, b) => a - b);
+
+    // Create the thumbnail divs and images (lazy loaded)
+    for (var row of rowsToDisplay) {
+      if (notInArray(row, this.br.displayedRows)) {
+        if (!leafMap[row]) {
+          continue;
+        }
+        var _loop = function _loop(leaf) {
+          var leafWidth = _this.br.thumbWidth;
+          var leafHeight = floor(book.getPageHeight(leaf) * _this.br.thumbWidth / book.getPageWidth(leaf));
+          var leafTop = leafMap[row].top;
+          var left = leafLeft + pageViewBuffer;
+          if ('rl' == _this.br.pageProgression) {
+            left = viewWidth - leafWidth - left;
+          }
+          left += _this.br.thumbPadding;
+          imagesToDisplay.push(leaf);
+
+          /* get thumbnail's reducer */
+          var idealReduce = floor(book.getPageWidth(leaf) / _this.br.thumbWidth);
+          var nearestFactor2 = 2 * Math.round(idealReduce / 2);
+          var thumbReduce = nearestFactor2;
+          var 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
+            var 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);
+        };
+        for (var {
+          num: leaf,
+          left: leafLeft
+        } of leafMap[row].leafs) {
+          _loop(leaf);
+        }
+      }
+    }
+
+    // Remove thumbnails that are not to be displayed
+    for (var _row of this.br.displayedRows) {
+      if (notInArray(_row, rowsToDisplay)) {
+        for (var {
+          num: index
+        } of (_leafMap$_row = leafMap[_row]) === null || _leafMap$_row === void 0 ? void 0 : _leafMap$_row.leafs) {
+          var _leafMap$_row;
+          if (!(imagesToDisplay !== null && imagesToDisplay !== void 0 && imagesToDisplay.includes(index))) {
+            var _this$br$$;
+            (_this$br$$ = this.br.$(".pagediv".concat(index))) === null || _this$br$$ === void 0 || _this$br$$.remove();
+          }
+        }
+      }
+    }
+
+    // Update which page is considered current to make sure a visible page is the current one
+    var 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) {
+    var leaf = $(imgPlaceholder).data('leaf');
+    var reduce = $(imgPlaceholder).data('reduce');
+    var $img = this.br.imageCache.image(leaf, reduce);
+    var $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) {
+    var 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: ".concat(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) {
+    var DEFAULT_THUMBNAIL_WIDTH = 100;
+    var padding = (thumbnailColumns + 1) * this.br.thumbPadding;
+    var width = (this.br.refs.$brPageViewEl.width() - padding) / (thumbnailColumns + 0.5); // extra 0.5 is for some space at sides
+    var 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) {
+    var {
+      floor
+    } = Math;
+    var {
+      book
+    } = this;
+    var viewWidth = this.br.refs.$brContainer.prop('scrollWidth') - 20; // width minus buffer
+    var leafWidth = this.br.thumbWidth;
+    var leafTop = 0;
+    var rightPos = 0;
+    var bottomPos = 0;
+    var rowHeight = 0;
+    var leafIndex = 0;
+    for (var i = 0; i <= index; i++) {
+      if (rightPos + (leafWidth + this.br.thumbPadding) > viewWidth) {
+        rightPos = 0;
+        rowHeight = 0;
+        leafIndex = 0;
+      }
+      var 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;
+      });
+    }
+  }
+}

package/dist/esm/BookReader/Navbar/Navbar.js

@@ -0,0 +1,253 @@
+/** @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) {
+    var option = this.br.options.controls[controlName];
+    if (!option.visible) {
+      return '';
+    }
+    if (option.template) {
+      return "<li>".concat(option.template(this.br), "</li>");
+    }
+    return "<li>\n      <button class=\"BRicon ".concat(option.className, "\" title=\"").concat(option.label, "\">\n        <div class=\"icon icon-").concat(option.iconClassName, "\"></div>\n        <span class=\"BRtooltip\">").concat(option.label, "</span>\n      </button>\n    </li>");
+  }
+
+  /** @private */
+  _renderControls() {
+    return ['bookLeft', 'bookRight', 'onePage', 'twoPage', 'thumbnail', 'viewmode', 'zoomOut', 'zoomIn', 'fullScreen'].map(mode => this.controlFor(mode)).join('');
+  }
+
+  /** @private */
+  _bindViewModeButton() {
+    var {
+      br
+    } = this;
+    var viewModeOptions = br.options.controls.viewmode;
+    var 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));
+    var 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
+    var currentModeIndex = viewModeOrder.indexOf(br.mode);
+    for (var i = 0; i <= currentModeIndex; i++) {
+      viewModeOrder.push(viewModeOrder.shift());
+    }
+    if (viewModes.length < 2) {
+      this.$nav.find(".".concat(viewModeOptions.className)).remove();
+    }
+    this.br.bind(EVENTS.PostInit, () => {
+      var $button = this.$nav.find(".".concat(viewModeOptions.className)).off('.bindNavigationHandlers').on('click', e => {
+        var nextModeID = viewModeOrder.shift();
+        var newViewMode = viewModes.find(m => m.mode === nextModeID);
+        var 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);
+      });
+      var 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-".concat(iconClass)).end().find('.BRtooltip').text(tooltipText);
+  }
+
+  /**
+   * 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) {
+        this.showMinimumNavbarControls();
+      } else {
+        this.showMaximumNavbarControls();
+      }
+    }
+  }
+
+  /**
+   * Switch Book Navbar controls to minimised
+   * NOTE: only `this.minimumControls` and `this.maximumControls` switch on resize
+   */
+  showMinimumNavbarControls() {
+    this.minimumControls.forEach(control => {
+      var element = document.querySelector(".controls .".concat(control));
+      if (element) element.classList.remove('hide');
+    });
+    this.maximumControls.forEach(control => {
+      var element = document.querySelector(".controls .".concat(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 => {
+      var element = document.querySelector(".controls .".concat(control));
+      if (element) element.classList.remove('hide');
+    });
+    this.minimumControls.forEach(control => {
+      var element = document.querySelector(".controls .".concat(control));
+      if (element) element.classList.add('hide');
+    });
+  }
+
+  /**
+   * Initialize the navigation bar (bottom)
+   * @return {JQuery}
+   */
+  init() {
+    var {
+      br
+    } = this;
+    var {
+      navbarTitle: title
+    } = br.options;
+    var isRTL = br.pageProgression === 'rl';
+    var bookFlipLeft = isRTL ? 'book_flip_next' : 'book_flip_prev';
+    var bookFlipRight = isRTL ? 'book_flip_prev' : 'book_flip_next';
+    this.br.options.controls['bookLeft'].className = "book_left ".concat(bookFlipLeft);
+    this.br.options.controls['bookRight'].className = "book_right ".concat(bookFlipRight);
+    br.refs.$BRfooter = this.$root = $("<div class=\"BRfooter\"></div>");
+    br.refs.$BRnav = this.$nav = $("<div class=\"BRnav BRnavDesktop\">\n          ".concat(title ? "<div class=\"BRnavTitle\">".concat(title, "</div>") : '', "\n          <nav class=\"BRcontrols\">\n            <ul class=\"controls\">\n              <li class=\"scrubber\">\n                <div class=\"BRnavpos\">\n                  <div class=\"BRpager\"></div>\n                  <div class=\"BRnavline\"></div>\n                </div>\n                <p><span class='BRcurrentpage'></span></p>\n              </li>\n              ").concat(this._renderControls(), "\n            </ul>\n          </nav>\n        </div>"));
+    this.$root.append(this.$nav);
+    br.refs.$br.append(this.$root);
+    var $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
+  * @return {string}
+  */
+  getNavPageNumString(index) {
+    var {
+      br
+    } = this;
+    // Accessible index starts at 0 (alas) so we add 1 to make human
+    var pageNum = br.book.getPageNum(index);
+    var pageType = br.book.getPageProp(index, 'pageType');
+    var numLeafs = br.book.getNumLeafs();
+    if (!this.maxPageNum) {
+      // Calculate Max page num (used for pagination display)
+      var maxPageNum = 0;
+      var pageNumVal;
+      for (var 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);
+  }
+
+  /**
+   * Renders the navbar string to the DOM
+   * @param {number} index
+   */
+  updateNavPageNum(index) {
+    this.$root.find('.BRcurrentpage').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
+ * @return {string}
+ */
+export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum) {
+  var pageIsAsserted = pageNum[0] != 'n';
+  if (!pageIsAsserted) {
+    var pageIndex = index + 1;
+    return "(".concat(pageIndex, " of ").concat(numLeafs, ")"); // Page (8 of 10)
+  }
+  var bookLengthLabel = maxPageNum && parseFloat(pageNum) ? " of ".concat(maxPageNum) : '';
+  return "".concat(pageNum).concat(bookLengthLabel);
+}