@internetarchive/bookreader 5.0.0-23 → 5.0.0-24

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 5.0.0-24
+Fix: book-nav side panel zoom out @mc2
+Dev: refactor zoom code @mc2
+
 # 5.0.0-23
 Fix: Darken scrollbars in Safari @pezvi
 Fix: Bookmarks service calls when reader is logged in @mc2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-23",
+  "version": "5.0.0-24",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",

package/src/BookNavigator/visual-adjustments/visual-adjustments-provider.js

@@ -60,7 +60,7 @@ export default class {
   }
 
   onZoomOut() {
-    this.bookreader.zoom();
+    this.bookreader.zoom(-1);
   }
 
   onAdjustmentChange(event) {

package/src/BookReader/Mode1Up.js

@@ -79,8 +79,16 @@ export class Mode1Up {
    * @param {'in' | 'out'} direction
    */
   zoom(direction) {
-    if (direction == 'in') this.mode1UpLit.zoomIn();
-    else this.mode1UpLit.zoomOut();
+    switch (direction) {
+    case 'in':
+      this.mode1UpLit.zoomIn();
+      break;
+    case 'out':
+      this.mode1UpLit.zoomOut();
+      break;
+    default:
+      console.error(`Unsupported direction: ${direction}`);
+    }
   }
 
   /**

package/src/BookReader/ModeThumb.js

@@ -235,20 +235,27 @@ export class ModeThumb {
   }
 
   /**
-   * @param {1 | -1} direction
+   * @param {'in' | 'out'} direction
    */
   zoom(direction) {
     const oldColumns = this.br.thumbColumns;
     switch (direction) {
-    case -1:
-      this.br.thumbColumns += 1;
-      break;
-    case 1:
+    case 'in':
       this.br.thumbColumns -= 1;
       break;
+    case 'out':
+      this.br.thumbColumns += 1;
+      break;
+    default:
+      console.error(`Unsupported direction: ${direction}`);
     }
 
-    this.br.thumbColumns = clamp(this.br.thumbColumns, 2, 8);
+    // 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 */

package/src/BookReader/options.js

@@ -25,6 +25,10 @@ export const DEFAULT_OPTIONS = {
   thumbMaxLoading: 4,
   /** spacing between thumbnails */
   thumbPadding: 10,
+  /** min zoom in columns */
+  thumbMinZoomColumns: 2,
+  /** max zoom out columns */
+  thumbMaxZoomColumns: 8,
 
   /** @type {number | 'fast' | 'slow'} speed for flip animation */
   flipSpeed: 'fast',

package/src/BookReader.js

@@ -829,29 +829,11 @@ BookReader.prototype.drawLeafsThrottled = utils.throttle(
  * @param {number} direction Pass 1 to zoom in, anything else to zoom out
  */
 BookReader.prototype.zoom = function(direction) {
-  switch (this.mode) {
-  case this.constMode1up:
-    if (direction == 1) {
-      // XXX other cases
-      this.zoom1up('in');
-    } else {
-      this.zoom1up('out');
-    }
-    break;
-  case this.constMode2up:
-    if (direction == 1) {
-      // XXX other cases
-      this.zoom2up('in');
-    } else {
-      this.zoom2up('out');
-    }
-    break;
-  case this.constModeThumb:
-    // XXX update zoomThumb for named directions
-    this.zoomThumb(direction);
-    break;
+  if (direction == 1) {
+    this.activeMode.zoom('in');
+  } else {
+    this.activeMode.zoom('out');
   }
-
   this.textSelectionPlugin?.stopPageFlip(this.refs.$brContainer);
   return;
 };

package/tests/jest/BookReader/ModeThumb.test.js

@@ -0,0 +1,71 @@
+
+import sinon from 'sinon';
+import BookReader from '@/src/BookReader.js';
+/** @typedef {import('@/src/BookReader/options.js').BookReaderOptions} BookReaderOptions */
+
+beforeAll(() => {
+  global.alert = jest.fn();
+});
+afterEach(() => {
+  jest.restoreAllMocks();
+  sinon.restore();
+});
+
+/** @type {BookReaderOptions['data']} */
+const SAMPLE_DATA = [
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image0.jpg', pageNum: '1' },
+  ],
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image1.jpg', pageNum: '2' },
+    { width: 123, height: 123, uri: 'https://archive.org/image2.jpg', pageNum: '3' },
+  ],
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image3.jpg', pageNum: '4' },
+    { width: 123, height: 123, uri: 'https://archive.org/image4.jpg', pageNum: '5' },
+  ],
+  [
+    { width: 123, height: 123, uri: 'https://archive.org/image5.jpg', pageNum: '6' },
+  ],
+];
+
+describe('zoom', () => {
+  const br = new BookReader({ data: SAMPLE_DATA });
+  br.init();
+
+  test('initializes with default columns', () => {
+    expect(br.thumbColumns).toBe(br.options.thumbColumns);
+  });
+
+  test('removes column and redraws zooming in', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    const startColumns = br.thumbColumns;
+    br._modes.modeThumb.zoom('in');
+    expect(br.thumbColumns).toBe(startColumns - 1);
+    expect(prepare.callCount).toBe(1);
+  });
+
+  test('adds column and redraws zooming out', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    const startColumns = br.thumbColumns;
+    br._modes.modeThumb.zoom('out');
+    expect(br.thumbColumns).toBe(startColumns + 1);
+    expect(prepare.callCount).toBe(1);
+  });
+
+  test('keeps columns and no redraw at zooming in limit', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    br.thumbColumns = br.options.thumbMinZoomColumns;
+    br._modes.modeThumb.zoom('in');
+    expect(br.thumbColumns).toBe(br.options.thumbMinZoomColumns);
+    expect(prepare.callCount).toBe(0);
+  });
+
+  test('keeps columns and no redraw at zooming out limit', () => {
+    const prepare = sinon.spy(br._modes.modeThumb, 'prepare');
+    br.thumbColumns = br.options.thumbMaxZoomColumns;
+    br._modes.modeThumb.zoom('out');
+    expect(br.thumbColumns).toBe(br.options.thumbMaxZoomColumns);
+    expect(prepare.callCount).toBe(0);
+  });
+});