add functionality to jump to book page

src/BookReader/Navbar/Navbar.js

@@ -252,23 +252,29 @@ export class Navbar {
     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++) {
+      for (let i = numLeafs - 1; i >= 0; i--) {
         pageNumVal = parseFloat(br.book.getPageNum(i));
-        if (!isNaN(pageNumVal) && pageNumVal > maxPageNum) {
+        if (!isNaN(pageNumVal)) {
           maxPageNum = pageNumVal;
+          break;
         }
       }
       this.maxPageNum = maxPageNum;
     }
-
-    return getNavPageNumHtml(index, numLeafs, pageNum, pageType, this.maxPageNum);
+    const [pageIndex, bookLength] = getIndexAndLength(index, numLeafs, pageNum, this.maxPageNum);
+    const navPageNumHtml = getNavPageNumHtml(pageIndex, bookLength);
+    navPageNumHtml.filter('.BRnavPageNum')
+      .on('blur', (e) => this.handlePageNumChange(e, bookLength))
+      .on('keydown', (e) => {
+        if (e.key === 'Enter') this.handlePageNumChange(e, bookLength);
+      });
+    return navPageNumHtml;
   }
 
   /**
@@ -289,25 +295,55 @@ export class Navbar {
     index = index !== undefined ? index : this.br.currentIndex();
     this.$root.find('.BRpager').data('swallowchange', true).slider('value', index);
   }
+
+  /**
+   * Event handler for input changes in the page number field.
+   * @param {Event} e The input event.
+   * @param {number} bookLength Length of the book.
+   */
+  handlePageNumChange(e, bookLength) {
+    const input = e.target;
+    const pageNum = parseInt(input.value, 10);
+    $(input).prev('.BRnavTooltip').remove();
+    if (isNaN(pageNum) || pageNum < 1 || pageNum > bookLength) {
+      $(input).before($(`<div class="BRnavTooltip">Please enter a valid page number (1-${bookLength}).</div>`));
+    } else {
+      this.br.jumpToIndex(pageNum);
+    }
+  }
 }
 
 /**
- * Renders the html for the page string
+ * Retrieves the page index and length of the book
  * @param {number} index
  * @param {number} numLeafs
  * @param {number|string} pageNum
- * @param {*} pageType - Deprecated
  * @param {number} maxPageNum
- * @return {string}
+ * @return {[number|string, number|string]}
  */
-export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum) {
-  const pageIsAsserted = pageNum[0] != 'n';
-
-  if (!pageIsAsserted) {
-    const pageIndex = index + 1;
-    return `(${pageIndex} of ${numLeafs})`; // Page (8 of 10)
+export function getIndexAndLength(index, numLeafs, pageNum, maxPageNum) {
+  if (pageNum[0] != 'n') {
+    return [pageNum, (maxPageNum && parseFloat(pageNum)) ? maxPageNum : ''];
   }
-
-  const bookLengthLabel = (maxPageNum && parseFloat(pageNum)) ? ` of ${maxPageNum}` : '';
-  return `${pageNum}${bookLengthLabel}`;
+  return [index + 1, numLeafs];
 }
+
+/**
+ * Renders the html for the page string
+ * @param {number} pageIndex
+ * @param {number} bookLength
+ * @return {string}
+ */
+export function getNavPageNumHtml(pageIndex, bookLength) {
+  return $(`
+    <input 
+      type="number" 
+      name="pageNum" 
+      class="BRnavPageNum"
+      value="${pageIndex}" 
+      min="1" 
+      max="${bookLength}"
+    />
+    <span> of ${bookLength}</span>
+  `);
+}

src/css/_BRnav.scss

@@ -233,6 +233,28 @@
   float: left;
   flex: 1 auto;
 }
+
+.BRnavPageNum {
+  color: white;
+  background-color: transparent;
+  border: 2px solid;
+  width: 50px;
+  font-size: $brFontSizeSmaller;
+  box-sizing: border-box;
+  border-radius: 5px;
+}
+
+.BRnavTooltip {
+  position: absolute;
+  padding: 10px;
+  border: 1px solid;
+  border-radius: 4px;
+  white-space: nowrap;
+  transform: translateY(-120%);
+  font-size: $brFontSizeSmaller;
+  z-index: 1000;
+}
+
 .BRpager.ui-slider  {
   position: relative;
   height: 8px;
@@ -270,7 +292,7 @@
   }
 }
 
-/* BRnavlin is where chapters/search are appended */
+/* BRnavline is where chapters/search are appended */
 .BRnavline {
   position: relative;
   height: 1px;
@@ -327,7 +349,6 @@
   background-repeat: no-repeat;
 }
 
-
 /* Mobile Only */
 @media (max-width: $brBreakPointMobile) {
   /* hide navline chapters and search in mobile */

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

@@ -1,19 +1,40 @@
 import sinon from 'sinon';
-import { getNavPageNumHtml } from '@/src/BookReader/Navbar/Navbar.js';
+import { getIndexAndLength, getNavPageNumHtml } from '@/src/BookReader/Navbar/Navbar.js';
 import BookReader from '@/src/BookReader.js';
 
-describe('getNavPageNumHtml', () => {
-  const f = getNavPageNumHtml;
+describe('getIndexAndLength', () => {
+  const f = getIndexAndLength;
   test('handle n-prefixed page numbers', () => {
-    expect(f(3, 40, 'n3', '', 40)).toBe('(4 of 40)');
+    expect(f(3, 40, 'n3', 40)).toEqual([4, 40]);
   });
 
   test('handle regular page numbers', () => {
-    expect(f(3, 40, '14', '', 40)).toBe('14 of 40');
+    expect(f(3, 40, '14', 40)).toEqual(['14', 40]);
   });
 
   test('handle no max page', () => {
-    expect(f(3, 40, '14', '', null)).toBe('14');
+    expect(f(3, 40, '14', null)).toEqual(['14', '']);
+  });
+});
+
+describe('getNavPageNumHtml', () => {
+  const f = getNavPageNumHtml;
+  test('renders HTML with correct attributes and values', () => {
+    const pageIndex = 4;
+    const bookLength = 40;
+
+    const result = f(pageIndex, bookLength);
+
+    expect(result).toBeInstanceOf(jQuery);
+    const html = result.map((_, el) => el.outerHTML).get().join('');
+
+    expect(html).toContain(`type="number"`);
+    expect(html).toContain(`name="pageNum"`);
+    expect(html).toContain(`class="BRnavPageNum"`);
+    expect(html).toContain(`value="${pageIndex}"`);
+    expect(html).toContain(`min="1"`);
+    expect(html).toContain(`max="${bookLength}"`);
+    expect(html).toContain(`of ${bookLength}`);
   });
 });