@internetarchive/bookreader 5.0.0-88-alpha.10 → 5.0.0-88

package/src/plugins/plugin.archive_analytics.js

@@ -1,86 +1,92 @@
-/* global BookReader */
-/**
- * Plugin for Archive.org analytics
- */
-jQuery.extend(BookReader.defaultOptions, {
-  enableArchiveAnalytics: true,
-  /** Provide a means of debugging, cause otherwise it's impossible to test locally */
-  debugArchiveAnaltyics: false,
-});
-
-BookReader.prototype.init = (function(super_) {
-  return function() {
-    super_.call(this);
-
-    if (this.options.enableArchiveAnalytics) {
-      this.bind(BookReader.eventNames.fragmentChange, () => this.archiveAnalyticsSendFragmentChange());
-    }
-  };
-})(BookReader.prototype.init);
+// @ts-check
+import { BookReaderPlugin } from "../BookReaderPlugin.js";
+
+const BookReader = /** @type {typeof import('../BookReader').default} */(window.BookReader);
+
 
-/** @private */
-BookReader.prototype.archiveAnalyticsSendFragmentChange = function() {
-  if (!window.archive_analytics) {
-    return;
+export class ArchiveAnalyticsPlugin extends BookReaderPlugin {
+  options = {
+    enabled: true,
+    /** Provide a means of debugging, cause otherwise it's impossible to test locally */
+    debug: false,
   }
 
-  const prevFragment = this.archiveAnalyticsSendFragmentChange.prevFragment;
-
-  const params = this.paramsFromCurrent();
-  const newFragment = this.fragmentFromParams(params);
-
-  if (prevFragment != newFragment) {
-    const values = {
-      bookreader: "user_changed_view",
-      itemid: this.bookId,
-      cache_bust: Math.random(),
-    };
-    // EEK!  offsite embedding and /details/ page books look the same in analytics, otherwise!
-    values.offsite = 1;
-    values.details = 0;
-    try {
-      values.offsite = window.top.location.hostname.match(/\.archive.org$/)
-        ? 0
-        : 1;
-      values.details =
-        !values.offsite && window.top.location.pathname.match(/^\/details\//)
-          ? 1
-          : 0;
-    } catch (e) {}
-    // avoids embed cross site exceptions -- but on (+) side, means it is and keeps marked offite!
-
-    // Send bookreader ping
-    window.archive_analytics.send_ping(values, null, "augment_for_ao_site");
-
-    // Also send tracking event ping
-    const additionalEventParams = this.options.lendingInfo && this.options.lendingInfo.loanId
-      ? { loanId: this.options.lendingInfo.loanId }
-      : {};
-    window.archive_analytics.send_event('BookReader', 'UserChangedView', window.location.pathname, additionalEventParams);
-
-    this.archiveAnalyticsSendFragmentChange.prevFragment = newFragment;
+  /** @type {string} */
+  _prevFragment = null;
+
+  /** @override */
+  init() {
+    if (this.options.enabled) {
+      this.br.bind(BookReader.eventNames.fragmentChange, () => this.sendFragmentChange());
+    }
   }
-};
-
-/**
- * Sends a tracking "Event". See https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#events
- * @param {string} category
- * @param {string} action
- * @param {number} [value] (must be an int)
- * @param {Object} [additionalEventParams]
- */
-BookReader.prototype.archiveAnalyticsSendEvent = function(category, action, value, additionalEventParams) {
-  if (!this.options.enableArchiveAnalytics) return;
-
-  if (this.options.debugArchiveAnaltyics) {
-    console.log("archiveAnalyticsSendEvent", arguments, window.archive_analytics);
+
+  /** @private */
+  sendFragmentChange() {
+    if (!window.archive_analytics) {
+      return;
+    }
+
+    const prevFragment = this._prevFragment;
+
+    const params = this.br.paramsFromCurrent();
+    const newFragment = this.br.fragmentFromParams(params);
+
+    if (prevFragment != newFragment) {
+      const values = {
+        bookreader: "user_changed_view",
+        itemid: this.br.bookId,
+        cache_bust: Math.random(),
+      };
+      // EEK!  offsite embedding and /details/ page books look the same in analytics, otherwise!
+      values.offsite = 1;
+      values.details = 0;
+      try {
+        values.offsite = window.top.location.hostname.match(/\.archive.org$/)
+          ? 0
+          : 1;
+        values.details =
+          !values.offsite && window.top.location.pathname.match(/^\/details\//)
+            ? 1
+            : 0;
+      } catch (e) { }
+      // avoids embed cross site exceptions -- but on (+) side, means it is and keeps marked offite!
+
+      // Send bookreader ping
+      window.archive_analytics.send_ping(values, null, "augment_for_ao_site");
+
+      // Also send tracking event ping
+      const additionalEventParams = this.br.options.lendingInfo?.loanId
+        ? { loanId: this.br.options.lendingInfo.loanId }
+        : {};
+      window.archive_analytics.send_event('BookReader', 'UserChangedView', window.location.pathname, additionalEventParams);
+
+      this._prevFragment = newFragment;
+    }
   }
 
-  if (!window.archive_analytics) return;
+  /**
+   * Sends a tracking "Event". See https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#events
+   * @param {string} category
+   * @param {string} action
+   * @param {number} [value] (must be an int)
+   * @param {Object} [additionalEventParams]
+   */
+  sendEvent(category, action, value, additionalEventParams) {
+    if (!this.options.enabled) return;
 
-  additionalEventParams = additionalEventParams || {};
-  if (typeof(value) == 'number') {
-    additionalEventParams.ev = value;
+    if (this.options.debug) {
+      console.log("archiveAnalyticsSendEvent", arguments, window.archive_analytics);
+    }
+
+    if (!window.archive_analytics) return;
+
+    additionalEventParams = additionalEventParams || {};
+    if (typeof (value) == 'number') {
+      additionalEventParams.ev = value;
+    }
+    window.archive_analytics.send_event(category, action, null, additionalEventParams);
   }
-  window.archive_analytics.send_event(category, action, null, additionalEventParams);
-};
+}
+
+BookReader?.registerPlugin('archiveAnalytics', ArchiveAnalyticsPlugin);

package/src/plugins/plugin.chapters.js

@@ -191,6 +191,7 @@ BookReader.prototype._chaptersUpdateCurrent = function(
   }
 };
 
+@customElement('br-chapters-panel')
 export class BRChaptersPanel extends LitElement {
   /** @type {TocEntry[]} */
   @property({ type: Array })
@@ -213,9 +214,9 @@ export class BRChaptersPanel extends LitElement {
 
   render() {
     return html`
-      <ol>
-        ${this.contents.map((tocEntry) => this.renderTOCEntry(tocEntry))}
-      </ol>
+    <ol>
+      ${this.contents.map(tocEntry => this.renderTOCEntry(tocEntry))}
+    </ol>
     `;
   }
 
@@ -224,29 +225,26 @@ export class BRChaptersPanel extends LitElement {
    */
   renderTOCEntry(tocEntry) {
     const chapterTitle = [tocEntry.label, tocEntry.title]
-      .filter((x) => x)
+      .filter(x => x)
       .join(' ');
     const clickable = tocEntry.pageIndex != undefined;
     // note the click-tracking won't work...
-    return html` <li
+    return html`
+    <li
       class="
         BRtable-contents-el
         ${clickable ? 'clickable' : ''}
         ${tocEntry == this.currentChapter ? 'current' : ''}
       "
-      style="${styleMap({ marginLeft: (tocEntry.level - 1) * 10 + 'px' })}"
-      data-event-click-tracking="${ifDefined(
-        clickable ? 'BRTOCPanel|GoToChapter' : undefined,
-      )}"
+      style="${styleMap({marginLeft: (tocEntry.level - 1) * 10 + 'px'})}"
+      data-event-click-tracking="${ifDefined(clickable ? "BRTOCPanel|GoToChapter" : undefined)}"
       @click="${() => this.jumpToPage(tocEntry.pageIndex)}"
     >
       ${chapterTitle}
-      ${tocEntry.pagenum
-        ? html`
-            <br />
-            <span class="BRTOCElementPage">Page ${tocEntry.pagenum}</span>
-          `
-        : nothing}
+      ${tocEntry.pagenum ? html`
+        <br />
+        <span class="BRTOCElementPage">Page ${tocEntry.pagenum}</span>
+      ` : nothing}
     </li>`;
   }
 
@@ -283,20 +281,17 @@ export class BRChaptersPanel extends LitElement {
       }
 
       li.clickable:not(.current):hover {
-        background-color: rgba(255, 255, 255, 0.05);
+        background-color: rgba(255,255,255, 0.05);
       }
 
       li.current {
-        background-color: rgba(255, 255, 255, 0.9);
+        background-color: rgba(255,255,255,0.9);
         color: #333;
       }
 
       .BRTOCElementPage {
         font-size: 0.85em;
-        opacity: 0.8;
-      }
-    `;
+        opacity: .8;
+      }`;
   }
 }
-
-customElements.define('br-chapters-panel', BRChaptersPanel);

package/src/plugins/plugin.text_selection.js

@@ -423,7 +423,7 @@ export class BookreaderWithTextSelection extends BookReader {
       new SelectionObserver('.BRtextLayer', (selectEvent) => {
         // Track how often selection is used
         if (selectEvent == 'started') {
-          this.archiveAnalyticsSendEvent?.('BookReader', 'SelectStart');
+          this._plugins.archiveAnalytics?.sendEvent('BookReader', 'SelectStart');
 
           // Set a class on the page to avoid hiding it when zooming/etc
           this.refs.$br.find('.BRpagecontainer--hasSelection').removeClass('BRpagecontainer--hasSelection');

package/src/plugins/tts/plugin.tts.js

@@ -352,10 +352,10 @@ BookReader.prototype.ttsRemoveHilites = function () {
  * @param {number} [value]
  */
 BookReader.prototype.ttsSendAnalyticsEvent = function(action, value) {
-  if (this.archiveAnalyticsSendEvent) {
+  if (this._plugins.archiveAnalytics) {
     const extraValues = {};
     const mediaLanguage = this.ttsEngine.opts.bookLanguage;
     if (mediaLanguage) extraValues.mediaLanguage = mediaLanguage;
-    this.archiveAnalyticsSendEvent('BRReadAloud', action, value, extraValues);
+    this._plugins.archiveAnalytics.sendEvent('BRReadAloud', action, value, extraValues);
   }
 };

package/tests/jest/BookReader/Navbar/Navbar.test.js

@@ -4,17 +4,30 @@ import BookReader from '@/src/BookReader.js';
 
 describe('getNavPageNumHtml', () => {
   const f = getNavPageNumHtml;
-  test('handle n-prefixed page numbers', () => {
+
+  test('handle n-prefixed page numbers-min format', () => {
     expect(f(3, 40, 'n3', '', 40)).toBe('(4 of 40)');
   });
 
-  test('handle regular page numbers', () => {
+  test('handle regular page numbers-min format', () => {
     expect(f(3, 40, '14', '', 40)).toBe('14 of 40');
   });
 
-  test('handle no max page', () => {
+  test('handle no max page-min format', () => {
     expect(f(3, 40, '14', '', null)).toBe('14');
   });
+
+  test('handle n-prefixed page numbers-max format', () => {
+    expect(f(3, 40, 'n3', '', 40, true)).toBe('Page — (4/40)');
+  });
+
+  test('handle regular page numbers-max format', () => {
+    expect(f(3, 40, '14', '', 40, true)).toBe('Page 14 (4/40)');
+  });
+
+  test('handle no max page-max format', () => {
+    expect(f(3, 40, '14', '', null, true)).toBe('Page 14 (4/40)');
+  });
 });
 
 /** @type {BookReader} */

package/tests/jest/plugins/plugin.archive_analytics.test.js

@@ -1,23 +1,20 @@
 import sinon from 'sinon';
-import BookReader from '@/src/BookReader.js';
-import '@/src/plugins/plugin.archive_analytics.js';
-
-describe('archiveAnalyticsSendEvent', () => {
-  const sendEvent = BookReader.prototype.archiveAnalyticsSendEvent;
+import {ArchiveAnalyticsPlugin} from '@/src/plugins/plugin.archive_analytics.js';
 
+describe('sendEvent', () => {
   test('logs if debug set to true', () => {
     const stub = sinon.stub(console, 'log');
-    const FAKE_BR = { options: { enableArchiveAnalytics: true, debugArchiveAnaltyics: true }};
-    sendEvent.call(FAKE_BR);
+    const p = new ArchiveAnalyticsPlugin({});
+    p.setup({ debug: true });
+    p.sendEvent();
     expect(stub.callCount).toBe(1);
     stub.restore();
   });
 
   test('Does not error if window.archive_analytics is undefined', () => {
-    const spy = sinon.spy(sendEvent);
-    const FAKE_BR = { options: { enableArchiveAnalytics: true }};
-    spy.call(FAKE_BR);
+    const p = new ArchiveAnalyticsPlugin({});
+    const spy = sinon.spy(p.sendEvent);
+    p.sendEvent();
     expect(spy.threw()).toBe(false);
   });
 });
-

package/dist/esm/BookNavigator/assets/bookmark-colors.js

@@ -1,4 +0,0 @@
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { css } from 'lit';
-export default css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .blue {\n    --iconFillColor: var(--blueBookmarkColor, #0023f5);\n  }\n\n  .red {\n    --iconFillColor: var(--redBookmarkColor, #eb3223);\n  }\n\n  .green {\n    --iconFillColor: var(--greenBookmarkColor, #75ef4c);\n  }\n"])));

package/dist/esm/BookNavigator/assets/button-base.js

@@ -1,4 +0,0 @@
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { css } from 'lit';
-export default css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ia-button {\n    min-height: 3rem;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    color: var(--primaryTextColor);\n    line-height: normal;\n    border-radius: .4rem;\n    text-align: center;\n    vertical-align: middle;\n    font-size: 1.4rem;\n    font-family: inherit;\n    display: inline-block;\n    padding: .6rem 1.2rem;\n    border: 1px solid transparent;\n\n    white-space: nowrap;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n  }\n\n  .ia-button.link,\n  .ia-button.external {\n    min-height: unset;\n    text-decoration: none;\n  }\n\n  .ia-button:disabled,\n  .ia-button.disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .ia-button.transparent {\n    background-color: transparent;\n  }\n  \n  .ia-button.slim {\n    padding: 0;\n  }\n\n  .ia-button.primary {\n    background-color: var(--primaryCTAFill);\n    border-color: var(--primaryCTABorder);\n  }\n\n  .ia-button.cancel {\n    background-color: var(--primaryErrorCTAFill);\n    border-color: var(--primaryErrorCTABorder);\n  }\n\n  .ia-button.external {\n    background: var(--secondaryCTAFill);\n    border-color: var(--secondaryCTABorder);\n  }\n"])));

package/dist/esm/BookNavigator/assets/ia-logo.js

@@ -1,4 +0,0 @@
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { svg } from 'lit';
-export default svg(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  <svg class=\"ia-logo\" width=\"27\" height=\"30\" viewBox=\"0 0 27 30\" xmlns=\"http://www.w3.org/2000/svg\" aria-labelledby=\"logoTitleID logoDescID\">\n    <title id=\"logoTitleID\">Internet Archive logo</title>\n    <desc id=\"logoDescID\">A line drawing of the Internet Archive headquarters building fa\xE7ade.</desc>\n    <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n      <mask id=\"mask-2\" fill=\"white\">\n        <path d=\"M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z\" id=\"path-1\"></path>\n      </mask>\n      <use fill=\"#FFFFFF\" xlink:href=\"#path-1\"></use>\n      <g mask=\"url(#mask-2)\" fill=\"#FFFFFF\">\n        <path d=\"M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z\" id=\"swatch\"></path>\n      </g>\n    </g>\n  </svg>\n"])));

package/dist/esm/BookNavigator/assets/icon_checkmark.js

@@ -1,8 +0,0 @@
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { css } from 'lit';
-
-// Original SVG object for reference
-// <svg height="10" viewBox="0 0 13 10" width="13" xmlns="http://www.w3.org/2000/svg"><path d="m4.33333333 10-4.33333333-4.16666667 1.73333333-1.66666666 2.6 2.5 6.93333337-6.66666667 1.7333333 1.66666667z" fill="#fff" fill-rule="evenodd"/></svg>
-
-export default css(_templateObject || (_templateObject = _taggedTemplateLiteral(["data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgMTMgMTAiIHdpZHRoPSIxMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNC4zMzMzMzMzMyAxMC00LjMzMzMzMzMzLTQuMTY2NjY2NjcgMS43MzMzMzMzMy0xLjY2NjY2NjY2IDIuNiAyLjUgNi45MzMzMzMzNy02LjY2NjY2NjY3IDEuNzMzMzMzMyAxLjY2NjY2NjY3eiIgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+"])));

package/dist/esm/BookNavigator/assets/icon_close.js

@@ -1,4 +0,0 @@
-var _templateObject;
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-import { css } from 'lit';
-export default css(_templateObject || (_templateObject = _taggedTemplateLiteral(["data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgYXJpYS1sYWJlbGxlZGJ5PSJjbG9zZVRpdGxlSUQgY2xvc2VEZXNjSUQiPjxwYXRoIGQ9Ik0yOS4xOTIgMTAuODA4YTEuNSAxLjUgMCAwMTAgMi4xMkwyMi4xMjIgMjBsNy4wNyA3LjA3MmExLjUgMS41IDAgMDEtMi4xMiAyLjEyMWwtNy4wNzMtNy4wNy03LjA3IDcuMDdhMS41IDEuNSAwIDAxLTIuMTIxLTIuMTJsNy4wNy03LjA3My03LjA3LTcuMDdhMS41IDEuNSAwIDAxMi4xMi0yLjEyMUwyMCAxNy44NzhsNy4wNzItNy4wN2ExLjUgMS41IDAgMDEyLjEyMSAweiIgY2xhc3M9ImZpbGwtY29sb3IiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg=="])));