diff --git a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue index a6712a89..75e2d5b1 100644 --- a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue +++ b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue @@ -30,6 +30,8 @@ export default { }, }, + emits: ["entering-fullscreen"], + data: function () { return { osdViewer: null, @@ -83,7 +85,8 @@ export default { this.loadOpenSeaDragon(this.src); } } else { - if (this.osdViewer) { + // Don't destroy if viewer is in fullscreen + if (this.osdViewer && !this.osdViewer.isFullPage()) { this.osdViewer.destroy(); this.osdViewer = null; } @@ -110,7 +113,7 @@ export default { }, updateFilter() { - const viewerEl = document.getElementById("openseadragon"); + const viewerEl = this.$refs.osdContainer; if (viewerEl) { viewerEl.style.filter = ` brightness(${this.brightness}) @@ -121,7 +124,12 @@ export default { }, openFullscreen() { if (this.osdViewer) { - this.osdViewer.setFullScreen(true); + // Alert the modal we are about to enter fullscreen so it can prevent closing. + this.$emit("entering-fullscreen"); + // Wait a bit for DOM to resize + this.$nextTick(() => { + this.osdViewer.setFullScreen(true); + }); } }, }, diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue index 322ed2fc..66517e74 100644 --- a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue +++ b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue @@ -20,6 +20,7 @@ :brightness="brightness" :contrast="contrast" :saturation="saturation" + @entering-fullscreen="enteringFullscreen = true" /> @@ -76,6 +77,9 @@ export default { brightness: 1, contrast: 1, saturation: 1, + enteringFullscreen: false, + modalEl: null, + beforeHideHandler: null, }; }, computed: { @@ -86,6 +90,21 @@ export default { return null; }, }, + mounted() { + this.modalEl = this.$refs.scanModal; + this.beforeHideHandler = (event) => { + if (this.enteringFullscreen) { + event.preventDefault(); + this.enteringFullscreen = false; + } + }; + this.modalEl.addEventListener("beforehide", this.beforeHideHandler); + }, + beforeUnmount() { + if (this.modalEl && this.beforeHideHandler) { + this.modalEl.removeEventListener("beforehide", this.beforeHideHandler); + } + }, methods: { show() { UIkit.modal(this.$refs.scanModal).show();