internetarchive · cdrini · Feb 29, 2024 · Mar 8, 2024 · Mar 8, 2024 · Mar 8, 2024
diff --git a/BookReaderDemo/BookReaderDemo.css b/BookReaderDemo/BookReaderDemo.css
@@ -13,28 +13,7 @@ body {
     margin: 0px;
 }
 
-/* Hide print and embed functionality */
-.BRtoolbar .embed, .print {
-    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 {
-    --br-height: calc(100vh - 100px);
-    --new-height: calc(var(--br-height) - 20px); 
-    height: var(--br-height);
-    overflow: hidden;
-    margin: 0 auto;
+ia-bookreader, .BookReader {
+    /** Set the size you want bookreader to be */
+    height: calc(100vh - 100px);
 }
diff --git a/BookReaderDemo/demo-iiif.html b/BookReaderDemo/demo-iiif.html
@@ -33,9 +33,7 @@
 <body>
 
     <ia-bookreader>
-      <div id="IABookReaderWrapper" slot="main">
-        <div id="BookReader" class="BookReader"></div>
-      </div>
+      <div id="BookReader" class="BookReader" slot="main"></div>
       <div>
         Internet Archive BookReader Demo<br />
         <noscript>

diff --git a/BookReaderDemo/demo-internetarchive.html b/BookReaderDemo/demo-internetarchive.html
@@ -41,13 +41,9 @@
   </head>
 
 <body>
-  <section class="theater" style="width: 100%; overflow: hidden; background-color: black;">
-    <ia-bookreader
-      baseHost="archive.org"
-    >
-      <div id="IABookReaderWrapper" slot="main">
-        <div id="BookReader" class="BookReader"></div>
-      </div>
+  <section class="theater">
+    <ia-bookreader baseHost="archive.org">
+      <div id="BookReader" class="BookReader" slot="main"></div>
       <div>
         Internet Archive BookReader Demo<br />
         <noscript>

diff --git a/README.md b/README.md
@@ -39,50 +39,94 @@ And then open `http://localhost:8000/BookReaderDemo/demo-simple.html`.
 
 ## Usage
 
-Here is a short example.
-
-```js
-// Create the BookReader object
-var options = {
-  data: [
-    [
-      { width: 800, height: 1200,
-        uri: '//archive.org/download/BookReader/img/page001.jpg' },
-    ],
-    [
-      { width: 800, height: 1200,
-        uri: '//archive.org/download/BookReader/img/page002.jpg' },
-      { width: 800, height: 1200,
-        uri: '//archive.org/download/BookReader/img/page003.jpg' },
-    ],
-    [
-      { width: 800, height: 1200,
-        uri: '//archive.org/download/BookReader/img/page004.jpg' },
-      { width: 800, height: 1200,
-        uri: '//archive.org/download/BookReader/img/page005.jpg' },
-    ]
-  ],
-
-  bookTitle: 'Simple BookReader Presentation',
-
-  // thumbnail is optional, but it is used in the info dialog
-  thumbnail: '//archive.org/download/BookReader/img/page014.jpg',
-
-  // Metadata is optional, but it is used in the info dialog
-  metadata: [
-    {label: 'Title', value: 'Open Library BookReader Presentation'},
-    {label: 'Author', value: 'Internet Archive'},
-    {label: 'Demo Info', value: 'This demo shows how one could use BookReader with their own content.'},
-  ],
-
-  ui: 'full', // embed, full (responsive)
-
-};
-var br = new BookReader(options);
-
-// Let's go!
-br.init();
-
+Here is an example.
+
+```html
+<!-- WC dependencies/polyfills -->
+<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/[email protected]/polyfill-support.js"></script>
+<script type="text/javascript"
+  src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
+
+<!-- JS dependencies -->
+<script src="https://unpkg.com/@internetarchive/[email protected]/BookReader/webcomponents-bundle.js"></script>
+<script src="https://unpkg.com/@internetarchive/[email protected]/BookReader/jquery-3.js"></script>
+
+<!-- BookReader and any plugins -->
+<link rel="stylesheet" href="https://unpkg.com/@internetarchive/[email protected]/BookReader/BookReader.css" />
+<script src="https://unpkg.com/@internetarchive/[email protected]/BookReader/BookReader.js"></script>
+<script src="https://unpkg.com/@internetarchive/[email protected]/BookReader/plugins/plugin.url.js"></script>
+
+<!-- BookReader wrapper web component -->
+<script type="module"
+  src="https://unpkg.com/@internetarchive/[email protected]/BookReader/ia-bookreader-bundle.js"></script>
+
+<style>
+  html {
+    /** This must be set because the nav menu uses rem and sets the fonts really big? */
+    font-size: 10px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  }
+
+  ia-bookreader, .BookReader {
+    /** Set the size you want bookreader to be */
+    height: calc(100vh - 100px);
+  }
+</style>
+
+<ia-bookreader>
+  <div id="BookReader" class="BookReader" slot="main"></div>
+</ia-bookreader>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    var br = new BookReader({
+      el: '#BookReader',
+
+      bookTitle: 'Simple BookReader Presentation',
+
+      data: [
+        [
+          {
+            width: 800, height: 1200,
+            uri: 'https://archive.org/download/BookReader/img/page001.jpg'
+          },
+        ],
+        [
+          {
+            width: 800, height: 1200,
+            uri: 'https://archive.org/download/BookReader/img/page002.jpg'
+          },
+          {
+            width: 800, height: 1200,
+            uri: 'https://archive.org/download/BookReader/img/page003.jpg'
+          },
+        ],
+        [
+          {
+            width: 800, height: 1200,
+            uri: 'https://archive.org/download/BookReader/img/page004.jpg'
+          },
+          {
+            width: 800, height: 1200,
+            uri: 'https://archive.org/download/BookReader/img/page005.jpg'
+          },
+        ]
+      ],
+
+      // These are optional, but it is used in the info dialog
+      thumbnail: 'https://archive.org/download/BookReader/img/page014.jpg',
+      metadata: [
+        { label: 'Title', value: 'Open Library BookReader Presentation' },
+        { label: 'Author', value: 'Internet Archive' },
+        { label: 'Demo Info', value: 'This demo shows how one could use BookReader with their own content.' },
+      ],
+    });
+
+    // Let's go!
+    br.init();
+  });
+</script>
 ```
 ## Architecture Overview
 Starting at v5, BookReader introduces hybrid architecture that merges the core code written in jQuery closer to its evolution as a web component.  As we march toward the future of BookReader as a web component, we are taking an Event Driven approach to connect the two together.

diff --git a/scripts/version.js b/scripts/version.js
@@ -13,6 +13,12 @@ async function main() {
     }
     execSync('git add CHANGELOG.md');
 
+    // Update readme
+    const old_readme = fs.readFileSync('README.md').toString();
+    const new_readme = old_readme.replace(/@internetarchive\/bookreader@[\d.-]+/g, `@internetarchive/bookreader@${NEW_VERSION}`);
+    fs.writeFileSync('README.md', new_readme);
+    execSync('git add README.md');
+
     // npm install to make sure deps are correct
     execSync('npm install', { stdio: "inherit" });
 

diff --git a/src/BookReader.js b/src/BookReader.js
@@ -183,7 +183,6 @@ BookReader.prototype.setup = function(options) {
   this.thumbnail = options.thumbnail;
   this.bookUrlMoreInfo = options.bookUrlMoreInfo;
 
-  this.enableExperimentalControls = options.enableExperimentalControls;
   this.el = options.el;
 
   this.pageProgression = options.pageProgression;

diff --git a/src/BookReader/options.js b/src/BookReader/options.js
@@ -118,11 +118,7 @@ export const DEFAULT_OPTIONS = {
   /** @type {string} */
   bookUrlMoreInfo: null,
 
-  /** Experimental Controls (eg b/w) */
-  enableExperimentalControls: false,
-
-  /** CSS selectors */
-  /** Where BookReader mounts to */
+  /** @type {string} CSS selector identifying where BookReader mounts to */
   el: '#BookReader',
 
   /** @type {'lr' | 'rl'} Page progression */