@internetarchive/bookreader 5.0.0-29 → 5.0.0-30-c

package/BookReaderDemo/IADemoBr.js

@@ -18,6 +18,9 @@ if (openFullImmersionTheater) {
   iaBookReader.fullscreen = openFullImmersionTheater;
 }
 
+const modal = document.querySelector('modal-manager');
+iaBookReader.modal = modal;
+
 // Override options coming from IA
 BookReader.optionOverrides.imagesBaseURL = '/BookReader/images/';
 

package/BookReaderDemo/demo-internetarchive.html

@@ -26,7 +26,7 @@
     <script src="../BookReader/plugins/plugin.archive_analytics.js"></script>
     <script src="../BookReader/plugins/plugin.text_selection.js"></script>
 
-    <script type="module" src="../BookReader/bookreader-component-bundle.js"></script>
+    <script type="module" src="../BookReader/ia-bookreader-bundle.js"></script>
 
     <link rel="stylesheet" href="BookReaderDemo.css"/>
 
@@ -88,19 +88,17 @@
     <h3>Placeholder div to allow scrolling</h3>
   </div>
 
+  <modal-manager></modal-manager>
   <script >
     // Set up demo things
     const iaBR = document.querySelector('ia-bookreader');
     const toggleLoginBtn = document.querySelector('#toggle-loggedin');
     toggleLoginBtn.addEventListener('click', () => {
-      const itemNav = iaBR.shadowRoot.querySelector('ia-item-navigator');
-      const bookNav = itemNav.shadowRoot.querySelector('book-navigator');
+      const currLoggedIn = iaBR.signedIn;
+      iaBR.signedIn = !currLoggedIn;
 
-      const currLoggedIn = bookNav.signedIn;
-      bookNav.signedIn = !currLoggedIn;
-
-      document.querySelector('#logged-in-status').innerText = bookNav.signedIn ? 'Logged In' : 'Logged Out';
-      console.log("Toggled SignedIn state", bookNav.signedIn, { currLoggedIn })
+      document.querySelector('#logged-in-status').innerText = iaBR.signedIn ? 'Logged In' : 'Logged Out';
+      console.log("Toggled SignedIn state", iaBR.signedIn, { currLoggedIn })
     });
 
     const startFSBtn = document.querySelector('#start-fs');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-29",
+  "version": "5.0.0-30-c",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "module": "src/BookNavigator/book-navigator.js",
+  "module": "src/ia-bookreader/ia-bookreader.js",
   "keywords": [
     "online",
     "bookreader",
@@ -26,9 +26,9 @@
   "private": false,
   "dependencies": {
     "@internetarchive/ia-activity-indicator": "^0.0.1",
-    "@internetarchive/ia-item-navigator": "^0.0.2",
+    "@internetarchive/ia-item-navigator": "0.0.4-3",
     "@internetarchive/ia-menu-slider": "^1.1.1",
-    "@internetarchive/ia-sharing-options": "^0.1.3-3",
+    "@internetarchive/ia-sharing-options": "^0.1.4",
     "@internetarchive/icon-bookmark": "^1.1.3",
     "@internetarchive/icon-collapse-sidebar": "^1.1.0",
     "@internetarchive/icon-dl": "^1.1.3",

package/src/BookNavigator/book-navigator.js

@@ -511,6 +511,13 @@ export class BookNavigator extends LitElement {
 
   static get styles() {
     return css`
+    :host,
+    #book-navigator,
+    slot,
+    slot > * {
+      display: block;
+      height: inherit;
+    }
     .cover-img {
       max-height: 300px;
     }

package/src/BookReader/Mode1Up.js

@@ -44,6 +44,7 @@ export class Mode1Up {
     // appended the element to the DOM
     setTimeout(async () => {
       if (!this.everShown) {
+        console.log('!this.everShown', startLeaf);
         this.mode1UpLit.initFirstRender(startLeaf);
         this.everShown = true;
         await this.mode1UpLit.requestUpdate();

package/src/BookReader/Mode1UpLit.js

@@ -170,6 +170,7 @@ export class Mode1UpLit extends LitElement {
 
   /** @override */
   firstUpdated(changedProps) {
+    console.log('firstUpdatedfirstUpdatedfirstUpdated');
     super.firstUpdated(changedProps);
     this.htmlDimensionsCacher.updateClientSizes();
     this.smoothZoomer.attach();
@@ -181,6 +182,7 @@ export class Mode1UpLit extends LitElement {
   initFirstRender(startIndex) {
     const page = this.book.getPage(startIndex);
     this.scale = this.computeDefaultScale(page);
+    console.log('1uplit init first render', page, startIndex);
   }
 
   /** @override */
@@ -323,6 +325,8 @@ export class Mode1UpLit extends LitElement {
       left: vToW(scrollLeft),
       width: vToW(clientWidth),
     };
+
+    console.log('**** updateVisibleRegion this.visibleRegion', this.visibleRegion);
   }
 
   /**
@@ -368,7 +372,7 @@ export class Mode1UpLit extends LitElement {
   computeDefaultScale(page) {
     // Default to real size if it fits, otherwise default to full width
     const containerWidthIn = this.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth);
-    return Math.min(1, containerWidthIn / (page.widthInches + 2 * this.SPACING_IN));
+    return Math.min(1, containerWidthIn / (page.widthInches + 2 * this.SPACING_IN)) || 1;
   }
 
   computeWorldDimensions() {

package/src/{BookReaderComponent/BookReaderComponent.js → ia-bookreader/ia-bookreader.js}

@@ -10,13 +10,19 @@ import '../BookNavigator/book-navigator.js';
 import { ModalManager } from '@internetarchive/modal-manager';
 import '@internetarchive/modal-manager';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
-export class BookReader extends LitElement {
+
+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 }
+      sharedObserver: { type: Object, attribute: false },
+      modal: { type: Object, attribute: false },
+      loaded: { type: Boolean },
+      menuShortcuts: { type: Array },
+      menuContents: { type: Array },
     };
   }
 
@@ -26,45 +32,104 @@ export class BookReader extends LitElement {
     this.bookreader = undefined;
     this.baseHost = 'https://archive.org';
     this.fullscreen = false;
+    this.signedIn = false;
     /** @type {ModalManager} */
     this.modal = undefined;
     /** @type {SharedResizeObserver} */
-    this.sharedObserver = new SharedResizeObserver();
+    this.sharedObserver = undefined;
+    this.loaded = false;
+    this.menuShortcuts = [];
+    this.menuContents = [];
+    console.log("ia-bookreader constructor", this);
   }
 
-  firstUpdated() {
-    this.createModal();
-  }
+  updated() {
+    if (!this.modal) {
+      this.modal = new ModalManager();
+    }
 
-  /** Creates modal DOM & attaches to `<body>` */
-  createModal() {
-    this.modal = document.createElement(
-      'modal-manager'
-    );
-    document.body.appendChild(this.modal);
+    if (!this.sharedObserver) {
+      this.sharedObserver = new SharedResizeObserver();
+    }
   }
-  /* End Modal management */
+
 
   manageFullscreen(e) {
     const { detail } = e;
     const fullscreen = !!detail.isFullScreen;
     this.fullscreen = fullscreen;
+    this.dispatchEvent(new CustomEvent('fullscreenStatusUpdated', { detail: { 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() {
     return html`
       <div class="ia-bookreader">
         <ia-item-navigator
           ?viewportInFullscreen=${this.fullscreen}
-          @fullscreenToggled=${this.manageFullscreen}
-          .itemType=${'bookreader'}
+          .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-header">
+            <slot name="theater-header"></slot>
+          </div>
           <div slot="theater-main">
-            <slot name="theater-main"></slot>
+            <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>
@@ -75,6 +140,8 @@ export class BookReader extends LitElement {
     return css`
       :host {
         display: block;
+        height: inherit;
+        min-height: inherit;
         --primaryBGColor: var(--black, #000);
         --secondaryBGColor: #222;
         --tertiaryBGColor: #333;
@@ -95,6 +162,15 @@ export class BookReader extends LitElement {
         min-height: unset;
       }
 
+      div[slot="theater-main"],
+      div[slot="theater-main"] > * {
+        height: inherit;
+      }
+
+      slot {
+        display: block;
+      }
+
       .ia-bookreader {
         background-color: var(--primaryBGColor);
         position: relative;
@@ -130,4 +206,4 @@ export class BookReader extends LitElement {
   }
 }
 
-window.customElements.define("ia-bookreader", BookReader);
+window.customElements.define("ia-bookreader", IaBookReader);

package/webpack.config.js

@@ -4,7 +4,7 @@ const webpack = require('webpack');
 
 /** @type {webpack.Configuration} */
 const shared = {
-  mode: 'production',
+  mode: 'development',
 
   watchOptions: {
     ignored: ['BookReader/**', 'node_modules/**', 'tests/**']
@@ -53,7 +53,7 @@ module.exports = [
       'plugins/plugin.tts.js': { import: './src/plugins/tts/plugin.tts.js', dependOn: 'BookReader.js' },
       'plugins/plugin.url.js': { import: './src/plugins/url/plugin.url.js', dependOn: 'BookReader.js' },
       'plugins/plugin.vendor-fullscreen.js': { import: './src/plugins/plugin.vendor-fullscreen.js', dependOn: 'BookReader.js' },
-      'bookreader-component-bundle.js': { import: './src/BookReaderComponent/BookReaderComponent.js', dependOn: 'BookReader.js' }
+      'ia-bookreader-bundle.js': { import: './src/ia-bookreader/ia-bookreader.js', dependOn: 'BookReader.js' }
     },
 
     externals: {

package/BookReader/BookReader.js.LICENSE.txt

@@ -1,117 +0,0 @@
-/*!
-	Colorbox 1.6.4
-	license: MIT
-	http://www.jacklmoore.com/colorbox
-*/
-
-/*!
- * jQuery Color Animations v2.1.2
- * https://github.com/jquery/jquery-color
- *
- * Copyright 2014 jQuery Foundation and other contributors
- * Released under the MIT license.
- * http://jquery.org/license
- *
- * Date: Wed Jan 16 08:47:09 2013 -0600
- */
-
-/*!
- * jQuery UI Effects 1.12.1
- * http://jqueryui.com
- *
- * Copyright jQuery Foundation and other contributors
- * Released under the MIT license.
- * http://jquery.org/license
- */
-
-/*!
- * jQuery UI Keycode 1.12.1
- * http://jqueryui.com
- *
- * Copyright jQuery Foundation and other contributors
- * Released under the MIT license.
- * http://jquery.org/license
- */
-
-/*!
- * jQuery UI Mouse 1.12.1
- * http://jqueryui.com
- *
- * Copyright jQuery Foundation and other contributors
- * Released under the MIT license.
- * http://jquery.org/license
- */
-
-/*!
- * jQuery UI Slider 1.12.1
- * http://jqueryui.com
- *
- * Copyright jQuery Foundation and other contributors
- * Released under the MIT license.
- * http://jquery.org/license
- */
-
-/*!
- * jQuery UI Touch Punch 0.2.3
- *
- * Copyright 2011–2014, Dave Furfero
- * Dual licensed under the MIT or GPL Version 2 licenses.
- *
- * Depends:
- *  jquery.ui.widget.js
- *  jquery.ui.mouse.js
- */
-
-/*!
- * jQuery UI Widget 1.12.1
- * http://jqueryui.com
- *
- * Copyright jQuery Foundation and other contributors
- * Released under the MIT license.
- * http://jquery.org/license
- */
-
-/*! Hammer.JS - v2.0.7 - 2016-04-22
- * http://hammerjs.github.io/
- *
- * Copyright (c) 2016 Jorik Tangelder;
- * Licensed under the MIT license */
-
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-
-/**
- * @license
- * Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-
-/**
-@license
-Copyright (c) 2019 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at
-http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
-http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
-found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
-part of the polymer project is also subject to an additional IP rights grant
-found at http://polymer.github.io/PATENTS.txt
-*/