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

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-internetarchive.html

@@ -26,21 +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"/>
 
     <!-- IA scripts -->
     <script src="https://archive.org/bookreader/BookReaderJSIA.js"></script>
 
-</head>
+    <!-- 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" slot="bookreader">
+      <div id="IABookReaderWrapper" slot="theater-main">
         <div id="BookReader" class="BookReader"></div>
       </div>
       <div>
@@ -55,103 +58,65 @@
       </div>
     </ia-bookreader>
   </section>
-  <section style="height: 800px; width: 200px;">
-    <p>placeholder div to allow scrolling</p>
-  </section>
-
-
-  <script id="pageUrl" type="text/javascript"></script>
-
-  <script>
-    // gather params here
-    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');
-
-    // Override options coming from IA
-    BookReader.optionOverrides.imagesBaseURL = '/BookReader/images/';
-
-    const initializeBookReader = (brManifest) => {
-      console.log('initializeBookReader', brManifest);
-      const br = new BookReader();
-      const iaBookManifestUrl = '';
-
-      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: urlParams.view === 'theater',
-        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 */
-      };
-
-      // 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);
-      }
+  <style>
+    .demos {
+      height: 800px;
+      width: inherit;
+      padding: 10px;
     }
-
-    const fetchBookManifestAndInitializeBookreader = async (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())
-
-      initializeBookReader(manifest);
+    .demo {
+      border: 1px solid white;
+      padding: 10px;
     }
-
-    // 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));
+  </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;
+
+      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');
+    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();
+    });
+
+    window.addEventListener('BookReader:PostInit', () => {
+      const placeholder = document.querySelector('#placeholder');
+      placeholder.innerHTML = 'Dependencies are complete, bookreader has loaded';
+    });
   </script>
-
 </body>
 </html>

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-28",
+  "version": "5.0.0-30-a",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "module": "src/BookNavigator/BookNavigator.js",
+  "module": "src/ia-bookreader/ia-bookreader.js",
   "keywords": [
     "online",
     "bookreader",
@@ -26,17 +26,20 @@
   "private": false,
   "dependencies": {
     "@internetarchive/ia-activity-indicator": "^0.0.1",
-    "@internetarchive/ia-icons": "^1.2.2",
-    "@internetarchive/ia-menu-slider": "^1.1.0",
-    "@internetarchive/ia-sharing-options": "^0.1.2",
+    "@internetarchive/ia-item-navigator": "0.0.4-3",
+    "@internetarchive/ia-menu-slider": "^1.1.1",
+    "@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",
     "@internetarchive/icon-edit-pencil": "1.1.5",
     "@internetarchive/icon-magnify-minus": "^1.2.3",
     "@internetarchive/icon-magnify-plus": "^1.2.3",
     "@internetarchive/icon-search": "^1.2.3",
+    "@internetarchive/icon-share": "^1.1.3",
+    "@internetarchive/icon-visual-adjustment": "^1.1.3",
     "@internetarchive/modal-manager": "^0.1.0",
-    "@juggle/resize-observer": "^3.3.1",
+    "@internetarchive/shared-resize-observer": "^0.0.1",
     "lit-element": "^2.4.0",
     "lit-html": "^1.3.0"
   },

package/src/BookNavigator/assets/ia-logo.js

@@ -0,0 +1,17 @@
+import { svg } from 'lit-element';
+
+export default svg`
+  <svg class="ia-logo" width="27" height="30" viewBox="0 0 27 30" xmlns="http://www.w3.org/2000/svg" aria-labelledby="logoTitleID logoDescID">
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">A line drawing of the Internet Archive headquarters building façade.</desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" fill="white">
+        <path d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z" id="path-1"></path>
+      </mask>
+      <use fill="#FFFFFF" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" fill="#FFFFFF">
+        <path d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z" id="swatch"></path>
+      </g>
+    </g>
+  </svg>
+`;