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

package/src/BookReader.js

@@ -27,7 +27,6 @@ import 'jquery-ui/ui/widget.js';
 import 'jquery-ui/ui/widgets/mouse.js';
 import 'jquery-ui-touch-punch';
 
-import './dragscrollable-br.js';
 import PACKAGE_JSON from '../package.json';
 import * as utils from './BookReader/utils.js';
 import { exposeOverrideable } from './BookReader/utils/classes.js';
@@ -179,7 +178,7 @@ BookReader.prototype.setup = function(options) {
      */
   this.firstIndex = null;
   this.lastDisplayableIndex2up = null;
-  this.isFullscreenActive = false;
+  this.isFullscreenActive = options.startFullscreen || false;
   this.lastScroll = null;
 
   this.showLogo = options.showLogo;
@@ -265,8 +264,52 @@ BookReader.prototype.setup = function(options) {
     useSrcSet: this.options.useSrcSet,
     reduceSet: this.reduceSet,
   });
+
+  /**
+   * Flag if BookReader has "focus" for keyboard shortcuts
+   * Initially true, set to false when:
+   * - BookReader scrolled out of view
+   * Set to true when:
+   * - BookReader scrolled into view
+   */
+  this.hasKeyFocus = true;
+};
+
+/**
+ * Get all the HTML Elements that are being/can be rendered.
+ * Includes cached elements which might be rendered again.
+ */
+BookReader.prototype.getActivePageContainerElements = function() {
+  let containerEls = Object.values(this._modes.mode2Up.pageContainers).map(pc => pc.$container[0])
+    .concat(Object.values(this._modes.mode1Up.mode1UpLit.pageContainerCache).map(pc => pc.$container[0]));
+  if (this.mode == this.constModeThumb) {
+    containerEls = containerEls.concat(this.$('.BRpagecontainer').toArray());
+  }
+  return containerEls;
+};
+
+/**
+ * Get the HTML Elements for the rendered page. Note there can be more than one, since
+ * (at least as of writing) different modes can maintain different caches.
+ * @param {PageIndex} pageIndex
+ */
+BookReader.prototype.getActivePageContainerElementsForIndex = function(pageIndex) {
+  return [
+    this._modes.mode2Up.pageContainers[pageIndex]?.$container?.[0],
+    this._modes.mode1Up.mode1UpLit.pageContainerCache[pageIndex]?.$container?.[0],
+    ...(this.mode == this.constModeThumb ? this.$(`.pagediv${pageIndex}`).toArray() : [])
+  ].filter(x => x);
 };
 
+Object.defineProperty(BookReader.prototype, 'activeMode', {
+  /** @return {Mode1Up | Mode2Up | ModeThumb} */
+  get() { return {
+    1: this._modes.mode1Up,
+    2: this._modes.mode2Up,
+    3: this._modes.modeThumb,
+  }[this.mode]; },
+});
+
 /** @deprecated unused outside Mode2Up */
 Object.defineProperty(BookReader.prototype, 'leafEdgeL', {
   get() { return this._modes.mode2Up.leafEdgeL; },
@@ -298,7 +341,7 @@ BookReader.prototype.extendParams = function(params, newParams) {
     delete modifiedNewParams.page;
   }
   $.extend(params, modifiedNewParams);
-}
+};
 
 /**
  * Parses params from from various initialization contexts (url, cookie, options)
@@ -377,7 +420,7 @@ BookReader.prototype.initParams = function() {
   // Check for Search plugin
   if (this.options.enableSearch) {
     // Go to first result only if no default or URL page
-    this.goToFirstResult = !params.pageFound
+    this.options.goToFirstResult = !params.pageFound;
 
     // If initialSearchTerm not set
     if (!this.options.initialSearchTerm) {
@@ -389,7 +432,7 @@ BookReader.prototype.initParams = function() {
       } else {
         // If we have a query string: q=[term]
         const searchParams = new URLSearchParams(this.readQueryString());
-        const searchTerm = searchParams.get('q')
+        const searchTerm = searchParams.get('q');
         if (searchTerm) {
           this.options.initialSearchTerm = utils.decodeURIComponentPlus(searchTerm);
         }
@@ -401,21 +444,21 @@ BookReader.prototype.initParams = function() {
   this.suppressFragmentChange = !params.fragmentChange;
 
   return params;
-}
+};
 
 /**
  * Allow mocking of window.location.search
  */
 BookReader.prototype.getLocationSearch = function () {
   return window.location.search;
-}
+};
 
 /**
  * Allow mocking of window.location.hash
  */
 BookReader.prototype.getLocationHash = function () {
   return window.location.hash;
-}
+};
 
 /**
  * Return URL or fragment querystring
@@ -428,7 +471,7 @@ BookReader.prototype.readQueryString = function() {
   const hash = this.getLocationHash();
   const found = hash.search(/\?\w+=/);
   return found > -1 ? hash.slice(found) : '';
-}
+};
 
 /**
  * Determines the initial mode for starting if a mode is not already
@@ -443,7 +486,6 @@ BookReader.prototype.getInitialMode = function(params) {
   if ('undefined' != typeof(params.mode)) {
     nextMode = params.mode;
   } else if (this.ui == 'full'
-          && this.enableMobileNav
           && this.isFullscreenActive
           && windowWidth <= this.onePageMinBreakpoint
   ) {
@@ -497,15 +539,12 @@ BookReader.prototype.init = function() {
   // Explicitly ensure this.mode exists for initNavbar() below
   this.mode = params.mode;
 
-  if (this.ui == "embed" && this.options.showNavbar) {
-    this.initEmbedNavbar();
-  } else {
-    if (this.options.showToolbar) {
-      this.initToolbar(this.mode, this.ui); // Build inside of toolbar div
-    }
-    if (this.options.showNavbar) {
-      this.initNavbar();
-    }
+  // Display Navigation
+  if (this.options.showToolbar) {
+    this.initToolbar(this.mode, this.ui); // Build inside of toolbar div
+  }
+  if (this.options.showNavbar) { // default navigation
+    this.initNavbar();
   }
 
   // Switch navbar controls on mobile/desktop
@@ -521,17 +560,17 @@ BookReader.prototype.init = function() {
   this.setupKeyListeners();
 
   this.lastScroll = (new Date().getTime());
-  this.refs.$brContainer.bind('scroll', this, function(e) {
+  this.refs.$brContainer.on('scroll', this, function(e) {
     // Note, this scroll event fires for both user, and js generated calls
     // It is functioning in some cases as the primary triggerer for rendering
     e.data.lastScroll = (new Date().getTime());
-    if (e.data.constMode2up != e.data.mode) {
+    if (e.data.constModeThumb == e.data.mode) {
       e.data.drawLeafsThrottled();
     }
   });
 
   if (this.options.autoResize) {
-    $(window).bind('resize', this, function(e) {
+    $(window).on('resize', this, function(e) {
       e.data.resize();
     });
     $(window).on("orientationchange", this, function(e) {
@@ -548,15 +587,17 @@ BookReader.prototype.init = function() {
     this.suppressFragmentChange = false;
   }
 
+  if (this.options.startFullscreen) {
+    this.enterFullscreen(true);
+  }
+
   this.init.initComplete = true;
   this.trigger(BookReader.eventNames.PostInit);
 
   // Must be called after this.init.initComplete set to true to allow
   // BookReader.prototype.resize to run.
-  if (this.options.startFullscreen) {
-    this.toggleFullscreen();
-  }
-}
+
+};
 
 /**
  * @param {EVENTS} name
@@ -564,7 +605,6 @@ BookReader.prototype.init = function() {
  */
 BookReader.prototype.trigger = function(name, props = this) {
   const eventName = 'BookReader:' + name;
-  $(document).trigger(eventName, props);
 
   utils.polyfillCustomEvent(window);
   window.dispatchEvent(new CustomEvent(eventName, {
@@ -572,14 +612,15 @@ BookReader.prototype.trigger = function(name, props = this) {
     composed: true,
     detail: { props },
   }));
+  $(document).trigger(eventName, props);
 };
 
 BookReader.prototype.bind = function(name, callback) {
-  $(document).bind('BookReader:' + name, callback);
+  $(document).on('BookReader:' + name, callback);
 };
 
 BookReader.prototype.unbind = function(name, callback) {
-  $(document).unbind('BookReader:' + name, callback);
+  $(document).off('BookReader:' + name, callback);
 };
 
 /**
@@ -597,11 +638,9 @@ BookReader.prototype.resize = function() {
     if (this.onePage.autofit != 'none') {
       this.resizePageView1up();
       this.centerPageView();
-      if (this.enableSearch) this.updateSearchHilites(); //deletes highlights but does not call remove()
     } else {
       this.centerPageView();
       this.displayedIndices = [];
-      if (this.enableSearch) this.updateSearchHilites(); //deletes highlights but does not call remove()
       this.drawLeafsThrottled();
     }
   } else if (this.constModeThumb == this.mode) {
@@ -633,89 +672,124 @@ BookReader.prototype.resize = function() {
 };
 
 /**
- * Binds keyboard event listeners
+ * Binds keyboard and keyboard focus event listeners
  */
-BookReader.prototype.setupKeyListeners = function() {
-  var self = this;
+BookReader.prototype.setupKeyListeners = function () {
 
-  var KEY_PGUP = 33;
-  var KEY_PGDOWN = 34;
-  var KEY_END = 35;
-  var KEY_HOME = 36;
-
-  var KEY_LEFT = 37;
-  var KEY_UP = 38;
-  var KEY_RIGHT = 39;
-  var KEY_DOWN = 40;
-  // The minus(-) and equal(=) keys have different mappings for different browsers
-  var KEY_MINUS = 189; // Chrome
-  var KEY_MINUS_F = 173; // Firefox
-  var KEY_NUMPAD_SUBTRACT = 109;
-  var KEY_EQUAL = 187; // Chrome
-  var KEY_EQUAL_F = 61; // Firefox
-  var KEY_NUMPAD_ADD = 107;
-
-  // We use document here instead of window to avoid a bug in jQuery on IE7
-  $(document).keydown(function(e) {
-
-    // Keyboard navigation
-    if (!self.keyboardNavigationIsDisabled(e)) {
-      switch (e.keyCode) {
-      case KEY_PGUP:
-      case KEY_UP:
-        // In 1up mode page scrolling is handled by browser
-        if (self.constMode2up == self.mode) {
-          e.preventDefault();
-          self.prev();
-        }
-        break;
-      case KEY_DOWN:
-      case KEY_PGDOWN:
-        if (self.constMode2up == self.mode) {
-          e.preventDefault();
-          self.next();
+  // Keyboard focus by BookReader in viewport
+  //
+  // Intersection observer and callback sets BookReader keyboard
+  // "focus" flag off when the BookReader is not in the viewport.
+  if (window.IntersectionObserver) {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.intersectionRatio === 0) {
+          this.hasKeyFocus = false;
+        } else {
+          this.hasKeyFocus = true;
         }
-        break;
-      case KEY_END:
+      });
+    }, {
+      root: null,
+      rootMargin: '0px',
+      threshold: [0, 0.05, 1],
+    });
+    observer.observe(this.refs.$br[0]);
+  }
+
+  // Keyboard listeners
+  document.addEventListener('keydown', (e) => {
+
+    // Ignore if BookReader "focus" flag not set
+    if (!this.hasKeyFocus) {
+      return;
+    }
+
+    // Ignore if modifiers are active.
+    if (e.getModifierState('Control') ||
+      e.getModifierState('Alt') ||
+      e.getModifierState('Meta') ||
+      e.getModifierState('Win') /* hack for IE */) {
+      return;
+    }
+
+    // Ignore in input elements
+    if (utils.isInputActive()) {
+      return;
+    }
+
+    // KeyboardEvent code values:
+    //   https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values
+    switch (e.key) {
+
+    // Page navigation
+    case "Home":
+      e.preventDefault();
+      this.first();
+      break;
+    case "End":
+      e.preventDefault();
+      this.last();
+      break;
+    case "ArrowDown":
+    case "PageDown":
+    case "Down": // hack for IE and old Gecko
+      // In 1up and thumb mode page scrolling handled by browser
+      if (this.constMode2up === this.mode) {
         e.preventDefault();
-        self.last();
-        break;
-      case KEY_HOME:
+        this.next();
+      }
+      break;
+    case "ArrowUp":
+    case "PageUp":
+    case "Up": // hack for IE and old Gecko
+      // In 1up and thumb mode page scrolling handled by browser
+      if (this.constMode2up === this.mode) {
         e.preventDefault();
-        self.first();
-        break;
-      case KEY_LEFT:
-        if (self.constModeThumb != self.mode) {
-          e.preventDefault();
-          self.left();
-        }
-        break;
-      case KEY_RIGHT:
-        if (self.constModeThumb != self.mode) {
-          e.preventDefault();
-          self.right();
-        }
-        break;
-      case KEY_MINUS:
-      case KEY_MINUS_F:
-      case KEY_NUMPAD_SUBTRACT:
+        this.prev();
+      }
+      break;
+    case "ArrowLeft":
+    case "Left": // hack for IE and old Gecko
+      // No y-scrolling in thumb mode
+      if (this.constModeThumb != this.mode) {
         e.preventDefault();
-        self.zoom(-1);
-        break;
-      case KEY_EQUAL:
-      case KEY_EQUAL_F:
-      case KEY_NUMPAD_ADD:
+        this.left();
+      }
+      break;
+    case "ArrowRight":
+    case "Right": // hack for IE and old Gecko
+      // No y-scrolling in thumb mode
+      if (this.constModeThumb != this.mode) {
         e.preventDefault();
-        self.zoom(+1);
-        break;
+        this.right();
       }
+      break;
+    // Zoom
+    case '-':
+    case 'Subtract':
+      e.preventDefault();
+      this.zoom(-1);
+      break;
+    case '+':
+    case '=':
+    case 'Add':
+      e.preventDefault();
+      this.zoom(1);
+      break;
+    // Fullscreen
+    case 'F':
+    case 'f':
+      e.preventDefault();
+      this.toggleFullscreen();
+      break;
     }
   });
 };
 
 BookReader.prototype.drawLeafs = function() {
   if (this.constMode1up == this.mode) {
-    this.drawLeafsOnePage();
+    // Not needed for Mode1Up anymore
   } else if (this.constModeThumb == this.mode) {
     this.drawLeafsThumbnail();
   } else {
@@ -794,29 +868,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;
 };
@@ -842,7 +898,7 @@ BookReader.prototype.resizeBRcontainer = function(animate) {
       bottom: this.getFooterHeight()
     });
   }
-}
+};
 
 BookReader.prototype.centerPageView = function() {
   var scrollWidth  = this.refs.$brContainer.prop('scrollWidth');
@@ -954,7 +1010,7 @@ BookReader.prototype._isIndexDisplayed = function(index) {
   return this.constMode1up == this.mode ? this.displayedIndices.slice(1, -1).includes(index) :
     this.displayedIndices ? this.displayedIndices.includes(index) :
       this.currentIndex() == index;
-}
+};
 
 /**
  * Changes the current page
@@ -996,7 +1052,7 @@ BookReader.prototype.getPrevReadMode = function(mode) {
     // Initial thumb, return 1up
     return BookReader.constMode1up;
   }
-}
+};
 
 /**
  * Switches the mode (eg 1up 2up thumb)
@@ -1024,10 +1080,13 @@ BookReader.prototype.switchMode = function(
   }
 
   this.trigger(BookReader.eventNames.stop);
-  if (this.enableSearch) this.removeSearchHilites();
 
   this.prevReadMode = this.getPrevReadMode(this.mode);
 
+  if (this.mode != mode) {
+    this.activeMode.unprepare?.();
+  }
+
   this.mode = mode;
 
   // reinstate scale if moving from thumbnail view
@@ -1040,8 +1099,6 @@ BookReader.prototype.switchMode = function(
 
   // XXX maybe better to preserve zoom in each mode
   if (this.constMode1up == mode) {
-    this.onePageCalculateReductionFactors();
-    this.reduce = this.quantizeReduce(this.reduce, this.onePage.reductionFactors);
     this.prepareOnePageView();
   } else if (this.constModeThumb == mode) {
     this.reduce = this.quantizeReduce(this.reduce, this.reductionFactors);
@@ -1095,11 +1152,11 @@ BookReader.prototype.isFullscreen = function() {
  * Toggles fullscreen
  * @param { boolean } bindKeyboardControls
  */
-BookReader.prototype.toggleFullscreen = function(bindKeyboardControls = true) {
+BookReader.prototype.toggleFullscreen = async function(bindKeyboardControls = true) {
   if (this.isFullscreen()) {
-    this.exitFullScreen();
+    await this.exitFullScreen();
   } else {
-    this.enterFullscreen(bindKeyboardControls);
+    await this.enterFullscreen(bindKeyboardControls);
   }
 };
 
@@ -1111,7 +1168,7 @@ BookReader.prototype.toggleFullscreen = function(bindKeyboardControls = true) {
  * - fires custom event
  * @param { boolean } bindKeyboardControls
  */
-BookReader.prototype.enterFullscreen = function(bindKeyboardControls = true) {
+BookReader.prototype.enterFullscreen = async function(bindKeyboardControls = true) {
   const currentIndex = this.currentIndex();
   this.refs.$brContainer.css('opacity', 0);
 
@@ -1119,7 +1176,7 @@ BookReader.prototype.enterFullscreen = function(bindKeyboardControls = true) {
     this._fullscreenCloseHandler = (e) => {
       if (e.keyCode === 27) this.toggleFullscreen();
     };
-    $(document).keyup(this._fullscreenCloseHandler);
+    $(document).on("keyup", this._fullscreenCloseHandler);
   }
 
   const windowWidth = $(window).width();
@@ -1128,14 +1185,29 @@ BookReader.prototype.enterFullscreen = function(bindKeyboardControls = true) {
   }
 
   this.isFullscreenActive = true;
-
-  this.refs.$brContainer.animate({opacity: 1}, 'fast', 'linear',() => {
-    this.resize();
-    this.jumpToIndex(currentIndex);
-  });
+  // prioritize class updates so CSS can propagate
+  this.updateBrClasses();
+  this.animating = true;
+  await new Promise(res => this.refs.$brContainer.animate({opacity: 1}, 'fast', 'linear', res));
+  if (this.activeMode instanceof Mode1Up) {
+    this.activeMode.mode1UpLit.scale = this.activeMode.mode1UpLit.computeDefaultScale(this._models.book.getPage(currentIndex));
+    // Need the new scale to be applied before calling jumpToIndex
+    await this.activeMode.mode1UpLit.requestUpdate();
+  }
+  this.jumpToIndex(currentIndex);
+  this.animating = false;
 
   this.textSelectionPlugin?.stopPageFlip(this.refs.$brContainer);
+  // Add "?view=theater"
+  this.trigger(BookReader.eventNames.fragmentChange);
+  // trigger event here, so that animations,
+  // class updates happen before book-nav relays to web components
   this.trigger(BookReader.eventNames.fullscreenToggled);
+
+  setTimeout(() => {
+    // resize book after all events & css updates
+    this.resize();
+  }, 0);
 };
 
 /**
@@ -1145,10 +1217,10 @@ BookReader.prototype.enterFullscreen = function(bindKeyboardControls = true) {
  * - fires custom event
  * @param { boolean } bindKeyboardControls
  */
-BookReader.prototype.exitFullScreen = function() {
+BookReader.prototype.exitFullScreen = async function () {
   this.refs.$brContainer.css('opacity', 0);
 
-  $(document).unbind('keyup', this._fullscreenCloseHandler);
+  $(document).off('keyup', this._fullscreenCloseHandler);
 
   var windowWidth = $(window).width();
 
@@ -1158,13 +1230,25 @@ BookReader.prototype.exitFullScreen = function() {
   }
 
   this.isFullscreenActive = false;
+  // Trigger fullscreen event immediately
+  // so that book-nav can relay to web components
+  this.trigger(BookReader.eventNames.fullscreenToggled);
+
   this.updateBrClasses();
+  this.animating = true;
+  await new Promise((res => this.refs.$brContainer.animate({opacity: 1}, 'fast', 'linear', res)));
+  this.resize();
+
+  if (this.activeMode instanceof Mode1Up) {
+    this.activeMode.mode1UpLit.scale = this.activeMode.mode1UpLit.computeDefaultScale(this._models.book.getPage(this.currentIndex()));
+    await this.activeMode.mode1UpLit.requestUpdate();
+  }
+
+  this.animating = false;
 
-  this.refs.$brContainer.animate({opacity: 1}, 'fast', 'linear', () => {
-    this.resize();
-  });
   this.textSelectionPlugin?.stopPageFlip(this.refs.$brContainer);
-  this.trigger(BookReader.eventNames.fullscreenToggled);
+  // Remove "?view=theater"
+  this.trigger(BookReader.eventNames.fragmentChange);
 };
 
 /**
@@ -1195,11 +1279,9 @@ BookReader.prototype.updateFirstIndex = function(
   index,
   { suppressFragmentChange = false } = {}
 ) {
-  // Called multiple times when defaults contains "mode/1up",
-  // including after init(). Skip fragment change if no index change
-  if (this.firstIndex === index) {
-    suppressFragmentChange = true;
-  }
+  // If there's no change, do nothing
+  if (this.firstIndex === index) return;
+
   this.firstIndex = index;
   if (!(this.suppressFragmentChange || suppressFragmentChange)) {
     this.trigger(BookReader.eventNames.fragmentChange);
@@ -1364,35 +1446,14 @@ BookReader.prototype.pruneUnusedImgs = function() {
 BookReader.prototype.prepareOnePageView = Mode1Up.prototype.prepare;
 exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'prepare', 'prepareOnePageView');
 /** @deprecated not used outside BookReader */
-BookReader.prototype.drawLeafsOnePage = Mode1Up.prototype.drawLeafs;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'drawLeafs', 'drawLeafsOnePage');
-/** @deprecated not used outside BookReader */
 BookReader.prototype.zoom1up = Mode1Up.prototype.zoom;
 exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'zoom', 'zoom1up');
-/** @deprecated not used outside Mode1Up */
-BookReader.prototype.onePageGetAutofitWidth = Mode1Up.prototype.getAutofitWidth;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'getAutofitWidth', 'onePageGetAutofitWidth');
-/** @deprecated not used outside Mode1Up, BookReader */
-BookReader.prototype.onePageGetAutofitHeight = Mode1Up.prototype.getAutofitHeight;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'getAutofitHeight', 'onePageGetAutofitHeight');
-/** @deprecated not used outside Mode1Up, BookReader */
-BookReader.prototype.onePageGetPageTop = Mode1Up.prototype.getPageTop;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'getPageTop', 'onePageGetPageTop');
-/** @deprecated not used outside Mode1Up, BookReader */
-BookReader.prototype.onePageCalculateReductionFactors = Mode1Up.prototype.calculateReductionFactors;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'calculateReductionFactors', 'onePageCalculateReductionFactors');
 /** @deprecated not used outside Mode1Up, BookReader */
 BookReader.prototype.resizePageView1up = Mode1Up.prototype.resizePageView;
 exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'resizePageView', 'resizePageView1up');
 /** @deprecated not used outside Mode1Up */
 BookReader.prototype.onePageCalculateViewDimensions = Mode1Up.prototype.calculateViewDimensions;
 exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'calculateViewDimensions', 'onePageCalculateViewDimensions');
-/** @deprecated not used outside Mode1Up */
-BookReader.prototype.centerX1up = Mode1Up.prototype.centerX;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'centerX', 'centerX1up');
-/** @deprecated not used outside Mode1Up */
-BookReader.prototype.centerY1up = Mode1Up.prototype.centerY;
-exposeOverrideableMethod(Mode1Up, '_modes.mode1Up', 'centerY', 'centerY1up');
 
 /************************/
 /** Mode2Up extensions **/
@@ -1409,9 +1470,6 @@ exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'flipFwdToIndex', 'flipFwdTo
 BookReader.prototype.setHilightCss2UP = Mode2Up.prototype.setHilightCss;
 exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'setHilightCss', 'setHilightCss2UP');
 /** @deprecated not used outside Mode2Up */
-BookReader.prototype.setClickHandler2UP = Mode2Up.prototype.setClickHandler;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'setClickHandler', 'setClickHandler2UP');
-/** @deprecated not used outside Mode2Up */
 BookReader.prototype.drawLeafsTwoPage = Mode2Up.prototype.drawLeafs;
 exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'drawLeafs', 'drawLeafsTwoPage');
 /** @deprecated not used outside BookReader */
@@ -1444,9 +1502,6 @@ exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'flipLeftToRight', 'flipLeft
 /** @deprecated unused outside BookReader, Mode2Up */
 BookReader.prototype.flipRightToLeft = Mode2Up.prototype.flipRightToLeft;
 exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'flipRightToLeft', 'flipRightToLeft');
-/** @deprecated unused outside Mode2Up */
-BookReader.prototype.setMouseHandlers2UP = Mode2Up.prototype.setMouseHandlers;
-exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'setMouseHandlers', 'setMouseHandlers2UP');
 /** @deprecated unused outside BookReader, Mode2Up */
 BookReader.prototype.prepareFlipLeftToRight = Mode2Up.prototype.prepareFlipLeftToRight;
 exposeOverrideableMethod(Mode2Up, '_modes.mode2Up', 'prepareFlipLeftToRight', 'prepareFlipLeftToRight');
@@ -1527,15 +1582,6 @@ BookReader.prototype.stopFlipAnimations = function() {
   });
 };
 
-/**
- * Returns true if keyboard navigation should be disabled for the event
- * @param {Event}
- * @return {boolean}
- */
-BookReader.prototype.keyboardNavigationIsDisabled = function(event) {
-  return event.target.tagName == "INPUT";
-};
-
 /**
  * @template TClass extends { br: BookReader }
  * Helper method to expose a method onto BookReader from a composed class.
@@ -1566,9 +1612,6 @@ BookReader.prototype.updateViewModeButton = Navbar.prototype.updateViewModeButto
 exposeOverrideableMethod(Navbar, '_components.navbar', 'updateViewModeButton');
 BookReader.prototype.getNavPageNumString = Navbar.prototype.getNavPageNumString;
 exposeOverrideableMethod(Navbar, '_components.navbar', 'getNavPageNumString');
-/** @deprecated */
-BookReader.prototype.initEmbedNavbar = Navbar.prototype.initEmbed;
-exposeOverrideableMethod(Navbar, '_components.navbar', 'initEmbed', 'initEmbedNavbar');
 /** @deprecated unused */
 BookReader.prototype.getNavPageNumHtml = getNavPageNumHtml;
 /** @deprecated unused outside this file */
@@ -1677,7 +1720,7 @@ BookReader.prototype.bindNavigationHandlers = function() {
 
   for (const control in navigationControls) {
     jIcons.filter(`.${control}`).on('click.bindNavigationHandlers', () => {
-      navigationControls[control]()
+      navigationControls[control]();
       return false;
     });
   }
@@ -1707,7 +1750,7 @@ BookReader.prototype.bindNavigationHandlers = function() {
         $brNavCntlBtmEl.addClass('BRdn').removeClass('BRup');
         $brNavCntlTopEl.addClass('BRup').removeClass('BRdn');
         self.$('.BRnavCntlBtm.BRnavCntl').animate({height:'30px'});
-        self.$('.BRvavCntl').animate({opacity:1})
+        self.$('.BRvavCntl').animate({opacity:1});
       }
       $.when.apply($, promises).done(function() {
         // Only do full resize in auto mode and need to recalc. size
@@ -1725,24 +1768,28 @@ BookReader.prototype.bindNavigationHandlers = function() {
       });
     }
   );
-  $brNavCntlBtmEl.mouseover(function() {
-    if ($(this).hasClass('BRup')) {
-      self.$('.BRnavCntl').animate({opacity:1},250);
-    }
-  }).mouseleave(function() {
-    if ($(this).hasClass('BRup')) {
-      self.$('.BRnavCntl').animate({opacity:.75},250);
-    }
-  });
-  $brNavCntlTopEl.mouseover(function() {
-    if ($(this).hasClass('BRdn')) {
-      self.$('.BRnavCntl').animate({opacity:1},250);
-    }
-  }).mouseleave(function() {
-    if ($(this).hasClass('BRdn')) {
-      self.$('.BRnavCntl').animate({opacity:.75},250);
-    }
-  });
+  $brNavCntlBtmEl
+    .on("mouseover", function() {
+      if ($(this).hasClass('BRup')) {
+        self.$('.BRnavCntl').animate({opacity:1},250);
+      }
+    })
+    .on("mouseleave", function() {
+      if ($(this).hasClass('BRup')) {
+        self.$('.BRnavCntl').animate({opacity:.75},250);
+      }
+    });
+  $brNavCntlTopEl
+    .on("mouseover", function() {
+      if ($(this).hasClass('BRdn')) {
+        self.$('.BRnavCntl').animate({opacity:1},250);
+      }
+    })
+    .on("mouseleave", function() {
+      if ($(this).hasClass('BRdn')) {
+        self.$('.BRnavCntl').animate({opacity:.75},250);
+      }
+    });
 
   this.initSwipeData();
 
@@ -1807,7 +1854,7 @@ BookReader.prototype.initSwipeData = function(clientX, clientY) {
     deltaX: 0,
     deltaY: 0,
     deltaT: 0
-  }
+  };
 };
 
 BookReader.prototype.swipeMousedownHandler = function(event) {
@@ -1819,13 +1866,13 @@ BookReader.prototype.swipeMousedownHandler = function(event) {
     return !self.protected;
   }
 
-  $(event.target).bind('mouseout.swipe',
+  $(event.target).on('mouseout.swipe',
     { 'br': self},
     self.swipeMouseupHandler
-  ).bind('mouseup.swipe',
+  ).on('mouseup.swipe',
     { 'br': self},
     self.swipeMouseupHandler
-  ).bind('mousemove.swipe',
+  ).on('mousemove.swipe',
     { 'br': self },
     self.swipeMousemoveHandler
   );
@@ -1895,7 +1942,7 @@ BookReader.prototype.swipeMouseupHandler = function(event) {
   _swipe.mightBeSwiping = false;
   _swipe.mightBeDragging = false;
 
-  $(event.target).unbind('mouseout.swipe').unbind('mouseup.swipe').unbind('mousemove.swipe');
+  $(event.target).off('mouseout.swipe').off('mouseup.swipe').off('mousemove.swipe');
 
   if (_swipe.didSwipe || _swipe.didDrag) {
     // Swallow event if completed swipe gesture
@@ -1911,17 +1958,18 @@ BookReader.prototype.bindMozTouchHandlers = function() {
   var self = this;
 
   // Currently only want touch handlers in 2up
-  this.refs.$br.bind('MozTouchDown', function(event) {
-    if (this.mode == self.constMode2up) {
-      event.preventDefault();
-    }
-  })
-    .bind('MozTouchMove', function(event) {
+  this.refs.$br
+    .on('MozTouchDown', function(event) {
       if (this.mode == self.constMode2up) {
         event.preventDefault();
       }
     })
-    .bind('MozTouchUp', function(event) {
+    .on('MozTouchMove', function(event) {
+      if (this.mode == self.constMode2up) {
+        event.preventDefault();
+      }
+    })
+    .on('MozTouchUp', function(event) {
       if (this.mode == self.constMode2up) {
         event.preventDefault();
       }
@@ -2199,7 +2247,7 @@ BookReader.prototype._getPageURISrcset = function(index, reduce, rotate) {
   }
 
   return page.getURISrcSet(reduce, rotate);
-}
+};
 
 
 /**
@@ -2225,21 +2273,37 @@ BookReader.prototype._getPageURI = function(index, reduce, rotate) {
 };
 
 /**
- * @param {string}
+ * @param {string} msg
+ * @param {function|undefined} onCloseCallback
  */
-BookReader.prototype.showProgressPopup = function(msg) {
+BookReader.prototype.showProgressPopup = function(msg, onCloseCallback) {
   if (this.popup) return;
 
   this.popup = document.createElement("div");
   $(this.popup).prop('className', 'BRprogresspopup');
-  var bar = document.createElement("div");
+
+  if (typeof(onCloseCallback) === 'function') {
+    const closeButton = document.createElement('button');
+    closeButton.setAttribute('title', 'close');
+    closeButton.setAttribute('class', 'close-popup');
+    const icon = document.createElement('span');
+    icon.setAttribute('class', 'icon icon-close-dark');
+    $(closeButton).append(icon);
+    closeButton.addEventListener('click', () => {
+      onCloseCallback();
+      this.removeProgressPopup();
+    });
+    $(this.popup).append(closeButton);
+  }
+
+  const bar = document.createElement("div");
   $(bar).css({
     height:   '20px'
   }).prop('className', 'BRprogressbar');
   $(this.popup).append(bar);
 
   if (msg) {
-    var msgdiv = document.createElement("div");
+    const msgdiv = document.createElement("div");
     msgdiv.innerHTML = msg;
     $(this.popup).append(msgdiv);
   }
@@ -2296,7 +2360,7 @@ BookReader.prototype.initUIStrings = function() {
   for (var icon in titles) {
     this.$(icon).prop('title', titles[icon]);
   }
-}
+};
 
 /**
  * Reloads images. Useful when some images might have failed.
@@ -2327,7 +2391,7 @@ BookReader.prototype.getFooterHeight = function() {
     }
   }
   return 0;
-}
+};
 
 // Basic Usage built-in Methods (can be overridden through options)
 // This implementation uses options.data value for populating BookReader
@@ -2339,6 +2403,7 @@ BookReader.prototype.getFooterHeight = function() {
 BookReader.prototype.paramsFromCurrent = function() {
   var params = {};
 
+  // Path params
   var index = this.currentIndex();
   var pageNum = this._models.book.getPageNum(index);
   if ((pageNum === 0) || pageNum) {
@@ -2348,10 +2413,17 @@ BookReader.prototype.paramsFromCurrent = function() {
   params.index = index;
   params.mode = this.mode;
 
+  // Unused params
   // $$$ highlight
   // $$$ region
 
-  // search
+  // Querystring params
+  // View
+  const fullscreenView = 'theater';
+  if (this.isFullscreenActive) {
+    params.view = fullscreenView;
+  }
+  // Search
   if (this.enableSearch) {
     params.search = this.searchTerm;
   }
@@ -2422,7 +2494,7 @@ BookReader.prototype.paramsFromFragment = function(fragment) {
 
   // $$$ process /theme
   if (urlHash['theme'] != undefined) {
-    params.theme = urlHash['theme']
+    params.theme = urlHash['theme'];
   }
   return params;
 };
@@ -2479,6 +2551,9 @@ BookReader.prototype.fragmentFromParams = function(params, urlMode = 'hash') {
 /**
  * Create, update querystring from the params object
  *
+ * Handles:
+ *  view=
+ *  q=
  * @param {Object} params
  * @param {string} currQueryString
  * @param {string} [urlMode]
@@ -2490,21 +2565,30 @@ BookReader.prototype.queryStringFromParams = function(
   urlMode = 'hash'
 ) {
   const newParams = new URLSearchParams(currQueryString);
+
+  if (params.view) {
+    // Set ?view=theater when fullscreen
+    newParams.set('view', params.view);
+  } else {
+    // Remove
+    newParams.delete('view');
+  }
+
   if (params.search && urlMode === 'history') {
-    newParams.set('q', params.search)
+    newParams.set('q', params.search);
   }
   // https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString
   // Note: This method returns the query string without the question mark.
   const result = newParams.toString();
   return result ? '?' + result : '';
-}
+};
 
 /**
  * Helper to select within instance's elements
  */
 BookReader.prototype.$ = function(selector) {
   return this.refs.$br.find(selector);
-}
+};
 
 /**
  * Polyfill for deprecated method