@internetarchive/bookreader 5.0.0-88-alpha.7 → 5.0.0-88-alpha.9

package/dist/esm/BookReader/Mode1UpLit.js

@@ -0,0 +1,579 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function _decorate(e, r, t, i) { var o = _getDecoratorsApi(); if (i) for (var n = 0; n < i.length; n++) o = i[n](o); var s = r(function (e) { o.initializeInstanceElements(e, a.elements); }, t), a = o.decorateClass(_coalesceClassElements(s.d.map(_createElementDescriptor)), e); return o.initializeClassElements(s.F, a.elements), o.runClassFinishers(s.F, a.finishers); }
+function _getDecoratorsApi() { _getDecoratorsApi = function _getDecoratorsApi() { return e; }; var e = { elementsDefinitionOrder: [["method"], ["field"]], initializeInstanceElements: function initializeInstanceElements(e, r) { ["method", "field"].forEach(function (t) { r.forEach(function (r) { r.kind === t && "own" === r.placement && this.defineClassElement(e, r); }, this); }, this); }, initializeClassElements: function initializeClassElements(e, r) { var t = e.prototype; ["method", "field"].forEach(function (i) { r.forEach(function (r) { var o = r.placement; if (r.kind === i && ("static" === o || "prototype" === o)) { var n = "static" === o ? e : t; this.defineClassElement(n, r); } }, this); }, this); }, defineClassElement: function defineClassElement(e, r) { var t = r.descriptor; if ("field" === r.kind) { var i = r.initializer; t = { enumerable: t.enumerable, writable: t.writable, configurable: t.configurable, value: void 0 === i ? void 0 : i.call(e) }; } Object.defineProperty(e, r.key, t); }, decorateClass: function decorateClass(e, r) { var t = [], i = [], o = { static: [], prototype: [], own: [] }; if (e.forEach(function (e) { this.addElementPlacement(e, o); }, this), e.forEach(function (e) { if (!_hasDecorators(e)) return t.push(e); var r = this.decorateElement(e, o); t.push(r.element), t.push.apply(t, r.extras), i.push.apply(i, r.finishers); }, this), !r) return { elements: t, finishers: i }; var n = this.decorateConstructor(t, r); return i.push.apply(i, n.finishers), n.finishers = i, n; }, addElementPlacement: function addElementPlacement(e, r, t) { var i = r[e.placement]; if (!t && -1 !== i.indexOf(e.key)) throw new TypeError("Duplicated element (" + e.key + ")"); i.push(e.key); }, decorateElement: function decorateElement(e, r) { for (var t = [], i = [], o = e.decorators, n = o.length - 1; n >= 0; n--) { var s = r[e.placement]; s.splice(s.indexOf(e.key), 1); var a = this.fromElementDescriptor(e), l = this.toElementFinisherExtras((0, o[n])(a) || a); e = l.element, this.addElementPlacement(e, r), l.finisher && i.push(l.finisher); var c = l.extras; if (c) { for (var p = 0; p < c.length; p++) this.addElementPlacement(c[p], r); t.push.apply(t, c); } } return { element: e, finishers: i, extras: t }; }, decorateConstructor: function decorateConstructor(e, r) { for (var t = [], i = r.length - 1; i >= 0; i--) { var o = this.fromClassDescriptor(e), n = this.toClassDescriptor((0, r[i])(o) || o); if (void 0 !== n.finisher && t.push(n.finisher), void 0 !== n.elements) { e = n.elements; for (var s = 0; s < e.length - 1; s++) for (var a = s + 1; a < e.length; a++) if (e[s].key === e[a].key && e[s].placement === e[a].placement) throw new TypeError("Duplicated element (" + e[s].key + ")"); } } return { elements: e, finishers: t }; }, fromElementDescriptor: function fromElementDescriptor(e) { var r = { kind: e.kind, key: e.key, placement: e.placement, descriptor: e.descriptor }; return Object.defineProperty(r, Symbol.toStringTag, { value: "Descriptor", configurable: !0 }), "field" === e.kind && (r.initializer = e.initializer), r; }, toElementDescriptors: function toElementDescriptors(e) { if (void 0 !== e) return _toArray(e).map(function (e) { var r = this.toElementDescriptor(e); return this.disallowProperty(e, "finisher", "An element descriptor"), this.disallowProperty(e, "extras", "An element descriptor"), r; }, this); }, toElementDescriptor: function toElementDescriptor(e) { var r = e.kind + ""; if ("method" !== r && "field" !== r) throw new TypeError('An element descriptor\'s .kind property must be either "method" or "field", but a decorator created an element descriptor with .kind "' + r + '"'); var t = _toPropertyKey(e.key), i = e.placement + ""; if ("static" !== i && "prototype" !== i && "own" !== i) throw new TypeError('An element descriptor\'s .placement property must be one of "static", "prototype" or "own", but a decorator created an element descriptor with .placement "' + i + '"'); var o = e.descriptor; this.disallowProperty(e, "elements", "An element descriptor"); var n = { kind: r, key: t, placement: i, descriptor: Object.assign({}, o) }; return "field" !== r ? this.disallowProperty(e, "initializer", "A method descriptor") : (this.disallowProperty(o, "get", "The property descriptor of a field descriptor"), this.disallowProperty(o, "set", "The property descriptor of a field descriptor"), this.disallowProperty(o, "value", "The property descriptor of a field descriptor"), n.initializer = e.initializer), n; }, toElementFinisherExtras: function toElementFinisherExtras(e) { return { element: this.toElementDescriptor(e), finisher: _optionalCallableProperty(e, "finisher"), extras: this.toElementDescriptors(e.extras) }; }, fromClassDescriptor: function fromClassDescriptor(e) { var r = { kind: "class", elements: e.map(this.fromElementDescriptor, this) }; return Object.defineProperty(r, Symbol.toStringTag, { value: "Descriptor", configurable: !0 }), r; }, toClassDescriptor: function toClassDescriptor(e) { var r = e.kind + ""; if ("class" !== r) throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator created a class descriptor with .kind "' + r + '"'); this.disallowProperty(e, "key", "A class descriptor"), this.disallowProperty(e, "placement", "A class descriptor"), this.disallowProperty(e, "descriptor", "A class descriptor"), this.disallowProperty(e, "initializer", "A class descriptor"), this.disallowProperty(e, "extras", "A class descriptor"); var t = _optionalCallableProperty(e, "finisher"); return { elements: this.toElementDescriptors(e.elements), finisher: t }; }, runClassFinishers: function runClassFinishers(e, r) { for (var t = 0; t < r.length; t++) { var i = (0, r[t])(e); if (void 0 !== i) { if ("function" != typeof i) throw new TypeError("Finishers must return a constructor."); e = i; } } return e; }, disallowProperty: function disallowProperty(e, r, t) { if (void 0 !== e[r]) throw new TypeError(t + " can't have a ." + r + " property."); } }; return e; }
+function _createElementDescriptor(e) { var r, t = _toPropertyKey(e.key); "method" === e.kind ? r = { value: e.value, writable: !0, configurable: !0, enumerable: !1 } : "get" === e.kind ? r = { get: e.value, configurable: !0, enumerable: !1 } : "set" === e.kind ? r = { set: e.value, configurable: !0, enumerable: !1 } : "field" === e.kind && (r = { configurable: !0, writable: !0, enumerable: !0 }); var i = { kind: "field" === e.kind ? "field" : "method", key: t, placement: e.static ? "static" : "field" === e.kind ? "own" : "prototype", descriptor: r }; return e.decorators && (i.decorators = e.decorators), "field" === e.kind && (i.initializer = e.value), i; }
+function _coalesceGetterSetter(e, r) { void 0 !== e.descriptor.get ? r.descriptor.get = e.descriptor.get : r.descriptor.set = e.descriptor.set; }
+function _coalesceClassElements(e) { for (var r = [], isSameElement = function isSameElement(e) { return "method" === e.kind && e.key === o.key && e.placement === o.placement; }, t = 0; t < e.length; t++) { var i, o = e[t]; if ("method" === o.kind && (i = r.find(isSameElement))) { if (_isDataDescriptor(o.descriptor) || _isDataDescriptor(i.descriptor)) { if (_hasDecorators(o) || _hasDecorators(i)) throw new ReferenceError("Duplicated methods (" + o.key + ") can't be decorated."); i.descriptor = o.descriptor; } else { if (_hasDecorators(o)) { if (_hasDecorators(i)) throw new ReferenceError("Decorators can't be placed on different accessors with for the same property (" + o.key + ")."); i.decorators = o.decorators; } _coalesceGetterSetter(o, i); } } else r.push(o); } return r; }
+function _hasDecorators(e) { return e.decorators && e.decorators.length; }
+function _isDataDescriptor(e) { return void 0 !== e && !(void 0 === e.value && void 0 === e.writable); }
+function _optionalCallableProperty(e, r) { var t = e[r]; if (void 0 !== t && "function" != typeof t) throw new TypeError("Expected '" + r + "' to be a function"); return t; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toArray(r) { return _arrayWithHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _superPropGet(t, e, o, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), e, o); return 2 & r && "function" == typeof p ? function (t) { return p.apply(o, t); } : p; }
+function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
+function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+// @ts-check
+import { property, query } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ModeSmoothZoom } from './ModeSmoothZoom';
+import { arrChanged, genToArray, sum, throttle } from './utils';
+import { HTMLDimensionsCacher } from './utils/HTMLDimensionsCacher';
+import { ScrollClassAdder } from './utils/ScrollClassAdder';
+import { ModeCoordinateSpace } from './ModeCoordinateSpace';
+/** @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} */
+export var Mode1UpLit = _decorate(null, function (_initialize, _LitElement) {
+  class Mode1UpLit extends _LitElement {
+    /****************************************/
+    /************** PROPERTIES **************/
+    /****************************************/
+
+    /** @type {BookReader} */
+
+    /************** BOOK-RELATED PROPERTIES **************/
+
+    /** @type {BookModel} */
+
+    /** @type {PageModel[]} */
+
+    /** @type {Record<PageIndex, number>} in world coordinates (inches) */
+
+    /************** SCALE-RELATED PROPERTIES **************/
+
+    /** @type {ModeCoordinateSpace} Manage conversion between coordinates */
+
+    /************** VIRTUAL-SCROLLING PROPERTIES **************/
+
+    /** in world coordinates (inches) */
+
+    /** @type {PageModel[]} */
+
+    /** @type {PageModel[]} */
+
+    /** @type {Record<PageIndex, PageContainer>} position in inches */
+
+    /************** 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} */
+
+    /** @type {HTMLElement} */
+
+    /** @type {HTMLElement} */
+
+    /************** DOM-RELATED PROPERTIES **************/
+
+    /** @type {HTMLDimensionsCacher} Cache things like clientWidth to reduce repaints */
+
+    /************** CONSTANT PROPERTIES **************/
+
+    /** Vertical space between/around the pages in inches */
+
+    /** How much to zoom when zoom button pressed */
+
+    /****************************************/
+    /************** PUBLIC API **************/
+    /****************************************/
+
+    /************** MAIN PUBLIC METHODS **************/
+
+    /**
+     * @param {PageIndex} index
+     */
+
+    /********************************************/
+    /************** INTERNAL STUFF **************/
+    /********************************************/
+
+    /************** LIFE CYCLE **************/
+
+    /**
+     * @param {BookModel} book
+     * @param {BookReader} br
+     */
+    constructor(book, br) {
+      super();
+      _initialize(this);
+      this.book = book;
+
+      /** @type {BookReader} */
+      this.br = br;
+    }
+
+    /** @override */
+
+    /**
+     * @param {PageIndex} startIndex
+     */
+
+    /** @override */
+
+    /** @override */
+
+    /** @override */
+
+    /************** LIT CONFIGS **************/
+
+    /** @override */
+
+    /************** RENDERING **************/
+
+    /** @override */
+
+    /** @param {PageModel} page */
+
+    /** @param {PageModel} page */
+
+    /************** VIRTUAL SCROLLING LOGIC **************/
+
+    /**
+     * @returns {PageModel[]}
+     */
+
+    /**
+     * @param {PageModel[]} pages
+     * @param {number} spacing
+     */
+
+    /**
+     * @param {PageModel} page
+     * @returns {number}
+     */
+
+    /************** INPUT HANDLERS **************/
+  }
+  return {
+    F: Mode1UpLit,
+    d: [{
+      kind: "field",
+      key: "br",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Object
+      })],
+      key: "book",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Array
+      })],
+      key: "pages",
+      value() {
+        return [];
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Object
+      })],
+      key: "pageTops",
+      value() {
+        return {};
+      }
+    }, {
+      kind: "field",
+      key: "coordSpace",
+      value() {
+        return new ModeCoordinateSpace(this);
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Number
+      })],
+      key: "scale",
+      value() {
+        return 1;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Object
+      })],
+      key: "visibleRegion",
+      value() {
+        return {
+          top: 0,
+          left: 0,
+          width: 100,
+          height: 100
+        };
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Array,
+        hasChanged: arrChanged
+      })],
+      key: "visiblePages",
+      value() {
+        return [];
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Array
+      })],
+      key: "renderedPages",
+      value() {
+        return [];
+      }
+    }, {
+      kind: "field",
+      key: "pageContainerCache",
+      value() {
+        return {};
+      }
+    }, {
+      kind: "field",
+      decorators: [query('.br-mode-1up__world')],
+      key: "$world",
+      value: void 0
+    }, {
+      kind: "field",
+      key: "worldDimensions",
+      value() {
+        return {
+          width: 100,
+          height: 100
+        };
+      }
+    }, {
+      kind: "get",
+      key: "worldStyle",
+      value: function value() {
+        var wToR = this.coordSpace.worldUnitsToRenderedPixels;
+        return {
+          width: wToR(this.worldDimensions.width) + 'px',
+          height: wToR(this.worldDimensions.height) + 'px'
+        };
+      }
+    }, {
+      kind: "get",
+      key: "$container",
+      value: function value() {
+        return this;
+      }
+    }, {
+      kind: "field",
+      decorators: [query('.br-mode-1up__visible-world')],
+      key: "$visibleWorld",
+      value: void 0
+    }, {
+      kind: "field",
+      key: "htmlDimensionsCacher",
+      value() {
+        return new HTMLDimensionsCacher(this);
+      }
+    }, {
+      kind: "field",
+      key: "smoothZoomer",
+      value() {
+        return new ModeSmoothZoom(this);
+      }
+    }, {
+      kind: "field",
+      key: "scrollClassAdder",
+      value() {
+        return new ScrollClassAdder(this, 'BRscrolling-active');
+      }
+    }, {
+      kind: "field",
+      key: "SPACING_IN",
+      value() {
+        return 0.2;
+      }
+    }, {
+      kind: "field",
+      key: "ZOOM_FACTOR",
+      value() {
+        return 1.1;
+      }
+    }, {
+      kind: "method",
+      key: "jumpToIndex",
+      value: function jumpToIndex(index) {
+        var {
+          smooth = false
+        } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        if (smooth) {
+          this.style.scrollBehavior = 'smooth';
+        }
+        this.scrollTop = this.coordSpace.worldUnitsToVisiblePixels(this.pageTops[index] - this.SPACING_IN / 2);
+        // TODO: Also h center?
+        if (smooth) {
+          setTimeout(() => this.style.scrollBehavior = '', 100);
+        }
+      }
+    }, {
+      kind: "method",
+      key: "zoomIn",
+      value: function zoomIn() {
+        this.scale *= this.ZOOM_FACTOR;
+      }
+    }, {
+      kind: "method",
+      key: "zoomOut",
+      value: function zoomOut() {
+        this.scale *= 1 / this.ZOOM_FACTOR;
+      }
+    }, {
+      kind: "method",
+      key: "firstUpdated",
+      value: function firstUpdated(changedProps) {
+        _superPropGet(Mode1UpLit, "firstUpdated", this, 3)([changedProps]);
+        this.htmlDimensionsCacher.updateClientSizes();
+        this.smoothZoomer.attach();
+      }
+    }, {
+      kind: "method",
+      key: "initFirstRender",
+      value: function initFirstRender(startIndex) {
+        var page = this.book.getPage(startIndex);
+        this.scale = this.computeDefaultScale(page);
+      }
+    }, {
+      kind: "method",
+      key: "updated",
+      value: function updated(changedProps) {
+        // this.X is the new value
+        // changedProps.get('X') is the old value
+        if (changedProps.has('book')) {
+          this.updatePages();
+        }
+        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();
+          if (this.visiblePages.length) {
+            // unclear why this is ever really happening
+            this.br.displayedIndices = this.visiblePages.map(p => p.index);
+            this.br.updateFirstIndex(this.br.displayedIndices[0]);
+            this.br._components.navbar.updateNavIndexThrottled();
+          }
+        }
+        if (changedProps.has('scale')) {
+          var oldVal = changedProps.get('scale');
+          // Need to set this scale to actually scale the pages
+          this.$visibleWorld.style.transform = "scale(".concat(this.scale, ")");
+          this.smoothZoomer.updateViewportOnZoom(this.scale, oldVal);
+          this.updateVisibleRegion();
+          // Need to set this scale to update the world size, so the scrollbar gets the correct size
+          this.$world.style.transform = "scale(".concat(this.scale, ")");
+        }
+      }
+    }, {
+      kind: "method",
+      key: "updatePages",
+      value: function updatePages() {
+        this.pages = genToArray(this.book.pagesIterator({
+          combineConsecutiveUnviewables: true
+        }));
+      }
+    }, {
+      kind: "method",
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        _superPropGet(Mode1UpLit, "connectedCallback", this, 3)([]);
+        this.htmlDimensionsCacher.attachResizeListener();
+        this.attachScrollListeners();
+        this.smoothZoomer.attach();
+      }
+    }, {
+      kind: "method",
+      key: "disconnectedCallback",
+      value: function disconnectedCallback() {
+        this.htmlDimensionsCacher.detachResizeListener();
+        this.detachScrollListeners();
+        this.smoothZoomer.detach();
+        _superPropGet(Mode1UpLit, "disconnectedCallback", this, 3)([]);
+      }
+    }, {
+      kind: "method",
+      key: "createRenderRoot",
+      value: function createRenderRoot() {
+        // Disable shadow DOM; that would require a huge rejiggering of CSS
+        return this;
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
+        return html(_templateObject || (_templateObject = _taggedTemplateLiteral([" <div\n        class=\"br-mode-1up__world\"\n        style=", "\n      ></div>\n      <div class=\"br-mode-1up__visible-world\">\n        ", "\n      </div>"])), styleMap(this.worldStyle), this.renderedPages.map(p => this.renderPage(p)));
+      }
+    }, {
+      kind: "field",
+      key: "createPageContainer",
+      value() {
+        return 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));
+        };
+      }
+    }, {
+      kind: "field",
+      key: "renderPage",
+      value() {
+        return page => {
+          var wToR = this.coordSpace.worldUnitsToRenderedPixels;
+          var wToV = this.coordSpace.worldUnitsToVisiblePixels;
+          var containerWidth = this.coordSpace.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth);
+          var width = wToR(page.widthInches);
+          var height = wToR(page.heightInches);
+          var left = Math.max(this.SPACING_IN, (containerWidth - page.widthInches) / 2);
+          var top = this.pageTops[page.index];
+          var transform = "translate(".concat(wToR(left), "px, ").concat(wToR(top), "px)");
+          var pageContainerEl = this.createPageContainer(page).update({
+            dimensions: {
+              width,
+              height,
+              top: 0,
+              left: 0
+            },
+            reduce: page.width / wToV(page.widthInches)
+          }).$container[0];
+          pageContainerEl.style.transform = transform;
+          pageContainerEl.classList.toggle('BRpage-visible', this.visiblePages.includes(page));
+          return pageContainerEl;
+        };
+      }
+    }, {
+      kind: "field",
+      key: "updateVisibleRegion",
+      value() {
+        return () => {
+          var {
+            scrollTop,
+            scrollLeft
+          } = this;
+          // clientHeight excludes scrollbars, which is good.
+          var clientWidth = this.htmlDimensionsCacher.clientWidth;
+          var clientHeight = this.htmlDimensionsCacher.clientHeight;
+
+          // Note: scrollTop, and clientWidth all are in visible space;
+          // i.e. they are affects by the CSS transforms.
+
+          var vToW = this.coordSpace.visiblePixelsToWorldUnits;
+          this.visibleRegion = {
+            top: vToW(scrollTop),
+            height: vToW(clientHeight),
+            // TODO: These are very likely wrong
+            left: vToW(scrollLeft),
+            width: vToW(clientWidth)
+          };
+        };
+      }
+    }, {
+      kind: "method",
+      key: "computeRenderedPages",
+      value: function computeRenderedPages() {
+        var _this$visiblePages$, _this$visiblePages;
+        // Also render 1 page before/after
+        // @ts-ignore TS doesn't understand the filtering out of null values
+        return [(_this$visiblePages$ = this.visiblePages[0]) === null || _this$visiblePages$ === void 0 ? void 0 : _this$visiblePages$.prev, ...this.visiblePages, (_this$visiblePages = this.visiblePages[this.visiblePages.length - 1]) === null || _this$visiblePages === void 0 ? void 0 : _this$visiblePages.next].filter(p => p)
+        // Never render more than 10 pages! Usually means something is wrong
+        .slice(0, 10);
+      }
+    }, {
+      kind: "field",
+      key: "throttledUpdateRenderedPages",
+      value() {
+        return throttle(() => {
+          this.renderedPages = this.computeRenderedPages();
+          this.requestUpdate();
+        }, 100, null);
+      }
+    }, {
+      kind: "method",
+      key: "computePageTops",
+      value: function computePageTops(pages, spacing) {
+        /** @type {{ [pageIndex: string]: number }} */
+        var result = {};
+        var top = spacing;
+        for (var page of pages) {
+          result[page.index] = top;
+          top += page.heightInches + spacing;
+        }
+        return result;
+      }
+    }, {
+      kind: "method",
+      key: "computeDefaultScale",
+      value: function computeDefaultScale(page) {
+        // Default to real size if it fits, otherwise default to full width
+        var containerWidthIn = this.coordSpace.renderedPixelsToWorldUnits(this.clientWidth);
+        return Math.min(1, containerWidthIn / (page.widthInches + 2 * this.SPACING_IN)) || 1;
+      }
+    }, {
+      kind: "method",
+      key: "computeWorldDimensions",
+      value: function 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
+        };
+      }
+    }, {
+      kind: "method",
+      key: "computeVisiblePages",
+      value: function computeVisiblePages() {
+        return this.pages.filter(page => {
+          var PT = this.pageTops[page.index];
+          var PB = PT + page.heightInches;
+          var VT = this.visibleRegion.top;
+          var VB = VT + this.visibleRegion.height;
+          return PT <= VB && PB >= VT;
+        });
+      }
+    }, {
+      kind: "field",
+      key: "attachScrollListeners",
+      value() {
+        return () => {
+          this.addEventListener('scroll', this.updateVisibleRegion);
+          this.scrollClassAdder.attach();
+        };
+      }
+    }, {
+      kind: "field",
+      key: "detachScrollListeners",
+      value() {
+        return () => {
+          this.removeEventListener('scroll', this.updateVisibleRegion);
+          this.scrollClassAdder.detach();
+        };
+      }
+    }]
+  };
+}, LitElement);
+customElements.define('br-mode-1up', Mode1UpLit);

package/dist/esm/BookReader/Mode2Up.js

@@ -0,0 +1,106 @@
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+// @ts-check
+import { Mode2UpLit } from './Mode2UpLit.js';
+import { DragScrollable } from './DragScrollable.js';
+/** @typedef {import('../BookReader.js').default} BookReader */
+/** @typedef {import('./BookModel.js').BookModel} BookModel */
+/** @typedef {import('./BookModel.js').PageIndex} PageIndex */
+
+export class Mode2Up {
+  /**
+   * @param {BookReader} br
+   * @param {BookModel} bookModel
+   */
+  constructor(br, bookModel) {
+    this.br = br;
+    this.book = bookModel;
+    this.mode2UpLit = new Mode2UpLit(bookModel, br);
+    this.mode2UpLit.flipSpeed = br.flipSpeed;
+
+    /** @private */
+    this.$el = $(this.mode2UpLit).attr('autoFit', this.br.options.twoPage.autofit)
+    // We CANNOT use `br-mode-2up` as a class, because it's the same
+    // as the name of the web component, and the webcomponents polyfill
+    // uses the name of component as a class for style scoping 😒
+    .addClass('br-mode-2up__root BRmode2up');
+
+    /** Has mode2up ever been rendered before? */
+    this.everShown = false;
+  }
+
+  /**
+   * This is called when we switch into this mode
+   */
+  prepare() {
+    var _this = this;
+    var startLeaf = this.br.currentIndex();
+    this.br.refs.$brContainer.empty().css({
+      overflow: 'hidden'
+    }).append(this.$el);
+    this.mode2UpLit.style.opacity = '0';
+
+    // Need this in a setTimeout so that it happens after the browser has _actually_
+    // appended the element to the DOM
+    setTimeout(/*#__PURE__*/_asyncToGenerator(function* () {
+      if (!_this.everShown) {
+        _this.mode2UpLit.initFirstRender(startLeaf);
+        _this.everShown = true;
+        _this.mode2UpLit.requestUpdate();
+        yield _this.mode2UpLit.updateComplete;
+        new DragScrollable(_this.mode2UpLit, {
+          preventDefault: true,
+          dragSelector: '.br-mode-2up__book',
+          // Only handle mouse events; let browser/HammerJS handle touch
+          dragstart: 'mousedown',
+          dragcontinue: 'mousemove',
+          dragend: 'mouseup'
+        });
+      } else {
+        yield _this.mode2UpLit.jumpToIndex(startLeaf, {
+          smooth: false
+        });
+        _this.resizePageView();
+      }
+      _this.mode2UpLit.style.opacity = '1';
+    }));
+    this.br.updateBrClasses();
+  }
+
+  /**
+   * BREAKING CHANGE: No longer supports pageX/pageY
+   * @param {PageIndex} index
+   * @param {number} [pageX] x position on the page (in pixels) to center on
+   * @param {number} [pageY] y position on the page (in pixels) to center on
+   * @param {boolean} [noAnimate]
+   */
+  jumpToIndex(index, pageX, pageY, noAnimate) {
+    this.mode2UpLit.jumpToIndex(index);
+  }
+
+  /**
+   * @param {'in' | 'out'} direction
+   */
+  zoom(direction) {
+    switch (direction) {
+      case 'in':
+        this.mode2UpLit.zoomIn();
+        break;
+      case 'out':
+        this.mode2UpLit.zoomOut();
+        break;
+      default:
+        console.error("Unsupported direction: ".concat(direction));
+    }
+  }
+  resizePageView() {
+    this.mode2UpLit.htmlDimensionsCacher.updateClientSizes();
+    if (this.mode2UpLit.scale < this.mode2UpLit.initialScale && this.mode2UpLit.autoFit == 'none') {
+      this.mode2UpLit.autoFit = 'auto';
+    }
+    if (this.mode2UpLit.autoFit != 'none') {
+      this.mode2UpLit.resizeViaAutofit();
+    }
+    this.mode2UpLit.recenter();
+  }
+}