@internetarchive/bookreader 5.0.0-3 → 5.0.0-30-d

package/src/BookReader/Mode1UpLit.js

@@ -0,0 +1,434 @@
+// @ts-check
+import { customElement, html, LitElement, property, query } from 'lit-element';
+import { styleMap } from 'lit-html/directives/style-map';
+import { ModeSmoothZoom } from './ModeSmoothZoom';
+import { arrChanged, calcScreenDPI, genToArray, sum, throttle } from './utils';
+import { HTMLDimensionsCacher } from "./utils/HTMLDimensionsCacher";
+/** @typedef {import('./BookModel').BookModel} BookModel */
+/** @typedef {import('./BookModel').PageIndex} PageIndex */
+/** @typedef {import('./BookModel').PageModel} PageModel */
+/** @typedef {import('./ModeSmoothZoom').SmoothZoomable} SmoothZoomable */
+/** @typedef {import('./PageContainer').PageContainer} PageContainer */
+/** @typedef {import('../BookReader').default} BookReader */
+
+// 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 **************/
+  /****************************************/
+
+  /** @type {BookReader} */
+  br;
+
+  /************** BOOK-RELATED PROPERTIES **************/
+
+  /** @type {BookModel} */
+  @property({ type: Object })
+  book;
+
+  /** @type {PageModel[]} */
+  @property({ type: Array })
+  pages = [];
+
+  /** @type {Record<PageIndex, number>} in world coordinates (inches) */
+  @property({ type: Object })
+  pageTops = {};
+
+  /************** SCALE-RELATED PROPERTIES **************/
+
+  /** @private */
+  screenDPI = calcScreenDPI();
+
+  /**
+   * How much smaller the rendered pages are than the real-world item
+   *
+   * Mode1Up doesn't use the br.reduce because it is DPI aware. The reduction factor
+   * of a given leaf can change (since leaves can have different DPIs), but the real-world
+   * reduction is constant throughout.
+   */
+  realWorldReduce = 1;
+
+  @property({ type: Number })
+  scale = 1;
+  /** Position (in unit-less, [0, 1] coordinates) in client to scale around */
+  @property({ type: Object })
+  scaleCenter = { x: 0.5, y: 0.5 };
+
+  /************** VIRTUAL-SCROLLING PROPERTIES **************/
+
+  /** in world coordinates (inches) */
+  @property({ type: Object })
+  visibleRegion = {
+    top: 0,
+    left: 0,
+    width: 100,
+    height: 100,
+  };
+
+  /** @type {PageModel[]} */
+  @property({ type: Array, hasChanged: arrChanged })
+  visiblePages = [];
+
+  /** @type {PageModel[]} */
+  @property({ type: Array })
+  renderedPages = [];
+
+  /** @type {Record<PageIndex, PageContainer>} position in inches */
+  pageContainerCache = {};
+
+  /************** WORLD-RELATED PROPERTIES **************/
+  /**
+   * The world is an imaginary giant document that contains all the pages.
+   * The "world"'s size is used to determine how long the scroll bar should
+   * be, for example.
+   */
+
+  /** @type {HTMLElement} */
+  @query('.br-mode-1up__world')
+  $world;
+
+  worldDimensions = { width: 100, height: 100 };
+
+  get worldStyle() {
+    const wToR = this.worldUnitsToRenderedPixels;
+    return {
+      width: wToR(this.worldDimensions.width) + "px",
+      height: wToR(this.worldDimensions.height) + "px",
+    };
+  }
+
+  /** @type {HTMLElement} */
+  get $container() { return this; }
+
+  /** @type {HTMLElement} */
+  @query('.br-mode-1up__visible-world')
+  $visibleWorld;
+
+  /************** DOM-RELATED PROPERTIES **************/
+
+  /** @type {HTMLDimensionsCacher} Cache things like clientWidth to reduce repaints */
+  htmlDimensionsCacher = new HTMLDimensionsCacher(this);
+
+  smoothZoomer = new ModeSmoothZoom(this);
+
+  /************** CONSTANT PROPERTIES **************/
+
+  /** Vertical space between/around the pages in inches */
+  SPACING_IN = 0.2;
+
+  /** How much to zoom when zoom button pressed */
+  ZOOM_FACTOR = 1.1;
+
+  /****************************************/
+  /************** PUBLIC API **************/
+  /****************************************/
+
+  /************** MAIN PUBLIC METHODS **************/
+
+  /**
+   * @param {PageIndex} index
+   */
+  jumpToIndex(index, { smooth = false } = {}) {
+    if (smooth) {
+      this.style.scrollBehavior = 'smooth';
+    }
+    this.scrollTop = this.worldUnitsToVisiblePixels(this.pageTops[index] - this.SPACING_IN / 2);
+    // TODO: Also h center?
+    if (smooth) {
+      setTimeout(() => this.style.scrollBehavior = '', 100);
+    }
+  }
+
+  zoomIn() {
+    this.scale *= this.ZOOM_FACTOR;
+  }
+
+  zoomOut() {
+    this.scale *= 1 / this.ZOOM_FACTOR;
+  }
+
+  /********************************************/
+  /************** INTERNAL STUFF **************/
+  /********************************************/
+
+  /************** LIFE CYCLE **************/
+
+  /**
+   * @param {BookModel} book
+   * @param {BookReader} br
+   */
+  constructor(book, br) {
+    super();
+    this.book = book;
+
+    /** @type {BookReader} */
+    this.br = br;
+  }
+
+  /** @override */
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this.htmlDimensionsCacher.updateClientSizes();
+    this.smoothZoomer.attach();
+  }
+
+  /**
+   * @param {PageIndex} startIndex
+   */
+  initFirstRender(startIndex) {
+    const page = this.book.getPage(startIndex);
+    this.scale = this.computeDefaultScale(page);
+  }
+
+  /** @override */
+  updated(changedProps) {
+    // this.X is the new value
+    // changedProps.get('X') is the old value
+    if (changedProps.has('book')) {
+      this.pages = genToArray(this.book.pagesIterator({ combineConsecutiveUnviewables: true }));
+    }
+    if (changedProps.has('pages')) {
+      this.worldDimensions = this.computeWorldDimensions();
+      this.pageTops = this.computePageTops(this.pages, this.SPACING_IN);
+    }
+    if (changedProps.has('visibleRegion')) {
+      this.visiblePages = this.computeVisiblePages();
+    }
+    if (changedProps.has('visiblePages')) {
+      this.throttledUpdateRenderedPages();
+      this.br.displayedIndices = this.visiblePages.map(p => p.index);
+      this.br.updateFirstIndex(this.br.displayedIndices[0]);
+      this.br.updateNavIndexThrottled();
+    }
+    if (changedProps.has('scale')) {
+      const oldVal = changedProps.get('scale');
+      // Need to set this scale to actually scale the pages
+      this.$visibleWorld.style.transform = `scale(${this.scale})`;
+      this.updateViewportOnZoom(this.scale, oldVal);
+      // Need to set this scale to update the world size, so the scrollbar gets the correct size
+      this.$world.style.transform = `scale(${this.scale})`;
+    }
+  }
+
+  /** @override */
+  connectedCallback() {
+    super.connectedCallback();
+    this.htmlDimensionsCacher.attachResizeListener();
+    this.attachScrollListeners();
+    this.smoothZoomer.attach();
+  }
+
+  /** @override */
+  disconnectedCallback() {
+    this.htmlDimensionsCacher.detachResizeListener();
+    this.detachScrollListeners();
+    this.smoothZoomer.detach();
+    super.disconnectedCallback();
+  }
+
+  /************** LIT CONFIGS **************/
+
+  /** @override */
+  createRenderRoot() {
+    // Disable shadow DOM; that would require a huge rejiggering of CSS
+    return this;
+  }
+
+  /************** COORDINATE SPACE CONVERTERS **************/
+  /**
+   * There are a few different "coordinate spaces" at play in BR:
+   * (1) World units: i.e. inches. Unless otherwise stated, all computations
+   *     are done in world units.
+   * (2) Rendered Pixels: i.e. img.width = '300'. Note this does _not_ take
+   *     into account zoom scaling.
+   * (3) Visible Pixels: Just rendered pixels, but taking into account scaling.
+   */
+
+  worldUnitsToRenderedPixels = (/** @type {number} */inches) => inches * this.screenDPI / this.realWorldReduce;
+  renderedPixelsToWorldUnits = (/** @type {number} */px) => px * this.realWorldReduce / this.screenDPI;
+
+  renderedPixelsToVisiblePixels = (/** @type {number} */px) => px * this.scale;
+  visiblePixelsToRenderedPixels = (/** @type {number} */px) => px / this.scale;
+
+  worldUnitsToVisiblePixels = (/** @type {number} */px) => this.renderedPixelsToVisiblePixels(this.worldUnitsToRenderedPixels(px));
+  visiblePixelsToWorldUnits = (/** @type {number} */px) => this.renderedPixelsToWorldUnits(this.visiblePixelsToRenderedPixels(px));
+
+  /************** RENDERING **************/
+
+  /** @override */
+  render() {
+    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))}
+      </div>`;
+  }
+
+  /** @param {PageModel} page */
+  createPageContainer = (page) => {
+    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)
+      )
+    );
+  }
+
+  /** @param {PageModel} page */
+  renderPage = (page) => {
+    const wToR = this.worldUnitsToRenderedPixels;
+    const wToV = this.worldUnitsToVisiblePixels;
+    const containerWidth = this.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 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];
+
+    pageContainerEl.style.transform = transform;
+    return pageContainerEl;
+  }
+
+  /************** VIRTUAL SCROLLING LOGIC **************/
+
+  updateVisibleRegion = () => {
+    const { scrollTop, scrollLeft } = this;
+    // clientHeight excludes scrollbars, which is good.
+    const clientWidth = this.htmlDimensionsCacher.clientWidth;
+    const clientHeight = this.htmlDimensionsCacher.clientHeight;
+
+    // Note: scrollTop, and clientWidth all are in visible space;
+    // i.e. they are affects by the CSS transforms.
+
+    const vToW = this.visiblePixelsToWorldUnits;
+    this.visibleRegion = {
+      top: vToW(scrollTop),
+      height: vToW(clientHeight),
+      // TODO: These are very likely wrong
+      left: vToW(scrollLeft),
+      width: vToW(clientWidth),
+    };
+  }
+
+  /**
+   * @returns {PageModel[]}
+   */
+  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);
+  }
+
+  throttledUpdateRenderedPages = throttle(() => {
+    this.renderedPages = this.computeRenderedPages();
+    this.requestUpdate();
+  }, 100, null)
+
+  /**
+   * @param {PageModel[]} pages
+   * @param {number} spacing
+   */
+  computePageTops(pages, spacing) {
+    /** @type {{ [pageIndex: string]: number }} */
+    const result = {};
+    let top = spacing;
+    for (const page of pages) {
+      result[page.index] = top;
+      top += page.heightInches + spacing;
+    }
+    return result;
+  }
+
+  /**
+   * @param {PageModel} page
+   * @returns {number}
+   */
+  computeDefaultScale(page) {
+    // Default to real size if it fits, otherwise default to full width
+    const containerWidthIn = this.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.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,
+      height:
+          sum(this.pages.map(p => p.heightInches)) +
+          (this.pages.length + 1) * this.SPACING_IN,
+    };
+  }
+
+  computeVisiblePages() {
+    return this.pages.filter(page => {
+      const PT = this.pageTops[page.index];
+      const PB = PT + page.heightInches;
+
+      const VT = this.visibleRegion.top;
+      const VB = VT + this.visibleRegion.height;
+      return PT <= VB && PB >= VT;
+    });
+  }
+
+  /************** ZOOMING LOGIC **************/
+
+  /**
+   * @param {number} newScale
+   * @param {number} oldScale
+   */
+  updateViewportOnZoom(newScale, oldScale) {
+    const container = this;
+    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;
+    this.updateVisibleRegion();
+  }
+
+  /************** INPUT HANDLERS **************/
+
+  attachScrollListeners = () => {
+    this.addEventListener("scroll", this.updateVisibleRegion, { passive: true });
+  }
+
+  detachScrollListeners = () => {
+    this.removeEventListener("scroll", this.updateVisibleRegion);
+  }
+}

package/src/BookReader/Mode2Up.js

@@ -1,16 +1,20 @@
 // @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';
 
 /** @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 +31,25 @@ 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 };
+  }
+
+  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 +65,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,7 +85,6 @@ 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');
@@ -176,13 +186,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);
@@ -219,13 +238,50 @@ export class Mode2Up {
 
     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();
 
-    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();
+  }
+
+  /**
+   * @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() {
@@ -616,8 +672,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 +717,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 +740,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];
   }
 
@@ -778,8 +828,6 @@ 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`});
@@ -814,10 +862,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 +881,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 +1270,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 +1291,7 @@ export class Mode2Up {
       ...this.heightCss,
       left: `${this.br.twoPage.gutter}px`,
       width: `${this.br.twoPage.scaledWR}px`,
-    }
+    };
   }
 
   /** Right side book thickness */