@internetarchive/bookreader 5.0.0-88-alpha.11 → 5.0.0-89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-88-alpha.11",
+  "version": "5.0.0-89",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "module": "dist/esm/ia-bookreader/ia-bookreader.js",
+  "module": "src/ia-bookreader/ia-bookreader.js",
   "keywords": [
     "online",
     "bookreader",
@@ -25,8 +25,8 @@
   "homepage": "https://github.com/internetarchive/bookreader#readme",
   "private": false,
   "dependencies": {
-    "@internetarchive/ia-activity-indicator": "^0.0.6",
-    "@internetarchive/ia-item-navigator": "^2.1.3-alpha.1",
+    "@internetarchive/ia-activity-indicator": "^0.0.4",
+    "@internetarchive/ia-item-navigator": "^2.1.2",
     "@internetarchive/icon-bookmark": "^1.3.4",
     "@internetarchive/icon-dl": "^1.3.4",
     "@internetarchive/icon-edit-pencil": "^1.3.4",
@@ -35,20 +35,11 @@
     "@internetarchive/icon-search": "^1.3.4",
     "@internetarchive/icon-toc": "^1.3.4",
     "@internetarchive/icon-visual-adjustment": "^1.3.4",
-    "@internetarchive/modal-manager": "^2.0.1",
+    "@internetarchive/modal-manager": "^0.2.12",
     "@internetarchive/shared-resize-observer": "^0.2.0",
-    "interactjs": "^1.10.18",
-    "iso-language-codes": "1.1.0",
-    "jquery": "3.6.1",
-    "jquery-colorbox": "1.6.4",
-    "jquery-ui": "^1.12.1",
-    "jquery-ui-touch-punch": "0.2.3",
-    "jquery.browser": "0.1.0",
-    "lit": "^2.8.0",
-    "soundmanager2": "2.97.20170602"
+    "lit": "^2.5.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.26.4",
     "@babel/core": "7.25.8",
     "@babel/eslint-parser": "7.25.7",
     "@babel/plugin-proposal-class-properties": "7.18.6",
@@ -67,12 +58,20 @@
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-testcafe": "^0.2.1",
     "http-server": "14.1.1",
+    "interactjs": "^1.10.18",
+    "iso-language-codes": "1.1.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jquery": "3.6.1",
+    "jquery-colorbox": "1.6.4",
+    "jquery-ui": "1.12.1",
+    "jquery-ui-touch-punch": "0.2.3",
+    "jquery.browser": "0.1.0",
     "live-server": "1.2.2",
     "regenerator-runtime": "0.14.1",
     "sass": "1.79.5",
     "sinon": "19.0.2",
+    "soundmanager2": "2.97.20170602",
     "svgo": "3.3.2",
     "testcafe": "3.6.2",
     "testcafe-browser-provider-browserstack": "^1.13.2-alpha.1",
@@ -104,7 +103,6 @@
     "build-assets": "npx cpx \"src/assets/**/*\" BookReader && npx svgo -f BookReader/icons && npx svgo -f BookReader/images",
     "build-assets:watch": "npx cpx --watch --verbose \"src/assets/**/*\" BookReader",
     "build-js": "npx webpack",
-    "build-esm": "env BABEL_ENV=esm npx babel src --out-dir dist/esm --copy-files --extensions \".js\"",
     "build-js:watch": "npx webpack --mode=development --watch",
     "build-css": "npx sass --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",
     "build-css:watch": "npx sass --watch --no-source-map ./src/css/BookReader.scss ./BookReader/BookReader.css",

package/src/BookNavigator/search/search-results.js

@@ -1,7 +1,7 @@
 /* eslint-disable class-methods-use-this */
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { css, html, LitElement, nothing } from 'lit';
-import '@internetarchive/ia-activity-indicator';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 import checkmarkIcon from '../assets/icon_checkmark.js';
 import closeIcon from '../assets/icon_close.js';
 import buttonCSS from '../assets/button-base.js';

package/src/BookReader/ImageCache.js

@@ -7,8 +7,10 @@
 /** @typedef {import("./BookModel").BookModel} BookModel */
 /** @typedef {import("./BookModel").PageIndex} PageIndex */
 /** @typedef {import("./ReduceSet").ReduceSet} ReduceSet */
+/** @typedef {import("./options").BookReaderOptions} BookReaderOptions */
 
 import { Pow2ReduceSet } from "./ReduceSet";
+import { DEFAULT_OPTIONS } from "./options";
 
 export class ImageCache {
   /**
@@ -16,11 +18,25 @@ export class ImageCache {
    * @param {object} opts
    * @param {boolean} [opts.useSrcSet]
    * @param {ReduceSet} [opts.reduceSet]
+   * @param {BookReaderOptions['renderPageURI']} [opts.renderPageURI]
    */
-  constructor(book, { useSrcSet = false, reduceSet = Pow2ReduceSet } = {}) {
+  constructor(
+    book,
+    {
+      useSrcSet = false,
+      reduceSet = Pow2ReduceSet,
+      renderPageURI = DEFAULT_OPTIONS.renderPageURI,
+    } = {},
+  ) {
+    /** @type {BookModel} */
     this.book = book;
+    /** @type {boolean} */
     this.useSrcSet = useSrcSet;
+    /** @type {ReduceSet} */
     this.reduceSet = reduceSet;
+    /** @type {BookReaderOptions['renderPageURI']} */
+    this.renderPageURI = renderPageURI;
+
     /** @type {{ [index: number]: { reduce: number, loaded: boolean }[] }} */
     this.cache = {};
     this.defaultScale = 8;
@@ -33,19 +49,35 @@ export class ImageCache {
    *
    * @param {PageIndex} index
    * @param {Number} reduce
+   * @param {HTMLImageElement?} [img]
    */
-  image(index, reduce) {
+  image(index, reduce, img = null) {
+    const finalReduce = this.getFinalReduce(index, reduce);
+    return this._serveImageElement(index, finalReduce, img);
+  }
+
+  /**
+   * Get the final reduce factor to use for the given index
+   *
+   * @param {PageIndex} index
+   * @param {Number} reduce
+   */
+  getFinalReduce(index, reduce) {
     const cachedImages = this.cache[index] || [];
     const sufficientImages = cachedImages
       .filter(x => x.loaded && x.reduce <= reduce);
+
     if (sufficientImages.length) {
       // Choose the largest reduction factor that meets our needs
       const bestReduce = Math.max(...sufficientImages.map(e => e.reduce));
-      return this._serveImageElement(index, bestReduce);
+      // Don't need to floor here, since we know the image is in the cache
+      // and hence was already floor'd by the below `else` clause before
+      // it was added
+      return bestReduce;
     } else {
       // Don't use a cache entry; i.e. a fresh fetch will be made
       // for this reduce
-      return this._serveImageElement(index, reduce);
+      return this.reduceSet.floor(reduce);
     }
   }
 
@@ -87,26 +119,27 @@ export class ImageCache {
    *
    * @param {PageIndex} index
    * @param {number} reduce
+   * @param {HTMLImageElement?} [img]
    * @returns {JQuery<HTMLImageElement>} with base image classes
    */
-  _serveImageElement(index, reduce) {
-    const validReduce = this.reduceSet.floor(reduce);
-    let cacheEntry = this.cache[index]?.find(e => e.reduce == validReduce);
+  _serveImageElement(index, reduce, img = null) {
+    let cacheEntry = this.cache[index]?.find(e => e.reduce == reduce);
     if (!cacheEntry) {
-      cacheEntry = { reduce: validReduce, loaded: false };
+      cacheEntry = { reduce, loaded: false };
       const entries = this.cache[index] || (this.cache[index] = []);
       entries.push(cacheEntry);
     }
     const page = this.book.getPage(index);
 
-    const $img = $('<img />', {
-      'class': 'BRpageimage',
-      'alt': 'Book page image',
-      src: page.getURI(validReduce, 0),
-    })
-      .data('reduce', validReduce);
+    const uri = page.getURI(reduce, 0);
+    const $img = $(img || document.createElement('img'))
+      .addClass('BRpageimage')
+      .attr('alt', 'Book page image')
+      .data('reduce', reduce)
+      .data('src', uri);
+    this.renderPageURI($img[0], uri);
     if (this.useSrcSet) {
-      $img.attr('srcset', page.getURISrcSet(validReduce));
+      $img.attr('srcset', page.getURISrcSet(reduce));
     }
     if (!cacheEntry.loaded) {
       $img.one('load', () => cacheEntry.loaded = true);

package/src/BookReader/Mode1UpLit.js

@@ -1,10 +1,10 @@
 // @ts-check
-import { property, query } from 'lit/decorators.js';
-import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import {LitElement, html} from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { ModeSmoothZoom } from './ModeSmoothZoom';
 import { arrChanged, genToArray, sum, throttle } from './utils';
-import { HTMLDimensionsCacher } from './utils/HTMLDimensionsCacher';
+import { HTMLDimensionsCacher } from "./utils/HTMLDimensionsCacher";
 import { ScrollClassAdder } from './utils/ScrollClassAdder';
 import { ModeCoordinateSpace } from './ModeCoordinateSpace';
 /** @typedef {import('./BookModel').BookModel} BookModel */
@@ -17,6 +17,7 @@ import { ModeCoordinateSpace } from './ModeCoordinateSpace';
 // I _have_ to make this globally public, otherwise it won't let me call
 // it's constructor :/
 /** @implements {SmoothZoomable} */
+@customElement('br-mode-1up')
 export class Mode1UpLit extends LitElement {
   /****************************************/
   /************** PROPERTIES **************/
@@ -85,15 +86,13 @@ export class Mode1UpLit extends LitElement {
   get worldStyle() {
     const wToR = this.coordSpace.worldUnitsToRenderedPixels;
     return {
-      width: wToR(this.worldDimensions.width) + 'px',
-      height: wToR(this.worldDimensions.height) + 'px',
+      width: wToR(this.worldDimensions.width) + "px",
+      height: wToR(this.worldDimensions.height) + "px",
     };
   }
 
   /** @type {HTMLElement} */
-  get $container() {
-    return this;
-  }
+  get $container() { return this; }
 
   /** @type {HTMLElement} */
   @query('.br-mode-1up__visible-world')
@@ -129,12 +128,10 @@ export class Mode1UpLit extends LitElement {
     if (smooth) {
       this.style.scrollBehavior = 'smooth';
     }
-    this.scrollTop = this.coordSpace.worldUnitsToVisiblePixels(
-      this.pageTops[index] - this.SPACING_IN / 2,
-    );
+    this.scrollTop = this.coordSpace.worldUnitsToVisiblePixels(this.pageTops[index] - this.SPACING_IN / 2);
     // TODO: Also h center?
     if (smooth) {
-      setTimeout(() => (this.style.scrollBehavior = ''), 100);
+      setTimeout(() => this.style.scrollBehavior = '', 100);
     }
   }
 
@@ -197,7 +194,7 @@ export class Mode1UpLit extends LitElement {
       this.throttledUpdateRenderedPages();
       if (this.visiblePages.length) {
         // unclear why this is ever really happening
-        this.br.displayedIndices = this.visiblePages.map((p) => p.index);
+        this.br.displayedIndices = this.visiblePages.map(p => p.index);
         this.br.updateFirstIndex(this.br.displayedIndices[0]);
         this.br._components.navbar.updateNavIndexThrottled();
       }
@@ -214,9 +211,7 @@ export class Mode1UpLit extends LitElement {
   }
 
   updatePages() {
-    this.pages = genToArray(
-      this.book.pagesIterator({ combineConsecutiveUnviewables: true }),
-    );
+    this.pages = genToArray(this.book.pagesIterator({ combineConsecutiveUnviewables: true }));
   }
 
   /** @override */
@@ -247,59 +242,50 @@ export class Mode1UpLit extends LitElement {
 
   /** @override */
   render() {
-    return html` <div
-        class="br-mode-1up__world"
-        style=${styleMap(this.worldStyle)}
-      ></div>
+    return html`
+      <div class="br-mode-1up__world" style=${styleMap(this.worldStyle)}></div>
       <div class="br-mode-1up__visible-world">
-        ${this.renderedPages.map((p) => this.renderPage(p))}
+        ${this.renderedPages.map(p => this.renderPage(p))}
       </div>`;
   }
 
   /** @param {PageModel} page */
   createPageContainer = (page) => {
-    return (
-      this.pageContainerCache[page.index] ||
-      (this.pageContainerCache[page.index] =
+    return this.pageContainerCache[page.index] || (
+      this.pageContainerCache[page.index] = (
         // @ts-ignore I know it's protected, TS! But Mode1Up and BookReader are friends.
-        this.br._createPageContainer(page.index))
+        this.br._createPageContainer(page.index)
+      )
     );
-  };
+  }
 
   /** @param {PageModel} page */
   renderPage = (page) => {
     const wToR = this.coordSpace.worldUnitsToRenderedPixels;
     const wToV = this.coordSpace.worldUnitsToVisiblePixels;
-    const containerWidth = this.coordSpace.visiblePixelsToWorldUnits(
-      this.htmlDimensionsCacher.clientWidth,
-    );
+    const containerWidth = this.coordSpace.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth);
 
     const width = wToR(page.widthInches);
     const height = wToR(page.heightInches);
-    const left = Math.max(
-      this.SPACING_IN,
-      (containerWidth - page.widthInches) / 2,
-    );
+    const left = Math.max(this.SPACING_IN, (containerWidth - page.widthInches) / 2);
     const top = this.pageTops[page.index];
 
     const transform = `translate(${wToR(left)}px, ${wToR(top)}px)`;
-    const pageContainerEl = this.createPageContainer(page).update({
-      dimensions: {
-        width,
-        height,
-        top: 0,
-        left: 0,
-      },
-      reduce: page.width / wToV(page.widthInches),
-    }).$container[0];
+    const pageContainerEl = this.createPageContainer(page)
+      .update({
+        dimensions: {
+          width,
+          height,
+          top: 0,
+          left: 0,
+        },
+        reduce: page.width / wToV(page.widthInches),
+      }).$container[0];
 
     pageContainerEl.style.transform = transform;
-    pageContainerEl.classList.toggle(
-      'BRpage-visible',
-      this.visiblePages.includes(page),
-    );
+    pageContainerEl.classList.toggle('BRpage-visible', this.visiblePages.includes(page));
     return pageContainerEl;
-  };
+  }
 
   /************** VIRTUAL SCROLLING LOGIC **************/
 
@@ -320,7 +306,7 @@ export class Mode1UpLit extends LitElement {
       left: vToW(scrollLeft),
       width: vToW(clientWidth),
     };
-  };
+  }
 
   /**
    * @returns {PageModel[]}
@@ -328,26 +314,20 @@ export class Mode1UpLit extends LitElement {
   computeRenderedPages() {
     // Also render 1 page before/after
     // @ts-ignore TS doesn't understand the filtering out of null values
-    return (
-      [
-        this.visiblePages[0]?.prev,
-        ...this.visiblePages,
-        this.visiblePages[this.visiblePages.length - 1]?.next,
-      ]
-        .filter((p) => p)
-        // Never render more than 10 pages! Usually means something is wrong
-        .slice(0, 10)
-    );
+    return [
+      this.visiblePages[0]?.prev,
+      ...this.visiblePages,
+      this.visiblePages[this.visiblePages.length - 1]?.next,
+    ]
+      .filter(p => p)
+      // Never render more than 10 pages! Usually means something is wrong
+      .slice(0, 10);
   }
 
-  throttledUpdateRenderedPages = throttle(
-    () => {
-      this.renderedPages = this.computeRenderedPages();
-      this.requestUpdate();
-    },
-    100,
-    null,
-  );
+  throttledUpdateRenderedPages = throttle(() => {
+    this.renderedPages = this.computeRenderedPages();
+    this.requestUpdate();
+  }, 100, null)
 
   /**
    * @param {PageModel[]} pages
@@ -370,29 +350,21 @@ export class Mode1UpLit extends LitElement {
    */
   computeDefaultScale(page) {
     // Default to real size if it fits, otherwise default to full width
-    const containerWidthIn = this.coordSpace.renderedPixelsToWorldUnits(
-      this.clientWidth,
-    );
-    return (
-      Math.min(
-        1,
-        containerWidthIn / (page.widthInches + 2 * this.SPACING_IN),
-      ) || 1
-    );
+    const containerWidthIn = this.coordSpace.renderedPixelsToWorldUnits(this.clientWidth);
+    return Math.min(1, containerWidthIn / (page.widthInches + 2 * this.SPACING_IN)) || 1;
   }
 
   computeWorldDimensions() {
     return {
-      width:
-        Math.max(...this.pages.map((p) => p.widthInches)) + 2 * this.SPACING_IN,
+      width: Math.max(...this.pages.map(p => p.widthInches)) + 2 * this.SPACING_IN,
       height:
-        sum(this.pages.map((p) => p.heightInches)) +
-        (this.pages.length + 1) * this.SPACING_IN,
+          sum(this.pages.map(p => p.heightInches)) +
+          (this.pages.length + 1) * this.SPACING_IN,
     };
   }
 
   computeVisiblePages() {
-    return this.pages.filter((page) => {
+    return this.pages.filter(page => {
       const PT = this.pageTops[page.index];
       const PB = PT + page.heightInches;
 
@@ -405,14 +377,12 @@ export class Mode1UpLit extends LitElement {
   /************** INPUT HANDLERS **************/
 
   attachScrollListeners = () => {
-    this.addEventListener('scroll', this.updateVisibleRegion);
+    this.addEventListener("scroll", this.updateVisibleRegion);
     this.scrollClassAdder.attach();
-  };
+  }
 
   detachScrollListeners = () => {
-    this.removeEventListener('scroll', this.updateVisibleRegion);
+    this.removeEventListener("scroll", this.updateVisibleRegion);
     this.scrollClassAdder.detach();
-  };
+  }
 }
-
-customElements.define('br-mode-1up', Mode1UpLit);

package/src/BookReader/Mode2UpLit.js

@@ -16,6 +16,7 @@ import { ModeCoordinateSpace } from './ModeCoordinateSpace';
 // I _have_ to make this globally public, otherwise it won't let me call
 // its constructor :/
 /** @implements {SmoothZoomable} */
+@customElement('br-mode-2up')
 export class Mode2UpLit extends LitElement {
   /****************************************/
   /************** PROPERTIES **************/
@@ -492,13 +493,14 @@ export class Mode2UpLit extends LitElement {
   /**
    * @param {'left' | 'right' | 'next' | 'prev' | PageIndex | PageModel | {left: PageModel | null, right: PageModel | null}} nextSpread
    */
-  async flipAnimation(nextSpread, { animate = true } = {}) {
+  async flipAnimation(nextSpread, { animate = true, flipSpeed = this.flipSpeed } = {}) {
     const curSpread = (this.pageLeft || this.pageRight)?.spread;
     if (!curSpread) {
       // Nothings been actually rendered yet! Will be corrected during initFirstRender
       return;
     }
 
+    flipSpeed = flipSpeed || this.flipSpeed; // Handle null
     nextSpread = this.parseNextSpread(nextSpread);
     if (this.activeFlip || !nextSpread) return;
 
@@ -558,7 +560,7 @@ export class Mode2UpLit extends LitElement {
 
       /** @type {KeyframeAnimationOptions} */
       const animationStyle = {
-        duration: this.flipSpeed + this.activeFlip.pagesFlippingCount,
+        duration: flipSpeed + this.activeFlip.pagesFlippingCount,
         easing: 'ease-in',
         fill: 'none',
       };
@@ -675,6 +677,7 @@ export class Mode2UpLit extends LitElement {
   }
 }
 
+@customElement('br-leaf-edges')
 export class LeafEdges extends LitElement {
   @property({ type: Number }) leftIndex = 0;
   @property({ type: Number }) rightIndex = 0;
@@ -772,6 +775,3 @@ export class LeafEdges extends LitElement {
     return Math.floor(this.leftIndex + (e.offsetX / this.offsetWidth) * (this.rightIndex - this.leftIndex + 1));
   }
 }
-
-customElements.define('br-mode-2up', Mode2UpLit);
-customElements.define('br-leaf-edges', LeafEdges);

package/src/BookReader/Navbar/Navbar.js

@@ -138,16 +138,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
@@ -203,7 +230,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>
@@ -246,9 +276,10 @@ export class Navbar {
   /**
   * 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.book.getPageNum(index);
@@ -268,7 +299,8 @@ export class Navbar {
       this.maxPageNum = maxPageNum;
     }
 
-    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum);
+    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum, useMaxFormat);
+
   }
 
   /**
@@ -276,7 +308,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));
   }
 
   /**
@@ -298,14 +331,23 @@ export class Navbar {
  * @param {number|string} pageNum
  * @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 && parseFloat(pageNum)) ? ` of ${maxPageNum}` : '';