@internetarchive/bookreader 5.0.0-66 → 5.0.0-68

package/BookReaderDemo/BookReaderDemo.css

@@ -36,21 +36,3 @@ ia-bookreader{
     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/demo-autoplay.html

@@ -15,8 +15,6 @@
     <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-fullscreen-mobile.html

@@ -15,9 +15,6 @@
     <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>
 
@@ -31,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

@@ -15,9 +15,6 @@
     <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.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

@@ -161,6 +161,44 @@
             </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">
@@ -220,9 +258,9 @@
 
     // 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 }),
+      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>
 

package/BookReaderDemo/demo-vendor-fullscreen.html

@@ -15,9 +15,6 @@
     <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/immersion-1up.html

@@ -14,7 +14,6 @@
     <link rel="stylesheet" href="../BookReader/BookReader.css"/>
 
     <!-- plugins needed for archive.org, in same order as archive.org -->
-    <script src="../BookReader/plugins/plugin.mobile_nav.js"></script>
     <script src="../BookReader/plugins/plugin.search.js"></script>
     <script src="../BookReader/plugins/plugin.chapters.js"></script>
     <script src="../BookReader/plugins/plugin.tts.js"></script>

package/BookReaderDemo/immersion-mode.html

@@ -15,9 +15,6 @@
     <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/toggle_controls.html

@@ -40,7 +40,7 @@
           template: function(br) {
             return '<button class="BRicon ' + this.className + ' desktop-only js-tooltip" data-param="foo">' +
                 '<div class="icon icon-onepg"></div>' +
-                '<span class="tooltip">Overridden control</span>' +
+                '<span class="BRtooltip">Overridden control</span>' +
               '</button>';
           }
         },

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# 5.0.0-68
+- Fix: 1up zoom wrong on start/entering full screen @cdrini
+- Dev: BREAKING: delete `plugin.mobile_nav.js` no longer used @cdrini
+- Dev: Move page 1 label correction logic to BookReaderJSIA @cdrini
+
+# 5.0.0-67
+- Feature: Re-enable chapters plugin + migrate off mmenu @cdrini
+- Fix: Disable tooltips on touchscreens + fix on IA @cdrini
+- Dev: Remove core-js update block; issue resolved in core-js @cdrini
+
 # 5.0.0-66
 - Fix: Pinch zooming on iPad/iPhone, Samsung Internet @cdrini
 

package/index.html

@@ -21,7 +21,7 @@
       <!-- plugin.search.js -->
       <li><a href="BookReaderDemo/demo-internetarchive.html?ocaid=theworksofplato01platiala">From Internet Archive</a></li>
       <!-- plugin.search.js -->
-      <li><a href="BookReaderDemo/demo-internetarchive.html?ocaid=adventuresofoli00dick">From Internet Archive - a book with CHAPTERS</a></li>
+      <li><a href="BookReaderDemo/demo-internetarchive.html?ocaid=adventureofsherl0000unse">From Internet Archive - a book with CHAPTERS</a></li>
       <li><a href="BookReaderDemo/demo-iiif.html">IIIF</a></li>
       <li><a href="BookReaderDemo/demo-autoplay.html">Autoplay (kiosk mode)</a></li>
       <li><a href="BookReaderDemo/demo-plugin-menu-toggle.html">Plugin: Full screen menu toggle</a></li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-66",
+  "version": "5.0.0-68",
   "description": "The Internet Archive BookReader.",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
   "private": false,
   "dependencies": {
     "@internetarchive/ia-activity-indicator": "^0.0.4",
-    "@internetarchive/ia-item-navigator": "^1.0.3",
+    "@internetarchive/ia-item-navigator": "^1.1.1",
     "@internetarchive/ia-sharing-options": "^1.0.2",
     "@internetarchive/icon-bookmark": "^1.3.4",
     "@internetarchive/icon-dl": "^1.3.4",
@@ -35,6 +35,7 @@
     "@internetarchive/icon-magnify-plus": "^1.3.4",
     "@internetarchive/icon-search": "^1.3.4",
     "@internetarchive/icon-share": "^1.3.4",
+    "@internetarchive/icon-toc": "^1.3.4",
     "@internetarchive/icon-visual-adjustment": "^1.3.4",
     "@internetarchive/modal-manager": "^0.2.12",
     "@internetarchive/shared-resize-observer": "^0.2.0",
@@ -47,11 +48,11 @@
     "@babel/plugin-proposal-decorators": "7.22.7",
     "@babel/preset-env": "7.22.9",
     "@open-wc/testing-helpers": "^2.3.0",
-    "@types/jest": "29.5.3",
+    "@types/jest": "29.5.4",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "babel-loader": "9.1.3",
     "codecov": "^3.8.3",
-    "concurrently": "7.4.0",
+    "concurrently": "7.6.0",
     "core-js": "3.27.1",
     "cpx2": "4.2.3",
     "eslint": "^7.32.0",
@@ -60,16 +61,15 @@
     "http-server": "14.1.1",
     "interactjs": "^1.10.18",
     "iso-language-codes": "1.1.0",
-    "jest": "29.6.2",
-    "jest-environment-jsdom": "^29.4.3",
+    "jest": "29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
     "jquery": "3.6.1",
     "jquery-colorbox": "1.6.4",
     "jquery-ui": "1.12.1",
     "jquery-ui-touch-punch": "0.2.3",
     "jquery.browser": "0.1.0",
-    "jquery.mmenu": "5.6.5",
     "live-server": "1.2.2",
-    "node-fetch": "3.2.10",
+    "node-fetch": "3.3.2",
     "regenerator-runtime": "0.13.11",
     "sass": "1.64.2",
     "sinon": "^15.1.0",
@@ -121,7 +121,7 @@
     "DOCS:update:test-deps": "If CI succeeds, these should be good to update",
     "update:test-deps": "npm i @babel/eslint-parser@latest @open-wc/testing-helpers@latest @types/jest@latest codecov@latest eslint@7 eslint-plugin-testcafe@latest jest@latest sinon@latest testcafe@latest",
     "DOCS:update:build-deps": "These can cause strange changes, so do an npm run build + check file size (git diff --stat), and check the site is as expected",
-    "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest @babel/plugin-proposal-class-properties@latest @babel/plugin-proposal-decorators@latest babel-loader@latest core-js@3.27.1 regenerator-runtime@latest sass@latest svgo@latest webpack@latest webpack-cli@latest",
+    "update:build-deps": "npm i @babel/core@latest @babel/preset-env@latest @babel/plugin-proposal-class-properties@latest @babel/plugin-proposal-decorators@latest babel-loader@latest core-js@latest regenerator-runtime@latest sass@latest svgo@latest webpack@latest webpack-cli@latest",
     "codecov": "npx codecov"
   }
 }

package/src/BookNavigator/book-navigator.js

@@ -239,7 +239,7 @@ export class BookNavigator extends LitElement {
       });
     }
 
-    this.menuProviders = providers;
+    Object.assign(this.menuProviders, providers);
     this.addMenuShortcut('search');
     this.addMenuShortcut('volumes');
     this.updateMenuContents();
@@ -306,9 +306,9 @@ export class BookNavigator extends LitElement {
    */
   updateMenuContents() {
     const {
-      search, downloads, visualAdjustments, share, bookmarks, volumes
+      search, downloads, visualAdjustments, share, bookmarks, volumes, chapters
     } = this.menuProviders;
-    const availableMenus = [volumes, search, bookmarks, visualAdjustments, share].filter((menu) => !!menu);
+    const availableMenus = [volumes, chapters, search, bookmarks, visualAdjustments, share].filter((menu) => !!menu);
 
     if (this.shouldShowDownloadsMenu()) {
       downloads?.update(this.downloadableTypes);
@@ -410,6 +410,7 @@ export class BookNavigator extends LitElement {
   bindEventListeners() {
     window.addEventListener('BookReader:PostInit', (e) => {
       this.bookreader = e.detail.props;
+      this.bookreader.shell = this;
       this.bookReaderLoaded = true;
       this.bookReaderCannotLoad = false;
       this.emitLoadingStatusUpdate(true);

package/src/BookReader/Mode1Up.js

@@ -77,7 +77,7 @@ export class Mode1Up {
   jumpToIndex(index, pageX, pageY, noAnimate) {
     // Only smooth for small distances
     const distance = Math.abs(this.br.currentIndex() - index);
-    const smooth = !noAnimate && distance <= 4;
+    const smooth = !noAnimate && distance > 0 && distance <= 4;
     this.mode1UpLit.jumpToIndex(index, { smooth });
   }
 

package/src/BookReader/Mode1UpLit.js

@@ -350,7 +350,7 @@ export class Mode1UpLit extends LitElement {
    */
   computeDefaultScale(page) {
     // Default to real size if it fits, otherwise default to full width
-    const containerWidthIn = this.coordSpace.visiblePixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth);
+    const containerWidthIn = this.coordSpace.renderedPixelsToWorldUnits(this.clientWidth);
     return Math.min(1, containerWidthIn / (page.widthInches + 2 * this.SPACING_IN)) || 1;
   }
 

package/src/BookReader/Navbar/Navbar.js

@@ -41,7 +41,7 @@ export class Navbar {
     return `<li>
       <button class="BRicon ${option.className}" title="${option.label}">
         <div class="icon icon-${option.iconClassName}"></div>
-        <span class="tooltip">${option.label}</span>
+        <span class="BRtooltip">${option.label}</span>
       </button>
     </li>`;
   }
@@ -130,7 +130,7 @@ export class Navbar {
       .removeClass()
       .addClass(`icon icon-${iconClass}`)
       .end()
-      .find('.tooltip')
+      .find('.BRtooltip')
       .text(tooltipText);
   }
 

package/src/BookReader/events.js

@@ -16,5 +16,4 @@ export const EVENTS = {
   '2PageViewSelected': '2PageViewSelected',
   /* currently 3 represents thumbnail view */
   '3PageViewSelected': '3PageViewSelected',
-  mobileNavOpen: 'mobileNavOpen',
 };

package/src/BookReader.js

@@ -1355,9 +1355,8 @@ exposeOverrideableMethod(Toolbar, '_components.toolbar', 'getToolBarHeight');
  */
 BookReader.prototype.bindNavigationHandlers = function() {
   const self = this;
+  const jIcons = this.$('.BRicon');
 
-  // Note the mobile plugin attaches itself to body, so we need to select outside
-  const jIcons = this.$('.BRicon').add('.BRmobileMenu .BRicon');
   // Map of jIcon class -> click handler
   const navigationControls = {
     book_left: () => {

package/src/css/BookReader.scss

@@ -7,7 +7,6 @@ $brFontFamily: "Helvetica Neue", Arial, Verdana, sans-serif;
 $brColorThemeblue: #0074D1;
 $brColorThemeBlue2: #4990E2;
 $brColorThemeBlue3: rgb(74,144,226);
-$brColorThemeBlueDarker: rgb(36,94,131);
 $brColorDarkGreyBg: #333;
 $brColorMainBg: black;
 
@@ -44,13 +43,11 @@ $mediumBlue: #428bca;
 $lightBlue: #adaedc;
 $controlsText: $white;
 $controlsBG: $gray20;
-$iconStroke: $white;
 $tooltipBG: $gray20;
 $activeButtonBG: $white;
 $controlsBorder: $gray13;
 $trackColor: $gray40;
 $trackFillColor: $gray80;
-$mobileMenuBG: #151515;
 
 $tooltipBG: $gray20;
 $tooltipText: $white;
@@ -70,7 +67,7 @@ $searchResultBG: $darkBlue;
 }
 
 // These are the main root elements in BookReader
-$brScope: ".BookReader, .BRmobileMenu, .BRfloat";
+$brScope: ".BookReader, .BRfloat";
 
 @import 'colorbox';
 @import 'BRmain';
@@ -80,7 +77,6 @@ $brScope: ".BookReader, .BRmobileMenu, .BRfloat";
 @import 'BRnav';
 @import 'BRtoolbar';
 @import 'BRsearch';
-@import 'MobileNav';
 @import 'BRvendor';
 @import 'icons';
 @import 'controls';

package/src/css/_BRnav.scss

@@ -104,8 +104,11 @@
     border-radius: 2px;
     background: transparent;
     outline: none;
-    &:hover .tooltip {
-      display: block;
+    @media (hover: hover) {
+      /* styles to apply on devices that support hover */
+      &:hover .BRtooltip {
+        display: block;
+      }
     }
     &.hide {
       display: none;
@@ -127,14 +130,6 @@
   // Default
   @include brNavDark;
 
-  /* Full mobile styles */
-  @media (max-width: $brBreakPointMobile) {
-    .BRbodyMobileNavEnabled &,
-    .BRbodyMobileNavEnabledFullscreen.BRfullscreenActive & {
-      @include brNavLight;
-    }
-  }
-
   &--controls {
     display: flex;
   }

package/src/css/_BRsearch.scss

@@ -98,6 +98,10 @@
       // background-image: url(images/marker_chap-on.svg);
       background-color: blue;
     }
+    .BRchapterPage {
+      font-size: 0.85em;
+      opacity: .8;
+    }
   }
   .BRsearch {
     width: 9px;
@@ -130,8 +134,8 @@
     }
     footer {
       text-align: center;
-      font-weight: bold;
-      font-size: 0.9em;
+      font-size: 0.85em;
+      opacity: .8;
     }
     mark {
       color: $searchResultText;

package/src/css/_controls.scss

@@ -1,7 +1,7 @@
 .BRcontrols {
   width: 100%;
 
-  .tooltip {
+  .BRtooltip {
     display: none;
     position: absolute;
     width: auto;
@@ -14,9 +14,10 @@
     color: $controlsText;
     border-radius: 3px;
     background: $tooltipBG;
+    pointer-events: none;
   }
 
-  .full .tooltip {
+  .full .BRtooltip {
     left: auto;
     right: 0;
     transform: translateX(0);

package/src/plugins/plugin.autoplay.js

@@ -41,8 +41,7 @@ BookReader.prototype.bindNavigationHandlers = (function(super_) {
 
     if (!this.options.enableAutoPlayPlugin) return;
 
-    // Note the mobile plugin attaches itself to body, so we need to select outside
-    const jIcons = this.$('.BRicon').add('.BRmobileMenu .BRicon');
+    const jIcons = this.$('.BRicon');
 
     jIcons.filter('.play').click(() => {
       this.autoToggle();