Start the UI transition from ScanList to Gallery

webapp/src/components/tabContentComponents/galleryComponents/scanViewer.vue

@@ -0,0 +1,168 @@
+<template>
+  <div id="scan-modal" ref="scanModal" uk-modal>
+    <div v-if="selectedScan" id="scan-modal-body" class="uk-modal-dialog uk-modal-body">
+      <h2 id="scan-modal-title" class="uk-modal-title">
+        {{ selectedScan.name }}
+        <button class="uk-modal-close uk-float-right" type="button">
+          <span class="material-symbols-outlined">close</span>
+        </button>
+        <button class="uk-float-right" type="button" @click="goFullscreen">
+          <span class="material-symbols-outlined">fullscreen</span>
+        </button>
+      </h2>
+
+      <!-- Viewer -->
+      <div v-if="selectedScanDZI" id="viewer_container" class="viewer_container">
+        <OpenSeadragonViewer
+          id="openseadragon"
+          ref="openseadragon"
+          :src="selectedScanDZI"
+          :brightness="brightness"
+          :contrast="contrast"
+          :saturation="saturation"
+          @entering-fullscreen="enteringFullscreen = true"
+        />
+      </div>
+
+      <!-- Controls -->
+      <div v-if="selectedScanDZI" class="viewer-controls">
+        <div class="controlsContainer">
+          <label>
+            Brightness
+            <input v-model.number="brightness" type="range" min="0.2" max="1.8" step="0.01" />
+          </label>
+          <label>
+            Contrast
+            <input v-model.number="contrast" type="range" min="0.2" max="1.8" step="0.01" />
+          </label>
+          <label>
+            Saturation
+            <input v-model.number="saturation" type="range" min="0" max="2" step="0.01" />
+          </label>
+        </div>
+
+        <button
+          type="button"
+          class="uk-button uk-button-default reset-button"
+          @click="resetFilters"
+        >
+          Reset Filters
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UIkit from "uikit";
+import OpenSeadragonViewer from "./openSeadragonViewer.vue";
+
+export default {
+  name: "ScanViewerModal",
+  components: {
+    OpenSeadragonViewer,
+  },
+  props: {
+    selectedScan: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      brightness: 1,
+      contrast: 1,
+      saturation: 1,
+      enteringFullscreen: false,
+      modalEl: null,
+      beforeHideHandler: null,
+    };
+  },
+  computed: {
+    selectedScanDZI() {
+      if (this.selectedScan && this.selectedScan.dzi) {
+        return `${this.baseUri}/data/smart_scan/${this.selectedScan.name}/images/${this.selectedScan.dzi}`;
+      }
+      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();
+    },
+    hide() {
+      UIkit.modal(this.$refs.scanModal).hide();
+    },
+    goFullscreen() {
+      this.$refs.openseadragon.openFullscreen();
+    },
+    resetFilters() {
+      this.brightness = 1;
+      this.contrast = 1;
+      this.saturation = 1;
+    },
+  },
+};
+</script>
+
+<style scoped>
+input[type="range"] {
+  pointer-events: auto;
+  z-index: 1001;
+}
+
+#scan-modal {
+  padding: 10px;
+}
+
+#scan-modal-body {
+  padding: 10px;
+  width: 95%;
+  height: 95%;
+  display: flex;
+  flex-direction: column;
+}
+
+#scan-modal-title {
+  flex: 0 0 auto;
+}
+
+.controlsContainer {
+  display: flex;
+  justify-content: center;
+  gap: 1.5rem;
+}
+
+.viewer-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.viewer_container {
+  flex: 1 1 auto;
+  position: relative;
+  overflow: hidden;
+}
+
+.reset-button {
+  margin-top: 0.5rem;
+}
+</style>