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

package/src/ia-bookreader/ia-bookreader.js

@@ -0,0 +1,205 @@
+/**
+ * BookReaderTemplate to load BookNavigator components
+ */
+
+import { LitElement, html, css } from 'lit-element';
+
+import '@internetarchive/ia-item-navigator';
+import '../BookNavigator/book-navigator.js';
+// eslint-disable-next-line no-unused-vars
+import { ModalManager } from '@internetarchive/modal-manager';
+import '@internetarchive/modal-manager';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+
+export class IaBookReader extends LitElement {
+  static get properties() {
+    return {
+      item: { type: Object },
+      baseHost: { type: String },
+      signedIn: { type: Boolean },
+      fullscreen: { type: Boolean, reflect: true, attribute: true },
+      sharedObserver: { type: Object, attribute: false },
+      modal: { type: Object, attribute: false },
+      loaded: { type: Boolean },
+      menuShortcuts: { type: Array },
+      menuContents: { type: Array },
+    };
+  }
+
+  constructor() {
+    super();
+    this.item = undefined;
+    this.bookreader = undefined;
+    this.baseHost = 'https://archive.org';
+    this.fullscreen = false;
+    this.signedIn = false;
+    /** @type {ModalManager} */
+    this.modal = undefined;
+    /** @type {SharedResizeObserver} */
+    this.sharedObserver = undefined;
+    this.loaded = false;
+    this.menuShortcuts = [];
+    this.menuContents = [];
+    console.log("ia-bookreader constructor", this);
+  }
+
+  updated() {
+    if (!this.modal) {
+      this.modal = new ModalManager();
+    }
+
+    if (!this.sharedObserver) {
+      this.sharedObserver = new SharedResizeObserver();
+    }
+  }
+
+
+  manageFullscreen(e) {
+    const { detail } = e;
+    const fullscreen = !!detail.isFullScreen;
+    this.fullscreen = fullscreen;
+  }
+
+  loadingStateUpdated(e) {
+    const { loaded } = e.detail;
+    this.loaded = loaded || null;
+    this.dispatchEvent(new CustomEvent('loadingStateUpdated', { detail: { loaded }}));
+  }
+
+  setMenuShortcuts(e) {
+    this.menuShortcuts = [...e.detail];
+  }
+
+  setMenuContents(e) {
+    const updatedContents = [...e.detail];
+    this.menuContents = updatedContents;
+  }
+
+  manageSideMenuEvents(e) {
+    const { menuId, action } = e.detail;
+    if (!menuId) {
+      return;
+    }
+
+    if (action === 'open') {
+      this.itemNav.openShortcut(menuId);
+      this.openShortcut(menuId);
+    } else if (action === 'toggle') {
+      this.itemNav.openMenu(menuId);
+      this.itemNav.toggleMenu();
+    }
+  }
+
+  // LINER NOTES --- iaux.min.js is loading wayy to late for booknav listener, to br. init
+
+  render() {
+    console.log('ia-bookreader render & its itemNav: ', this.itemNav);
+    return html`
+      <div class="ia-bookreader">
+        <ia-item-navigator
+          ?viewportInFullscreen=${this.fullscreen}
+          .itemType=${'open'}
+          .basehost=${this.baseHost}
+          .item=${this.item}
+          .modal=${this.modal}
+          .loaded=${this.loaded}
+          .sharedObserver=${this.sharedObserver}
+          ?signedIn=${this.signedIn}
+          .menuShortcuts=${this.menuShortcuts}
+          .menuContents=${this.menuContents}
+        >
+          <div slot="theater-main">
+            <book-navigator
+              .modal=${this.modal}
+              .baseHost=${this.baseHost}
+              .itemMD=${this.item}
+              ?signedIn=${this.signedIn}
+              ?sideMenuOpen=${this.menuOpened}
+              .sharedObserver=${this.sharedObserver}
+              @ViewportInFullScreen=${this.manageFullscreen}
+              @loadingStateUpdated=${this.loadingStateUpdated}
+              @updateSideMenu=${this.manageSideMenuEvents}
+              @menuUpdated=${this.setMenuContents}
+              @menuShortcutsUpdated=${this.setMenuShortcuts}
+            >
+              <div slot="theater-main">
+                <slot name="theater-main"></slot>
+              </div>
+            </book-navigator>
+          </div>
+        </ia-item-navigator>
+      </div>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        height: inherit;
+        min-height: inherit;
+        --primaryBGColor: var(--black, #000);
+        --secondaryBGColor: #222;
+        --tertiaryBGColor: #333;
+        --primaryTextColor: var(--white, #fff);
+        --primaryCTAFill: #194880;
+        --primaryCTABorder: #c5d1df;
+        --secondaryCTAFill: #333;
+        --secondaryCTABorder: #999;
+        --primaryErrorCTAFill: #e51c26;
+        --primaryErrorCTABorder: #f8c6c8;
+      }
+
+      :host([fullscreen]),
+      ia-item-navigator[viewportinfullscreen] {
+        position: fixed;
+        inset: 0;
+        height: 100vh;
+        min-height: unset;
+      }
+
+      div[slot="theater-main"],
+      div[slot="theater-main"] > * {
+        height: inherit;
+      }
+
+      slot {
+        display: block;
+      }
+
+      .ia-bookreader {
+        background-color: var(--primaryBGColor);
+        position: relative;
+        min-height: inherit;
+        height: inherit;
+      }
+
+      ia-item-navigator {
+        min-height: var(--br-height, inherit);
+        height: var(--br-height, inherit);
+        display: block;
+        width: 100%;
+        color: var(--primaryTextColor);
+        --menuButtonLabelDisplay: block;
+        --menuWidth: 320px;
+        --menuSliderBg: var(--secondaryBGColor);
+        --activeButtonBg: var(--tertiaryBGColor);
+        --subpanelRightBorderColor: var(--secondaryCTABorder);
+        --animationTiming: 100ms;
+        --iconFillColor: var(--primaryTextColor);
+        --iconStrokeColor: var(--primaryTextColor);
+        --menuSliderHeaderIconHeight: 2rem;
+        --menuSliderHeaderIconWidth: 2rem;
+        --iconWidth: 2.4rem;
+        --iconHeight: 2.4rem;
+        --shareLinkColor: var(--primaryTextColor);
+        --shareIconBorder: var(--primaryTextColor);
+        --shareIconBg: var(--secondaryBGColor);
+        --activityIndicatorLoadingDotColor: var(--primaryTextColor);
+        --activityIndicatorLoadingRingColor: var(--primaryTextColor);
+      }
+    `;
+  }
+}
+
+window.customElements.define("ia-bookreader", IaBookReader);

package/src/plugins/plugin.chapters.js

@@ -36,14 +36,12 @@ BookReader.prototype.init = (function(super_) {
             this.updateTOCState(this.firstIndex, this._tocEntries);
           }
         }
-      )
-      $(".BRmobileMenu__tableContents").click(
-        () => {
-          this.updateTOCState(this.firstIndex, this._tocEntries);
-        }
       );
+      $(".BRmobileMenu__tableContents").on("click", () => {
+        this.updateTOCState(this.firstIndex, this._tocEntries);
+      });
     }
-  }
+  };
 })(BookReader.prototype.init);
 
 /**
@@ -60,7 +58,7 @@ BookReader.prototype.addChapter = function(chapterTitle, pageNumber, pageIndex)
     this.jumpToIndex($(event.delegateTarget).data('pageIndex'));
     $('.current-chapter').removeClass('current-chapter');
     $(event.delegateTarget).addClass('current-chapter');
-  }
+  };
   const title = `${chapterTitle} | `;
   const pageStr = `${uiStringPage} ${pageNumber}`;
 
@@ -79,7 +77,7 @@ BookReader.prototype.addChapter = function(chapterTitle, pageNumber, pageIndex)
       .css({ left: percentThrough })
       .appendTo(this.$('.BRnavline'))
       .data({ pageIndex })
-      .hover(event => {
+      .on("mouseenter", event => {
         // remove hover effect from other markers then turn on just for this
         const marker = event.currentTarget;
         const tooltip = marker.querySelector('div');
@@ -91,9 +89,8 @@ BookReader.prototype.addChapter = function(chapterTitle, pageNumber, pageIndex)
         }
         this.$('.BRsearch,.BRchapter').removeClass('front');
         $(event.target).addClass('front');
-      },
-      event => $(event.target).removeClass('front')
-      )
+      })
+      .on("mouseleave", event => $(event.target).removeClass('front'))
       .on('click', jumpToChapter);
 
     //adding clickable properties to mobile chapters
@@ -126,7 +123,7 @@ BookReader.prototype.updateTOC = function(tocEntries) {
   this._tocEntries = tocEntries;
   $('.table-contents-list').children().each((i, el) => {
     tocEntries[i].mobileHTML = el;
-  })
+  });
 };
 
 /**
@@ -162,9 +159,9 @@ BookReader.prototype.addChapterFromEntry = function(tocEntryObject) {
   this.addChapter(chapterStr, tocEntryObject['pagenum'], tocEntryObject.pageIndex);
   this.$('.BRchapter, .BRsearch').each((i, el) => {
     const $el = $(el);
-    $el.hover(
-      () => $el.addClass('front'),
-      () => $el.removeClass('front'));
+    $el
+      .on("mouseenter", () => $el.addClass('front'))
+      .on("mouseleave", () => $el.removeClass('front'));
   });
 };
 
@@ -207,7 +204,7 @@ BookReader.prototype.getOpenLibraryRecord = function () {
         setUpChapterMarkers(data[0]);
       }
     });
-}
+};
 
 // Extend buildMobileDrawerElement with table of contents list
 BookReader.prototype.buildMobileDrawerElement = (function (super_) {
@@ -240,7 +237,7 @@ BookReader.prototype.buildMobileDrawerElement = (function (super_) {
  */
 BookReader.prototype.updateTOCState = function(currIndex, tocEntries) {
   //this function won't have any effects if called before OpenLibrary request is finished
-  if (!tocEntries) {return}
+  if (!tocEntries) {return;}
   $('.current-chapter').removeClass('current-chapter');
   const tocEntriesIndexed = tocEntries.filter((el) => el.pageIndex != undefined).reverse();
   const currChapter = tocEntriesIndexed[tocEntriesIndexed.findIndex(
@@ -248,4 +245,4 @@ BookReader.prototype.updateTOCState = function(currIndex, tocEntries) {
   if (currChapter != undefined) {
     $(currChapter.mobileHTML).addClass('current-chapter');
   }
-}
+};

package/src/plugins/plugin.mobile_nav.js

@@ -25,7 +25,7 @@ const FILTERLIST = [
     filter: "contrast(120%)",
     label: "High contrast"
   },
-]
+];
 
 jQuery.extend(BookReader.defaultOptions, {
   enableMobileNav: true,
@@ -86,15 +86,16 @@ BookReader.prototype.initToolbar = (function (super_) {
       });
 
       //apply filters when checkboxs clicked
-      $drawerEl.find('.BRcheckbox-filters').click(() => applyFilters($drawerEl, this));
+      $drawerEl.find('.BRcheckbox-filters')
+        .on("click", () => applyFilters($drawerEl, this));
 
       // Bind mobile switch buttons
-      $drawerEl.find('.DrawerLayoutButton.one_page_mode').click(
-        () => this.switchMode(this.constMode1up));
-      $drawerEl.find('.DrawerLayoutButton.two_page_mode').click(
-        () => this.switchMode(this.constMode2up));
-      $drawerEl.find('.DrawerLayoutButton.thumbnail_mode').click(
-        () => this.switchMode(this.constModeThumb));
+      $drawerEl.find('.DrawerLayoutButton.one_page_mode')
+        .on("click", () => this.switchMode(this.constMode1up));
+      $drawerEl.find('.DrawerLayoutButton.two_page_mode')
+        .on("click", () => this.switchMode(this.constMode2up));
+      $drawerEl.find('.DrawerLayoutButton.thumbnail_mode')
+        .on("click", () => this.switchMode(this.constModeThumb));
 
       if (this.mobileNavFullscreenOnly) {
         $(document.body).addClass('BRbodyMobileNavEnabledFullscreen');
@@ -178,7 +179,7 @@ BookReader.prototype.buildMobileDrawerElement = function() {
         
       `;
       experimentalHtml = experimentalHtml.concat(checkboxHtml);
-    })
+    });
     experimentalHtml = experimentalHtml.concat("</div>");
   }
 
@@ -284,4 +285,4 @@ const applyFilters = (drawerEl, br) => {
             filter: ${filterStr};
             -webkit-filter: ${filterStr};}`;
   document.body.appendChild(filtersSheet);
-}
+};

package/src/plugins/plugin.resume.js

@@ -37,7 +37,7 @@ BookReader.prototype.getResumeValue = function() {
   const val = BookReader.docCookies.getItem('br-resume');
   if (val !== null) return parseInt(val);
   else return null;
-}
+};
 
 /**
  * Return cookie path using pathname up to /page/... or /mode/...
@@ -49,7 +49,7 @@ BookReader.prototype.getResumeValue = function() {
  */
 BookReader.prototype.getCookiePath = function(urlPathPart) {
   return urlPathPart.match('.+?(?=/page/|/mode/|$)')[0];
-}
+};
 
 /**
  * Sets page resume value, for remembering reader's page
@@ -65,4 +65,4 @@ BookReader.prototype.updateResumeValue = function(index, cookieName) {
   const path = this.options.resumeCookiePath
     || this.getCookiePath(window.location.pathname);
   BookReader.docCookies.setItem(cookieName || 'br-resume', index, ttl, path, null, false);
-}
+};

package/src/plugins/plugin.text_selection.js

@@ -1,7 +1,9 @@
 //@ts-check
+import { createSVGPageLayer } from '../BookReader/PageContainer.js';
 import { isFirefox, isSafari } from '../util/browserSniffing.js';
 import { applyVariables } from '../util/strings.js';
 /** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
+/** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
 
 const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
 
@@ -46,7 +48,7 @@ export class TextSelectionPlugin {
     // Tspans are necessary on Chrome because they prevent newline character after every word when copying
     this.svgParagraphElement = "text";
     this.svgWordElement = "tspan";
-    this.insertNewlines = avoidTspans
+    this.insertNewlines = avoidTspans;
     // Safari has a bug where `pointer-events` doesn't work on `<tspans>`. So
     // there we will set `pointer-events: all` on the paragraph element. We don't
     // do this everywhere, because it's a worse experience. Thanks Safari :/
@@ -144,8 +146,8 @@ export class TextSelectionPlugin {
           this.textSelectingMode(svg);
         }
         else svg.classList.remove("selectingSVG");
-      })
-    })
+      });
+    });
   }
 
   /**
@@ -158,13 +160,13 @@ export class TextSelectionPlugin {
         if (window.getSelection().toString() != "") window.getSelection().removeAllRanges();
       }
       event.stopPropagation();
-    })
+    });
     $(svg).on('mouseup.textSelectPluginHandler', (event) => {
       event.stopPropagation();
       if (window.getSelection().toString() == "") {
         $(svg).off(".textSelectPluginHandler");
         this.defaultMode(svg);      }
-    })
+    });
   }
 
   /**
@@ -175,21 +177,20 @@ export class TextSelectionPlugin {
     /** @type {JQuery<SVGElement>} */
     const $svg = $container.find('svg.textSelectionSVG');
     if (!$svg.length) return;
-    $svg.each((i, s) => this.defaultMode(s))
+    $svg.each((i, s) => this.defaultMode(s));
     this.interceptCopy($container);
   }
 
   /**
-   * @param {number} pageIndex
-   * @param {JQuery} $container
+   * @param {PageContainer} pageContainer
    */
-  async createTextLayer(pageIndex, $container) {
+  async createTextLayer(pageContainer) {
+    const pageIndex = pageContainer.page.index;
+    const $container = pageContainer.$container;
     const $svgLayers = $container.find('.textSelectionSVG');
     if ($svgLayers.length) return;
     const XMLpage = await this.getPageText(pageIndex);
     if (!XMLpage) return;
-    const XMLwidth = $(XMLpage).attr("width");
-    const XMLheight = $(XMLpage).attr("height");
 
     const totalWords = $(XMLpage).find("WORD").length;
     if (totalWords > this.maxWordRendered) {
@@ -197,19 +198,8 @@ export class TextSelectionPlugin {
       return;
     }
 
-    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    svg.setAttribute("viewBox", `0 0 ${XMLwidth} ${XMLheight}`);
+    const svg = createSVGPageLayer(pageContainer.page, 'textSelectionSVG');
     $container.append(svg);
-    svg.setAttribute('class', 'textSelectionSVG');
-    svg.setAttribute('preserveAspectRatio', 'none');
-    $(svg).css({
-      "width": "100%",
-      "position": "absolute",
-      "height": "100%",
-      "top": "0",
-      "left": "0",
-    });
 
     $(XMLpage).find("PARAGRAPH").each((i, paragraph) => {
       // Adding text element for each paragraph in the page
@@ -266,7 +256,7 @@ export class TextSelectionPlugin {
       const paragWordHeight = wordHeightArr[Math.floor(wordHeightArr.length * 0.85)];
       paragSvg.setAttribute("font-size", paragWordHeight.toString());
       svg.appendChild(paragSvg);
-    })
+    });
     this.stopPageFlip($container);
   }
 }
@@ -290,11 +280,9 @@ export class BookreaderWithTextSelection extends BookReader {
   _createPageContainer(index) {
     const pageContainer = super._createPageContainer(index);
     // Disable if thumb mode; it's too janky
-    // index can be -1 for "pre-cover" region
-    // Added checking of lastPageIndex to avoid loop around index value
-    const lastPageIndex = this.getNumLeafs() - 1;
-    if (this.mode !== this.constModeThumb && (index >= 0 && index <= lastPageIndex)) {
-      this.textSelectionPlugin?.createTextLayer(index, pageContainer.$container);
+    // .page can be null for "pre-cover" region
+    if (this.mode !== this.constModeThumb && pageContainer.page) {
+      this.textSelectionPlugin?.createTextLayer(pageContainer);
     }
     return pageContainer;
   }

package/src/plugins/plugin.vendor-fullscreen.js

@@ -56,7 +56,7 @@ if (!isMobile()) {
           $(document.body).append(cboxOverlay).append(cbox);
         }
       });
-    }
+    };
   })(BookReader.prototype.init);
 
   /**
@@ -92,7 +92,7 @@ if (!isMobile()) {
     $(document).off('keyup' + EVENT_NAMESPACE);
 
     this.isFullscreenActive = false;
-    this.updateBrClasses()
+    this.updateBrClasses();
 
     this.resize();
     this.refs.$brContainer.animate({ opacity: 1 }, 400, 'linear');
@@ -233,8 +233,8 @@ export function bindFullscreenChangeListener(
     'moz',
     'ms'
   ];
-  const all_events = $.trim(event + vendor_prefixes.join(event) + event);
-  $(document).bind(all_events, data, fullscreenchangeListener);
+  const all_events = (event + vendor_prefixes.join(event) + event).trim();
+  $(document).on(all_events, data, fullscreenchangeListener);
 }
 
 /**