Switch to new page number display format (#1366)

* Switch to new page number display format

- Split desktop and mobile page number displays
- CSS: Move 'hide' to .controls
- Add/split tests for desktop and mobile page number displays

* default to false for useMaxFormat everywhere

* Fix for liner notes

---------

Co-authored-by: IA Jim <jshelton@archive.org>

Author: pezvi

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,15 +299,17 @@ export class Navbar {
       this.maxPageNum = maxPageNum;
     }
 
-    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.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').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}` : '';

src/css/_BRnav.scss

@@ -110,9 +110,6 @@
         display: block;
       }
     }
-    &.hide {
-      display: none;
-    }
   }
 }
 

src/css/_controls.scss

@@ -81,6 +81,10 @@
     height: 30px;
   }
 
+  .controls .hide {
+    display: none;
+  }
+
   @keyframes slideUp {
     from {
       opacity: 0;

tests/jest/BookReader/Navbar/Navbar.test.js

@@ -4,17 +4,30 @@ import BookReader from '@/src/BookReader.js';
 
 describe('getNavPageNumHtml', () => {
   const f = getNavPageNumHtml;
-  test('handle n-prefixed page numbers', () => {
+
+  test('handle n-prefixed page numbers-min format', () => {
     expect(f(3, 40, 'n3', '', 40)).toBe('(4 of 40)');
   });
 
-  test('handle regular page numbers', () => {
+  test('handle regular page numbers-min format', () => {
     expect(f(3, 40, '14', '', 40)).toBe('14 of 40');
   });
 
-  test('handle no max page', () => {
+  test('handle no max page-min format', () => {
     expect(f(3, 40, '14', '', null)).toBe('14');
   });
+
+  test('handle n-prefixed page numbers-max format', () => {
+    expect(f(3, 40, 'n3', '', 40, true)).toBe('Page — (4/40)');
+  });
+
+  test('handle regular page numbers-max format', () => {
+    expect(f(3, 40, '14', '', 40, true)).toBe('Page 14 (4/40)');
+  });
+
+  test('handle no max page-max format', () => {
+    expect(f(3, 40, '14', '', null, true)).toBe('Page 14 (4/40)');
+  });
 });
 
 /** @type {BookReader} */