96 lines
No EOL
1.7 KiB
Vue
96 lines
No EOL
1.7 KiB
Vue
<template>
|
|
<div v-observe-visibility="visibilityChanged">
|
|
<div id="openseadragon"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import OpenSeaDragon from "openseadragon";
|
|
|
|
// Export main app
|
|
export default {
|
|
name: "OpenSeadragonViewer",
|
|
components: { },
|
|
|
|
props: {
|
|
src: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
|
|
data: function() {
|
|
return {
|
|
osdViewer: null
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
src: {
|
|
immediate: true,
|
|
handler(newVal) {
|
|
this.loadOpenSeaDragon(newVal);
|
|
}
|
|
}
|
|
},
|
|
|
|
async mounted() {
|
|
if (this.src) {
|
|
this.loadOpenSeaDragon(this.src);
|
|
}
|
|
},
|
|
|
|
beforeDestroy() {
|
|
// Remove global signal listener to perform a gallery refresh
|
|
this.osdViewer.destroy();
|
|
},
|
|
|
|
methods: {
|
|
visibilityChanged(isVisible) {
|
|
if (isVisible) {
|
|
this.loadOpenSeaDragon();
|
|
}else{
|
|
this.osdViewer.destroy();
|
|
}
|
|
},
|
|
async loadOpenSeaDragon() {
|
|
if (this.osdViewer) {
|
|
this.osdViewer.destroy();
|
|
}
|
|
this.osdViewer = OpenSeaDragon({
|
|
id: "openseadragon",
|
|
crossOriginPolicy: 'Anonymous',
|
|
tileSources: this.src,
|
|
showNavigationControl: false,
|
|
maxZoomPixelRatio: 2,
|
|
gestureSettingsMouse: {
|
|
clickToZoom: false
|
|
}
|
|
});
|
|
},
|
|
openFullscreen() {
|
|
if (this.osdViewer) {
|
|
this.osdViewer.setFullScreen(true);
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
#openseadragon {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: black;
|
|
z-index:1;
|
|
}
|
|
#info-panel {
|
|
position: relative;
|
|
top: 10px;
|
|
left: 10px;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
padding: 5px;
|
|
border-radius: 1px;
|
|
z-index: 1000;
|
|
}
|
|
</style> |