Skip to content

Commit 4472ccb

Browse files
author
Sebastian Flick
committed
create IIIF-Component to keep code clean
1 parent 9569844 commit 4472ccb

File tree

2 files changed

+126
-116
lines changed

2 files changed

+126
-116
lines changed

‎src/lib/components/IIIFViewer.svelte

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<script context="module">
2+
import { assets } from '$app/paths';
3+
/**
4+
* @type {import('openseadragon')}
5+
*/
6+
let OpenSeadragon;
7+
</script>
8+
9+
<script>
10+
/** @type { Promise<Object> } */
11+
export let iiif;
12+
13+
const uuid = crypto.randomUUID();
14+
/**
15+
* @type {import('openseadragon').Viewer}
16+
*/
17+
let viewer;
18+
19+
const generateViewer = (/** @type {Element} */ node, /** @type {Promise<Object>} */ iiif) => {
20+
const i = Number(node.id.split('-')[1]);
21+
if (!iiif) return;
22+
/** @type {ResizeObserver}*/
23+
let observer;
24+
const createViewer = () => {
25+
viewer = new OpenSeadragon.Viewer({
26+
id: node.id,
27+
prefixUrl: `${assets}/openseadragon-svg-icons/icons/`,
28+
navImages: {
29+
zoomIn: {
30+
REST: 'zoomin_rest.svg',
31+
GROUP: 'zoomin_grouphover.svg',
32+
HOVER: 'zoomin_hover.svg',
33+
DOWN: 'zoomin_pressed.svg'
34+
},
35+
next: {
36+
REST: 'next_rest.svg',
37+
GROUP: 'next_grouphover.svg',
38+
39+
HOVER: 'next_hover.svg',
40+
DOWN: 'next_pressed.svg'
41+
},
42+
previous: {
43+
REST: 'previous_rest.svg',
44+
GROUP: 'previous_grouphover.svg',
45+
HOVER: 'previous_hover.svg',
46+
DOWN: 'previous_pressed.svg'
47+
},
48+
fullpage: {
49+
REST: 'fullpage_rest.svg',
50+
GROUP: 'fullpage_grouphover.svg',
51+
HOVER: 'fullpage_hover.svg',
52+
DOWN: 'fullpage_pressed.svg'
53+
},
54+
home: {
55+
REST: 'home_rest.svg',
56+
GROUP: 'home_grouphover.svg',
57+
HOVER: 'home_hover.svg',
58+
DOWN: 'home_pressed.svg'
59+
},
60+
zoomOut: {
61+
REST: 'zoomout_rest.svg',
62+
GROUP: 'zoomout_grouphover.svg',
63+
HOVER: 'zoomout_hover.svg',
64+
DOWN: 'zoomout_pressed.svg'
65+
},
66+
rotateleft: {
67+
REST: 'rotateleft_rest.svg',
68+
GROUP: 'rotateleft_grouphover.svg',
69+
HOVER: 'rotateleft_hover.svg',
70+
DOWN: 'rotateleft_pressed.svg'
71+
},
72+
rotateright: {
73+
REST: 'rotateright_rest.svg',
74+
GROUP: 'rotateright_grouphover.svg',
75+
HOVER: 'rotateright_hover.svg',
76+
DOWN: 'rotateright_pressed.svg'
77+
},
78+
flip: {
79+
REST: 'flip_rest.svg',
80+
GROUP: 'flip_grouphover.svg',
81+
HOVER: 'flip_hover.svg',
82+
DOWN: 'flip_pressed.svg'
83+
}
84+
},
85+
sequenceMode: false
86+
});
87+
iiif.then((iiif) => {
88+
if (iiif === 'not found') return;
89+
viewer.open(iiif);
90+
});
91+
observer = new ResizeObserver((_entries) => {
92+
setTimeout(() => {
93+
viewer.viewport.goHome(false);
94+
}, 50);
95+
});
96+
observer.observe(node);
97+
};
98+
if (!OpenSeadragon) {
99+
import('openseadragon').then((r) => {
100+
OpenSeadragon = r.default;
101+
createViewer();
102+
});
103+
} else {
104+
createViewer();
105+
}
106+
107+
return {
108+
/**
109+
* @param {Promise<Object>} iiif
110+
*/
111+
update(iiif) {
112+
iiif.then((iiif) => viewer.open(iiif));
113+
},
114+
destroy() {
115+
viewer.destroy();
116+
if (observer) {
117+
observer.disconnect();
118+
}
119+
}
120+
};
121+
};
122+
</script>
123+
124+
<div id="viewer-{uuid}" class="w-full h-full" use:generateViewer={iiif}></div>

‎src/routes/textzeugen/[[sigla]]/[[thirties]]/[[verse]]/+page.svelte

+2-116
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,10 @@
11
<script>
2-
import { assets } from '$app/paths';
32
import TextzeugenSelector from '$lib/components/TextzeugenSelector.svelte';
3+
import IIIFViewer from '$lib/components/IIIFViewer.svelte';
44
55
/** @type {import('./$types').PageData} */
66
export let data;
77
8-
/**
9-
* @type {import('openseadragon')}
10-
*/
11-
let OpenSeadragon;
12-
13-
/**
14-
* @type {import('openseadragon').Viewer[]}
15-
*/
16-
let viewer = [];
17-
18-
const generateViewer = (/** @type {Element} */ node, /** @type {Promise<Object>} */ iiif) => {
19-
const i = Number(node.id.split('-')[1]);
20-
if (!iiif) return;
21-
/** @type {ResizeObserver}*/
22-
let observer;
23-
const createViewer = () => {
24-
viewer[i] = new OpenSeadragon.Viewer({
25-
id: node.id,
26-
prefixUrl: `${assets}/openseadragon-svg-icons/icons/`,
27-
navImages: {
28-
zoomIn: {
29-
REST: 'zoomin_rest.svg',
30-
GROUP: 'zoomin_grouphover.svg',
31-
HOVER: 'zoomin_hover.svg',
32-
DOWN: 'zoomin_pressed.svg'
33-
},
34-
next: {
35-
REST: 'next_rest.svg',
36-
GROUP: 'next_grouphover.svg',
37-
38-
HOVER: 'next_hover.svg',
39-
DOWN: 'next_pressed.svg'
40-
},
41-
previous: {
42-
REST: 'previous_rest.svg',
43-
GROUP: 'previous_grouphover.svg',
44-
HOVER: 'previous_hover.svg',
45-
DOWN: 'previous_pressed.svg'
46-
},
47-
fullpage: {
48-
REST: 'fullpage_rest.svg',
49-
GROUP: 'fullpage_grouphover.svg',
50-
HOVER: 'fullpage_hover.svg',
51-
DOWN: 'fullpage_pressed.svg'
52-
},
53-
home: {
54-
REST: 'home_rest.svg',
55-
GROUP: 'home_grouphover.svg',
56-
HOVER: 'home_hover.svg',
57-
DOWN: 'home_pressed.svg'
58-
},
59-
zoomOut: {
60-
REST: 'zoomout_rest.svg',
61-
GROUP: 'zoomout_grouphover.svg',
62-
HOVER: 'zoomout_hover.svg',
63-
DOWN: 'zoomout_pressed.svg'
64-
},
65-
rotateleft: {
66-
REST: 'rotateleft_rest.svg',
67-
GROUP: 'rotateleft_grouphover.svg',
68-
HOVER: 'rotateleft_hover.svg',
69-
DOWN: 'rotateleft_pressed.svg'
70-
},
71-
rotateright: {
72-
REST: 'rotateright_rest.svg',
73-
GROUP: 'rotateright_grouphover.svg',
74-
HOVER: 'rotateright_hover.svg',
75-
DOWN: 'rotateright_pressed.svg'
76-
},
77-
flip: {
78-
REST: 'flip_rest.svg',
79-
GROUP: 'flip_grouphover.svg',
80-
HOVER: 'flip_hover.svg',
81-
DOWN: 'flip_pressed.svg'
82-
}
83-
},
84-
sequenceMode: false
85-
});
86-
iiif.then((iiif) => {
87-
if (iiif === 'not found') return;
88-
viewer[i].open(iiif);
89-
});
90-
observer = new ResizeObserver((_entries) => {
91-
setTimeout(() => {
92-
viewer[i].viewport.goHome(false);
93-
}, 50);
94-
});
95-
observer.observe(node);
96-
};
97-
if (!OpenSeadragon) {
98-
import('openseadragon').then((r) => {
99-
OpenSeadragon = r.default;
100-
createViewer();
101-
});
102-
} else {
103-
createViewer();
104-
}
105-
106-
return {
107-
/**
108-
* @param {Promise<Object>} iiif
109-
*/
110-
update(iiif) {
111-
iiif.then((iiif) => viewer[i].open(iiif));
112-
},
113-
destroy() {
114-
viewer[i].destroy();
115-
if (observer) {
116-
observer.disconnect();
117-
}
118-
}
119-
};
120-
};
121-
1228
const generateLabel = (/** @type {String[]} */ sigla) => {
1239
const info = [...data.codices, ...data.fragments];
12410
sigla.map((s) => {
@@ -238,7 +124,7 @@
238124
</section>
239125
<section>
240126
{#if typeof data.iiif === 'object'}
241-
<div id="viewer-{i}" class="w-full h-full" use:generateViewer={data.iiif[i]}></div>
127+
<IIIFViewer iiif={data.iiif[i]} />
242128
{/if}
243129
</section>
244130
</article>

0 commit comments

Comments
 (0)