@internetarchive/bookreader 5.0.0-96 → 5.0.0-98

package/src/BookReader/Navbar/Navbar.js

@@ -1,3 +1,4 @@
+// @ts-check
 /** @typedef {import("../../BookReader.js").default} BookReader */
 
 import 'jquery-ui/ui/widget.js';
@@ -120,6 +121,66 @@ export class Navbar {
     });
   }
 
+  bindControlClickHandlers() {
+    const jIcons = this.$nav.find('.BRicon');
+
+    // Map of jIcon class -> click handler
+    const navigationControls = {
+      book_left: () => {
+        this.br.trigger(EVENTS.stop);
+        this.br.left();
+      },
+      book_right: () => {
+        this.br.trigger(EVENTS.stop);
+        this.br.right();
+      },
+      book_top: this.br.first.bind(this.br),
+      book_bottom: this.br.last.bind(this.br),
+      book_leftmost: this.br.leftmost.bind(this.br),
+      book_rightmost: this.br.rightmost.bind(this.br),
+      onepg: () => {
+        this.br.switchMode('1up');
+      },
+      thumb: () => {
+        this.br.switchMode('thumb');
+      },
+      twopg: () => {
+        this.br.switchMode('2up');
+      },
+      zoom_in: () => {
+        this.br.trigger(EVENTS.stop);
+        this.br.zoom(1);
+        this.br.trigger(EVENTS.zoomIn);
+      },
+      zoom_out: () => {
+        this.br.trigger(EVENTS.stop);
+        this.br.zoom(-1);
+        this.br.trigger(EVENTS.zoomOut);
+      },
+      full: () => {
+        if (this.br.ui == 'embed') {
+          const url = this.br.$('.BRembedreturn a').attr('href');
+          window.open(url);
+        } else {
+          this.br.toggleFullscreen();
+        }
+      },
+    };
+
+    // custom event for auto-loan-renew in ia-book-actions
+    // - to know if user is actively reading
+    this.$nav.find('nav.BRcontrols li button').on('click', () => {
+      this.br.trigger(EVENTS.userAction);
+    });
+
+    for (const control in navigationControls) {
+      jIcons.filter(`.${control}`).on('click.bindNavigationHandlers', () => {
+        navigationControls[control]();
+        return false;
+      });
+    }
+  }
+
   /**
    * Toggle viewmode button to change page view
    */

package/src/BookReader/options.js

@@ -147,21 +147,25 @@ export const DEFAULT_OPTIONS = {
    **/
   plugins: {
     /** @type {Partial<import('../plugins/plugin.archive_analytics.js').ArchiveAnalyticsPlugin['options'>]}*/
-    archiveAnalytics: null,
+    archiveAnalytics: {},
     /** @type {Partial<import('../plugins/plugin.autoplay.js').AutoplayPlugin['options'>]}*/
-    autoplay: null,
+    autoplay: {},
     /** @type {Partial<import('../plugins/plugin.chapters.js').ChaptersPlugin['options']>} */
-    chapters: null,
+    chapters: {},
+    /** @type {Partial<import('../plugins/plugin.experiments.js').ExperimentsPlugin['options']>} */
+    experiments: {},
     /** @type {Partial<import('../plugins/plugin.iiif.js').IiifPlugin['options']>} */
-    iiif: null,
+    iiif: {},
     /** @type {Partial<import('../plugins/plugin.resume.js').ResumePlugin['options']>} */
-    resume: null,
+    resume: {},
     /** @type {Partial<import('../plugins/search/plugin.search.js').SearchPlugin['options']>} */
-    search: null,
+    search: {},
     /** @type {Partial<import('../plugins/plugin.text_selection.js').TextSelectionPlugin['options']>} */
-    textSelection: null,
+    textSelection: {},
+    /** @type {Partial<import('../plugins/translate/plugin.translate.js').TranslatePlugin['options']>} */
+    translate: {},
     /** @type {Partial<import('../plugins/tts/plugin.tts.js').TtsPlugin['options']>} */
-    tts: null,
+    tts: {},
   },
 
   /**

package/src/BookReader.js

@@ -49,10 +49,47 @@ import { NAMED_REDUCE_SETS } from './BookReader/ReduceSet.js';
  * @constructor
  */
 export default function BookReader(overrides = {}) {
-  const options = jQuery.extend(true, {}, BookReader.defaultOptions, overrides, BookReader.optionOverrides);
+  const options = BookReader.extendOptions({}, BookReader.defaultOptions, overrides, BookReader.optionOverrides);
   this.setup(options);
 }
 
+/**
+ * Extend the default options for BookReader
+ * Accepts any number of option objects and merges them in order.
+ *
+ * Does a shallow merge of everything except plugin options. These are individually merged.
+ * @param {...Partial<BookReaderOptions>} newOptions
+ */
+BookReader.extendOptions = function(...newOptions) {
+  if (newOptions.length <= 1) {
+    return newOptions[0];
+  }
+  /** @type {Array<keyof BookReaderOptions>} */
+  const shallowOverrides = ['onePage', 'twoPage', 'vars'];
+  /** @type {Array<keyof BookReaderOptions>} */
+  const mapOverrides = ['plugins', 'controls'];
+
+  const result = newOptions.shift();
+  for (const opts of newOptions) {
+    for (const [key, value] of Object.entries(opts)) {
+      if (shallowOverrides.includes(key)) {
+        result[key] ||= {};
+        result[key] = Object.assign(result[key], value);
+      } else if (mapOverrides.includes(key)) {
+        result[key] ||= {};
+        for (const [name, mapValue] of Object.entries(value)) {
+          result[key][name] ||= {};
+          Object.assign(result[key][name], mapValue);
+        }
+      } else {
+        result[key] = value;
+      }
+    }
+  }
+
+  return result;
+};
+
 BookReader.version = PACKAGE_JSON.version;
 
 // Mode constants
@@ -72,12 +109,16 @@ BookReader.PLUGINS = {
   autoplay: null,
   /** @type {typeof import('./plugins/plugin.chapters.js').ChaptersPlugin | null}*/
   chapters: null,
+  /** @type {typeof import('./plugins/plugin.experiments.js').ExperimentsPlugin | null}*/
+  experiments: null,
   /** @type {typeof import('./plugins/plugin.resume.js').ResumePlugin | null}*/
   resume: null,
   /** @type {typeof import('./plugins/search/plugin.search.js').SearchPlugin | null}*/
   search: null,
   /** @type {typeof import('./plugins/plugin.text_selection.js').TextSelectionPlugin | null}*/
   textSelection: null,
+  /** @type {typeof import('./plugins/translate/plugin.translate.js').TranslatePlugin | null}*/
+  translate: null,
   /** @type {typeof import('./plugins/tts/plugin.tts.js').TtsPlugin | null}*/
   tts: null,
 };
@@ -138,9 +179,11 @@ BookReader.prototype.setup = function(options) {
     archiveAnalytics: BookReader.PLUGINS.archiveAnalytics ? new BookReader.PLUGINS.archiveAnalytics(this) : null,
     autoplay: BookReader.PLUGINS.autoplay ? new BookReader.PLUGINS.autoplay(this) : null,
     chapters: BookReader.PLUGINS.chapters ? new BookReader.PLUGINS.chapters(this) : null,
+    experiments: BookReader.PLUGINS.experiments ? new BookReader.PLUGINS.experiments(this) : null,
     search: BookReader.PLUGINS.search ? new BookReader.PLUGINS.search(this) : null,
     resume: BookReader.PLUGINS.resume ? new BookReader.PLUGINS.resume(this) : null,
     textSelection: BookReader.PLUGINS.textSelection ? new BookReader.PLUGINS.textSelection(this) : null,
+    translate: BookReader.PLUGINS.translate ? new BookReader.PLUGINS.translate(this) : null,
     tts: BookReader.PLUGINS.tts ? new BookReader.PLUGINS.tts(this) : null,
   };
 
@@ -330,6 +373,24 @@ BookReader.prototype.setup = function(options) {
   this.hasKeyFocus = true;
 };
 
+BookReader.prototype.initializePlugin = function(pluginName) {
+  const plugin = new BookReader.PLUGINS[pluginName](this);
+  this.plugins[pluginName] = plugin;
+  try {
+    plugin.setup(this.options.plugins?.[pluginName] ?? {});
+    this.options.plugins[pluginName] = plugin.options;
+  } catch (e) {
+    console.error(`Error setting up plugin ${pluginName} outside of regular cycle`, e);
+    throw e;
+  }
+
+  try {
+    plugin.init();
+  } catch (e) {
+    console.error(`Error initializing plugin ${pluginName} outside of regular cycle`, e);
+    throw e;
+  }
+};
 /**
  * Get all the HTML Elements that are being/can be rendered.
  * Includes cached elements which might be rendered again.
@@ -347,6 +408,7 @@ BookReader.prototype.getActivePageContainerElements = function() {
  * Get the HTML Elements for the rendered page. Note there can be more than one, since
  * (at least as of writing) different modes can maintain different caches.
  * @param {PageIndex} pageIndex
+ * @returns {HTMLElement[]}
  */
 BookReader.prototype.getActivePageContainerElementsForIndex = function(pageIndex) {
   return [
@@ -632,8 +694,10 @@ BookReader.prototype.init = function() {
   this.initUIStrings();
 
   // Bind to events
-
-  this.bindNavigationHandlers();
+  this._components.navbar.bindControlClickHandlers();
+  for (const plugin of Object.values(this.plugins)) {
+    plugin._bindNavigationHandlers();
+  }
   this.setupKeyListeners();
 
   this.lastScroll = (new Date().getTime());
@@ -1497,141 +1561,6 @@ exposeOverrideableMethod(Toolbar, '_components.toolbar', 'buildInfoDiv');
 BookReader.prototype.getToolBarHeight = Toolbar.prototype.getToolBarHeight;
 exposeOverrideableMethod(Toolbar, '_components.toolbar', 'getToolBarHeight');
 
-/**
- * Bind navigation handlers
- */
-BookReader.prototype.bindNavigationHandlers = function() {
-  const self = this;
-  const jIcons = this.$('.BRicon');
-
-  // Map of jIcon class -> click handler
-  const navigationControls = {
-    book_left: () => {
-      this.trigger(BookReader.eventNames.stop);
-      this.left();
-    },
-    book_right: () => {
-      this.trigger(BookReader.eventNames.stop);
-      this.right();
-    },
-    book_top: this.first.bind(this),
-    book_bottom: this.last.bind(this),
-    book_leftmost: this.leftmost.bind(this),
-    book_rightmost: this.rightmost.bind(this),
-    onepg: () => {
-      this.switchMode(self.constMode1up);
-    },
-    thumb: () => {
-      this.switchMode(self.constModeThumb);
-    },
-    twopg: () => {
-      this.switchMode(self.constMode2up);
-    },
-    zoom_in: () => {
-      this.trigger(BookReader.eventNames.stop);
-      this.zoom(1);
-      this.trigger(BookReader.eventNames.zoomIn);
-    },
-    zoom_out: () => {
-      this.trigger(BookReader.eventNames.stop);
-      this.zoom(-1);
-      this.trigger(BookReader.eventNames.zoomOut);
-    },
-    full: () => {
-      if (this.ui == 'embed') {
-        const url = this.$('.BRembedreturn a').attr('href');
-        window.open(url);
-      } else {
-        this.toggleFullscreen();
-      }
-    },
-  };
-
-  // custom event for auto-loan-renew in ia-book-actions
-  // - to know if user is actively reading
-  this.$('nav.BRcontrols li button').on('click', () => {
-    this.trigger(BookReader.eventNames.userAction);
-  });
-
-  for (const control in navigationControls) {
-    jIcons.filter(`.${control}`).on('click.bindNavigationHandlers', () => {
-      navigationControls[control]();
-      return false;
-    });
-  }
-
-  const $brNavCntlBtmEl = this.$('.BRnavCntlBtm');
-  const $brNavCntlTopEl = this.$('.BRnavCntlTop');
-
-  this.$('.BRnavCntl').click(
-    function() {
-      const promises = [];
-      // TODO don't use magic constants
-      // TODO move this to a function
-      if ($brNavCntlBtmEl.hasClass('BRdn')) {
-        if (self.refs.$BRtoolbar)
-          promises.push(self.refs.$BRtoolbar.animate(
-            {top: self.getToolBarHeight() * -1},
-          ).promise());
-        promises.push(self.$('.BRfooter').animate({bottom: self.getFooterHeight() * -1}).promise());
-        $brNavCntlBtmEl.addClass('BRup').removeClass('BRdn');
-        $brNavCntlTopEl.addClass('BRdn').removeClass('BRup');
-        self.$('.BRnavCntlBtm.BRnavCntl').animate({height:'45px'});
-        self.$('.BRnavCntl').delay(1000).animate({opacity:.75}, 1000);
-      } else {
-        if (self.refs.$BRtoolbar)
-          promises.push(self.refs.$BRtoolbar.animate({top:0}).promise());
-        promises.push(self.$('.BRfooter').animate({bottom:0}).promise());
-        $brNavCntlBtmEl.addClass('BRdn').removeClass('BRup');
-        $brNavCntlTopEl.addClass('BRup').removeClass('BRdn');
-        self.$('.BRnavCntlBtm.BRnavCntl').animate({height:'30px'});
-        self.$('.BRvavCntl').animate({opacity:1});
-      }
-      $.when.apply($, promises).done(function() {
-        // Only do full resize in auto mode and need to recalc. size
-        if (self.mode == self.constMode2up && self.twoPage.autofit != null
-                    && self.twoPage.autofit != 'none'
-        ) {
-          self.resize();
-        } else if (self.mode == self.constMode1up && self.onePage.autofit != null
-                           && self.onePage.autofit != 'none') {
-          self.resize();
-        } else {
-          // Don't do a full resize to avoid redrawing images
-          self.resizeBRcontainer();
-        }
-      });
-    },
-  );
-  $brNavCntlBtmEl
-    .on("mouseover", function() {
-      if ($(this).hasClass('BRup')) {
-        self.$('.BRnavCntl').animate({opacity:1},250);
-      }
-    })
-    .on("mouseleave", function() {
-      if ($(this).hasClass('BRup')) {
-        self.$('.BRnavCntl').animate({opacity:.75},250);
-      }
-    });
-  $brNavCntlTopEl
-    .on("mouseover", function() {
-      if ($(this).hasClass('BRdn')) {
-        self.$('.BRnavCntl').animate({opacity:1},250);
-      }
-    })
-    .on("mouseleave", function() {
-      if ($(this).hasClass('BRdn')) {
-        self.$('.BRnavCntl').animate({opacity:.75},250);
-      }
-    });
-
-  // Call _bindNavigationHandlers on the plugins
-  for (const plugin of Object.values(this.plugins)) {
-    plugin._bindNavigationHandlers();
-  }
-};
-
 /**************************/
 /** BookModel extensions **/
 /**************************/
@@ -1805,8 +1734,6 @@ BookReader.prototype.initUIStrings = function() {
     '.book_right': 'Flip right',
     '.play': 'Play',
     '.pause': 'Pause',
-    '.BRdn': 'Show/hide nav bar', // Would have to keep updating on state change to have just "Hide nav bar"
-    '.BRup': 'Show/hide nav bar',
     '.book_top': 'First page',
     '.book_bottom': 'Last page',
     '.book_leftmost': 'First page',

package/src/assets/images/icon_experiment.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd"><path d="m20.5312017 91.3043478h59.513497c1.2006191 0 2.1739131-.973294 2.1739131-2.173913 0-.3822983-.1008154-.7578365-.2922774-1.0887357l-25.7859388-44.5652174c-.3886001-.6716082-1.1057054-1.0851774-1.8816356-1.0851774h-9.4292698c-.7956659 0-1.5277636.4346832-1.9086489 1.1332607l-24.2982884 44.5652174c-.5747365 1.0541176-.1861212 2.3745648.8679964 2.9493012.3192413.1740599.677043.2652642 1.0406524.2652642z"/><path d="m58.2338112 0c3.9857698 0 7.0754101 2.92605669 7.0754101 6.52173913 0 1.94814675-1.1751392 3.49748367-3.1329548 4.78763887-.7622726.5029309-1.2209368 1.3542647-1.2211436 2.2659686l-.0000001 17.2659447c0 1.4033895.3628136 2.7830137 1.0533233 4.0053358l29.9382305 52.9958632c.6905098 1.2223221 1.0533234 2.6019463 1.0533234 4.0053358 0 4.5023213-3.655118 8.1521739-8.1639346 8.1521739h-69.6705953c-1.3692898 0-2.7165851-.3439149-3.9178929-1.0000939-3.95568315-2.1606754-5.40829754-7.1143442-3.24450505-11.0643289l29.09149695-53.106279c.6571256-1.1995773 1.0015367-2.5449317 1.0015367-3.9122489l-.0000001-17.3410875c-.000193-.8514978-.3997534-1.6498707-1.0727831-2.1614374l-.1478555-.104365c-1.8735444-1.2352818-3.0298253-2.70631266-3.1268298-4.53659758l-.00663-.25182269c0-3.59709019 3.085096-6.52173913 7.07541-6.52173913zm0 5.43478261h-17.4163939c-.3341979 0-.655354.0973303-.9634683.29199092l-.1529759.10543374c-.2276736.17021467-.2742532.49276685-.1040386.72044045l.0538074.06119811.0627915.05193913.1617643.10919499c2.2021208 1.45291154 3.5596356 3.87504265 3.6577257 6.49699115l.0057053.3033755.0000002 17.3417027c0 2.2788621-.5740185 4.5211194-1.6692279 6.5204148l-29.0914969 53.106279c-.7212642 1.3166616-.2370594 2.9678845 1.0815017 3.6881097.4004359.2187263.8495344.3333646 1.3059643.3333646h69.6705953c1.5029388 0 2.7213115-1.2166175 2.7213115-2.7173913 0-.4677965-.1209379-.9276713-.3511078-1.3351119l-29.9382305-52.9958633c-1.1508495-2.0372034-1.7555389-4.336577-1.7555389-6.6755596l.0000002-17.2665599c.0005984-2.6392088 1.2800823-5.10829666 3.4230589-6.63488495l.2416409-.16570308c.2977633-.19621921.380081-.59667116.1838618-.89443446-.0526648-.07991901-.1224381-.14713032-.2042705-.1967699-.2372346-.14393755-.4815228-.22451299-.7328507-.24174888z" fill-rule="nonzero"/></g></svg>

package/src/assets/images/translate.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="#FFF"><path d="m55.6227664 40v-10.9816972c0-1.2005631.4447386-2.2302572 1.3342157-3.0890823.8894772-.858825 1.9338187-1.2888775 3.1330245-1.2901574h7.702184v6.5391015l14.2078094-10.6188404-14.2078094-10.5593242v6.6005376h-7.8252813c-3.5579086 0-6.6082065 1.2300012-9.1508934 3.6900038-2.542687 2.4600026-3.8146923 5.4095738-3.8160159 8.8487137v10.8607449z" transform="matrix(-1 0 0 1 129 0)"/><path d="m26.6227664 90v-10.9816972c0-1.2005631.4447386-2.2302572 1.3342157-3.0890823.8894772-.858825 1.9338187-1.2888775 3.1330245-1.2901574h7.702184v6.5391015l14.2078094-10.6188404-14.2078094-10.5593242v6.6005376h-7.8252813c-3.5579086 0-6.6082065 1.2300012-9.1508934 3.6900038-2.542687 2.4600026-3.8146923 5.4095738-3.8160159 8.8487137v10.8607449z" transform="matrix(1 0 0 -1 0 150)"/><g fill-rule="evenodd"><path d="m36.1711896 0c.7952259 0 1.5825239.11678603 2.361894.35035809.7793701.23357205 1.3385895.44226661 1.6776582.62608367.3390687.18381707.9354881.50929765 1.7892582.97644177v53.04711647h-41.11634795c-.26466873-.2667421-.47079323-.6253926-.61837349-1.0759518-.14758025-.4505591-.23600644-.8423796-.26527856-1.1754617v-52.7485865zm-15.8773502 11c-2.6260005.9445399-3.9390007 1.4168099-3.9390007 1.4168099.8613947 1.0405262 1.656859 2.1393299 2.3863927 3.2964109.2700118.4282536.5298575.8568906.7795373 1.2859111l-14.5207687.0008681v3l6.4238969.0000134c.8804258 3.5657294 2.3239844 6.8097976 4.3306759 9.7322048 1.0398193 1.5143213 2.176787 2.9231182 3.410903 4.2263908-3.5068695 3.0329696-7.8850877 5.246602-13.13321774 6.6415991 1.30042972 2.2665279 1.95064458 3.3997919 1.95064458 3.3997919 5.83922866-1.8768332 10.47451876-4.3674587 13.90587026-7.4718765.7278161.6172884 1.4851619 1.2034299 2.2700924 1.7596083 3.2815631 2.3252177 6.8996284 4.2293071 10.8541961 5.7122682 1.3246257-2.1759469 1.9869386-3.2639204 1.9869386-3.2639204-3.7993227-1.4042832-7.2042979-3.1143224-10.2149257-5.1301175-.8119265-.5436333-1.5953934-1.1239157-2.3504008-1.7408472 3.3115726-3.9242615 5.6922469-8.5457291 7.1440766-13.8651104l4.3889918-.0000045v-3l-12.2148765-.0011479c-.3495756-.7520023-.7243601-1.4925223-1.1243535-2.2215599-.7129337-1.2994097-1.4911578-2.5585071-2.3346725-3.7772922zm7.4469262 9.0006565c-1.3612535 4.5640835-3.3583061 8.3614158-5.9911579 11.3919968-1.0548712-1.0913671-2.041101-2.2689312-2.9598238-3.5334282-1.7358278-2.3891311-2.9991645-5.0087964-3.79001-7.858996z"/><path d="m94.1711896 45c.7952259 0 1.5825239.116786 2.361894.3503581.7793701.233572 1.3385895.4422666 1.6776582.6260837.3390687.183817.9354881.5092976 1.7892582.9764417v53.0471165h-41.116348c-.2646687-.2667421-.4707932-.6253926-.6183734-1.0759518-.1475803-.4505591-.2360065-.8423796-.2652786-1.1754617v-52.7485865zm-11.1769203 11h-7.8424068l-13.1518625 33h7.6962751l2.7277937-7.3487395h13.0057306l2.6303725 7.3487395h7.9398281zm-3.8794044 8.25 4.1351351 12.375h-8.5l4.272973-12.375z"/></g></g></svg>

package/src/css/_BRnav.scss

@@ -35,14 +35,6 @@
       border: 3px solid rgba(255,255,255,0.3);
     }
   }
-
-  .BRnavCntl {
-    z-index: $brZindexBase + 5;
-    background-color: $brColorDarkBorder;
-  }
-  .BRnavCntlBtm:hover {
-    background-color: $brColorThemeblue;
-  }
 }
 
 @mixin brNavLight {
@@ -66,14 +58,6 @@
       border: 3px solid rgba($brColorThemeblue,0.3);
     }
   }
-
-  .BRnavCntl {
-    background-color: $brColorLightBorder;
-  }
-
-  .BRnavCntlBtm:hover {
-    background-color: $brColorThemeblue;
-  }
 }
 
 @keyframes fadeUp {
@@ -319,20 +303,12 @@
   font-size: .8em;
   vertical-align: top;
 }
-.BRup {
-  background-image: url("images/nav_control-up.png");
-  background-repeat: no-repeat;
-}
-
 
 /* Mobile Only */
 @media (max-width: $brBreakPointMobile) {
   /* hide navline chapters and search in mobile */
   .BRnavline .BRchapter { display: none; }
 
-  .BRnavCntlBtm {
-    bottom: $brNavHeightMobile;
-  }
   .BRpager.ui-slider {
     height: 10px;
     top: math.div($brNavHeightMobile, 2) - 5px;

package/src/css/_BRsearch.scss

@@ -45,6 +45,7 @@
   // but they appear the same in the UI.
   .searchHiliteLayer, .ttsHiliteLayer {
     pointer-events: none;
+    z-index: 4;
 
     rect {
       // Note: Can't use fill-opacity ; safari inexplicably applies that to
@@ -241,11 +242,6 @@
         height: 18px;
       }
     }
-    + .BRnav {
-      .BRnavCntl {
-        display: none;
-      }
-    }
   }
 }
 

package/src/css/_TextSelection.scss

@@ -1,4 +1,4 @@
-.BRtextLayer {
+.BRtextLayer, .BRtranslateLayer {
     z-index: 2;
     position: absolute;
     top: 0;
@@ -8,9 +8,16 @@
     // Make it so right-clicking on "blank" part of text layer sends events to the image (for saving)
     pointer-events: none;
     cursor: text;
+}
+
+.BRtextLayer {
     mix-blend-mode: multiply;
 }
 
+.BRtranslateLayer {
+    hyphens: auto;
+}
+
 .BRparagraphElement {
     margin: 0;
     cursor: text;
@@ -81,21 +88,20 @@
 // These are Microsoft Edge specific fixed to make some of the
 // browsers features work well. These are for the in-place
 // translation.
+.BRtextLayer:has([_istranslated="1"], msreadoutspan) {
+    mix-blend-mode: normal;
+}
+
 .BRwordElement, .BRspace {
     &[_istranslated="1"], &[_msttexthash] {
-        background-color: #e4dccd;
         color: black;
         letter-spacing: unset !important;
-        background: #ccbfa7;
     }
 }
 
-.BRlineElement font[_mstmutation="1"] {
-    background: #ccbfa7;
-}
-
 .BRlineElement:has([_istranslated="1"], [_msttexthash]) {
-    background-color: #e4dccd;
+    background: rgba(248, 237, 192, 0.8);
+    backdrop-filter: blur(8px);
     color: black;
     text-align: justify;
     width: inherit;
@@ -105,6 +111,29 @@
 }
 
 .BRlineElement[_msttexthash] {
-    background: #ccbfa7;
     word-spacing: unset !important;
 }
+
+.BRtranslateLayer .BRparagraphElement {
+    pointer-events: auto;
+    overflow-y: auto;
+    background: rgba(248, 237, 192, 0.8);
+    backdrop-filter: blur(8px);
+    color:black;
+    line-height: 1em;
+    text-align: justify;
+}
+
+.BRtranslateLayer .BRparagraphElement .BRlineElement {
+    white-space: break-spaces;
+    display: inline-block;
+}
+
+.BRtextLayer.showingTranslation {
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.BRtranslateLayer .BRparagraphElement.BRtranslateHidden {
+    display: none;
+}

package/src/plugins/plugin.experiments.js

@@ -21,6 +21,9 @@ class ExperimentModel {
   /** @type {string} */
   learnMore;
 
+  /** @type {import("@/src/BookReader.js").default} */
+  br;
+
   assetRoot = '/BookReader/';
 
   enabledLoading = false;
@@ -46,10 +49,32 @@ export class ExperimentsPlugin extends BookReaderPlugin {
 
     /** Where the state of this plugin is saved in localStorage */
     localStorageKey: 'BrExperiments',
+
+    /** The experiments that should be shown in the experiments panel */
+    enabledExperiments: ['translate'],
   }
 
   /** @type {ExperimentModel[]} */
-  experiments = [
+  allExperiments = [
+    new class extends ExperimentModel {
+      name = 'translate';
+      title = 'Translate Plugin';
+      description = "Translate books directly in your browser.";
+      learnMore = 'https://mozilla.github.io/translations/';
+      icon = 'images/translate.svg';
+      enabled = false;
+      async enable({ manual = false}) {
+        await importAsScript(this.buildAssetPath('plugins/plugin.translate.js'));
+        this.br.initializePlugin('translate');
+      }
+      async disable() {
+        // need to reload to remove translate plugin script
+        // Sleep so that the event loop can finish processing before the reload
+        sleep(0).then(() => {
+          window.location.reload();
+        });
+      }
+    }(),
     new class extends ExperimentModel {
       name = 'hypothesis';
       title = 'Hypothes.is';
@@ -93,10 +118,11 @@ export class ExperimentsPlugin extends BookReaderPlugin {
       return;
     }
 
-    for (const experiment of this.experiments) {
+    for (const experiment of this.allExperiments) {
       // TODO: imagesBaseURL should be replaced with assetRoot everywhere
       experiment.assetRoot = this.br.options.imagesBaseURL.replace(/images\/$/, '');
       experiment.icon = experiment.buildAssetPath(experiment.icon);
+      experiment.br = this.br;
     }
 
     this._loadExperimentStates();
@@ -106,7 +132,7 @@ export class ExperimentsPlugin extends BookReaderPlugin {
 
   _loadExperimentStates() {
     const savedStates = JSON.parse(localStorage.getItem(this.options.localStorageKey) || '{}');
-    this.experiments.forEach(experiment => {
+    this.allExperiments.forEach(experiment => {
       if (savedStates[experiment.name] !== undefined) {
         experiment.enabled = savedStates[experiment.name];
         if (experiment.enabled) {
@@ -118,7 +144,7 @@ export class ExperimentsPlugin extends BookReaderPlugin {
 
   _saveExperimentStates() {
     const states = Object.fromEntries(
-      this.experiments.map(experiment => [experiment.name, experiment.enabled]),
+      this.allExperiments.map(experiment => [experiment.name, experiment.enabled]),
     );
     localStorage.setItem(this.options.localStorageKey, JSON.stringify(states));
   }
@@ -145,13 +171,12 @@ export class ExperimentsPlugin extends BookReaderPlugin {
   _render() {
     this.br.shell.menuProviders['experiments'] = {
       id: 'experiments',
-      // https://icon-sets.iconify.design/hugeicons/?icon-filter=eco-lab-02&query=lab
       icon: html`
-        <svg xmlns="http://www.w3.org/2000/svg" width="34" viewBox="0 0 24 24"><path fill="currentColor" d="M10 5.75h1.25v2.5H9.5c-.41 0-.75.34-.75.75s.34.75.75.75h.25v1.96A5.72 5.72 0 0 0 6.25 17c0 3.17 2.58 5.75 5.75 5.75s5.75-2.58 5.75-5.75c0-2.33-1.39-4.4-3.5-5.29V9.75h.25c.41 0 .75-.34.75-.75s-.34-.75-.75-.75h-1.75v-1.5H14c1.52 0 2.75-1.23 2.75-2.75V3c0-.41-.34-.75-.75-.75h-2c-.579 0-1.115.178-1.558.483A2.75 2.75 0 0 0 10 1.25H8c-.41 0-.75.34-.75.75v1c0 1.52 1.23 2.75 2.75 2.75m2.75-.5V5c0-.69.56-1.25 1.25-1.25h1.25V4c0 .69-.56 1.25-1.25 1.25zm-1.5 6.98V9.75h1.5v2.48c0 .33.22.62.53.72c1.77.56 2.97 2.19 2.97 4.06A4.26 4.26 0 0 1 12 21.26a4.26 4.26 0 0 1-4.25-4.25c0-1.87 1.19-3.5 2.97-4.06c.32-.1.53-.39.53-.72m-2.5-9.48H10c.69 0 1.25.56 1.25 1.25v.25H10c-.69 0-1.25-.56-1.25-1.25z" color="currentColor"/></svg>
+        <img src="${this.br.options.imagesBaseURL}/icon_experiment.svg" width="26"/>
       `,
       label: 'Experiments',
       component: html`<br-experiments-panel
-        .experiments="${this.experiments}"
+        .experiments="${this.allExperiments.filter(experiment => this.options.enabledExperiments.includes(experiment.name))}"
         @connected="${e => this._panel = e.target}"
         @toggle="${async e => {
         await this._toggleExperiment(e.detail.experiment, e.detail.enabled);
@@ -240,14 +265,14 @@ export class BrExperimentToggle extends LitElement {
 
   render() {
     return html`
-      <div class="experiment-card">
+      <div class="experiment-card" style="margin-bottom: 10px;">
         <div style="display: flex; align-items: center; gap: 10px;">
           <img src="${this.icon}" style="width: 20px; height: 20px;" alt="" />
           <div style="flex-grow: 1; font-weight: bold;">${this.title}</div>
         </div>
         <p style="opacity: 0.9">
           ${this.description}
-          <a href="${this.learnMore}" target="_blank">Learn more</a>.
+          ${this.learnMore ? html`<a href="${this.learnMore}" target="_blank">Learn more</a>.` : ''}
         </p>
         <div style="display: flex">
           <div style="flex-grow: 1;"></div>