@internetarchive/bookreader 5.0.0-5-multiple-files → 5.0.0-50-a1

package/src/BookReader/Mode2Up.js

@@ -1,16 +1,21 @@
 // @ts-check
 // effect.js gives acces to extra easing function (e.g. easeInSine)
 import 'jquery-ui/ui/effect.js';
-import '../dragscrollable-br.js';
 import { clamp } from './utils.js';
 import { EVENTS } from './events.js';
+import { ModeSmoothZoom } from "./ModeSmoothZoom.js";
+import { HTMLDimensionsCacher } from './utils/HTMLDimensionsCacher.js';
+import { DragScrollable } from './DragScrollable.js';
+import { ScrollClassAdder } from './utils/ScrollClassAdder.js';
 
 /** @typedef {import('../BookReader.js').default} BookReader */
 /** @typedef {import('./BookModel.js').BookModel} BookModel */
 /** @typedef {import('./BookModel.js').PageIndex} PageIndex */
 /** @typedef {import('./options.js').BookReaderOptions} BookReaderOptions */
 /** @typedef {import('./PageContainer.js').PageContainer} PageContainer */
+/** @typedef {import('./ModeSmoothZoom').SmoothZoomable} SmoothZoomable */
 
+/** @implements {SmoothZoomable} */
 export class Mode2Up {
   /**
    * @param {BookReader} br
@@ -27,6 +32,28 @@ export class Mode2Up {
 
     /** @type {{ [index: number]: PageContainer }} */
     this.pageContainers = {};
+
+    /** @type {ModeSmoothZoom} */
+    this.smoothZoomer = null;
+    this._scale = 1;
+    this.scaleCenter = { x: 0.5, y: 0.5 };
+
+    /** @type {ScrollClassAdder} */
+    this.scrollClassAdder = null;
+  }
+
+  get $container() {
+    return this.br.refs.$brContainer[0];
+  }
+  get $visibleWorld() {
+    return this.br.refs.$brTwoPageView?.[0];
+  }
+
+  get scale() { return this._scale; }
+  set scale(newVal) {
+    this.$visibleWorld.style.transform = `scale(${newVal})`;
+    this.updateViewportOnZoom(newVal, this._scale);
+    this._scale = newVal;
   }
 
   /**
@@ -42,18 +69,6 @@ export class Mode2Up {
     }
   }
 
-  /**
-   * @template T
-   * @param {HTMLElement} element
-   * @param {T} data
-   * @param {function(HTMLElement, { data: T }): void} handler
-   */
-  setClickHandler(element, data, handler) {
-    $(element).unbind('mouseup').bind('mouseup', data, function(e) {
-      handler(this, e);
-    });
-  }
-
   /**
    * Draws book spread,
    * sets event handlers,
@@ -74,9 +89,7 @@ export class Mode2Up {
       .appendTo($twoPageViewEl);
 
     this.displayedIndices = [this.br.twoPage.currentIndexL, this.br.twoPage.currentIndexR];
-    this.setMouseHandlers();
     this.br.displayedIndices = this.displayedIndices;
-    this.br.updateToolbarZoom(this.br.reduce);
     this.br.trigger('pageChanged');
   }
 
@@ -104,7 +117,7 @@ export class Mode2Up {
 
     // Prepare view with new center to minimize visual glitches
     const drawNewSpread = true;
-    this.prepareTwoPageView(oldCenter.percentageX, oldCenter.percentageY, drawNewSpread);
+    this.prepare(oldCenter.percentageX, oldCenter.percentageY, drawNewSpread);
   }
 
   /**
@@ -136,7 +149,7 @@ export class Mode2Up {
    * @param {number} centerPercentageY
    * @param {Boolean} drawNewSpread
    */
-  prepareTwoPageView(centerPercentageX, centerPercentageY, drawNewSpread = false) {
+  prepare(centerPercentageX, centerPercentageY, drawNewSpread = false) {
     // Some decisions about two page view:
     //
     // Both pages will be displayed at the same height, even if they were different physical/scanned
@@ -176,13 +189,22 @@ export class Mode2Up {
 
     // Add the two page view
     // $$$ Can we get everything set up and then append?
-    const $twoPageViewEl = $('<div class="BRtwopageview"></div>');
-    this.br.refs.$brTwoPageView = $twoPageViewEl;
+    this.br.refs.$brTwoPageView = this.br.refs.$brTwoPageView || $('<div class="BRtwopageview"></div>');
+    const $twoPageViewEl = this.br.refs.$brTwoPageView;
+    $twoPageViewEl.empty();
+    $twoPageViewEl[0].style.transformOrigin = '0 0';
     this.br.refs.$brContainer.append($twoPageViewEl);
 
     // Attaches to first child, so must come after we add the page view
-    this.br.refs.$brContainer.dragscrollable({preventDefault:true});
-    this.br.bindGestures(this.br.refs.$brContainer);
+    this.dragScrollable = this.dragScrollable || new DragScrollable(this.br.refs.$brContainer[0], {
+      preventDefault: true,
+      // Only handle mouse events; let browser/HammerJS handle touch
+      dragstart: 'mousedown',
+      dragcontinue: 'mousemove',
+      dragend: 'mouseup',
+    });
+
+    this.attachMouseHandlers();
 
     // $$$ calculate container size first
     this.br.refs?.$brTwoPageView.css(this.mainContainerCss);
@@ -218,14 +240,57 @@ export class Mode2Up {
     this.br.displayedIndices = [];
 
     this.drawLeafs();
-    this.br.updateToolbarZoom(this.br.reduce);
+    this.br.updateBrClasses();
 
-    if (this.br.enableSearch) {
-      this.br.removeSearchHilites();
-      this.br.updateSearchHilites();
+    this.smoothZoomer = this.smoothZoomer || new ModeSmoothZoom(this);
+    this.smoothZoomer.attach();
+    if (!this.scrollClassAdder) {
+      this.scrollClassAdder = new ScrollClassAdder(this.$container, 'BRscrolling-active');
     }
+    this.scrollClassAdder.detach();
+    this.scrollClassAdder.element = this.$container;
+    this.scrollClassAdder.attach();
 
-    this.br.updateBrClasses();
+    this.htmlDimensionsCacher = this.htmlDimensionsCacher || new HTMLDimensionsCacher(this.$container);
+  }
+
+  unprepare() {
+    // Mode2Up attaches these listeners to the main BR container, so we need to
+    // detach these or it will cause issues for the other modes.
+    this.smoothZoomer.detach();
+    this.scrollClassAdder.detach();
+  }
+
+  /**
+   * @param {number} newScale
+   * @param {number} oldScale
+   */
+  updateViewportOnZoom(newScale, oldScale) {
+    const container = this.br.refs.$brContainer[0];
+    const { scrollTop: T, scrollLeft: L } = container;
+    const W = this.htmlDimensionsCacher.clientWidth;
+    const H = this.htmlDimensionsCacher.clientHeight;
+
+    // Scale factor change
+    const F = newScale / oldScale;
+
+    // Where in the viewport the zoom is centered on
+    const XPOS = this.scaleCenter.x;
+    const YPOS = this.scaleCenter.y;
+    const oldCenter = {
+      x: L + XPOS * W,
+      y: T + YPOS * H,
+    };
+    const newCenter = {
+      x: F * oldCenter.x,
+      y: F * oldCenter.y,
+    };
+    container.scrollTop = newCenter.y - YPOS * H;
+    container.scrollLeft = newCenter.x - XPOS * W;
+
+    // Also update the visible page containers to load in highres if necessary
+    this.pageContainers[this.br.twoPage.currentIndexL]?.update({ reduce: this.br.reduce / newScale });
+    this.pageContainers[this.br.twoPage.currentIndexR]?.update({ reduce: this.br.reduce / newScale });
   }
 
   prunePageContainers() {
@@ -324,7 +389,7 @@ export class Mode2Up {
 
     // Leaf edges
     this.br.twoPage.edgeWidth = spreadSize.totalLeafEdgeWidth; // The combined width of both edges
-    this.br.twoPage.leafEdgeWidthL = this.br.leafEdgeWidth(this.br.twoPage.currentIndexL);
+    this.br.twoPage.leafEdgeWidthL = this.leafEdgeWidth(this.br.twoPage.currentIndexL);
     this.br.twoPage.leafEdgeWidthR = this.br.twoPage.edgeWidth - this.br.twoPage.leafEdgeWidthL;
 
 
@@ -461,21 +526,6 @@ export class Mode2Up {
     return spreadSize.reduce;
   }
 
-  /**
-   * Returns true if the pages extend past the edge of the view
-   * @deprecated slated for deprecation by v5.0.0
-   * @return {boolean}
-   */
-  isZoomedIn() {
-    let isZoomedIn = false;
-    if (this.br.twoPage.autofit != 'auto') {
-      if (this.br.reduce < this.getAutofitReduce()) {
-        isZoomedIn = true;
-      }
-    }
-    return isZoomedIn;
-  }
-
   calculateReductionFactors() {
     this.br.twoPage.reductionFactors = this.br.reductionFactors.concat([
       {
@@ -486,14 +536,6 @@ export class Mode2Up {
     this.br.twoPage.reductionFactors.sort(this.br._reduceSort);
   }
 
-  /**
-   * Set the cursor for two page view
-   * @deprecated Since version 4.3.3. Will be deleted in version 5.0
-   */
-  setCursor() {
-    console.warn('Call to deprecated method, Mode2Up.setCursor. No-op.');
-  }
-
   /**
    * @param {Number|null} index to flip back one spread, pass index=null
    */
@@ -517,7 +559,7 @@ export class Mode2Up {
       if (prev.pageSide == 'R') index--;
     }
 
-    this.br.updateNavIndexThrottled(index);
+    this.br._components.navbar.updateNavIndexThrottled(index);
 
     const previousIndices = this.book.getSpreadIndices(index);
 
@@ -547,8 +589,8 @@ export class Mode2Up {
     this.br.refs.$brContainer.addClass("BRpageFlipping");
     const leftLeaf = this.br.twoPage.currentIndexL;
 
-    const oldLeafEdgeWidthL = this.br.leafEdgeWidth(this.br.twoPage.currentIndexL);
-    const newLeafEdgeWidthL = this.br.leafEdgeWidth(newIndexL);
+    const oldLeafEdgeWidthL = this.leafEdgeWidth(this.br.twoPage.currentIndexL);
+    const newLeafEdgeWidthL = this.leafEdgeWidth(newIndexL);
     const leafEdgeTmpW = oldLeafEdgeWidthL - newLeafEdgeWidthL;
 
     const currWidthL   = this.getPageWidth(leftLeaf);
@@ -616,8 +658,6 @@ export class Mode2Up {
 
     $(this.br.leafEdgeTmp).animate({left: gutter}, this.br.flipSpeed, 'easeInSine');
 
-    if (this.br.enableSearch) this.br.removeSearchHilites();
-
     this.pageContainers[leftLeaf].$container.animate({width: '0px'}, this.br.flipSpeed, 'easeInSine', () => {
 
       $(this.br.leafEdgeTmp).animate({left: `${gutter + newWidthR}px`}, this.br.flipSpeed, 'easeOutSine');
@@ -663,10 +703,6 @@ export class Mode2Up {
 
         this.resizeSpread();
 
-        if (this.br.enableSearch) this.br.updateSearchHilites();
-
-        this.setMouseHandlers();
-
         if (this.br.animationFinishedCallback) {
           this.br.animationFinishedCallback();
           this.br.animationFinishedCallback = null;
@@ -690,11 +726,11 @@ export class Mode2Up {
   /**
    * @param {PageIndex} index
    */
-  createPageContainer(index, fetch = false) {
+  createPageContainer(index) {
     if (!this.pageContainers[index]) {
       this.pageContainers[index] = this.br._createPageContainer(index);
     }
-    this.pageContainers[index].update({ reduce: this.br.reduce });
+    this.pageContainers[index].update({ reduce: this.br.reduce / this.scale });
     return this.pageContainers[index];
   }
 
@@ -721,7 +757,7 @@ export class Mode2Up {
     }
     if (index > this.br.lastDisplayableIndex()) return;
 
-    this.br.updateNavIndexThrottled(index);
+    this.br._components.navbar.updateNavIndexThrottled(index);
 
     this.br.animating = true;
 
@@ -747,9 +783,9 @@ export class Mode2Up {
   flipRightToLeft(newIndexL, newIndexR) {
     this.br.refs.$brContainer.addClass("BRpageFlipping");
 
-    const oldLeafEdgeWidthL = this.br.leafEdgeWidth(this.br.twoPage.currentIndexL);
+    const oldLeafEdgeWidthL = this.leafEdgeWidth(this.br.twoPage.currentIndexL);
     const oldLeafEdgeWidthR = this.br.twoPage.edgeWidth - oldLeafEdgeWidthL;
-    const newLeafEdgeWidthL = this.br.leafEdgeWidth(newIndexL);
+    const newLeafEdgeWidthL = this.leafEdgeWidth(newIndexL);
     const newLeafEdgeWidthR = this.br.twoPage.edgeWidth - newLeafEdgeWidthL;
 
     const leafEdgeTmpW = oldLeafEdgeWidthR - newLeafEdgeWidthR;
@@ -778,12 +814,17 @@ export class Mode2Up {
     $(this.leafEdgeR).css({width: `${newLeafEdgeWidthR}px`, left: `${gutter + newWidthR}px` });
     const speed = this.br.flipSpeed;
 
-    if (this.br.enableSearch) this.br.removeSearchHilites();
-
     $(this.br.leafEdgeTmp).animate({left: gutter}, speed, 'easeInSine');
     this.pageContainers[this.br.twoPage.currentIndexR].$container.animate({width: '0px'}, speed, 'easeInSine', () => {
       this.br.$('BRgutter').css({left: `${gutter - this.br.twoPage.bookSpineDivWidth * 0.5}px`});
       $(this.br.leafEdgeTmp).animate({left: `${gutter - newWidthL - leafEdgeTmpW}px`}, speed, 'easeOutSine');
+
+      // Ensure the new left leaf is right-positioned before animating its width.
+      // Otherwise, it animates in the wrong direction.
+      this.pageContainers[newIndexL].$container.css({
+        right: `${$twoPageViewEl.prop('clientWidth') - gutter}px`,
+        left: ''
+      });
       this.pageContainers[newIndexL].$container.animate({width: `${newWidthL}px`}, speed, 'easeOutSine', () => {
         this.pageContainers[newIndexR].$container.css('zIndex', 2);
 
@@ -814,10 +855,6 @@ export class Mode2Up {
 
         this.resizeSpread();
 
-        if (this.br.enableSearch) this.br.updateSearchHilites();
-
-        this.setMouseHandlers();
-
         if (this.br.animationFinishedCallback) {
           this.br.animationFinishedCallback();
           this.br.animationFinishedCallback = null;
@@ -837,40 +874,18 @@ export class Mode2Up {
     });
   }
 
-  setMouseHandlers() {
-    /**
-     * @param {HTMLElement} element
-     * @param {JQuery.MouseDownEvent<HTMLElement, { self: Mode2Up, direction: 'R' | 'L'}>} e
-     */
-    const handler = function(element, e) {
-      if (e.which == 3) {
-        // right click
-        return !e.data.self.br.protected;
-      }
-      e.data.self.br.trigger(EVENTS.stop);
-      e.data.self.br[e.data.direction === 'L' ? 'left' : 'right']();
-
-      // Removed event handler for mouse movement, seems not to be needed
-      /*
-      // Changes per WEBDEV-2737
-      BookReader: zoomed-in 2 page view, clicking page should change the page
-      $(element)
-        .mousemove(function() {
-          e.preventDefault();
-        })
-      */
-    }
+  attachMouseHandlers() {
+    this.br.refs.$brTwoPageView
+      .off('mouseup').on('mouseup', ev => {
+        if (ev.which == 3) {
+          // right click
+          return !this.br.protected;
+        }
 
-    this.setClickHandler(
-      this.pageContainers[this.br.twoPage.currentIndexR].$container[0],
-      { self: this, direction: 'R' },
-      handler
-    );
-    this.setClickHandler(
-      this.pageContainers[this.br.twoPage.currentIndexL].$container[0],
-      { self: this, direction: 'L' },
-      handler
-    );
+        const $page = $(ev.target).closest('.BRpagecontainer');
+        if ($page.data('side') == 'L') this.br.left();
+        else if ($page.data('side') == 'R') this.br.right();
+      });
   }
 
   /**
@@ -1248,7 +1263,7 @@ export class Mode2Up {
       ...this.heightCss,
       left: `${this.br.twoPage.gutter - this.br.twoPage.scaledWL}px`,
       width: `${this.br.twoPage.scaledWL}px`,
-    }
+    };
   }
 
   /** Left side book thickness */
@@ -1269,7 +1284,7 @@ export class Mode2Up {
       ...this.heightCss,
       left: `${this.br.twoPage.gutter}px`,
       width: `${this.br.twoPage.scaledWR}px`,
-    }
+    };
   }
 
   /** Right side book thickness */

package/src/BookReader/ModeSmoothZoom.js

@@ -0,0 +1,179 @@
+// @ts-check
+import Hammer from "hammerjs";
+/** @typedef {import('./utils/HTMLDimensionsCacher.js').HTMLDimensionsCacher} HTMLDimensionsCacher */
+
+/**
+ * @typedef {object} SmoothZoomable
+ * @property {HTMLElement} $container
+ * @property {HTMLElement} $visibleWorld
+ * @property {number} scale
+ * @property {{ x: number, y: number }} scaleCenter
+ * @property {HTMLDimensionsCacher} htmlDimensionsCacher
+ * @property {function(): void} [attachScrollListeners]
+ * @property {function(): void} [detachScrollListeners]
+ */
+
+/** Manages pinch-zoom, ctrl-wheel, and trackpad pinch smooth zooming. */
+export class ModeSmoothZoom {
+  /** @param {SmoothZoomable} mode */
+  constructor(mode) {
+    /** @type {SmoothZoomable} */
+    this.mode = mode;
+
+    /** Non-null when a scale has been enqueued/is being processed by the buffer function */
+    this.pinchMoveFrame = null;
+    /** Promise for the current/enqueued pinch move frame. Resolves when it is complete. */
+    this.pinchMoveFramePromise = Promise.resolve();
+    this.oldScale = 1;
+    /** @type {{ scale: number, center: { x: number, y: number }}} */
+    this.lastEvent = null;
+    this.attached = false;
+
+    /** @type {function(function(): void): any} */
+    this.bufferFn = window.requestAnimationFrame.bind(window);
+
+    // Hammer.js by default set userSelect to None; we don't want that!
+    // TODO: Is there any way to do this not globally on Hammer?
+    delete Hammer.defaults.cssProps.userSelect;
+    this.hammer = new Hammer.Manager(this.mode.$container, {
+      touchAction: "pan-x pan-y",
+    });
+
+    this.hammer.add(new Hammer.Pinch());
+  }
+
+  attach() {
+    if (this.attached) return;
+
+    this.attachCtrlZoom();
+
+    // GestureEvents work only on Safari; they interfere with Hammer,
+    // so block them.
+    this.mode.$container.addEventListener('gesturestart', this._preventEvent);
+    this.mode.$container.addEventListener('gesturechange', this._preventEvent);
+    this.mode.$container.addEventListener('gestureend', this._preventEvent);
+
+    // The pinch listeners
+    this.hammer.on("pinchstart", this._pinchStart);
+    this.hammer.on("pinchmove", this._pinchMove);
+    this.hammer.on("pinchend", this._pinchEnd);
+    this.hammer.on("pinchcancel", this._pinchCancel);
+
+    this.attached = true;
+  }
+
+  detach() {
+    this.detachCtrlZoom();
+
+    // GestureEvents work only on Safari; they interfere with Hammer,
+    // so block them.
+    this.mode.$container.removeEventListener('gesturestart', this._preventEvent);
+    this.mode.$container.removeEventListener('gesturechange', this._preventEvent);
+    this.mode.$container.removeEventListener('gestureend', this._preventEvent);
+
+    // The pinch listeners
+    this.hammer.off("pinchstart", this._pinchStart);
+    this.hammer.off("pinchmove", this._pinchMove);
+    this.hammer.off("pinchend", this._pinchEnd);
+    this.hammer.off("pinchcancel", this._pinchCancel);
+
+    this.attached = false;
+  }
+
+  /** @param {Event} ev */
+  _preventEvent = (ev) => {
+    ev.preventDefault();
+    return false;
+  }
+
+  _pinchStart = () => {
+    // Do this in case the pinchend hasn't fired yet.
+    this.oldScale = 1;
+    this.mode.$visibleWorld.classList.add("BRsmooth-zooming");
+    this.mode.$visibleWorld.style.willChange = "transform";
+    this.detachCtrlZoom();
+    this.mode.detachScrollListeners?.();
+  }
+
+  /** @param {{ scale: number, center: { x: number, y: number }}} e */
+  _pinchMove = async (e) => {
+    this.lastEvent = e;
+    if (!this.pinchMoveFrame) {
+      let pinchMoveFramePromiseRes = null;
+      this.pinchMoveFramePromise = new Promise(
+        (res) => (pinchMoveFramePromiseRes = res)
+      );
+
+      // Buffer these events; only update the scale when request animation fires
+      this.pinchMoveFrame = this.bufferFn(() => {
+        this.updateScaleCenter({
+          clientX: this.lastEvent.center.x,
+          clientY: this.lastEvent.center.y,
+        });
+        this.mode.scale *= this.lastEvent.scale / this.oldScale;
+        this.oldScale = this.lastEvent.scale;
+        this.pinchMoveFrame = null;
+        pinchMoveFramePromiseRes();
+      });
+    }
+  }
+
+  _pinchEnd = async () => {
+    // Want this to happen after the pinchMoveFrame,
+    // if one is in progress; otherwise setting oldScale
+    // messes up the transform.
+    await this.pinchMoveFramePromise;
+    this.mode.scaleCenter = { x: 0.5, y: 0.5 };
+    this.oldScale = 1;
+    this.mode.$visibleWorld.classList.remove("BRsmooth-zooming");
+    this.mode.$visibleWorld.style.willChange = "auto";
+    this.attachCtrlZoom();
+    this.mode.attachScrollListeners?.();
+  }
+
+  _pinchCancel = async () => {
+    // iOS fires pinchcancel ~randomly; it looks like it sometimes
+    // thinks the pinch becomes a pan, at which point it cancels?
+    await this._pinchEnd();
+  }
+
+  /** @private */
+  attachCtrlZoom() {
+    window.addEventListener("wheel", this._handleCtrlWheel, { passive: false });
+  }
+
+  /** @private */
+  detachCtrlZoom() {
+    window.removeEventListener("wheel", this._handleCtrlWheel);
+  }
+
+  /** @param {WheelEvent} ev **/
+  _handleCtrlWheel = (ev) => {
+    if (!ev.ctrlKey) return;
+    ev.preventDefault();
+    const zoomMultiplier =
+        // Zooming on macs was painfully slow; likely due to their better
+        // trackpads. Give them a higher zoom rate.
+        /Mac/i.test(navigator.platform)
+          ? 0.045
+          : // This worked well for me on Windows
+          0.03;
+
+    // Zoom around the cursor
+    this.updateScaleCenter(ev);
+    this.mode.scale *= 1 - Math.sign(ev.deltaY) * zoomMultiplier;
+  }
+
+  /**
+   * @param {object} param0
+   * @param {number} param0.clientX
+   * @param {number} param0.clientY
+   */
+  updateScaleCenter({ clientX, clientY }) {
+    const bc = this.mode.htmlDimensionsCacher.boundingClientRect;
+    this.mode.scaleCenter = {
+      x: (clientX - bc.left) / this.mode.htmlDimensionsCacher.clientWidth,
+      y: (clientY - bc.top) / this.mode.htmlDimensionsCacher.clientHeight,
+    };
+  }
+}

package/src/BookReader/ModeThumb.js

@@ -1,6 +1,7 @@
 // @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 */
@@ -176,7 +177,7 @@ export class ModeThumb {
             // shift viewModeOrder after clicking on thumbsnail leaf
             const nextModeID = this.br.viewModeOrder.shift();
             this.br.viewModeOrder.push(nextModeID);
-            this.br.updateViewModeButton($('.viewmode'), 'twopg', 'Two-page view');
+            this.br._components.navbar.updateViewModeButton($('.viewmode'), 'twopg', 'Two-page view');
 
             this.br.trigger(EVENTS.fragmentChange);
             event.stopPropagation();
@@ -214,8 +215,6 @@ export class ModeThumb {
 
     // highlight current page
     this.br.$('.pagediv' + this.br.currentIndex()).addClass('BRpagedivthumb_highlight');
-
-    this.br.updateToolbarZoom(this.br.reduce);
   }
 
   /**
@@ -234,20 +233,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 */
@@ -279,7 +285,7 @@ export class ModeThumb {
 
     this.br.refs.$brPageViewEl = $("<div class='BRpageview'></div>");
     this.br.refs.$brContainer.append(this.br.refs.$brPageViewEl);
-    this.br.refs.$brContainer.dragscrollable({preventDefault:true});
+    this.dragScrollable = this.dragScrollable || new DragScrollable(this.br.refs.$brContainer[0], {preventDefault: true});
 
     this.br.bindGestures(this.br.refs.$brContainer);
 
@@ -330,7 +336,7 @@ export class ModeThumb {
     } else {
       this.br.animating = true;
       this.br.refs.$brContainer.stop(true)
-        .animate({ scrollTop: leafTop }, 'fast', () => { this.br.animating = false });
+        .animate({ scrollTop: leafTop }, 'fast', () => { this.br.animating = false; });
     }
   }
 }