@internetarchive/bookreader 5.0.0-65 → 5.0.0-67

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/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,11 @@
+# 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
+
 # 5.0.0-65
 - Dev: Remove Debug console dev helper @cdrini
 - Dev: Fix deno esm.sh esbuild erroring @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-65",
+  "version": "5.0.0-67",
   "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.0.4",
     "@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",
@@ -57,8 +58,8 @@
     "eslint": "^7.32.0",
     "eslint-plugin-no-jquery": "^2.7.0",
     "eslint-plugin-testcafe": "^0.2.1",
-    "hammerjs": "^2.0.8",
     "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",
@@ -121,7 +122,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/BookModel.js

@@ -30,6 +30,18 @@ export class BookModel {
     this._medianPageSize = null;
     /** @type {[PageData[], number]} */
     this._getDataFlattenedCached = null;
+
+    // Heal missing first page number assertion
+    const pages = this._getDataFlattened();
+    const firstNumberedPageIndex = pages.findIndex(page => page.pageNum != undefined && !isNaN(parseFloat(page.pageNum)));
+    if (firstNumberedPageIndex != -1 && firstNumberedPageIndex > 0) {
+      const pageNum = parseFloat(pages[firstNumberedPageIndex].pageNum);
+      if (!isNaN(pageNum)) {
+        // Note: Since the pages are always sorted in increasing pageNum/index
+        // order, this will work for both left-to-right and right-to-left books
+        pages[firstNumberedPageIndex - 1].pageNum = pageNum - 1;
+      }
+    }
   }
 
   /** Get median width/height of page in inches. Memoized for performance. */

package/src/BookReader/Mode1Up.js

@@ -51,7 +51,7 @@ export class Mode1Up {
         new DragScrollable(this.mode1UpLit, {
           preventDefault: true,
           dragSelector: '.br-mode-1up__visible-world',
-          // Only handle mouse events; let browser/HammerJS handle touch
+          // Only handle mouse events; let browser/interact.js handle touch
           dragstart: 'mousedown',
           dragcontinue: 'mousemove',
           dragend: 'mouseup',

package/src/BookReader/Mode1UpLit.js

@@ -47,9 +47,6 @@ export class Mode1UpLit extends LitElement {
 
   @property({ type: Number })
   scale = 1;
-  /** Position (in unit-less, [0, 1] coordinates) in client to scale around */
-  @property({ type: Object })
-  scaleCenter = { x: 0.5, y: 0.5 };
 
   /************** VIRTUAL-SCROLLING PROPERTIES **************/
 

package/src/BookReader/Mode2UpLit.js

@@ -41,10 +41,6 @@ export class Mode2UpLit extends LitElement {
 
   initialScale = 1;
 
-  /** Position (in unit-less, [0, 1] coordinates) in client to scale around */
-  @property({ type: Object })
-  scaleCenter = { x: 0.5, y: 0.5 };
-
   /** @type {import('./options').AutoFitValues} */
   @property({ type: String })
   autoFit = 'auto';

package/src/BookReader/ModeSmoothZoom.js

@@ -1,5 +1,7 @@
 // @ts-check
-import Hammer from "hammerjs";
+import interact from 'interactjs';
+import { isIOS, isSamsungInternet } from '../util/browserSniffing.js';
+import { sleep } from './utils.js';
 /** @typedef {import('./utils/HTMLDimensionsCacher.js').HTMLDimensionsCacher} HTMLDimensionsCacher */
 
 /**
@@ -8,7 +10,6 @@ import Hammer from "hammerjs";
  * @property {HTMLElement} $visibleWorld
  * @property {import("./options.js").AutoFitValues} autoFit
  * @property {number} scale
- * @property {{ x: number, y: number }} scaleCenter
  * @property {HTMLDimensionsCacher} htmlDimensionsCacher
  * @property {function(): void} [attachScrollListeners]
  * @property {function(): void} [detachScrollListeners]
@@ -16,31 +17,27 @@ import Hammer from "hammerjs";
 
 /** Manages pinch-zoom, ctrl-wheel, and trackpad pinch smooth zooming. */
 export class ModeSmoothZoom {
+  /** Position (in unit-less, [0, 1] coordinates) in client to scale around */
+  scaleCenter = { x: 0.5, y: 0.5 };
+
   /** @param {SmoothZoomable} mode */
   constructor(mode) {
     /** @type {SmoothZoomable} */
     this.mode = mode;
 
+    /** Whether a pinch is currently happening */
+    this.pinching = false;
     /** Non-null when a scale has been enqueued/is being processed by the buffer function */
     this.pinchMoveFrame = null;
     /** Promise for the current/enqueued pinch move frame. Resolves when it is complete. */
     this.pinchMoveFramePromise = Promise.resolve();
     this.oldScale = 1;
-    /** @type {{ scale: number, center: { x: number, y: number }}} */
+    /** @type {{ scale: number, clientX: number, clientY: number }}} */
     this.lastEvent = null;
     this.attached = false;
 
     /** @type {function(function(): void): any} */
     this.bufferFn = window.requestAnimationFrame.bind(window);
-
-    // Hammer.js by default set userSelect to None; we don't want that!
-    // TODO: Is there any way to do this not globally on Hammer?
-    delete Hammer.defaults.cssProps.userSelect;
-    this.hammer = new Hammer.Manager(this.mode.$container, {
-      touchAction: "pan-x pan-y",
-    });
-
-    this.hammer.add(new Hammer.Pinch());
   }
 
   attach() {
@@ -48,17 +45,44 @@ export class ModeSmoothZoom {
 
     this.attachCtrlZoom();
 
-    // GestureEvents work only on Safari; they interfere with Hammer,
-    // so block them.
-    this.mode.$container.addEventListener('gesturestart', this._preventEvent);
+    // GestureEvents work only on Safari; they're too glitchy to use
+    // fully, but they can sometimes help error correct when interact
+    // misses an end/start event on Safari due to Safari bugs.
+    this.mode.$container.addEventListener('gesturestart', this._pinchStart);
     this.mode.$container.addEventListener('gesturechange', this._preventEvent);
-    this.mode.$container.addEventListener('gestureend', this._preventEvent);
+    this.mode.$container.addEventListener('gestureend', this._pinchEnd);
+
+    if (isIOS()) {
+      this.touchesMonitor = new TouchesMonitor(this.mode.$container);
+      this.touchesMonitor.attach();
+    }
+
+    this.mode.$container.style.touchAction = "pan-x pan-y";
 
     // The pinch listeners
-    this.hammer.on("pinchstart", this._pinchStart);
-    this.hammer.on("pinchmove", this._pinchMove);
-    this.hammer.on("pinchend", this._pinchEnd);
-    this.hammer.on("pinchcancel", this._pinchCancel);
+    this.interact = interact(this.mode.$container);
+    this.interact.gesturable({
+      listeners: {
+        start: this._pinchStart,
+        end: this._pinchEnd,
+      }
+    });
+    if (isSamsungInternet()) {
+      // Samsung internet pinch-zoom will not work unless we disable
+      // all touch actions. So use interact.js' built-in drag support
+      // to handle moving on that browser.
+      this.mode.$container.style.touchAction = "none";
+      this.interact
+        .draggable({
+          inertia: {
+            resistance: 2,
+            minSpeed: 100,
+            allowResume: true,
+          },
+          listeners: { move: this._dragMove }
+        });
+    }
+
 
     this.attached = true;
   }
@@ -68,15 +92,15 @@ export class ModeSmoothZoom {
 
     // GestureEvents work only on Safari; they interfere with Hammer,
     // so block them.
-    this.mode.$container.removeEventListener('gesturestart', this._preventEvent);
+    this.mode.$container.removeEventListener('gesturestart', this._pinchStart);
     this.mode.$container.removeEventListener('gesturechange', this._preventEvent);
-    this.mode.$container.removeEventListener('gestureend', this._preventEvent);
+    this.mode.$container.removeEventListener('gestureend', this._pinchEnd);
+
+    this.touchesMonitor?.detach?.();
 
     // The pinch listeners
-    this.hammer.off("pinchstart", this._pinchStart);
-    this.hammer.off("pinchmove", this._pinchMove);
-    this.hammer.off("pinchend", this._pinchEnd);
-    this.hammer.off("pinchcancel", this._pinchCancel);
+    this.interact.unset();
+    interact.removeDocument(document);
 
     this.attached = false;
   }
@@ -87,7 +111,16 @@ export class ModeSmoothZoom {
     return false;
   }
 
-  _pinchStart = () => {
+  _pinchStart = async () => {
+    // Safari calls gesturestart twice!
+    if (this.pinching) return;
+    if (isIOS()) {
+      // Safari sometimes causes a pinch to trigger when there's only one touch!
+      await sleep(0); // touches monitor can receive the touch event late
+      if (this.touchesMonitor.touches < 2) return;
+    }
+    this.pinching = true;
+
     // Do this in case the pinchend hasn't fired yet.
     this.oldScale = 1;
     this.mode.$visibleWorld.classList.add("BRsmooth-zooming");
@@ -95,37 +128,44 @@ export class ModeSmoothZoom {
     this.mode.autoFit = "none";
     this.detachCtrlZoom();
     this.mode.detachScrollListeners?.();
+
+    this.interact.gesturable({
+      listeners: {
+        start: this._pinchStart,
+        move: this._pinchMove,
+        end: this._pinchEnd,
+      }
+    });
   }
 
-  /** @param {{ scale: number, center: { x: number, y: number }}} e */
+  /** @param {{ scale: number, clientX: number, clientY: number }}} e */
   _pinchMove = async (e) => {
-    this.lastEvent = e;
+    if (!this.pinching) return;
+    this.lastEvent = {
+      scale: e.scale,
+      clientX: e.clientX,
+      clientY: e.clientY,
+    };
     if (!this.pinchMoveFrame) {
-      let pinchMoveFramePromiseRes = null;
-      this.pinchMoveFramePromise = new Promise(
-        (res) => (pinchMoveFramePromiseRes = res)
-      );
-
       // Buffer these events; only update the scale when request animation fires
-      this.pinchMoveFrame = this.bufferFn(() => {
-        this.updateScaleCenter({
-          clientX: this.lastEvent.center.x,
-          clientY: this.lastEvent.center.y,
-        });
-        this.mode.scale *= this.lastEvent.scale / this.oldScale;
-        this.oldScale = this.lastEvent.scale;
-        this.pinchMoveFrame = null;
-        pinchMoveFramePromiseRes();
-      });
+      this.pinchMoveFrame = this.bufferFn(this._drawPinchZoomFrame);
     }
   }
 
   _pinchEnd = async () => {
+    if (!this.pinching) return;
+    this.pinching = false;
+    this.interact.gesturable({
+      listeners: {
+        start: this._pinchStart,
+        end: this._pinchEnd,
+      }
+    });
     // Want this to happen after the pinchMoveFrame,
     // if one is in progress; otherwise setting oldScale
     // messes up the transform.
     await this.pinchMoveFramePromise;
-    this.mode.scaleCenter = { x: 0.5, y: 0.5 };
+    this.scaleCenter = { x: 0.5, y: 0.5 };
     this.oldScale = 1;
     this.mode.$visibleWorld.classList.remove("BRsmooth-zooming");
     this.mode.$visibleWorld.style.willChange = "auto";
@@ -133,10 +173,42 @@ export class ModeSmoothZoom {
     this.mode.attachScrollListeners?.();
   }
 
-  _pinchCancel = async () => {
-    // iOS fires pinchcancel ~randomly; it looks like it sometimes
-    // thinks the pinch becomes a pan, at which point it cancels?
-    await this._pinchEnd();
+  _drawPinchZoomFrame = async () => {
+    // Because of the buffering/various timing locks,
+    // this can be called after the pinch has ended, which
+    // results in a janky zoom after the pinch.
+    if (!this.pinching) {
+      this.pinchMoveFrame = null;
+      return;
+    }
+
+    this.mode.$container.style.overflow = "hidden";
+    this.pinchMoveFramePromiseRes = null;
+    this.pinchMoveFramePromise = new Promise(
+      (res) => (this.pinchMoveFramePromiseRes = res)
+    );
+    this.updateScaleCenter({
+      clientX: this.lastEvent.clientX,
+      clientY: this.lastEvent.clientY,
+    });
+    const curScale = this.mode.scale;
+    const newScale = curScale * this.lastEvent.scale / this.oldScale;
+
+    if (curScale != newScale) {
+      this.mode.scale = newScale;
+      await this.pinchMoveFramePromise;
+    }
+    this.mode.$container.style.overflow = "auto";
+    this.oldScale = this.lastEvent.scale;
+    this.pinchMoveFrame = null;
+  }
+
+  _dragMove = async (e) => {
+    if (this.pinching) {
+      await this._pinchEnd();
+    }
+    this.mode.$container.scrollTop -= e.dy;
+    this.mode.$container.scrollLeft -= e.dx;
   }
 
   /** @private */
@@ -174,7 +246,7 @@ export class ModeSmoothZoom {
    */
   updateScaleCenter({ clientX, clientY }) {
     const bc = this.mode.htmlDimensionsCacher.boundingClientRect;
-    this.mode.scaleCenter = {
+    this.scaleCenter = {
       x: (clientX - bc.left) / this.mode.htmlDimensionsCacher.clientWidth,
       y: (clientY - bc.top) / this.mode.htmlDimensionsCacher.clientHeight,
     };
@@ -194,8 +266,8 @@ export class ModeSmoothZoom {
     const F = newScale / oldScale;
 
     // Where in the viewport the zoom is centered on
-    const XPOS = this.mode.scaleCenter.x;
-    const YPOS = this.mode.scaleCenter.y;
+    const XPOS = this.scaleCenter.x;
+    const YPOS = this.scaleCenter.y;
     const oldCenter = {
       x: L + XPOS * W,
       y: T + YPOS * H,
@@ -207,5 +279,34 @@ export class ModeSmoothZoom {
 
     container.scrollTop = newCenter.y - YPOS * H;
     container.scrollLeft = newCenter.x - XPOS * W;
+    this.pinchMoveFramePromiseRes?.();
+  }
+}
+
+export class TouchesMonitor {
+  /**
+   * @param {HTMLElement} container
+   */
+  constructor(container) {
+    /** @type {HTMLElement} */
+    this.container = container;
+    this.touches = 0;
+  }
+
+  attach() {
+    this.container.addEventListener("touchstart", this._updateTouchCount);
+    this.container.addEventListener("touchend", this._updateTouchCount);
+  }
+
+  detach() {
+    this.container.removeEventListener("touchstart", this._updateTouchCount);
+    this.container.removeEventListener("touchend", this._updateTouchCount);
+  }
+
+  /**
+   * @param {TouchEvent} ev
+   */
+  _updateTouchCount = (ev) => {
+    this.touches = ev.touches.length;
   }
 }

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/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;

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/_MobileNav.scss

@@ -166,29 +166,3 @@ html.mm-background .BookReader {
 @media (min-width: ($brBreakPointMobile + 1)) {
   .BRtoolbar.responsive { display: block; }
 }
-
-li.BRtable-contents-el {
-  line-height: 150%;
-  padding: 10px 10px 10px 20px;
-  overflow: hidden;
-  color: $controlsText;
-
-  &.chapter-clickable {
-    font-weight: normal;
-  }
-
-  &.current-chapter {
-    background-color: lightblue;
-  }
-  //resetting mmenu styling for span inside .table-contents-el
-  > span {
-    display: inline;
-    padding: 0;
-    white-space: normal;
-  }
-
-  .BRTOCElementPage {
-    font-size: 0.85em;
-    opacity: .8;
-  }
-}

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);