@internetarchive/bookreader 5.0.0-28 → 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/search/plugin.search.js

@@ -61,14 +61,7 @@ BookReader.prototype.setup = (function (super_) {
     /** @type { {[pageIndex: number]: SearchInsideMatchBox[]} } */
     this._searchBoxesByIndex = {};
 
-    if (this.searchView) { return; }
-    this.searchView = new SearchView({
-      br: this,
-      searchCancelledCallback: () => {
-        this._cancelSearch();
-        this.trigger('SearchCanceled', { term: this.searchTerm, instance: this });
-      }
-    });
+    this.searchView = undefined;
   };
 })(BookReader.prototype.setup);
 
@@ -76,7 +69,14 @@ BookReader.prototype.setup = (function (super_) {
 BookReader.prototype.init = (function (super_) {
   return function () {
     super_.call(this);
-
+    // give SearchView the most complete bookreader state
+    this.searchView = new SearchView({
+      br: this,
+      searchCancelledCallback: () => {
+        this._cancelSearch();
+        this.trigger('SearchCanceled', { term: this.searchTerm, instance: this });
+      }
+    });
     if (this.options.enableSearch && this.options.initialSearchTerm) {
       /**
        * this.search() take two parameter

package/src/plugins/url/UrlPlugin.js

@@ -48,7 +48,8 @@ export class UrlPlugin {
       .map(schema => pathParams[schema.name] ? `${schema.name}/${pathParams[schema.name]}` : '')
       .join('/');
 
-    const strStrippedTrailingSlash = `${strPathParams.replace(/\/$/, '')}`;
+    // replace consecutive slashes with a single slash + remove trailing slashes
+    const strStrippedTrailingSlash = `${strPathParams.replace(/\/+/g, '/').replace(/\/+$/, '')}`;
     const concatenatedPath = `${strStrippedTrailingSlash}?${searchParams.toString()}`;
     return searchParams.toString() ? concatenatedPath : `${strStrippedTrailingSlash}`;
   }
@@ -79,9 +80,6 @@ export class UrlPlugin {
     this.urlSchema
       .filter(schema => schema.position == 'path')
       .forEach(schema => {
-        if (!urlStrSplitSlashObj[schema.name] && schema.default) {
-          return urlState[schema.name] = schema.default;
-        }
         const hasPropertyKey = doesKeyExists(urlStrSplitSlashObj, schema.name);
         const hasDeprecatedKey = doesKeyExists(schema, 'deprecated_for') && hasPropertyKey;
 
@@ -139,13 +137,14 @@ export class UrlPlugin {
    */
   pushToAddressBar() {
     const urlStrPath = this.urlStateToUrlString(this.urlState);
+    const concatenatedPath = urlStrPath !== '/' ? urlStrPath : '';
     if (this.urlMode == 'history') {
       if (window.history && window.history.replaceState) {
-        const newUrlPath = `${this.urlHistoryBasePath}${urlStrPath}`;
+        const newUrlPath = `${this.urlHistoryBasePath}${concatenatedPath}`;
         window.history.replaceState({}, null, newUrlPath);
       }
     } else {
-      window.location.replace('#' + urlStrPath);
+      window.location.replace('#' + concatenatedPath);
     }
     this.oldLocationHash = urlStrPath;
   }

package/{src → stat}/BookNavigator/BookNavigator.js

@@ -1,17 +1,14 @@
 import { css, html, LitElement } from 'lit-element';
-import { nothing } from 'lit-html';
-import { ResizeObserver as roPolyfill } from '@juggle/resize-observer';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import SearchProvider from './search/search-provider.js';
 import DownloadProvider from './downloads/downloads-provider.js';
 import VisualAdjustmentProvider from './visual-adjustments/visual-adjustments-provider.js';
 import BookmarksProvider from './bookmarks/bookmarks-provider.js';
-import SharingProvider from '../ItemNavigator/providers/sharing.js';
+import SharingProvider from './sharing.js';
 import VolumesProvider from './volumes/volumes-provider.js';
 import BRFullscreenMgr from './br-fullscreen-mgr.js';
 import { Book } from './BookModel.js';
-import bookLoader from './assets/book-loader.js';
-
-const ResizeObserver = window.ResizeObserver || roPolyfill;
+import iaLogo from './assets/ia-logo.js';
 
 const events = {
   menuUpdated: 'menuUpdated',
@@ -35,6 +32,9 @@ export class BookNavigator extends LitElement {
       menuShortcuts: { type: Array },
       sideMenuOpen: { type: Boolean },
       signedIn: { type: Boolean },
+      sharedObserver: { type: Object },
+      fullscreenBranding: { type: Object },
+      addBranding: { type: Boolean },
     };
   }
 
@@ -54,12 +54,15 @@ export class BookNavigator extends LitElement {
     this.menuShortcuts = [];
     this.sideMenuOpen = false;
     this.signedIn = false;
-
+    this.modal = undefined;
+    this.sharedObserver = undefined;
+    this.fullscreenBranding = iaLogo;
+    this.addBranding = true;
     // Untracked properties
     this.fullscreenMgr = null;
-    this.brResizeObserver = null;
+    this.sharedObserver = null;
     this.model = new Book();
-    this.shortcutOrder = ['volumes', 'search', 'bookmarks'];
+    this.shortcutOrder = ['fullscreen', 'volumes', 'search', 'bookmarks'];
   }
 
   firstUpdated() {
@@ -72,13 +75,9 @@ export class BookNavigator extends LitElement {
     if (!this.bookreader) {
       return;
     }
-    const isFirstSideMenuUpdate = changed.has('sideMenuOpen') && (changed.get('sideMenuOpen') === undefined);
-    if (!isFirstSideMenuUpdate) {
-      // realign image
-      if (this.bookreader.animating) {
-        return;
-      }
-      this.bookreader.resize();
+    if (changed.has('signedIn') || changed.has('isAdmin')) {
+      /** redraw book submenus to propagate property update */
+      this.initializeBookSubmenus();
     }
   }
 
@@ -104,6 +103,15 @@ export class BookNavigator extends LitElement {
    */
   initializeBookSubmenus() {
     const isBookProtected = this.bookreader.options.protected;
+
+    // const baseProviderConfig = {
+    //   modal: this.modal,
+    //   sharedObserver: this.sharedObserver,
+    //   bookreader: this.bookreader,
+    //   signedIn: this.signedIn,
+    //   isAdmin: this.isAdmin,
+    // };
+
     this.menuProviders = {
       search: new SearchProvider(
         /**
@@ -138,7 +146,7 @@ export class BookNavigator extends LitElement {
         bookreader: this.bookreader,
       }),
       share: new SharingProvider(this.book.metadata, this.baseHost, this.itemType, this.bookreader.options.subPrefix),
-      bookmarks: new BookmarksProvider(this.bookmarksOptions, this.bookreader),
+      bookmarks: new BookmarksProvider(this.bookmarksOptions),
     };
 
     // add shortcut for volumes if multipleBooksList exists
@@ -167,10 +175,17 @@ export class BookNavigator extends LitElement {
     const referrerStr = `referer=${encodeURIComponent(location.href)}`;
     return {
       loginUrl: `https://${this.baseHost}/account/login?${referrerStr}`,
+      signedIn: this.signedIn,
       displayMode: this.signedIn ? 'bookmarks' : 'login',
-      showItemNavigatorModal: this.showItemNavigatorModal.bind(this),
-      closeItemNavigatorModal: this.closeItemNavigatorModal.bind(this),
-      onBookmarksChanged: (bookmarks) => {
+      isAdmin: this.isAdmin,
+      modal: this.modal,
+      sharedObserver: this.sharedObserver,
+      bookreader: this.bookreader,
+      onBookmarksChanged: (bookmarks, showSidePanel = false) => {
+        console.log('booknav on bkch', bookmarks, showSidePanel);
+        if (showSidePanel) {
+          this.updateSideMenu('bookmarks', 'open');
+        }
         const method = Object.keys(bookmarks).length ? 'add' : 'remove';
         this[`${method}MenuShortcut`]('bookmarks');
         this.updateMenuContents();
@@ -178,6 +193,42 @@ export class BookNavigator extends LitElement {
     };
   }
 
+  /** Fullscreen Shortcut */
+  addFullscreenShortcut() {
+    const closeFS = {
+      icon: this.fullscreenShortcut,
+      id: 'fullscreen',
+    };
+    this.menuShortcuts.push(closeFS);
+    this.sortMenuShortcuts();
+    this.emitMenuShortcutsUpdated();
+  }
+
+  deleteFullscreenShortcut() {
+    console.log('delete fullscreenshortcut', this.menuShortcuts);
+    const updatedShortcuts = this.menuShortcuts.filter(({ id }) => {
+      return id !== 'fullscreen';
+    });
+    console.log('updatedShortcuts', updatedShortcuts);
+    this.menuShortcuts = updatedShortcuts;
+    this.sortMenuShortcuts();
+    this.emitMenuShortcutsUpdated();
+  }
+
+  closeFullscreen() {
+    this.bookreader.exitFullScreen();
+  }
+
+  get fullscreenShortcut() {
+    return html`
+      <button
+        @click=${() => this.closeFullscreen()}
+        title="Exit fullscreen view"
+      >${this.fullscreenBranding}</button>
+    `;
+  }
+  /** End Fullscreen Shortcut */
+
   /**
    * Open side menu
    * @param {string} menuId
@@ -205,7 +256,7 @@ export class BookNavigator extends LitElement {
     const availableMenus = [volumes, search, bookmarks, visualAdjustments, share].filter((menu) => !!menu);
 
     if (this.shouldShowDownloadsMenu()) {
-      downloads.update(this.downloadableTypes);
+      downloads?.update(this.downloadableTypes);
       availableMenus.splice(1, 0, downloads);
     }
 
@@ -278,6 +329,13 @@ export class BookNavigator extends LitElement {
     this.dispatchEvent(event);
   }
 
+  emitLoadingStatusUpdate(loaded) {
+    const event = new CustomEvent('loadingStateUpdated', {
+      detail: { loaded },
+    });
+    this.dispatchEvent(event);
+  }
+
   /**
    * Core bookreader event handler registry
    *
@@ -286,22 +344,28 @@ export class BookNavigator extends LitElement {
    */
   bindEventListeners() {
     window.addEventListener('BookReader:PostInit', (e) => {
+      console.log('BookReader:PostInit');
       this.bookreader = e.detail.props;
       this.bookReaderLoaded = true;
       this.bookReaderCannotLoad = false;
       this.fullscreenMgr = new BRFullscreenMgr(this.bookreader.el);
 
       this.initializeBookSubmenus();
-      setTimeout(() => this.bookreader.resize(), 0);
-      this.brResizeObserver = new ResizeObserver((elements) => this.reactToBrResize(elements));
-      this.brResizeObserver.observe(this.mainBRContainer);
+      this.startResizeObserver();
+      this.emitLoadingStatusUpdate(true);
     });
     window.addEventListener('BookReader:fullscreenToggled', (event) => {
+      console.log('BookReader:fullscreenToggled');
       const { detail: { props: brInstance = null } } = event;
       if (brInstance) {
         this.bookreader = brInstance;
       }
       this.manageFullScreenBehavior(event);
+      if (this.bookreader.isFullscreenActive) {
+        this.addFullscreenShortcut();
+      } else {
+        this.deleteFullscreenShortcut();
+      }
     }, { passive: true });
     window.addEventListener('BookReader:ToggleSearchMenu', (event) => {
       this.dispatchEvent(new CustomEvent(events.updateSideMenu, {
@@ -309,6 +373,7 @@ export class BookNavigator extends LitElement {
       }));
     });
     window.addEventListener('LendingFlow:PostInit', ({ detail }) => {
+      console.log('LendingFlow:PostInit');
       const {
         downloadTypesAvailable, lendingStatus, isAdmin, previewType,
       } = detail;
@@ -319,6 +384,8 @@ export class BookNavigator extends LitElement {
       this.bookReaderCannotLoad = previewType === 'singlePagePreview';
     });
     window.addEventListener('BRJSIA:PostInit', ({ detail }) => {
+      console.log('BRJSIA:PostInit');
+
       const { isRestricted, downloadURLs } = detail;
       this.bookReaderLoaded = true;
       this.downloadableTypes = downloadURLs;
@@ -332,17 +399,16 @@ export class BookNavigator extends LitElement {
    *  - book animation is happening
    *  - book is in fullscreen (fullscreen is handled separately)
    *
-   * @param { Object } entries - resize observer entries
+   * @param { target: HTMLElement, contentRect: DOMRectReadOnly } entry
    */
-  reactToBrResize(entries = []) {
+  handleResize({ contentRect, target }) {
     const startBrWidth = this.brWidth;
     const { animating } = this.bookreader;
 
-    entries.forEach(({ contentRect, target }) => {
-      if (target === this.mainBRContainer) {
-        this.brWidth = contentRect.width;
-      }
-    });
+    if (target === this.mainBRContainer) {
+      this.brWidth = contentRect.width;
+    }
+
     setTimeout(() => {
       if (startBrWidth && !animating) {
         this.bookreader.resize();
@@ -350,6 +416,17 @@ export class BookNavigator extends LitElement {
     }, 0);
   }
 
+  async startResizeObserver() {
+    if (!this.sharedObserver) {
+      this.sharedObserver = new SharedResizeObserver();
+    }
+
+    this.sharedObserver?.addObserver({
+      handler: this,
+      target: this.mainBRContainer,
+    });
+  }
+
   /**
    * Manages Fullscreen behavior
    * This makes sure that controls are _always_ in view
@@ -357,7 +434,6 @@ export class BookNavigator extends LitElement {
    */
   manageFullScreenBehavior() {
     this.emitFullScreenState();
-
     if (!this.bookreader.isFullscreen()) {
       this.fullscreenMgr.teardown();
     } else {
@@ -376,32 +452,6 @@ export class BookNavigator extends LitElement {
     this.dispatchEvent(event);
   }
 
-  emitShowItemNavigatorModal(e) {
-    this.dispatchEvent(new CustomEvent('showItemNavigatorModal', {
-      detail: e.detail,
-    }));
-  }
-
-  emitCloseItemNavigatorModal() {
-    this.dispatchEvent(new CustomEvent('closeItemNavigatorModal'));
-  }
-
-  showItemNavigatorModal(e) {
-    this.emitShowItemNavigatorModal(e);
-  }
-
-  closeItemNavigatorModal() {
-    this.emitCloseItemNavigatorModal();
-  }
-
-  get loader() {
-    const loader = html`
-      <div class="book-loader">${bookLoader}<div>
-      <h3>Loading viewer</h3>
-    `;
-    return !this.bookReaderLoaded ? loader : nothing;
-  }
-
   get loadingClass() {
     return !this.bookReaderLoaded ? 'loading' : '';
   }
@@ -415,56 +465,13 @@ export class BookNavigator extends LitElement {
     const placeholder = this.bookReaderCannotLoad ? this.itemImage : this.loader;
     return html`<div id="book-navigator" class="${this.loadingClass}">
       ${placeholder}
-      <slot name="bookreader"></slot>
+      <slot name="theater-main"></slot>
     </div>
   `;
   }
 
   static get styles() {
     return css`
-    #book-navigator.loading {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 30vh;
-    }
-
-    #book-navigator .book-loader {
-      width: 30%;
-      margin: auto;
-      text-align: center;
-      color: var(--primaryTextColor);
-    }
-
-    .book-loader {
-      position: relative;
-    }
-
-    .book-loader svg {
-      display: block;
-      width: 60%;
-      max-width: 100px;
-      height: auto;
-      margin: auto;
-    }
-
-    svg * {
-      fill: var(--primaryTextColor);
-    }
-
-    svg .ring {
-      animation: rotate 1.3s infinite linear;
-      transform-origin: 50px 50px;
-      transform-box: fill-box;
-      display: block; // transform won't work on inline style
-    }
-
-    @keyframes rotate {
-      0% {
-        transform: rotate(-360deg);
-      }
-    }
-
     .cover-img {
       max-height: 300px;
     }

package/stat/BookNavigator/assets/bookmark-colors.js

@@ -0,0 +1,15 @@
+import { css } from 'lit-element';
+
+export default css`
+  .blue {
+    --iconFillColor: var(--blueBookmarkColor, #0023f5);
+  }
+
+  .red {
+    --iconFillColor: var(--redBookmarkColor, #eb3223);
+  }
+
+  .green {
+    --iconFillColor: var(--greenBookmarkColor, #75ef4c);
+  }
+`;