@internetarchive/bookreader 5.0.0-7-multiple-files → 5.0.0-70

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,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;
 }
-
-@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

@@ -5,7 +5,8 @@
     <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 -->

package/BookReaderDemo/demo-iiif.js

@@ -11,7 +11,6 @@ var br = new BookReader({
 
     // Override the path used to find UI images
     imagesBaseURL: '../BookReader/images/',
-    enableMobileNav: false,
 });
 
 br.IIIF({

package/BookReaderDemo/demo-internetarchive.html

@@ -7,8 +7,14 @@
     <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 -->
@@ -25,17 +31,21 @@
     <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>
+
+  </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="main">
         <div id="BookReader" class="BookReader"></div>
       </div>
       <div>
@@ -50,25 +60,211 @@
       </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">
+    <details class="demo">
+      <summary>Test books</summary>
+      <ul>
+        <li>
+          Misc English book
+          <ul>
+            <li>
+              <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=countofmontecris00duma_7">
+                <i>The Count of Monte-Cristo</i> by Alexandre Dumas
+              </a>
+            </li>
+            <li>
+              <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=driitaleofdaring00bachuoft">
+                <i>D’ri and I</i> by Irving Bacheller
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          Misc non-English book (<a href="https://archive.org/search?query=%21language%3Aeng&sort=-week&and%5B%5D=lending%3A%22is_readable%22&and%5B%5D=mediatype%3A%22texts%22">Search for more</a>)
+          <ul>
+            <li>
+              French: <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=lecomtedemontecr01dumauoft">
+                <i>Le Comte de Monte-Cristo</i> by Alexandre Dumas
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          Right-to-left book (<a href="https://archive.org/search?query=page-progression%3Arl&sort=-week&and%5B%5D=lending%3A%22is_readable%22&and%5B%5D=mediatype%3A%22texts%22">Search for more</a>)
+          <ul>
+            <li>
+              <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=gendaitankashu00meijuoft">
+                <i>Gendai tanka shu</i> by Meiji, Emperor of Japan
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          Newspaper with columns
+          <ul>
+            <li>
+              <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=Crusader-Vol_28_Nos_1-20_Sept_1986-April_1987">
+                Crusader-Vol_28_Nos_1-20_Sept_1986-April_1987
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          Text Selection
+          <ul>
+            <li>
+              OCR with spaces inside each <code>&lt;WORD&gt;</code> element
+              <ul>
+                <li><a href="/BookReaderDemo/demo-internetarchive.html?ocaid=theworksofplato01platiala">
+                  <i>The Works of Plato</i> by Plato
+                </a></li>
+              </ul>
+            </li>
+            <li>
+              Weird font-sizes/indents
+              <ul>
+                <li><a href="/BookReaderDemo/demo-internetarchive.html?ocaid=cihm_58393#page/n3">
+                  Microfilm poster thing
+                </a></li>
+              </ul>
+            </li>
+            <li>
+              Book with short lines
+              <ul>
+                <li>
+                  <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=countofmontecris00duma_7#page/261/mode/2up">
+                    <i>The Count of Monte-Cristo</i>, p.261, second last line
+                  </a>
+                </li>
+              </ul>
+            </li>
+            <li>
+              Book with double-spaced lines
+              <ul>
+                <li>
+                  <a href="/BookReaderDemo/demo-internetarchive.html?ocaid=calnevpipelineex02unit#page/n93/mode/2up">
+                    calnevpipelineex02unit
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li>
+          Chapters
+          <ul>
+            <li>
+              Normal book with chapters
+              <ul>
+                <li><a href="/BookReaderDemo/demo-internetarchive.html?ocaid=adventureofsherl0000unse">
+                  <i>The Adventures of Sherlock Holmes</i> by Arthur Conan Doyle
+                </a></li>
+                <li><a href="/BookReaderDemo/demo-internetarchive.html?ocaid=jalna00dela">
+                  <i>Jalna</i> by Mazo de la Roche
+                </a></li>
+              </ul>
+            </li>
+            <li>
+              Book preview
+              <ul>
+                <li><a href="/BookReaderDemo/demo-internetarchive.html?ocaid=peoplewareproduc00dema_0">
+                  <i>Peopleware</i> by Tom DeMarco and Timothy Lister
+                </a></li>
+                <li><a href="/BookReaderDemo/demo-internetarchive.html?ocaid=passionforbooksb00rabi">
+                  <i>A Passion for Books</i>
+                </a></li>
+              </ul>
+            </li>
+            <li>
+              Book with levelled chapters
+              <ul>
+                <li><a href="/BookReaderDemo/demo-internetarchive.html?ocaid=notredamedepar01hugo">
+                  <i>Notre-Dame de Paris: Tome Premier</i> par Victor Hugo
+                </a></li>
+                <li><a href="/BookReaderDemo/demo-internetarchive.html?ocaid=alanturingenigma0000hodg">
+                  <i>Alan Turing: The Enigma</i> by Andrew Hodges
+                </a></li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </details>
+    <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="show-lcp">LCP Download option</button>
+    </div>
+    <div class="demo">
+      <button id="multi-volume">Multiple books</button>
+    </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>
 
+  <!-- Certain features, like Bookmarks, use modal-manager to draw their interface -->
+  <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>
-
-  <script>
-    var ocaid = location.href.match(/ocaid=([^&#]+)/i)[1];
+      document.querySelector('#logged-in-status').innerText = iaBR.signedIn ? 'Logged In' : 'Logged Out';
+      console.log("Toggled SignedIn state", iaBR.signedIn, { currLoggedIn })
+    });
 
-    // Override options coming from IA
-    BookReader.optionOverrides.imagesBaseURL = '/BookReader/images/';
+    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();
+    });
 
-    // Temp; Circumvent bug in BookReaderJSIA code
-    window.Sentry = null;
+    window.addEventListener('BookReader:PostInit', () => {
+      const placeholder = document.querySelector('#placeholder');
+      placeholder.innerHTML = 'Dependencies are complete, bookreader has loaded';
+    });
 
-    var script_url = 'https://archive.org/bookreader/BookReaderJSLocate.php?subPrefix=&id=' + ocaid;
-    document.getElementById('pageUrl').src = script_url;
+    // analytics stub
+    window.archive_analytics = {
+      send_event_no_sampling: (category, action, label) => {}, //console.log('~~~ NO SAMPLE EVENT CALLED: ', { category, action, label }),
+      send_event: (category, action, label) => {}, //console.log('~~~ send_event SAMPLE EVENT CALLED: ', { category, action, label }),
+      send_ping: (category, action, label) => {}, //console.log('~~~ send_ping SAMPLE EVENT CALLED: ', { category, action, label }),
+    }
   </script>
 
+  <!-- IA fetch demo -->
+  <script type="module" src="IADemoBr.js"></script>
 </body>
 </html>

package/BookReaderDemo/demo-multiple.html

@@ -7,7 +7,8 @@
     <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 -->

package/BookReaderDemo/demo-preview-pages.html

@@ -8,7 +8,8 @@
     <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 -->

package/BookReaderDemo/demo-simple.html

@@ -7,7 +7,8 @@
     <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 -->