@teipublisher/pb-components 2.25.6 → 2.25.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "2.25.6",
+  "version": "2.25.7",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",
@@ -85,6 +85,7 @@
     "lit-element": "^2.5.1",
     "lit-html": "^1.3.0",
     "marked": "^1.2.0",
+    "openseadragon": "^5.0.1",
     "pagedjs": "^0.4.3",
     "path-to-regexp": "^6.2.1",
     "prismjs": "^1.29.0",

package/src/pb-facsimile.js

@@ -303,6 +303,10 @@ export class PbFacsimile extends pbMixin(LitElement) {
     }
     this.viewer = OpenSeadragon(options);
 
+    if (this.showFullPageControl) {
+      this._overrideFullscreenButton();
+    }
+
     this.viewer.addHandler('open', () => {
       this.resetZoom();
       this.emitTo('pb-facsimile-status', { status: 'loaded', facsimiles: this._facsimiles });
@@ -460,6 +464,38 @@ export class PbFacsimile extends pbMixin(LitElement) {
     }
     this.viewer.viewport.goHome();
   }
+
+  _overrideFullscreenButton() {
+    // The full page control in OSD makes all body elements disappear, causing all kinds of bugs in
+    // our webcomponents.  Replace it with something that just calls `requestFullScreen` instead.
+    // This approach (but more elaborate) is also PR-ed to OSD
+    // (https://github.com/openseadragon/openseadragon/pull/2786). This code can be dropped the
+    // moment we upgrade to OSD.
+
+    const toggleFullscreenButton = this.viewer.buttonGroup.buttons.find(
+      button => button.tooltip === 'Toggle full page',
+    );
+    if (!toggleFullscreenButton) {
+      return;
+    }
+    const releaseHandler = async () => {
+      if (!document.fullscreenElement) {
+        await this.viewer.element.requestFullscreen();
+        return;
+      }
+      await document.exitFullscreen();
+    };
+
+    toggleFullscreenButton.onRelease = releaseHandler;
+    const oldRaiseEvent = toggleFullscreenButton.raiseEvent;
+    toggleFullscreenButton.raiseEvent = (eventName, args) => {
+      if (eventName === 'release') {
+        releaseHandler();
+      } else {
+        oldRaiseEvent.call(toggleFullscreenButton, eventName, args);
+      }
+    };
+  }
 }
 if (!customElements.get('pb-facsimile')) {
   customElements.define('pb-facsimile', PbFacsimile);