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

package/BookReaderDemo/BookReaderDemo.css

@@ -16,8 +16,21 @@ body {
     display: none;
 }
 
+body.BRfullscreenActive section.theater {
+    height: 100vh;
+}
+ia-bookreader[fullscreen] {
+    height: unset;
+}
+
+ia-bookreader{
+    --br-height: calc(100vh - 100px);
+    display: block;
+    height: var(--br-height);
+}
+
 .BookReader {
-    height: 600px;
+    height: var(--br-height);
     overflow: hidden;
     margin: 0 auto;
 }

package/BookReaderDemo/IADemoBr.js

@@ -0,0 +1,107 @@
+/* global BookReader, BookReaderJSIAinit */
+
+/**
+ * This is how Internet Archive loads bookreader
+ */
+const urlParams = new URLSearchParams(window.location.search);
+
+const ocaid = urlParams.get('ocaid');
+const openFullImmersionTheater = urlParams.get('view') === 'theater';
+const ui = urlParams.get('ui');
+const autoflip = urlParams.get('autoflip');
+const searchTerm = urlParams.get('q');
+
+const iaBookReader = document.querySelector('ia-bookreader');
+
+if (openFullImmersionTheater) {
+  $(document.body).addClass('BRfullscreenActive');
+  iaBookReader.fullscreen = openFullImmersionTheater;
+}
+
+const modal = document.querySelector('modal-manager');
+iaBookReader.modal = modal;
+
+// Override options coming from IA
+BookReader.optionOverrides.imagesBaseURL = '/BookReader/images/';
+
+const initializeBookReader = (brManifest) => {
+  console.log('initializeBookReader', brManifest);
+  const br = new BookReader();
+
+  const customAutoflipParams = {
+    autoflip: !!autoflip,
+    flipSpeed: urlParams.flipSpeed || 2000,
+    flipDelay: urlParams.flipDelay || 5000
+  };
+
+  const options = {
+    el: '#BookReader',
+    /* Url plugin - IA uses History mode for URL */
+    // commenting these out as demo uses hash mode
+    // keeping them here for reference
+    // urlHistoryBasePath: `/details/{$ocaid}/`,
+    // resumeCookiePath: `/details/{$ocaid}/`,
+    // urlMode: 'history',
+    // Only reflect these params onto the URL
+    // urlTrackedParams: ['page', 'search', 'mode'],
+    /* End url plugin */
+    enableBookTitleLink: false,
+    bookUrlText: null,
+    startFullscreen: openFullImmersionTheater,
+    initialSearchTerm: searchTerm ? searchTerm : '',
+    // leaving this option commented out bc we change given user agent on archive.org
+    // onePage: { autofit: <?=json_encode($this->ios ? 'width' : 'auto')?> },
+    showToolbar: false,
+    /* Multiple volumes */
+    // To show multiple volumes:
+    enableMultipleBooks: false, // turn this on
+    multipleBooksList: [], // populate this  // TODO: get sample blob and tie into demo
+    /* End multiple volumes */
+    enableBookmarks: true, // turn this on
+    enableFSLogoShortcut: true,
+  };
+
+  // we want to show item as embedded when ?ui=embed is in URI
+  if (ui === 'embed') {
+    options.mode = 1;
+    options.ui = 'embed';
+  }
+
+  // we expect this at the global level
+  BookReaderJSIAinit(brManifest.data, options);
+
+  if (customAutoflipParams.autoflip) {
+    br.autoToggle(customAutoflipParams);
+  }
+};
+
+const fetchBookManifestAndInitializeBookreader = async (iaMetadata) => {
+  document.querySelector('input[name="itemMD"]').checked = true;
+  iaBookReader.item = iaMetadata;
+
+  const {
+    metadata: {
+      identifier
+    },
+  } = iaMetadata;
+
+  const locator = `https://archive.org/bookreader/BookReaderJSLocate.php?format=json&subPrefix=&id=${identifier}`;
+  // Todo: move from `locator` to create `iaManifestUrl` url from `iaMetadata`
+  // so we can support multiple volumes
+  // const iaManifestUrl = `https://${server}/BookReader/BookReaderJSIA.php?format=jsonp&itemPath=${dir}&id=${identifier}`;
+
+  const manifest = await fetch(locator)
+    .then(response => response.json());
+  document.querySelector('input[name="bookManifest"]').checked = true;
+
+  initializeBookReader(manifest);
+};
+
+// Temp; Circumvent bug in BookReaderJSIA code
+window.Sentry = null;
+window.logError = function(e) {
+  console.error(e);
+};
+fetch(`https://archive.org/metadata/${ocaid}`)
+  .then(response => response.json())
+  .then(iaMetadata => fetchBookManifestAndInitializeBookreader(iaMetadata));

package/BookReaderDemo/demo-advanced.html

@@ -7,6 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 
@@ -14,7 +15,6 @@
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
     <script src="../BookReader/BookReader.js"></script>
     <script type="text/javascript" src="../BookReader/plugins/plugin.url.js"></script>
-    <script type="text/javascript" src="../BookReader/plugins/plugin.menu_toggle.js"></script>
 
     <!-- Custom CSS overrides -->
     <link rel="stylesheet" href="BookReaderDemo.css"/>

package/BookReaderDemo/demo-autoplay.html

@@ -7,6 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/demo-embed-iframe-src.html

@@ -8,6 +8,7 @@
 
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
 
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/demo-fullscreen-mobile.html

@@ -7,6 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/demo-fullscreen.html

@@ -7,6 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/demo-iiif.html

@@ -5,6 +5,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/demo-internetarchive.html

@@ -8,6 +8,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 
@@ -25,17 +26,24 @@
     <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"/>
-</head>
+
+    <!-- IA scripts -->
+    <script src="https://archive.org/bookreader/BookReaderJSIA.js"></script>
+
+    <!-- IA fetch demo -->
+    <script type="module" src="IADemoBr.js"></script>
+
+  </head>
 
 <body>
-  <section style="width: 100%; overflow: hidden; background-color: black;">
+  <section class="theater" style="width: 100%; overflow: hidden; background-color: black;">
     <ia-bookreader
       baseHost="https://archive.org"
     >
-      <div id="IABookReaderWrapper" class="internal-beta" slot="bookreader">
+      <div id="IABookReaderWrapper" slot="theater-main">
         <div id="BookReader" class="BookReader"></div>
       </div>
       <div>
@@ -50,25 +58,65 @@
       </div>
     </ia-bookreader>
   </section>
-  <section style="height: 800px; width: 200px;">
-    <p>placeholder div to allow scrolling</p>
+  <style>
+    .demos {
+      height: 800px;
+      width: inherit;
+      padding: 10px;
+    }
+    .demo {
+      border: 1px solid white;
+      padding: 10px;
+    }
+  </style>
+  <section class="demos">
+    <div class="demo">
+      <button id="toggle-loggedin">Toggle Logged in view</button>
+      <p>Features behind signed in gate: Bookmarks</p>
+      <p>Logged In Status: <span id="logged-in-status">Logged Out</span></p>
+    </div>
+    <div class="demo">
+      <button id="start-fs">Start at Fullscreen</button>
+    </div>
+    <div class="demo">
+      <h3 id="placeholder">please wait as we are fetching the following: </h3>
+      <input type='checkbox' class='group1' name='itemMD' disabled>Item metadata</input><br>
+      <input type='checkbox' class='group1' name='bookManifest' disabled> Book manifest</input><br>
+    </div>
   </section>
+  <div class="demo">
+    <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 currLoggedIn = iaBR.signedIn;
+      iaBR.signedIn = !currLoggedIn;
 
-  <script id="pageUrl" type="text/javascript"></script>
+      document.querySelector('#logged-in-status').innerText = iaBR.signedIn ? 'Logged In' : 'Logged Out';
+      console.log("Toggled SignedIn state", iaBR.signedIn, { currLoggedIn })
+    });
 
-  <script>
-    var ocaid = location.href.match(/ocaid=([^&#]+)/i)[1];
+    const startFSBtn = document.querySelector('#start-fs');
+    startFSBtn.addEventListener('click', () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.has('view')) {
+        const url = new URL(window.location);
+        url.searchParams.delete('view');
+        window.history.pushState({}, '', url);
+      }
+      urlParams.set('view', 'theater');
+      window.location.search = urlParams.toString();
+    });
 
-    // Override options coming from IA
-    BookReader.optionOverrides.imagesBaseURL = '/BookReader/images/';
-
-    // Temp; Circumvent bug in BookReaderJSIA code
-    window.Sentry = null;
-
-    var script_url = 'https://archive.org/bookreader/BookReaderJSLocate.php?subPrefix=&id=' + ocaid;
-    document.getElementById('pageUrl').src = script_url;
+    window.addEventListener('BookReader:PostInit', () => {
+      const placeholder = document.querySelector('#placeholder');
+      placeholder.innerHTML = 'Dependencies are complete, bookreader has loaded';
+    });
   </script>
-
 </body>
 </html>

package/BookReaderDemo/demo-multiple.html

@@ -7,6 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/demo-preview-pages.html

@@ -8,6 +8,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/demo-simple.html

@@ -7,6 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/demo-vendor-fullscreen.html

@@ -7,6 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/immersion-1up.html

@@ -5,6 +5,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/immersion-mode.html

@@ -7,6 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/toggle_controls.html

@@ -7,6 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/view_mode.html

@@ -7,6 +7,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
 

package/BookReaderDemo/viewmode-cycle.html

@@ -7,10 +7,9 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
+    <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>
 
-    <script src="../BookReader/jquery.bt.min.js"></script>
-
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
     <script src="../BookReader/BookReader.js"></script>

package/CHANGELOG.md

@@ -1,3 +1,117 @@
+# 5.0.0-29
+- import ia-item-navigator for menu management @iisa
+- url plugin: suppress default state on load @dualcnhq
+
+# 5.0.0-28
+Dev: Refactor URLPlugin + sync volumes sorting state to URL @dualcnhq @cdrini
+
+# 5.0.0-27
+Dev: eslint fix for $.browser @homewardgamer
+Fix: cache search inside requests @iisa
+# 5.0.0-26
+Fix: read aloud play/pause button @nsharma123
+Dev: strict keyboard shortcuts @mc2
+Dev: update IA demo page @iisa
+
+# 5.0.0-24
+Fix: book-nav side panel zoom out @mc2
+Dev: refactor zoom code @mc2
+
+# 5.0.0-23
+Fix: Darken scrollbars in Safari @pezvi
+Fix: Bookmarks service calls when reader is logged in @mc2
+Dev: Move jest tests into separate directory @cdrini
+
+# 5.0.0-22
+- Dev: remove deprecated embed nav view, use standard default @iisa
+
+# 5.0.0-21
+- Dev: Toggle view=theater in fullscreen @mc2
+
+# 5.0.0-20
+- Feature: Add voice selection dropdown to ReadAloud! @mekarpeles
+- Dev: Make jest support root-level imports with "@" @cdrini
+- Dev: Make it easy to run e2e tests on archive.org/browserstack @cdrini
+
+# 5.0.0-19
+- Dev: Refactor dragscrollable from a jquery plugin to a JS class @cdrini
+- Dev: Fix jquery eslint errors @cdrini
+- Dev: Replace deprecated babel-eslint with successor @cdrini
+- Fix: BR not working on iOS 9 / iOS 10! @cdrini, @iisa
+    - Added webcomponents, ResizeObserver polyfill
+    - ES5-ify lit node_modules
+
+# 5.0.0-18
+- Dev: Update a number of dependencies @cdrini
+- Dev: Added eslint-plugin-no-jquery @soham4abc
+- Feature: Add continuous pinch zooming for touch screens and trackpads! @cdrini
+    - This is a _big_ change to the codebase. It involved rewriting 1 up mode in LitElement. This means that BookReader now need webcomponents to function.
+    - Breaking changes (unlikely to be used by anyone):
+        - Most Mode1Up Bookreader global functions removed (unlikely to be used): `drawLeafsOnePage`, `onePageGetAutofitWidth`, `onePageGetAutofitHeight`, `onePageGetPageTop`, `onePageCalculateReductionFactors`, `centerX1up`, `centerY1up`
+        - Some Mode2Up cleanups: Removed `setClickHandler2UP`, `setMouseHandlers2UP`
+        - [Web components](https://caniuse.com/custom-elementsv1) now must be supported
+        - Reduction factors options no longer applies to 1up
+
+# 5.0.0-17
+- Fix: focus in a textarea disables keyboard shortcuts @cdrini
+
+# 5.0.0-16
+- Dev: remove unused menu toggle plugin @iisa
+- Fix: Book nav loader safari update @iisa
+
+# 5.0.0-15
+- Fix: Typing -/+ in search box no longer zooms @cdrini
+- Dev: Add script for updating dev deps @cdrini
+- Refactor/Fix: Convert search/TTS highlights to use SVG layer @cdrini
+    - Fix TTS highlights not positioned correctly in Mode1Up
+- Breaking changes (unlikely these are used by anyone):
+    - Remove public method `BookReader.prototype.keyboardNavigationIsDisabled`
+    - Remove public method `BookReader.util.sleep`
+    - Remove public method `BookReader.prototype.updateSearchHilites1UP`
+    - Remove public method `BookReader.prototype.updateSearchHilites2UP`
+    - Remove public attribute `BookReader.prototype.ttsHilites`
+
+# 5.0.0-14
+- Fix: Url search param `q=` updates dynamically @nsharma123
+- Fix: Downloads menu text updates @dualcnhq
+- Fix: Volumes updates - icons, labelling, open menu onload @iisa
+
+# 5.0.0-13
+- Enhancement: Add neutral state for sorting volumes @dualcnhq
+- Enhancement: Update subfiles/volumes title sorting logic by filename -> title_asc -> title_desc order then back to filename @dualcnhq
+- Fix: Volume item index count display @dualcnhq
+
+
+# 5.0.0-12
+- Fix: new side panel: sortable multiple volumes @dualcnhq @iisa
+- Fix: sharing side panel can share subfile/volume @iisa
+
+# 5.0.0-11
+- Fix: standardize button style for download panel @nsharma123
+# 5.0.0-10
+- Fix: Make 1up default to full width (up to real world size) @cdrini
+- Fix: Remove "page" from toolbar @cdrini
+- Dev: Update menu slider @iisa
+- Dev: Add semi-colons eslint rule @iisa
+
+# 5.0.0-9
+- Fix: search-inside results check for page's index via `leafNum` @nsharma123
+# 5.0.0-8
+- Fix: cancel search fix naming var @iisa
+
+# 5.0.0-7
+- Fix: cancel search @iisa
+- Dev: remove dead css @cdrini
+- Dev: GHA node_modules caching @cdrini
+# 5.0.0-6
+- Fix: Fullscreen toggle sets/unsets animating flag @iisa
+# 5.0.0-5
+- Fix: Book Nav: resize only when bookreader is not animating @iisa
+- Fix: Web components register themselves at EOF @iisa
+- Dev: update dependencies with dependabot @drini
+# 5.0.0-4
+- Dev: update bookmarks login archive_analytics @iisa @dualcnhq
+
 # 5.0.0-3
 - Fix: bookmarks panel has login CTA @dualcnhq @iisa
 

package/babel.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: "> 2%, ie 11, edge 14, samsung > 9, OperaMini all, UCAndroid > 12, Safari >= 9",
+        useBuiltIns: "usage",
+        corejs: 3
+      }
+    ]
+  ],
+  plugins: [
+    ["@babel/plugin-proposal-decorators", {decoratorsBeforeExport: true}],
+    ["@babel/plugin-proposal-class-properties", {loose: true}],
+    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
+  ]
+};

package/index.html

@@ -18,12 +18,15 @@
       <li><a href="BookReaderDemo/demo-preview-pages.html">Preview Pages</a></li>
       <li><a href="BookReaderDemo/demo-embed.html">Embed</a></li>
       <li><a href="BookReaderDemo/demo-multiple.html">Multiple on same page</a></li>
+      <!-- plugin.search.js -->
       <li><a href="BookReaderDemo/demo-internetarchive.html?ocaid=theworksofplato01platiala">From Internet Archive</a></li>
+      <!-- plugin.search.js -->
       <li><a href="BookReaderDemo/demo-internetarchive.html?ocaid=adventuresofoli00dick">From Internet Archive - a book with CHAPTERS</a></li>
       <li><a href="BookReaderDemo/demo-iiif.html">IIIF</a></li>
       <li><a href="BookReaderDemo/demo-autoplay.html">Autoplay (kiosk mode)</a></li>
       <li><a href="BookReaderDemo/demo-plugin-menu-toggle.html">Plugin: Full screen menu toggle</a></li>
       <li><a href="BookReaderDemo/immersion-mode.html">Start in immersion (fullscreen) mode</a></li>
+      <!-- plugin.search.js -->
       <li><a href="BookReaderDemo/immersion-1up.html">Start in immersion mode on 1up default item</a></li>
       <li><a href="BookReaderDemo/viewmode-cycle.html">Replace view mode buttons with view mode cycler</a></li>
      </ul>

package/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "src/**/*.js",
+    "tests/**/*.js",
+  ],
+  "exclude": [
+    "node_modules",
+    "BookReader"
+  ]
+}