@internetarchive/bookreader 5.0.0-6-multiple-files → 5.0.0-60

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/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,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-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,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-fullscreen.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-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-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,82 @@
       </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="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 -->

package/BookReaderDemo/demo-vendor-fullscreen.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/ia-multiple-volumes-manifest.js

@@ -0,0 +1,170 @@
+/* eslint-disable no-useless-escape */
+const extraVolOptions = {
+  "isBeta": false,
+  "el": "#BookReader",
+  "enableBookTitleLink": false,
+  "bookUrlText": null,
+  "startFullscreen": false,
+  "initialSearchTerm": null,
+  "onePage": {
+    "autofit": "auto"
+  },
+  "showToolbar": false,
+  "autoResize": false,
+  "enableFSLogoShortcut": true,
+  "enableBookmarks": true,
+  "enableMultipleBooks": true,
+  "purchase_url": "",
+  "multipleBooksList": {
+    "by_subprefix": {
+      "book1/GPORFP": {
+        "url_path": "/details/SubBookTest",
+        "file_subprefix": "book1/GPORFP",
+        "title": "book1/GPORFP.pdf",
+        "file_source": "/book1/GPORFP_jp2.zip",
+        "orig_sort": 0
+      },
+      "subdir/book2/brewster_kahle_internet_archive": {
+        "url_path": "/details/SubBookTest/subdir/book2/brewster_kahle_internet_archive",
+        "file_subprefix": "subdir/book2/brewster_kahle_internet_archive",
+        "title": "subdir/book2/brewster_kahle_internet_archive.pdf",
+        "file_source": "/subdir/book2/brewster_kahle_internet_archive_jp2.zip",
+        "orig_sort": 1
+      },
+      "subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume": {
+        "url_path": "/details/SubBookTest/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume",
+        "file_subprefix": "subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume",
+        "title": "subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume.pdf",
+        "file_source": "/subdir/subsubdir/book3/Rfp008011ResponseInternetArchive-without-resume_jp2.zip",
+        "orig_sort": 2
+      }
+    },
+    "main_dir": "/2/items/SubBookTest"
+  }
+};
+const custvolumesManifest = {
+  "data": {
+    "streamOnly": false,
+    "isRestricted": false,
+    "id": "SubBookTest",
+    "subPrefix": "book1/GPORFP",
+    "olHost": "https://openlibrary.org",
+    "bookUrl": "/details/SubBookTest",
+    "downloadUrls": [
+      [
+        "PDF",
+        "//archive.org/download/SubBookTest/book1/GPORFP.pdf"
+      ],
+      [
+        "ePub",
+        "//archive.org/download/SubBookTest/book1/GPORFP.epub"
+      ],
+      [
+        "Plain Text",
+        "//archive.org/download/SubBookTest/book1/GPORFP_djvu.txt"
+      ],
+      [
+        "DAISY",
+        "//archive.org/download/SubBookTest/book1/GPORFP_daisy.zip"
+      ],
+      [
+        "Kindle",
+        "//archive.org/download/SubBookTest/book1/GPORFP.mobi"
+      ]
+    ]
+  },
+  "brOptions": {
+    "bookId": "SubBookTest",
+    "bookPath": "/2/items/SubBookTest/book1/GPORFP",
+    "imageFormat": "jp2",
+    "server": "ia800304.us.archive.org",
+    "subPrefix": "book1/GPORFP",
+    "zip": "/2/items/SubBookTest/book1/GPORFP_jp2.zip",
+    "bookTitle": "Test with sub-dirs",
+    "ppi": "600",
+    "defaultStartLeaf": 0,
+    "pageProgression": "lr",
+    "vars": {
+      "bookId": "SubBookTest",
+      "bookPath": "/2/items/SubBookTest/book1/GPORFP",
+      "server": "ia800304.us.archive.org",
+      "subPrefix": "book1/GPORFP"
+    },
+    "plugins": {
+      "textSelection": {
+        "enabled": true,
+        "singlePageDjvuXmlUrl": "https://{{server}}/BookReader/BookReaderGetTextWrapper.php?path={{bookPath|urlencode}}_djvu.xml&mode=djvu_xml&page={{pageIndex}}"
+      }
+    },
+    "data": [
+      [
+        {
+          "width": 5213,
+          "height": 6566,
+          "uri": "https://ia800304.us.archive.org/BookReader/BookReaderImages.php?zip=/2/items/SubBookTest/book1/GPORFP_jp2.zip&file=GPORFP_jp2/GPORFP_0000.jp2&id=SubBookTest",
+          "leafNum": 0,
+          "uri_2": {
+            "link": "https://archive.org/download/SubBookTest/book1/GPORFP_jp2.zip/GPORFP_jp2%2FGPORFP_0000.jp2",
+            "base_params": "ext=jpg"
+          },
+          "pageType": "Title",
+          "pageSide": "R"
+        }
+      ]
+    ]
+  },
+  "lendingInfo": {
+    "lendingStatus": null,
+    "userid": 0,
+    "isAdmin": false,
+    "isArchiveOrgLending": false,
+    "isOpenLibraryLending": false,
+    "isLendingRequired": false,
+    "isBrowserBorrowable": false,
+    "isPrintDisabledOnly": false,
+    "isAvailable": false,
+    "isAvailableForBrowsing": false,
+    "userHasBorrowed": false,
+    "userHasBrowsed": false,
+    "userOnWaitingList": false,
+    "userHoldIsReady": false,
+    "userIsPrintDisabled": false,
+    "shouldProtectImages": false,
+    "daysLeftOnLoan": 0,
+    "secondsLeftOnLoan": 0,
+    "loansUrl": "",
+    "bookUrl": "",
+    "loanCount": 0,
+    "totalWaitlistCount": 0,
+    "userWaitlistPosition": -1,
+    "maxLoans": 10,
+    "loanRecord": [
+
+    ]
+  },
+  "metadata": {
+    "identifier": "SubBookTest",
+    "title": "Test with sub-dirs",
+    "mediatype": "texts",
+    "collection": [
+      "opensource",
+      "community"
+    ],
+    "publicdate": "2009-07-08 23:10:10",
+    "addeddate": "2009-07-08 23:09:09",
+    "uploader": "mang@archive.org",
+    "updatedate": "2009-07-08 23:10:24",
+    "updater": "mang@archive",
+    "language": "English",
+    "identifier-access": "http://www.archive.org/details/SubBookTest",
+    "identifier-ark": "ark:/13960/t08w3w21h",
+    "ppi": "600",
+    "ocr": "ABBYY FineReader 8.0",
+    "repub_state": "4",
+    "noindex": "true",
+    "curation": "[curator]validator@archive.org[/curator][date]20140402011645[/date][comment]checked for malware[/comment]",
+    "backup_location": "ia903603_14"
+  }
+};
+
+export { custvolumesManifest, extraVolOptions };

package/BookReaderDemo/immersion-1up.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/immersion-mode.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/toggle_controls.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/view_mode.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 -->