openseadragon.vue 1.8 KB
Newer Older
schneider210's avatar
schneider210 committed
1
<template>
2
  <figure id="openseadragon">
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    <nav class="sticky">
      <q-btn
        v-for="(btn, idx) in buttons" :key="idx"
        class="q-mr-sm q-mb-sm"
        color="grey-8"
        flat
        round
        size="md"
        :id="btn.id"
        >
        <q-icon size="sm" :name="btn.svg" />
      </q-btn>
    </nav>
  </figure>
schneider210's avatar
schneider210 committed
17
18
19
20
</template>

<script>
import OpenSeadragon from 'openseadragon';
21
22
23
24
25
import {
  fasSearchPlus,
  fasSearchMinus,
  fasExpand,
  fasExpandArrowsAlt,
26
  fasCompressArrowsAlt,
27
} from '@quasar/extras/fontawesome-v5';
schneider210's avatar
schneider210 committed
28
29
30
31
32
33
34
35
36

export default {
  name: 'OpenSeadragon',
  props: {
    imageurl: String,
  },
  data() {
    return {
      buttons: [
37
38
39
40
        { id: 'zoom-in', svg: fasSearchPlus },
        { id: 'zoom-out', svg: fasSearchMinus },
        { id: 'default', svg: fasExpand },
        { id: 'fullscreen', svg: fasExpandArrowsAlt },
schneider210's avatar
schneider210 committed
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
      ],
      options: {
        id: 'openseadragon',
        tileSources: {
          type: 'image',
          url: this.imageurl,
        },
        maxZoomLevel: 10,
        zoomInButton: 'zoom-in',
        zoomOutButton: 'zoom-out',
        homeButton: 'default',
        fullPageButton: 'fullscreen',
      },
    };
  },
  mounted() {
    const viewer = new OpenSeadragon.Viewer(this.options);
58
    viewer.controlsFadeDelay = 1000;
59

schneider210's avatar
schneider210 committed
60
61
    OpenSeadragon.setString('Tooltips.Home', 'Default View');
    OpenSeadragon.setString('Tooltips.FullPage', 'Toggle Fullscreen');
62
63
64
65
66
67
68
69

    document.addEventListener('fullscreenchange', () => {
      Object.values(this.buttons).forEach((v) => {
        if (v.id === 'fullscreen') {
          v.svg = document.fullscreenElement !== null ? fasCompressArrowsAlt : fasExpandArrowsAlt;
        }
      });
    });
schneider210's avatar
schneider210 committed
70
71
72
  },
};
</script>
73

nwindis's avatar
nwindis committed
74
<style lang="scss" scoped>
nwindis's avatar
nwindis committed
75
76
77
78
figure {
  display: inline-block;
  height: 75vh;
  margin: 0;
79
  width: 100%;
nwindis's avatar
nwindis committed
80
}
81
</style>