@internetarchive/bookreader 5.0.0-88-alpha.3 → 5.0.0-88-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-88-alpha.3",
+  "version": "5.0.0-88-alpha.5",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -39,6 +39,7 @@
     "@internetarchive/icon-visual-adjustment": "^1.3.4",
     "@internetarchive/modal-manager": "^2.0.1",
     "@internetarchive/shared-resize-observer": "^0.2.0",
+    "interactjs": "^1.10.18",
     "jquery": "3.6.1",
     "jquery-colorbox": "1.6.4",
     "jquery-ui": "^1.12.1",
@@ -65,7 +66,6 @@
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-testcafe": "^0.2.1",
     "http-server": "14.1.1",
-    "interactjs": "^1.10.18",
     "iso-language-codes": "1.1.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package/src/BookReader/Mode1UpLit.js

@@ -1,10 +1,10 @@
 // @ts-check
-import { customElement, property, query } from 'lit/decorators.js';
-import {LitElement, html} from 'lit';
+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 { HTMLDimensionsCacher } from './utils/HTMLDimensionsCacher';
 import { ScrollClassAdder } from './utils/ScrollClassAdder';
 import { ModeCoordinateSpace } from './ModeCoordinateSpace';
 /** @typedef {import('./BookModel').BookModel} BookModel */
@@ -17,7 +17,6 @@ import { ModeCoordinateSpace } from './ModeCoordinateSpace';
 // 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 **************/
@@ -86,13 +85,15 @@ export class Mode1UpLit extends LitElement {
   get worldStyle() {
     const wToR = this.coordSpace.worldUnitsToRenderedPixels;
     return {
-      width: wToR(this.worldDimensions.width) + "px",
-      height: wToR(this.worldDimensions.height) + "px",
+      width: wToR(this.worldDimensions.width) + 'px',
+      height: wToR(this.worldDimensions.height) + 'px',
     };
   }
 
   /** @type {HTMLElement} */
-  get $container() { return this; }
+  get $container() {
+    return this;
+  }
 
   /** @type {HTMLElement} */
   @query('.br-mode-1up__visible-world')
@@ -128,10 +129,12 @@ export class Mode1UpLit extends LitElement {
     if (smooth) {
       this.style.scrollBehavior = 'smooth';
     }
-    this.scrollTop = this.coordSpace.worldUnitsToVisiblePixels(this.pageTops[index] - this.SPACING_IN / 2);
+    this.scrollTop = this.coordSpace.worldUnitsToVisiblePixels(
+      this.pageTops[index] - this.SPACING_IN / 2,
+    );
     // TODO: Also h center?
     if (smooth) {
-      setTimeout(() => this.style.scrollBehavior = '', 100);
+      setTimeout(() => (this.style.scrollBehavior = ''), 100);
     }
   }
 
@@ -194,7 +197,7 @@ export class Mode1UpLit extends LitElement {
       this.throttledUpdateRenderedPages();
       if (this.visiblePages.length) {
         // unclear why this is ever really happening
-        this.br.displayedIndices = this.visiblePages.map(p => p.index);
+        this.br.displayedIndices = this.visiblePages.map((p) => p.index);
         this.br.updateFirstIndex(this.br.displayedIndices[0]);
         this.br._components.navbar.updateNavIndexThrottled();
       }
@@ -211,7 +214,9 @@ export class Mode1UpLit extends LitElement {
   }
 
   updatePages() {
-    this.pages = genToArray(this.book.pagesIterator({ combineConsecutiveUnviewables: true }));
+    this.pages = genToArray(
+      this.book.pagesIterator({ combineConsecutiveUnviewables: true }),
+    );
   }
 
   /** @override */
@@ -242,50 +247,59 @@ export class Mode1UpLit extends LitElement {
 
   /** @override */
   render() {
-    return html`
-      <div class="br-mode-1up__world" style=${styleMap(this.worldStyle)}></div>
+    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))}
+        ${this.renderedPages.map((p) => this.renderPage(p))}
       </div>`;
   }
 
   /** @param {PageModel} page */
   createPageContainer = (page) => {
-    return this.pageContainerCache[page.index] || (
-      this.pageContainerCache[page.index] = (
+    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)
-      )
+        this.br._createPageContainer(page.index))
     );
-  }
+  };
 
   /** @param {PageModel} page */
   renderPage = (page) => {
     const wToR = this.coordSpace.worldUnitsToRenderedPixels;
     const wToV = this.coordSpace.worldUnitsToVisiblePixels;
-    const containerWidth = this.coordSpace.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth);
+    const containerWidth = this.coordSpace.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 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];
+    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;
-    pageContainerEl.classList.toggle('BRpage-visible', this.visiblePages.includes(page));
+    pageContainerEl.classList.toggle(
+      'BRpage-visible',
+      this.visiblePages.includes(page),
+    );
     return pageContainerEl;
-  }
+  };
 
   /************** VIRTUAL SCROLLING LOGIC **************/
 
@@ -306,7 +320,7 @@ export class Mode1UpLit extends LitElement {
       left: vToW(scrollLeft),
       width: vToW(clientWidth),
     };
-  }
+  };
 
   /**
    * @returns {PageModel[]}
@@ -314,20 +328,26 @@ export class Mode1UpLit extends LitElement {
   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);
+    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)
+  throttledUpdateRenderedPages = throttle(
+    () => {
+      this.renderedPages = this.computeRenderedPages();
+      this.requestUpdate();
+    },
+    100,
+    null,
+  );
 
   /**
    * @param {PageModel[]} pages
@@ -350,21 +370,29 @@ export class Mode1UpLit extends LitElement {
    */
   computeDefaultScale(page) {
     // Default to real size if it fits, otherwise default to full width
-    const containerWidthIn = this.coordSpace.renderedPixelsToWorldUnits(this.clientWidth);
-    return Math.min(1, containerWidthIn / (page.widthInches + 2 * this.SPACING_IN)) || 1;
+    const containerWidthIn = this.coordSpace.renderedPixelsToWorldUnits(
+      this.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,
+      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,
+        sum(this.pages.map((p) => p.heightInches)) +
+        (this.pages.length + 1) * this.SPACING_IN,
     };
   }
 
   computeVisiblePages() {
-    return this.pages.filter(page => {
+    return this.pages.filter((page) => {
       const PT = this.pageTops[page.index];
       const PB = PT + page.heightInches;
 
@@ -377,12 +405,14 @@ export class Mode1UpLit extends LitElement {
   /************** INPUT HANDLERS **************/
 
   attachScrollListeners = () => {
-    this.addEventListener("scroll", this.updateVisibleRegion);
+    this.addEventListener('scroll', this.updateVisibleRegion);
     this.scrollClassAdder.attach();
-  }
+  };
 
   detachScrollListeners = () => {
-    this.removeEventListener("scroll", this.updateVisibleRegion);
+    this.removeEventListener('scroll', this.updateVisibleRegion);
     this.scrollClassAdder.detach();
-  }
+  };
 }
+
+customElements.define('br-mode-1up', Mode1UpLit);

package/src/BookReader/Mode2UpLit.js

@@ -16,7 +16,6 @@ import { ModeCoordinateSpace } from './ModeCoordinateSpace';
 // I _have_ to make this globally public, otherwise it won't let me call
 // its constructor :/
 /** @implements {SmoothZoomable} */
-@customElement('br-mode-2up')
 export class Mode2UpLit extends LitElement {
   /****************************************/
   /************** PROPERTIES **************/
@@ -676,7 +675,6 @@ export class Mode2UpLit extends LitElement {
   }
 }
 
-@customElement('br-leaf-edges')
 export class LeafEdges extends LitElement {
   @property({ type: Number }) leftIndex = 0;
   @property({ type: Number }) rightIndex = 0;
@@ -774,3 +772,6 @@ export class LeafEdges extends LitElement {
     return Math.floor(this.leftIndex + (e.offsetX / this.offsetWidth) * (this.rightIndex - this.leftIndex + 1));
   }
 }
+
+customElements.define('br-mode-2up', Mode2UpLit);
+customElements.define('br-leaf-edges', LeafEdges);

package/src/plugins/plugin.chapters.js

@@ -191,7 +191,6 @@ BookReader.prototype._chaptersUpdateCurrent = function(
   }
 };
 
-@customElement('br-chapters-panel')
 export class BRChaptersPanel extends LitElement {
   /** @type {TocEntry[]} */
   @property({ type: Array })
@@ -214,9 +213,9 @@ export class BRChaptersPanel extends LitElement {
 
   render() {
     return html`
-    <ol>
-      ${this.contents.map(tocEntry => this.renderTOCEntry(tocEntry))}
-    </ol>
+      <ol>
+        ${this.contents.map((tocEntry) => this.renderTOCEntry(tocEntry))}
+      </ol>
     `;
   }
 
@@ -225,26 +224,29 @@ export class BRChaptersPanel extends LitElement {
    */
   renderTOCEntry(tocEntry) {
     const chapterTitle = [tocEntry.label, tocEntry.title]
-      .filter(x => x)
+      .filter((x) => x)
       .join(' ');
     const clickable = tocEntry.pageIndex != undefined;
     // note the click-tracking won't work...
-    return html`
-    <li
+    return html` <li
       class="
         BRtable-contents-el
         ${clickable ? 'clickable' : ''}
         ${tocEntry == this.currentChapter ? 'current' : ''}
       "
-      style="${styleMap({marginLeft: (tocEntry.level - 1) * 10 + 'px'})}"
-      data-event-click-tracking="${ifDefined(clickable ? "BRTOCPanel|GoToChapter" : undefined)}"
+      style="${styleMap({ marginLeft: (tocEntry.level - 1) * 10 + 'px' })}"
+      data-event-click-tracking="${ifDefined(
+        clickable ? 'BRTOCPanel|GoToChapter' : undefined,
+      )}"
       @click="${() => this.jumpToPage(tocEntry.pageIndex)}"
     >
       ${chapterTitle}
-      ${tocEntry.pagenum ? html`
-        <br />
-        <span class="BRTOCElementPage">Page ${tocEntry.pagenum}</span>
-      ` : nothing}
+      ${tocEntry.pagenum
+        ? html`
+            <br />
+            <span class="BRTOCElementPage">Page ${tocEntry.pagenum}</span>
+          `
+        : nothing}
     </li>`;
   }
 
@@ -281,17 +283,20 @@ export class BRChaptersPanel extends LitElement {
       }
 
       li.clickable:not(.current):hover {
-        background-color: rgba(255,255,255, 0.05);
+        background-color: rgba(255, 255, 255, 0.05);
       }
 
       li.current {
-        background-color: rgba(255,255,255,0.9);
+        background-color: rgba(255, 255, 255, 0.9);
         color: #333;
       }
 
       .BRTOCElementPage {
         font-size: 0.85em;
-        opacity: .8;
-      }`;
+        opacity: 0.8;
+      }
+    `;
   }
 }
+
+customElements.define('br-chapters-panel', BRChaptersPanel);