openseadragon.vue 1.8 KB
Newer Older
schneider210's avatar
schneider210 committed
1
<template>
2
3
  <figure id="openseadragon">
    <nav>
4
      <q-btn
schneider210's avatar
schneider210 committed
5
        v-for="(btn, idx) in buttons" :key="idx"
6
        class="q-mr-sm q-mb-sm"
7
        color="grey-8"
8
        round
9
        flat
10
        size="md"
schneider210's avatar
schneider210 committed
11
12
        :id="btn.id"
        >
13
        <q-icon size="sm" :name="btn.svg" />
14
      </q-btn>
15
16
    </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
58
59
60
      ],
      options: {
        id: 'openseadragon',
        tileSources: {
          type: 'image',
          url: this.imageurl,
        },
        maxZoomLevel: 10,
        zoomInButton: 'zoom-in',
        zoomOutButton: 'zoom-out',
        homeButton: 'default',
        fullPageButton: 'fullscreen',
      },
    };
  },
  mounted() {
    // eslint-disable-next-line no-unused-vars
    const viewer = new OpenSeadragon.Viewer(this.options);
    OpenSeadragon.setString('Tooltips.Home', 'Default View');
    OpenSeadragon.setString('Tooltips.FullPage', 'Toggle Fullscreen');
61
62
63
64
65
66
67
68

    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
69
70
71
  },
};
</script>
72
73

<style scoped>
74
  figure {
75
76
77
78
    display: inline-block;
    height: 60vh;
    margin: 16px;
    width: 100%;
79
  }
80
</style>