@internetarchive/bookreader 5.0.0-111 → 5.0.0-113

package/BookReader/plugins/plugin.vendor-fullscreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugins/plugin.vendor-fullscreen.js","mappings":"8IACA,IAAIA,EAAuB,cACvBC,EAAQ,EAAQ,MAChBC,EAAc,EAAQ,MAM1BC,EAAOC,QAAU,SAAUC,GACzB,OAAOJ,EAAM,WACX,QAASC,EAAYG,MANf,cAOGA,MACHL,GAAwBE,EAAYG,GAAaC,OAASD,CAClE,EACF,C,uBCdA,IAAIE,EAAI,EAAQ,MACZC,EAAQ,aAKZD,EAAE,CAAEE,OAAQ,SAAUC,OAAO,EAAMC,OAJN,EAAQ,IAIMC,CAAuB,SAAW,CAC3EC,KAAM,WACJ,OAAOL,EAAMM,KACf,G,2CCIuCC,E,oBATzC,IAAKC,IAAY,CACf,IAAMC,EAAkB,gCAExBC,EAAOC,OAAOC,WAAWC,eAAgB,CAEvCC,8BAA8B,IAIhCF,WAAWG,UAAUC,OAAkBT,EAMpCK,WAAWG,UAAUC,MALf,SAASC,GACdV,EAAOW,KAAKZ,KAAMW,GAElBX,KAAKa,0BAA2B,CAClC,GAIFP,WAAWG,UAAUK,eAAkB,SAASb,GAC9C,OAAO,SAASc,GACd,IAAIC,EAAWf,EAAOW,KAAKZ,KAAMe,GAIjC,OAHIf,KAAKa,2BACPG,EAAWhB,KAAKiB,cAEXD,CACT,CACF,CARuC,CAQpCV,WAAWG,UAAUK,gBAGxBR,WAAWG,UAAUS,KAAQ,SAASjB,GACpC,OAAO,WACLA,EAAOW,KAAKZ,MAEPmB,KAILC,EAA6BpB,KAAM,SAACqB,GAClCA,EAAEC,KAAKC,SACPF,EAAEC,KAAKE,kBACP,IAAMC,EAAchC,EAAE,gBAChBiC,EAAOjC,EAAE,aACXkC,IAGkBlC,EAAEmC,KACVC,OAAOJ,GAAaI,OAAOH,GAIvCjC,EAAEqC,SAASC,MAAMF,OAAOJ,GAAaI,OAAOH,EAEhD,EACF,CACF,CAzB6B,CAyB1BpB,WAAWG,UAAUS,MAKxBZ,WAAWG,UAAUuB,gBAAkB,WAAW,IAAAC,EAAA,KAChDjC,KAAKkC,KAAKC,aAAaC,IAAI,UAAW,GAElB3C,EAAE4C,QAAQC,SACXtC,KAAKuC,sBACtBvC,KAAKwC,WAAWxC,KAAKiB,cAGvBjB,KAAKa,0BAA2B,EAChCb,KAAKwB,kBAELxB,KAAKuB,SACLvB,KAAKyC,YAAYzC,KAAK0C,gBAEtB1C,KAAKkC,KAAKC,aAAaQ,QAAQ,CAAEC,QAAS,GAAK,IAAK,UAEpDnD,EAAEqC,UAAUe,GAAG,SAADC,OAAU3C,GAAmB,SAAAkB,GACvB,KAAdA,EAAE0B,SAAgBd,EAAKe,gBAC7B,EACF,EAKA1C,WAAWG,UAAUwC,eAAiB,WACpCjD,KAAKkC,KAAKC,aAAaC,IAAI,UAAW,GAEtC3C,EAAEqC,UAAUoB,IAAI,QAAU/C,GAE1BH,KAAK2B,oBAAqB,EAC1B3B,KAAKwB,kBAELxB,KAAKuB,SACLvB,KAAKkC,KAAKC,aAAaQ,QAAQ,CAAEC,QAAS,GAAK,IAAK,SACtD,EAOAtC,WAAWG,UAAU0C,aAAe,WAClC,OAAOxB,KAAwB3B,KAAKa,wBACtC,EAKAP,WAAWG,UAAU2C,iBAAmB,WAClCpD,KAAKmD,eACHhC,IACFkC,IAEArD,KAAKiD,iBAGH9B,IACFmC,EAAkBtD,KAAKkC,KAAKqB,IAAI,IAEhCvD,KAAKgC,iBAGX,EAGA1B,WAAWkD,KAAKtD,SAAWA,EAG3BI,WAAWkD,KAAK5B,qBAAuBA,EAGvCtB,WAAWkD,KAAKpC,6BAA+BA,EAG/Cd,WAAWkD,KAAKrC,kBAAoBA,EAGpCb,WAAWkD,KAAKF,kBAAoBA,EAGpChD,WAAWkD,KAAKH,eAAiBA,EAGjC/C,WAAWkD,KAAK7B,mBAAqBA,CACvC,CASO,SAASC,IACd,OAAOE,SAAS2B,mBACd3B,SAAS4B,yBACT5B,SAAS6B,sBACT7B,SAAS8B,mBACb,CAOO,SAASjC,IAEd,OAAO8B,MADmB7B,GAE5B,CAOO,SAASyB,IACVvB,SAASuB,eACXvB,SAASuB,iBACAvB,SAAS+B,qBAClB/B,SAAS+B,uBACA/B,SAASgC,oBAClBhC,SAASgC,sBACAhC,SAASiC,kBAClBjC,SAASiC,kBAEb,CAOO,SAAST,EAAkBU,GAC5BA,EAAQV,kBACVU,EAAQV,oBACCU,EAAQC,wBACjBD,EAAQC,0BACCD,EAAQE,qBACjBF,EAAQE,uBACCF,EAAQG,qBACjBH,EAAQG,qBAEZ,CAQO,SAAShD,IACd,OAAQW,SAASsC,mBACftC,SAASuC,yBACTvC,SAASwC,sBACTxC,SAASyC,mBACb,CAOO,SAASnD,EACdE,EAAMkD,GAEN,IAAMC,EAAQ,oBAMRC,GAAcD,EALI,CACtB,SACA,MACA,MAE0CE,KAAKF,GAASA,GAAO1E,OACjEN,EAAEqC,UAAUe,GAAG6B,EAAYpD,EAAMkD,EACnC,CAOO,SAAStE,IACd,YAAsC,IAAvBmC,OAAOuC,cAA8E,IAA7CC,UAAUC,UAAUC,QAAQ,WACrF,C","sources":["webpack://@internetarchive/bookreader/./node_modules/core-js/internals/string-trim-forced.js","webpack://@internetarchive/bookreader/./node_modules/core-js/modules/es.string.trim.js","webpack://@internetarchive/bookreader/./src/plugins/plugin.vendor-fullscreen.js"],"sourcesContent":["'use strict';\nvar PROPER_FUNCTION_NAME = require('../internals/function-name').PROPER;\nvar fails = require('../internals/fails');\nvar whitespaces = require('../internals/whitespaces');\n\nvar non = '\\u200B\\u0085\\u180E';\n\n// check that a method works with the correct list\n// of whitespaces and has a correct name\nmodule.exports = function (METHOD_NAME) {\n  return fails(function () {\n    return !!whitespaces[METHOD_NAME]()\n      || non[METHOD_NAME]() !== non\n      || (PROPER_FUNCTION_NAME && whitespaces[METHOD_NAME].name !== METHOD_NAME);\n  });\n};\n","'use strict';\nvar $ = require('../internals/export');\nvar $trim = require('../internals/string-trim').trim;\nvar forcedStringTrimMethod = require('../internals/string-trim-forced');\n\n// `String.prototype.trim` method\n// https://tc39.es/ecma262/#sec-string.prototype.trim\n$({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {\n  trim: function trim() {\n    return $trim(this);\n  }\n});\n","/* global BookReader */\n\n/**\n * Toggles browser's native fullscreen mode if available device is not mobile\n */\nif (!isMobile()) {\n  const EVENT_NAMESPACE = '.bookreader_vendor-fullscreen';\n\n  jQuery.extend(BookReader.defaultOptions, {\n    /** @type {boolean} */\n    enableVendorFullscreenPlugin: true,\n  });\n\n  /** @override */\n  BookReader.prototype.setup = (function(super_) {\n    return function(options) {\n      super_.call(this, options);\n\n      this.isVendorFullscreenActive = false;\n    };\n  })(BookReader.prototype.setup);\n\n  /** @override */\n  BookReader.prototype.getInitialMode = (function(super_) {\n    return function(params) {\n      let nextMode = super_.call(this, params);\n      if (this.isVendorFullscreenActive) {\n        nextMode = this.constMode1up;\n      }\n      return nextMode;\n    };\n  })(BookReader.prototype.getInitialMode);\n\n  /** @override */\n  BookReader.prototype.init = (function(super_) {\n    return function() {\n      super_.call(this);\n\n      if (!fullscreenAllowed()) {\n        return;\n      }\n      // In fullscreen mode the colorbox and overlay need to be inside the fullscreen element to display properly.\n      bindFullscreenChangeListener(this, (e) => {\n        e.data.resize();\n        e.data.updateBrClasses();\n        const cboxOverlay = $('#cboxOverlay');\n        const cbox = $('#colorbox');\n        if (isFullscreenActive()) {\n          // In full screen mode, the colorbox and overlay need\n          // to be children of the fullscreen element to display properly.\n          const $fullscreen = $(getFullscreenElement());\n          $fullscreen.append(cboxOverlay).append(cbox);\n        } else {\n          // In non-fullscreen mode, the colorbox and overlay need\n          // to be children of the main document body.\n          $(document.body).append(cboxOverlay).append(cbox);\n        }\n      });\n    };\n  })(BookReader.prototype.init);\n\n  /**\n   * Start fullscreen mode\n   */\n  BookReader.prototype.enterFullWindow = function() {\n    this.refs.$brContainer.css('opacity', 0);\n\n    const windowWidth = $(window).width();\n    if (windowWidth <= this.onePageMinBreakpoint) {\n      this.switchMode(this.constMode1up);\n    }\n\n    this.isVendorFullscreenActive = true;\n    this.updateBrClasses();\n\n    this.resize();\n    this.jumpToIndex(this.currentIndex());\n\n    this.refs.$brContainer.animate({ opacity: 1 }, 400, 'linear');\n\n    $(document).on(`keyup.${EVENT_NAMESPACE}`, e => {\n      if (e.keyCode === 27) this.exitFullScreen();\n    });\n  };\n\n  /**\n   * Exit from fullscreen mode\n   */\n  BookReader.prototype.exitFullWindow = function() {\n    this.refs.$brContainer.css('opacity', 0);\n\n    $(document).off('keyup' + EVENT_NAMESPACE);\n\n    this.isFullscreenActive = false;\n    this.updateBrClasses();\n\n    this.resize();\n    this.refs.$brContainer.animate({ opacity: 1 }, 400, 'linear');\n  };\n\n  /**\n   * Returns true if fullscreen mode is enabled\n   *\n   * @returns {boolean}\n   */\n  BookReader.prototype.isFullscreen = function() {\n    return isFullscreenActive() || this.isVendorFullscreenActive;\n  };\n\n  /**\n   * Toggle screen\n   */\n  BookReader.prototype.toggleFullscreen = function() {\n    if (this.isFullscreen()) {\n      if (fullscreenAllowed()) {\n        exitFullscreen();\n      } else {\n        this.exitFullWindow();\n      }\n    } else {\n      if (fullscreenAllowed()) {\n        requestFullscreen(this.refs.$br[0]);\n      } else {\n        this.enterFullWindow();\n      }\n    }\n  };\n\n  /** @deprecated */\n  BookReader.util.isMobile = isMobile;\n\n  /** @deprecated */\n  BookReader.util.getFullscreenElement = getFullscreenElement;\n\n  /** @deprecated */\n  BookReader.util.bindFullscreenChangeListener = bindFullscreenChangeListener;\n\n  /** @deprecated */\n  BookReader.util.fullscreenAllowed = fullscreenAllowed;\n\n  /** @deprecated */\n  BookReader.util.requestFullscreen = requestFullscreen;\n\n  /** @deprecated */\n  BookReader.util.exitFullscreen = exitFullscreen;\n\n  /** @deprecated */\n  BookReader.util.isFullscreenActive = isFullscreenActive;\n}\n\n\n/**\n * Returns the DOM element being used for fullscreen.\n *\n * @returns {HTMLElement}\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement\n */\nexport function getFullscreenElement() {\n  return document.fullscreenElement ||\n    document.webkitFullscreenElement ||\n    document.mozFullScreenElement ||\n    document.msFullscreenElement;\n}\n\n/**\n * Returns true if the document is in fullscreen mode.\n *\n * @returns {boolean}\n */\nexport function isFullscreenActive() {\n  const fullscreenElement = getFullscreenElement();\n  return fullscreenElement !== null && fullscreenElement !== undefined;\n}\n\n/**\n * Exits fullscreen mode.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen\n */\nexport function exitFullscreen() {\n  if (document.exitFullscreen) {\n    document.exitFullscreen();\n  } else if (document.webkitExitFullscreen) {\n    document.webkitExitFullscreen();\n  } else if (document.mozCancelFullScreen) {\n    document.mozCancelFullScreen();\n  } else if (document.msExitFullscreen) {\n    document.msExitFullscreen();\n  }\n}\n\n/**\n * Requests fullscreen mode for the given element\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen\n */\nexport function requestFullscreen(element) {\n  if (element.requestFullscreen) {\n    element.requestFullscreen();\n  } else if (element.webkitRequestFullscreen) {\n    element.webkitRequestFullscreen();\n  } else if (element.mozRequestFullScreen) {\n    element.mozRequestFullScreen();\n  } else if (element.msRequestFullscreen) {\n    element.msRequestFullscreen();\n  }\n}\n\n/**\n * Returns true if fullscreen mode is allowed on this device and document.\n *\n * @returns {boolean}\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenEnabled\n */\nexport function fullscreenAllowed() {\n  return (document.fullscreenEnabled ||\n    document.webkitFullscreenEnabled ||\n    document.mozFullScreenEnabled ||\n    document.msFullScreenEnabled);\n}\n\n/**\n * jQuery-style binding to a fullscreenchange event.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event\n */\nexport function bindFullscreenChangeListener(\n  data, fullscreenchangeListener,\n) {\n  const event = 'fullscreenchange ';\n  const vendor_prefixes = [\n    'webkit',\n    'moz',\n    'ms',\n  ];\n  const all_events = (event + vendor_prefixes.join(event) + event).trim();\n  $(document).on(all_events, data, fullscreenchangeListener);\n}\n\n/**\n * Returns true if current device is mobile\n *\n * @returns {boolean}\n */\nexport function isMobile() {\n  return (typeof window.orientation !== 'undefined') || (navigator.userAgent.indexOf('IEMobile') !== -1);\n}\n"],"names":["PROPER_FUNCTION_NAME","fails","whitespaces","module","exports","METHOD_NAME","name","$","$trim","target","proto","forced","forcedStringTrimMethod","trim","this","super_","isMobile","EVENT_NAMESPACE","jQuery","extend","BookReader","defaultOptions","enableVendorFullscreenPlugin","prototype","setup","options","call","isVendorFullscreenActive","getInitialMode","params","nextMode","constMode1up","init","fullscreenAllowed","bindFullscreenChangeListener","e","data","resize","updateBrClasses","cboxOverlay","cbox","isFullscreenActive","getFullscreenElement","append","document","body","enterFullWindow","_this","refs","$brContainer","css","window","width","onePageMinBreakpoint","switchMode","jumpToIndex","currentIndex","animate","opacity","on","concat","keyCode","exitFullScreen","exitFullWindow","off","isFullscreen","toggleFullscreen","exitFullscreen","requestFullscreen","$br","util","fullscreenElement","webkitFullscreenElement","mozFullScreenElement","msFullscreenElement","webkitExitFullscreen","mozCancelFullScreen","msExitFullscreen","element","webkitRequestFullscreen","mozRequestFullScreen","msRequestFullscreen","fullscreenEnabled","webkitFullscreenEnabled","mozFullScreenEnabled","msFullScreenEnabled","fullscreenchangeListener","event","all_events","join","orientation","navigator","userAgent","indexOf"],"sourceRoot":""}
+{"version":3,"file":"plugins/plugin.vendor-fullscreen.js","mappings":"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","sources":["webpack://@internetarchive/bookreader/./src/plugins/plugin.vendor-fullscreen.js"],"sourcesContent":["/* global BookReader */\n\n/**\n * Toggles browser's native fullscreen mode if available device is not mobile\n */\nif (!isMobile()) {\n  const EVENT_NAMESPACE = '.bookreader_vendor-fullscreen';\n\n  jQuery.extend(BookReader.defaultOptions, {\n    /** @type {boolean} */\n    enableVendorFullscreenPlugin: true,\n  });\n\n  /** @override */\n  BookReader.prototype.setup = (function(super_) {\n    return function(options) {\n      super_.call(this, options);\n\n      this.isVendorFullscreenActive = false;\n    };\n  })(BookReader.prototype.setup);\n\n  /** @override */\n  BookReader.prototype.getInitialMode = (function(super_) {\n    return function(params) {\n      let nextMode = super_.call(this, params);\n      if (this.isVendorFullscreenActive) {\n        nextMode = this.constMode1up;\n      }\n      return nextMode;\n    };\n  })(BookReader.prototype.getInitialMode);\n\n  /** @override */\n  BookReader.prototype.init = (function(super_) {\n    return function() {\n      super_.call(this);\n\n      if (!fullscreenAllowed()) {\n        return;\n      }\n      // In fullscreen mode the colorbox and overlay need to be inside the fullscreen element to display properly.\n      bindFullscreenChangeListener(this, (e) => {\n        e.data.resize();\n        e.data.updateBrClasses();\n        const cboxOverlay = $('#cboxOverlay');\n        const cbox = $('#colorbox');\n        if (isFullscreenActive()) {\n          // In full screen mode, the colorbox and overlay need\n          // to be children of the fullscreen element to display properly.\n          const $fullscreen = $(getFullscreenElement());\n          $fullscreen.append(cboxOverlay).append(cbox);\n        } else {\n          // In non-fullscreen mode, the colorbox and overlay need\n          // to be children of the main document body.\n          $(document.body).append(cboxOverlay).append(cbox);\n        }\n      });\n    };\n  })(BookReader.prototype.init);\n\n  /**\n   * Start fullscreen mode\n   */\n  BookReader.prototype.enterFullWindow = function() {\n    this.refs.$brContainer.css('opacity', 0);\n\n    const windowWidth = $(window).width();\n    if (windowWidth <= this.onePageMinBreakpoint) {\n      this.switchMode(this.constMode1up);\n    }\n\n    this.isVendorFullscreenActive = true;\n    this.updateBrClasses();\n\n    this.resize();\n    this.jumpToIndex(this.currentIndex());\n\n    this.refs.$brContainer.animate({ opacity: 1 }, 400, 'linear');\n\n    $(document).on(`keyup.${EVENT_NAMESPACE}`, e => {\n      if (e.keyCode === 27) this.exitFullScreen();\n    });\n  };\n\n  /**\n   * Exit from fullscreen mode\n   */\n  BookReader.prototype.exitFullWindow = function() {\n    this.refs.$brContainer.css('opacity', 0);\n\n    $(document).off('keyup' + EVENT_NAMESPACE);\n\n    this.isFullscreenActive = false;\n    this.updateBrClasses();\n\n    this.resize();\n    this.refs.$brContainer.animate({ opacity: 1 }, 400, 'linear');\n  };\n\n  /**\n   * Returns true if fullscreen mode is enabled\n   *\n   * @returns {boolean}\n   */\n  BookReader.prototype.isFullscreen = function() {\n    return isFullscreenActive() || this.isVendorFullscreenActive;\n  };\n\n  /**\n   * Toggle screen\n   */\n  BookReader.prototype.toggleFullscreen = function() {\n    if (this.isFullscreen()) {\n      if (fullscreenAllowed()) {\n        exitFullscreen();\n      } else {\n        this.exitFullWindow();\n      }\n    } else {\n      if (fullscreenAllowed()) {\n        requestFullscreen(this.refs.$br[0]);\n      } else {\n        this.enterFullWindow();\n      }\n    }\n  };\n\n  /** @deprecated */\n  BookReader.util.isMobile = isMobile;\n\n  /** @deprecated */\n  BookReader.util.getFullscreenElement = getFullscreenElement;\n\n  /** @deprecated */\n  BookReader.util.bindFullscreenChangeListener = bindFullscreenChangeListener;\n\n  /** @deprecated */\n  BookReader.util.fullscreenAllowed = fullscreenAllowed;\n\n  /** @deprecated */\n  BookReader.util.requestFullscreen = requestFullscreen;\n\n  /** @deprecated */\n  BookReader.util.exitFullscreen = exitFullscreen;\n\n  /** @deprecated */\n  BookReader.util.isFullscreenActive = isFullscreenActive;\n}\n\n\n/**\n * Returns the DOM element being used for fullscreen.\n *\n * @returns {HTMLElement}\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/fullscreenElement\n */\nexport function getFullscreenElement() {\n  return document.fullscreenElement ||\n    document.webkitFullscreenElement ||\n    document.mozFullScreenElement ||\n    document.msFullscreenElement;\n}\n\n/**\n * Returns true if the document is in fullscreen mode.\n *\n * @returns {boolean}\n */\nexport function isFullscreenActive() {\n  const fullscreenElement = getFullscreenElement();\n  return fullscreenElement !== null && fullscreenElement !== undefined;\n}\n\n/**\n * Exits fullscreen mode.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen\n */\nexport function exitFullscreen() {\n  if (document.exitFullscreen) {\n    document.exitFullscreen();\n  } else if (document.webkitExitFullscreen) {\n    document.webkitExitFullscreen();\n  } else if (document.mozCancelFullScreen) {\n    document.mozCancelFullScreen();\n  } else if (document.msExitFullscreen) {\n    document.msExitFullscreen();\n  }\n}\n\n/**\n * Requests fullscreen mode for the given element\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen\n */\nexport function requestFullscreen(element) {\n  if (element.requestFullscreen) {\n    element.requestFullscreen();\n  } else if (element.webkitRequestFullscreen) {\n    element.webkitRequestFullscreen();\n  } else if (element.mozRequestFullScreen) {\n    element.mozRequestFullScreen();\n  } else if (element.msRequestFullscreen) {\n    element.msRequestFullscreen();\n  }\n}\n\n/**\n * Returns true if fullscreen mode is allowed on this device and document.\n *\n * @returns {boolean}\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenEnabled\n */\nexport function fullscreenAllowed() {\n  return (document.fullscreenEnabled ||\n    document.webkitFullscreenEnabled ||\n    document.mozFullScreenEnabled ||\n    document.msFullScreenEnabled);\n}\n\n/**\n * jQuery-style binding to a fullscreenchange event.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreenchange_event\n */\nexport function bindFullscreenChangeListener(\n  data, fullscreenchangeListener,\n) {\n  const event = 'fullscreenchange ';\n  const vendor_prefixes = [\n    'webkit',\n    'moz',\n    'ms',\n  ];\n  const all_events = (event + vendor_prefixes.join(event) + event).trim();\n  $(document).on(all_events, data, fullscreenchangeListener);\n}\n\n/**\n * Returns true if current device is mobile\n *\n * @returns {boolean}\n */\nexport function isMobile() {\n  return (typeof window.orientation !== 'undefined') || (navigator.userAgent.indexOf('IEMobile') !== -1);\n}\n"],"names":["super_","isMobile","EVENT_NAMESPACE","jQuery","extend","BookReader","defaultOptions","enableVendorFullscreenPlugin","prototype","setup","options","call","this","isVendorFullscreenActive","getInitialMode","params","nextMode","constMode1up","init","fullscreenAllowed","bindFullscreenChangeListener","e","data","resize","updateBrClasses","cboxOverlay","$","cbox","isFullscreenActive","getFullscreenElement","append","document","body","enterFullWindow","_this","refs","$brContainer","css","window","width","onePageMinBreakpoint","switchMode","jumpToIndex","currentIndex","animate","opacity","on","concat","keyCode","exitFullScreen","exitFullWindow","off","isFullscreen","toggleFullscreen","exitFullscreen","requestFullscreen","$br","util","fullscreenElement","webkitFullscreenElement","mozFullScreenElement","msFullscreenElement","webkitExitFullscreen","mozCancelFullScreen","msExitFullscreen","element","webkitRequestFullscreen","mozRequestFullScreen","msRequestFullscreen","fullscreenEnabled","webkitFullscreenEnabled","mozFullScreenEnabled","msFullScreenEnabled","fullscreenchangeListener","event","all_events","join","trim","orientation","navigator","userAgent","indexOf"],"sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/bookreader",
-  "version": "5.0.0-111",
+  "version": "5.0.0-113",
   "description": "The Internet Archive BookReader.",
   "type": "module",
   "files": [

package/src/BookReader/Navbar/Navbar.js

@@ -314,7 +314,7 @@ export class Navbar {
     const $sliders = this.$root.find('.BRpager').slider({
       animate: true,
       min: 0,
-      max: br.book.getNumLeafs() - 1,
+      max: Math.max(0, br.book.getNumLeafs() - 1),
       value: br.currentIndex(),
       range: "min",
     });
@@ -324,8 +324,8 @@ export class Navbar {
     $sliders.find('.ui-slider-handle').attr({
       'role': 'slider',
       'aria-label': 'Page navigation slider',
-      'aria-valuemin': 1,
-      'aria-valuemax': br.book.getNumLeafs(),
+      'aria-valuemin': 0,
+      'aria-valuemax': Math.max(0, br.book.getNumLeafs() - 1),
     });
 
     // Ignore up/down arrow keys and page up/down keys, since they're confusingly different
@@ -396,7 +396,6 @@ export class Navbar {
   */
   getNavPageNumString(index) {
     const { br } = this;
-    // Accessible index starts at 0 (alas) so we add 1 to make human
     const pageNum = br.book.getPageNum(index);
     const pageType = br.book.getPageProp(index, 'pageType');
     const numLeafs = br.book.getNumLeafs();
@@ -425,7 +424,7 @@ export class Navbar {
   updateNavPageNum(index) {
     this.$root.find('.BRcurrentpage').html(this.getNavPageNumString(index));
     this.$root.find('.ui-slider-handle').attr({
-      'aria-valuenow': index + 1,
+      'aria-valuenow': index,
       'aria-valuetext': this.getNavPageNumString(index),
     });
   }
@@ -446,19 +445,19 @@ export class Navbar {
 
 /**
  * Renders the html for the page string
- * @param {number} index
- * @param {number} numLeafs
+ * @param {PageIndex} index 0-indexed page index (0..numLeafs-1)
+ * @param {number} numLeafs total number of leaves
  * @param {number|string} pageNum
  * @param {*} pageType - Deprecated
  * @param {number} maxPageNum
- * @return {string}
+ * @return {string} e.g. "Page 14 (3/39)"
  */
 export function getNavPageNumHtml(index, numLeafs, pageNum, pageType, maxPageNum) {
   const pageIsAsserted = pageNum[0] != 'n';
-  const pageIndex = index + 1;
 
   if (!pageIsAsserted) {
     pageNum = '—';
   }
-  return `Page ${pageNum} (${pageIndex}/${numLeafs})`;
+  const lastIndex = Math.max(0, numLeafs - 1);
+  return `Page ${pageNum} (${index}/${lastIndex})`;
 }

package/src/BookReader/utils/SelectionObserver.js

@@ -9,7 +9,7 @@ export class SelectionObserver {
 
   /**
    * @param {string} selector
-   * @param {function('started' | 'cleared' | 'focusChanged', HTMLElement): any} handler
+   * @param {function('started' | 'cleared' | 'changed', HTMLElement): any} handler
    */
   constructor(selector, handler) {
     this.selector = selector;
@@ -42,7 +42,7 @@ export class SelectionObserver {
 
     if (this.selecting && (this.lastKnownFocusNode != sel.focusNode || sel.toString() && !sel.isCollapsed)) {
       this.lastKnownFocusNode = sel.focusNode;
-      this.handler('focusChanged', this.target);
+      this.handler('changed', this.target);
     }
 
     if (this.selecting && (sel.isCollapsed || !sel.toString() || !$(sel.anchorNode).closest(this.selector)[0])) {

package/src/BookReader.js

@@ -41,6 +41,7 @@ import { ModeThumb } from './BookReader/ModeThumb.js';
 import { ImageCache } from './BookReader/ImageCache.js';
 import { PageContainer } from './BookReader/PageContainer.js';
 import { NAMED_REDUCE_SETS } from './BookReader/ReduceSet.js';
+import {BookReaderTextFragment} from './util/TextSelectionManager.js';
 
 /**
  * BookReader
@@ -644,7 +645,6 @@ BookReader.prototype.init = function() {
   this.pageScale = this.reduce; // preserve current reduce
 
   const params = this.initParams();
-
   this.firstIndex = params.index ? params.index : 0;
 
   // Setup Navbars and other UI
@@ -1971,12 +1971,13 @@ BookReader.prototype.queryStringFromParams = function(
     newParams.set('q', params.search);
   }
 
-  let textFragmentParam = '';
+  /** @type {BookReaderTextFragment | null} */
+  let textFragmentParam = null;
   // Need to pull out text separately to avoid the spaces becoming encoded as +, which
   // the browser seems not to handle with the text fragment
   if (newParams.get('text')) {
     newParams.delete('text');
-    textFragmentParam = `text=${this.urlPlugin.retrieveTextFragment(currQueryString)}`;
+    textFragmentParam = BookReaderTextFragment.fromUrl(currQueryString, this.book, this.firstIndex);
   }
 
   // https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/toString
@@ -1984,7 +1985,7 @@ BookReader.prototype.queryStringFromParams = function(
   let result = newParams.toString();
   if (textFragmentParam) {
     if (result) result += '&';
-    result += textFragmentParam;
+    result += `text=${textFragmentParam.toUrlString()}`;
   }
   if (result) result = '?' + result;
 

package/src/css/_BRpages.scss

@@ -101,8 +101,11 @@ svg.BRPageLayer {
 }
 
 // Hides page layers during page flip animation
-.BRpageFlipping .BRtextLayer {
-  display: none;
+.BRpageFlipping {
+  // If the text layer has an annotation, don't hide it
+  .BRpagecontainer:not(:has(hypothesis-highlight)):not(:has(.BRhighlight)) .BRtextLayer {
+    display: none;
+  }
 }
 
 .br-mode-2up__root {

package/src/css/_TextSelection.scss

@@ -54,13 +54,6 @@
     }
 }
 
-// Style URI TextFragments, eg #:~:text=example
-.BRtextLayer ::target-text {
-    // Similar colour to the default one used in Safari, Firefox. Note Chrome uses a purple colour
-    background-color: hsla(45, 80%, 66%, 0.6);
-    color: transparent;
-}
-
 .BRtranslateLayer ::selection {
     background: hsla(210, 74%, 62%, 0.4);
 }
@@ -82,7 +75,7 @@
 // Hide text layer for performance during zooming & scrolling
 .BRsmooth-zooming, .BRscrolling-active {
     // If the text layer has an annotation, don't hide it
-    .BRpagecontainer:not(.BRpagecontainer--hasSelection):not(:has(hypothesis-highlight)) .BRtextLayer {
+    .BRpagecontainer:not(.BRpagecontainer--hasSelection):not(:has(hypothesis-highlight)):not(:has(.BRhighlight)) .BRtextLayer {
         display: none;
     }
 }
@@ -209,4 +202,17 @@
   width: auto;
   margin-left: 4px;
   opacity: 1;
-}
+}
+
+.BRtextLayer .BRhighlight {
+    background-color: yellow;
+    pointer-events: all;
+    color: transparent;
+}
+
+// Style URI TextFragments, eg #:~:text=example
+.BRtextLayer .BRhighlight--target-text, .BRtextLayer ::target-text {
+    // Similar colour to the default one used in Safari, Firefox. Note Chrome uses a purple colour
+    background-color: hsla(45, 80%, 66%, 0.6);
+    color: transparent;
+}

package/src/plugins/plugin.experiments.js

@@ -7,8 +7,10 @@ import { sleep } from '../BookReader/utils.js';
 // @ts-ignore
 const BookReader = /** @type {typeof import('@/src/BookReader.js').default} */(window.BookReader);
 
+/** @typedef {'copyLinkToHighlight' | 'annotateHighlight' | 'translate' | 'hypothesis'} ExperimentName */
+
 class ExperimentModel {
-  /** @type {string} test */
+  /** @type {ExperimentName} */
   name;
   /** @type {string} */
   title;
@@ -58,13 +60,29 @@ export class ExperimentsPlugin extends BookReaderPlugin {
   allExperiments = [
     new class extends ExperimentModel {
       name = 'copyLinkToHighlight';
-      title = 'Copy to Selection URL';
-      description = 'Share text selection via URL';
-      learnMore = 'none';
+      title = 'Copy Link to Highlight';
+      description = 'Shareable link to a text selection';
       icon = null;
       enabled = false;
       async enable ({ manual = false }) {
-        this.br.plugins.textSelection.enableSelectionMenu();
+        if (manual) {
+          this.br.plugins.textSelection.textSelectionManager.selectMenu.copyLinkToHighlightEnabled = true;
+        }
+      }
+      async disable() {
+        this.br.plugins.textSelection.textSelectionManager.selectMenu.copyLinkToHighlightEnabled = false;
+      }
+    }(),
+    new class extends ExperimentModel {
+      name = 'annotateHighlight';
+      title = 'Highlight and annotate';
+      description = 'Create private highlights and annotations for this book';
+      icon = null;
+      enabled = false;
+      async enable ({ manual = false }) {
+        if (manual) {
+          this.br.plugins.textSelection.textSelectionManager.selectMenu.highlightAnnotationEnabled = true;
+        }
       }
       async disable() {
         sleep(0).then(() => {
@@ -150,6 +168,14 @@ export class ExperimentsPlugin extends BookReaderPlugin {
     this._render();
   }
 
+  /**
+   * @param {ExperimentName} experimentName
+   */
+  isEnabled(experimentName) {
+    const experiment = this.allExperiments.find(exp => exp.name === experimentName);
+    return experiment?.enabled;
+  }
+
   _loadExperimentStates() {
     const savedStates = JSON.parse(localStorage.getItem(this.options.localStorageKey) || '{}');
     this.allExperiments.forEach(experiment => {

package/src/plugins/plugin.text_selection.js

@@ -4,7 +4,7 @@ import { BookReaderPlugin } from '../BookReaderPlugin.js';
 import { applyVariables } from '../util/strings.js';
 import { Cache } from '../util/cache.js';
 import { toISO6391 } from './tts/utils.js';
-import { TextSelectionManager } from '../util/TextSelectionManager.js';
+import { BookReaderTextFragment, renderHighlight, TextSelectionManager } from '../util/TextSelectionManager.js';
 /** @typedef {import('../util/strings.js').StringWithVars} StringWithVars */
 /** @typedef {import('../BookReader/PageContainer.js').PageContainer} PageContainer */
 
@@ -46,7 +46,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     // now we do make that assumption.
     /** Whether the book is right-to-left */
     this.rtl = this.br.pageProgression === 'rl';
-    this.textSelectionManager = new TextSelectionManager('.BRtextLayer', this.br, {selectionElement: ['.BRwordElement', '.BRspace']}, this.options.maxProtectedWords);
+    this.textSelectionManager = new TextSelectionManager('.BRtextLayer', this.br, {selectionElement: ['.BRwordElement', '.BRspace', 'mark']}, this.options.maxProtectedWords);
   }
 
   /** @override */
@@ -54,18 +54,27 @@ export class TextSelectionPlugin extends BookReaderPlugin {
     if (!this.options.enabled) return;
 
     this.br.on('pageVisible', (_, {pageContainerEl}) => {
-      if (pageContainerEl.querySelector('.BRtextLayer')) {
-        this.br.trigger('textLayerVisible', {pageContainerEl});
+      const textLayer = pageContainerEl.querySelector('.BRtextLayer');
+      if (textLayer) {
+        this.br.trigger('textLayerVisible', {pageContainerEl, textLayer});
       }
     });
 
     this.loadData();
     this.textSelectionManager.init();
-  }
 
-  enableSelectionMenu() {
-    this.textSelectionManager.selectionMenuEnabled = true;
-    this.textSelectionManager.renderSelectionMenu();
+    // Init text fragment
+    this.targetTextFragment = BookReaderTextFragment.fromUrl(location.search, this.br.book, this.br.firstIndex);
+    if (this.targetTextFragment) {
+      const targetTextFragment = this.targetTextFragment;
+      this.br.on('textLayerVisible', async (_, {pageContainerEl, textLayer}) => {
+        const pageIndex = targetTextFragment.pageIndex;
+        const hasTargetText = pageIndex === parseFloat(pageContainerEl.getAttribute('data-index'));
+        if (hasTargetText) {
+          renderHighlight(textLayer, targetTextFragment, 'BRhighlight--target-text');
+        }
+      });
+    }
   }
 
   /**
@@ -76,7 +85,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
   _configurePageContainer(pageContainer) {
     // Disable if thumb mode; it's too janky
     // .page can be null for "pre-cover" region
-    if (this.br.mode !== this.br.constModeThumb && pageContainer.page) {
+    if (this.br.mode !== this.br.constModeThumb && pageContainer.page?.isViewable) {
       this.createTextLayer(pageContainer);
     }
     return pageContainer;
@@ -210,7 +219,7 @@ export class TextSelectionPlugin extends BookReaderPlugin {
 
     // Check if page is visible
     if ($container.hasClass('BRpage-visible')) {
-      this.br.trigger('textLayerVisible', {pageContainerEl: $container[0]});
+      this.br.trigger('textLayerVisible', {pageContainerEl: $container[0], textLayer});
     }
   }
 
@@ -575,49 +584,3 @@ class Rect {
   get top() { return this.y; }
   get left() { return this.x; }
 }
-
-/**
- * Depth traverse the DOM tree starting at `start`, and ending at `end`.
- * @param {Node} start
- * @param {Node} end
- * @returns {Generator<Node>}
- */
-export function* walkBetweenNodes(start, end) {
-  let done = false;
-
-  /**
-   * @param {Node} node
-   */
-  function* walk(node, {children = true, parents = true, siblings = true} = {}) {
-    if (node === end) {
-      done = true;
-      yield node;
-      return;
-    }
-
-    // yield self
-    yield node;
-
-    // First iterate children (depth-first traversal)
-    if (children && node.firstChild) {
-      yield* walk(node.firstChild, {children: true, parents: false, siblings: true});
-      if (done) return;
-    }
-
-    // Then iterate siblings
-    if (siblings) {
-      for (let sib = node.nextSibling; sib; sib = sib.nextSibling) {
-        yield* walk(sib, {children: true, parents: false, siblings: false});
-        if (done) return;
-      }
-    }
-
-    // Finally, move up the tree
-    if (parents && node.parentNode) {
-      yield* walk(node.parentNode, {children: false, parents: true, siblings: true});
-      if (done) return;
-    }
-  }
-
-  yield* walk(start);
-}

package/src/plugins/translate/plugin.translate.js

@@ -1,9 +1,9 @@
 // @ts-check
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { BookReaderPlugin } from '../../BookReaderPlugin.js';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 import { TranslationManager } from "./TranslationManager.js";
-import { toISO6391 } from '../tts/utils.js';
+import { toISO6391, toNativeName } from '../tts/utils.js';
 import { sortBy } from '../../../src/BookReader/utils.js';
 import { TextSelectionManager } from '../../../src/util/TextSelectionManager.js';
 import '@internetarchive/ia-activity-indicator';
@@ -63,14 +63,12 @@ export class TranslatePlugin extends BookReaderPlugin {
   textSelectionManager = new TextSelectionManager('.BRtranslateLayer', this.br, {selectionElement: [".BRlineElement"]}, 1);
 
   async init() {
-    const currentLanguage = toISO6391(this.br.options.bookLanguage.replace(/[.,/#!$%^&*;:{}=\-_`~()]/g, ""));
+    if (!this.options.enabled) return;
+
+    const bookLanguage = this.br.options.bookLanguage || '';
+    const currentLanguage = toISO6391(bookLanguage);
     this.langFromCode = currentLanguage ?? "en";
     this.textSelectionManager.init();
-
-    if (!this.options.enabled) {
-      return;
-    }
-
     this.translationManager.publicPath = this.br.options.imagesBaseURL.replace(/\/+$/, '') + '/..';
 
     /**
@@ -307,6 +305,14 @@ export class TranslatePlugin extends BookReaderPlugin {
   }
 
   handleToggleTranslation = async () => {
+    const shouldEnableTranslation = !this.userToggleTranslate;
+    if (shouldEnableTranslation && !this.isSourceLanguageSupported()) {
+      this.userToggleTranslate = false;
+      this.translationManager.active = false;
+      this._render();
+      return;
+    }
+
     this.userToggleTranslate = !this.userToggleTranslate;
     this.translationManager.active = this.userToggleTranslate;
 
@@ -325,6 +331,10 @@ export class TranslatePlugin extends BookReaderPlugin {
   /**
   * Update translation side menu
   */
+  isSourceLanguageSupported() {
+    return this.translationManager.fromLanguages.some((lang) => lang.code == this.langFromCode);
+  }
+
   _render() {
     this.br.shell.menuProviders['translate'] = {
       id: 'translate',
@@ -339,6 +349,7 @@ export class TranslatePlugin extends BookReaderPlugin {
         this._panel.detectedToLang = this.langToCode;
         this._panel.detectedFromLang = this.langFromCode;
         this._panel.loadingModel = this.loadingModel;
+        this._panel.sourceLanguageSupported = this.isSourceLanguageSupported();
       }
       }"
         @langFromChanged="${this.handleFromLangChange}"
@@ -351,6 +362,7 @@ export class TranslatePlugin extends BookReaderPlugin {
         .detectedFromLang=${this.langFromCode}
         .detectedToLang=${this.langToCode}
         .loadingModel=${this.loadingModel}
+        .sourceLanguageSupported=${this.isSourceLanguageSupported()}
         class="translate-panel"
       />`,
     };
@@ -369,12 +381,27 @@ export class BrTranslatePanel extends LitElement {
   @property({ type: String }) detectedFromLang = '';
   @property({ type: String }) detectedToLang = '';
   @property({ type: Boolean }) loadingModel;
+  @property({ type: Boolean }) sourceLanguageSupported = true;
+
+  @query('#lang-from') langFromDropdown;
+  @query('#lang-to') langToDropdown;
+
+  static styles = css`
+    .disclaimer {
+      padding: 10px;
+      border-radius: 8px;
+      font-size: 12px;
+      margin: 0 0 10px;
+      background-color: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.9);
+    }
 
-  /** @override */
-  createRenderRoot() {
-    // Disable shadow DOM; that would require a huge rejiggering of CSS
-    return this;
-  }
+    .disclaimer--warning {
+      margin: 10px 0;
+      background-color: rgba(255, 186, 8, 0.18);
+      color: #ffe7a3;
+    }
+  `;
 
   connectedCallback() {
     super.connectedCallback();
@@ -382,11 +409,12 @@ export class BrTranslatePanel extends LitElement {
   }
 
   render() {
+    const statusWarning = this._statusWarning();
+
     return html`<div class="app" style="margin-top: 5%;padding-right: 5px;">
       <div
         class="disclaimer"
         id="disclaimerMessage"
-        style="background-color: rgba(255,255,255,0.1);padding: 10px;border-radius: 8px;font-size: 12px;margin-bottom: 10px;color: rgba(255,255,255, 0.9);"
       >${this.disclaimerMessage}</div>
 
       <div class="panel panel--to" style="padding: 0 10px;">
@@ -405,7 +433,7 @@ export class BrTranslatePanel extends LitElement {
       </div>
 
       <div class="panel panel--start" style="text-align: right;padding: 0 10px;/*! font-size: 18px; */margin-top: 10px;">
-            <button class="start-translation-brn" @click="${this._toggleTranslation}">
+        <button class="start-translation-brn" @click="${this._toggleTranslation}" ?disabled=${!this.sourceLanguageSupported}>
               ${this.userTranslationActive ? "Stop Translating" : "Translate"}
             </button>
       </div>
@@ -426,9 +454,14 @@ export class BrTranslatePanel extends LitElement {
           })
           }
           </select>
-      </details>
+        </details>
+      </div>
       <div class="footer" id="status" style="margin-top:5%">
-      ${this._statusWarning()}
+        ${
+          statusWarning ? html`
+            <div class="disclaimer disclaimer--warning">${statusWarning}</div>
+          ` : ''
+        }
       </div>
 
       <div class="lang-models-loading"> 
@@ -469,17 +502,27 @@ export class BrTranslatePanel extends LitElement {
   }
 
   _getSelectedLang(type) {
-    /** @type {HTMLSelectElement} */
-    const dropdown = this.querySelector(`#lang-${type}`);
+    const dropdown = type === 'from' ? this.langFromDropdown : this.langToDropdown;
     return dropdown ? dropdown.value : '';
   }
 
+  /**
+   * Resolves a human-readable language name for a language code.
+   * Prefers names from loaded translation language lists, then falls back to
+   * ISO language metadata via toNativeName.
+   * @param {string} code
+   * @returns {string}
+   */
   _getLangName(code) {
-    const lang = [...this.fromLanguages, ...this.toLanguages].find(lang => lang.code === code);
-    return lang ? lang.name : '';
+    const lang = [...this.fromLanguages, ...this.toLanguages]
+      .find(lang => lang.code === code);
+    return lang?.name || toNativeName(code) || code;
   }
 
   _toggleTranslation(event) {
+    if (!this.sourceLanguageSupported) {
+      return;
+    }
     const toggleTranslateEvent = new CustomEvent('toggleTranslation', {
       detail: {value: event.target.value},
       bubbles: true,
@@ -491,6 +534,9 @@ export class BrTranslatePanel extends LitElement {
 
   // TODO: Hardcoded warning message for now but should add more statuses
   _statusWarning() {
+    if (!this.sourceLanguageSupported) {
+      return `Translating from ${this._getLangName(this.detectedFromLang)} is not supported`;
+    }
     if (this.detectedFromLang == this.detectedToLang) {
       return "Translate To language is the same as the Source language";
     }

package/src/plugins/tts/utils.js

@@ -53,7 +53,7 @@ export function toISO6391(language) {
 /**
  *
  * @param {string} language
- * @returns {string}
+ * @returns {string | null}
  */
 export function toNativeName(language) {
   if (!language) return null;

package/src/plugins/url/UrlPlugin.js

@@ -190,22 +190,9 @@ export class UrlPlugin {
   }
 
   /**
-   * Get the hash out of the current URL. Also augments it with the text
-   * from the main part of the URL, since that is not readable by JS
-   * from the actual hash
-   * @returns
+   * Get the hash out of the current URL
    */
   getHash() {
-    const text = this.retrieveTextFragment(window.location.search);
-    const textFragment = text ? `:~:text=${text[0]}` : '';
-    return `${window.location.hash.slice(1)}${textFragment}`;
-  }
-
-  /**
-   * @param {string} urlString
-   * @returns {string}
-   */
-  retrieveTextFragment(urlString) {
-    return urlString.match(/(?<=[&?]?text=)[^&]*/);
+    return window.location.hash.slice(1);
   }
 }