@internetarchive/bookreader 5.0.0-8 → 5.0.0-80

package/BookReaderDemo/BookReaderDemo.css

@@ -2,11 +2,13 @@
  * Custom overrides for BookReader Demo.
  */
 html {
+    /** This must be set because the nav menu uses rem and sets the fonts really big? */
     font-size: 10px;
     font-family: sans-serif;
 }
 
 body {
+    font-size: 16px;
     background-color: #939598;
     margin: 0px;
 }
@@ -16,26 +18,23 @@ 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;
+    --br-height: calc(100vh - 100px);
+    --new-height: calc(var(--br-height) - 20px); 
+    height: var(--br-height);
     overflow: hidden;
     margin: 0 auto;
 }
-
-@media only screen and (max-width: 799px) {
-    body.BRbodyMobileNavEnabled {
-        margin: 0;
-        width: 100%;
-        overflow: hidden;
-    }
-    .BRbodyMobileNavEnabled .BookReader {
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        position: absolute;
-        height: 100%;
-        margin: 0;
-        width: 100%;
-    }
-  }

package/BookReaderDemo/BookReaderJSAdvanced.js

@@ -92,9 +92,6 @@ var options = {
     {label: 'Author', value: 'Internet Archive'},
     {label: 'Demo Info', value: 'This demo shows how one could use BookReader with their own content.'},
   ],
-  // This toggles the mobile drawer (not shown in 'embed' mode)
-  enableMobileNav: false,
-  mobileNavTitle: 'BookReader demo',
 
   // Override the path used to find UI images
   imagesBaseURL: '../BookReader/images/',

package/BookReaderDemo/BookReaderJSAutoplay.js

@@ -8,6 +8,7 @@ function instantiateBookReader(selector, extraOptions) {
   selector = selector || '#BookReader';
   extraOptions = extraOptions || {};
   var options = {
+    ppi: 100,
     data: [
       [
         { width: 800, height: 1200,
@@ -52,5 +53,7 @@ function instantiateBookReader(selector, extraOptions) {
   $.extend(options, extraOptions);
   var br = new BookReader(options);
   br.init();
-  br.autoToggle(options);
+  setTimeout(function() {
+    br.autoToggle(options);
+  }, 0);
 }

package/BookReaderDemo/BookReaderJSSimple.js

@@ -8,6 +8,7 @@ function instantiateBookReader(selector, extraOptions) {
   selector = selector || '#BookReader';
   extraOptions = extraOptions || {};
   var options = {
+    ppi: 100,
     data: [
       [
         { width: 800, height: 1200,

package/BookReaderDemo/IADemoBr.js

@@ -0,0 +1,147 @@
+/* global BookReader, BookReaderJSIAinit */
+import { extraVolOptions, custvolumesManifest } from './ia-multiple-volumes-manifest.js';
+
+/**
+ * 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');
+
+const downloadListWithLCP = [
+  [
+    "lcpPDF",
+    "link to lcp pdf"
+  ],
+  [
+    "lcpEPUB",
+    "link to lcp epub"
+  ]
+];
+
+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 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);
+
+  const isRestricted = brManifest.data.isRestricted;
+  window.dispatchEvent(new CustomEvent('contextmenu', { detail: { isRestricted } }));
+  if (customAutoflipParams.autoflip) {
+    window.br.autoToggle(customAutoflipParams);
+  }
+};
+
+window.initializeBookReader = initializeBookReader;
+
+const showLCP = document.querySelector('#show-lcp');
+showLCP.addEventListener('click', async () => {
+  const iaBr = document.querySelector('ia-bookreader');
+  const bookNav = iaBr.shadowRoot.querySelector('book-navigator');
+
+  bookNav.downloadableTypes = downloadListWithLCP;
+
+  bookNav.updateMenuContents();
+  await bookNav.updateComplete;
+});
+
+const multiVolume = document.querySelector('#multi-volume');
+multiVolume.addEventListener('click', () => {
+  // remove everything
+  $('#BookReader').empty();
+  delete window.br;
+  // and re-mount with a new book
+  BookReaderJSIAinit(custvolumesManifest, extraVolOptions);
+});
+
+
+const fetchBookManifestAndInitializeBookreader = async (iaMetadata) => {
+  document.querySelector('input[name="itemMD"]').checked = true;
+  iaBookReader.item = iaMetadata;
+
+  const jsiaParams = {
+    format: 'jsonp',
+    itemPath: iaMetadata.dir,
+    id: iaMetadata.metadata.identifier,
+    server: iaMetadata.server,
+  };
+
+  const jp2File = iaMetadata.files.find(f => f.name.endsWith('_jp2.zip'))
+  if (jp2File) {
+    jsiaParams.subPrefix = jp2File.name.replace('_jp2.zip', '');
+  }
+
+  const iaManifestUrl = `https://${iaMetadata.server}/BookReader/BookReaderJSIA.php?${
+    new URLSearchParams(jsiaParams)
+  }`;
+
+  const manifest = await fetch(iaManifestUrl).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,14 +7,14 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
-    <script src="../BookReader/jquery-1.10.1.js"></script>
+    <script src="../BookReader/webcomponents-bundle.js"></script>
+    <script src="../BookReader/jquery-3.js"></script>
 
 
     <!-- BookReader and plugins -->
     <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,15 +7,14 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
-    <script src="../BookReader/jquery-1.10.1.js"></script>
+    <script src="../BookReader/webcomponents-bundle.js"></script>
+    <script src="../BookReader/jquery-3.js"></script>
 
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
     <script src="../BookReader/BookReader.js"></script>
 
-    <!-- Mobile nav plugin -->
-    <script src="../BookReader/plugins/plugin.mobile_nav.js"></script>
     <!-- Autoplay plugin -->
     <script src="../BookReader/plugins/plugin.autoplay.js"></script>
 

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

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

package/BookReaderDemo/demo-fullscreen-mobile.html

@@ -7,16 +7,14 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
-    <script src="../BookReader/jquery-1.10.1.js"></script>
+    <script src="../BookReader/webcomponents-bundle.js"></script>
+    <script src="../BookReader/jquery-3.js"></script>
 
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
     <script src="../BookReader/BookReader.js"></script>
 
-    <!-- Mobile nav plugin -->
-    <script src="../BookReader/plugins/plugin.mobile_nav.js"></script>
-
     <!-- URL-changing plugin -->
     <script src="../BookReader/plugins/plugin.url.js"></script>
 
@@ -30,7 +28,7 @@ html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: grey;
   <div id="BookReader"></div>
   <script type="text/javascript" src="BookReaderJSSimple.js"></script>
   <script>
-    instantiateBookReader('#BookReader', {mobileNavFullscreenOnly: true});
+    instantiateBookReader('#BookReader');
 </script>
 </body>
 </html>

package/BookReaderDemo/demo-fullscreen.html

@@ -7,16 +7,14 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- JS dependencies -->
-    <script src="../BookReader/jquery-1.10.1.js"></script>
+    <script src="../BookReader/webcomponents-bundle.js"></script>
+    <script src="../BookReader/jquery-3.js"></script>
 
 
     <!-- BookReader and plugins -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
     <script src="../BookReader/BookReader.js"></script>
 
-    <!-- Mobile nav plugin -->
-    <script src="../BookReader/plugins/plugin.mobile_nav.js"></script>
-
     <!-- URL-changing plugin -->
     <script src="../BookReader/plugins/plugin.url.js"></script>
 

package/BookReaderDemo/demo-iiif.html

@@ -4,31 +4,118 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <!-- WC dependencies -->
+    <script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2Ces5%2CglobalThis"></script>
+    <script type="text/javascript" src="https://unpkg.com/lit@2.1.2/polyfill-support.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/webcomponents-bundle.js"></script>
+
+
     <!-- JS dependencies -->
-    <script src="../BookReader/jquery-1.10.1.js"></script>
+    <script src="../BookReader/webcomponents-bundle.js"></script>
+    <script src="../BookReader/jquery-3.js"></script>
 
 
     <!-- BookReader -->
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
     <script src="../BookReader/BookReader.js"></script>
+    <script src="../BookReader/plugins/plugin.iiif.js"></script>
+    <script src="../BookReader/plugins/plugin.url.js"></script>
+
+    <script type="module" src="../BookReader/ia-bookreader-bundle.js"></script>
 
     <!-- Custom CSS overrides -->
     <link rel="stylesheet" href="BookReaderDemo.css"/>
 
+    <style>
+        body > section { padding: 0 10px; }
+    </style>
 </head>
 <body>
 
-<div id="BookReader">
-    Internet Archive BookReader Demo<br/>
-    <noscript>
-    <p>
-        The BookReader requires JavaScript to be enabled. Please check that your browser supports JavaScript and that it is enabled in the browser settings.  You can also try one of the <a href="https://archive.org/details/goodytwoshoes00newyiala"> other formats of the book</a>.
-    </p>
-    </noscript>
-</div>
-
-<script src="IIIFBookReader.js"></script>
-<script src="demo-iiif.js"></script>
+    <ia-bookreader>
+      <div id="IABookReaderWrapper" slot="main">
+        <div id="BookReader" class="BookReader"></div>
+      </div>
+      <div>
+        Internet Archive BookReader Demo<br />
+        <noscript>
+          <p>
+            The BookReader requires JavaScript to be enabled. Please check that
+            your browser supports JavaScript and that it is enabled in the
+            browser settings.
+          </p>
+        </noscript>
+      </div>
+    </ia-bookreader>
+
+<hr />
+
+<section>
+    <form id="manifestForm">
+        Try another manifest: <input type="url" id="manifest"
+            value="https://view.nls.uk/manifest/2423/3907/242339078/manifest.json" size="60">
+        <input type="submit" value="Go">
+    </form>
+
+    <details open>
+        <summary>Test books</summary>
+        <ul>
+            <li>
+                Version 2.0 of the IIIF Presentation API
+                <ul>
+                    <li>
+                        <a
+                            href="/BookReaderDemo/demo-iiif.html?manifest=https%3A%2F%2Fview.nls.uk%2Fmanifest%2F2423%2F3907%2F242339078%2Fmanifest.json">
+                            https://view.nls.uk/manifest/2423/3907/242339078/manifest.json
+                        </a>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                Version 3.0 of the IIIF Presentation API
+                <ul>
+                    <li>
+                        <a
+                            href="/BookReaderDemo/demo-iiif.html?manifest=https%3A%2F%2Fiiif.archive.org%2Fiiif%2F3%2Fplatowithenglish04platuoft%2Fmanifest.json">
+                            https://iiif.archive.org/iiif/3/platowithenglish04platuoft/manifest.json
+                        </a>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <a href="https://iiif.io/guides/finding_resources/">Find more books at iiif.io</a>
+            </li>
+        </ul>
+    </details>
+</section>
+
+<script>
+    const manifestInForm = document.getElementById('manifest').value;
+    const manifestInUrl = new URL(window.location.href).searchParams.get('manifest');
+    if (manifestInUrl) {
+        document.getElementById('manifest').value = manifestInUrl;
+    }
+
+    document.getElementById('manifestForm').addEventListener('submit', function (event) {
+        event.preventDefault();
+        window.location.search = `?manifest=${encodeURIComponent(document.getElementById('manifest').value)}`;
+    });
+
+    fetch(manifestInUrl || manifestInForm)
+        .then(response => response.json())
+        .then(manifest => {
+            window.br = new BookReader({
+                plugins: {
+                    iiif: {
+                        manifest: manifest
+                    }
+                }
+            });
+
+            // Let's go!
+            br.init();
+        });
+</script>
 
 </body>
 </html>