Commit ca759c75 authored by schneider210's avatar schneider210
Browse files

add files from emo

parent 4c416630
Pipeline #130613 failed with stage
in 2 minutes and 9 seconds
<template>
<div class="sub-viewer-1-text" v-html="content"></div>
</template>
<script>
export default {
name: 'Content',
props: {
itemurl: String,
request: Function,
},
data() {
return {
content: '',
};
},
created() {
this.request(this.itemurl)
.then((data) => {
this.request(data.content, 'text')
.then((content) => {
this.content = content;
});
});
},
};
</script>
<template>
<div class="sub-viewer-1__info">
<div v-html="breadcrumbs"></div>
</div>
</template>
<script>
export default {
name: 'Infobar',
props: {
collection: Object,
itemurl: String,
manifests: Array,
vectors: Object,
},
data() {
return {
sequenceindex: 0,
};
},
computed: {
breadcrumbs() {
return this.cutstring(this.collectiontitle)
+ this.vectors['angle-right']
+ this.cutstring(this.manifesttitle)
+ this.vectors['angle-right']
+ this.cutstring(this.itemlabel);
},
collectiontitle() {
return this.collection.title ? this.collection.title[0].title : 'Manifest';
},
manifesttitle() {
return this.manifests[this.sequenceindex].label;
},
itemlabel() {
return this.itemurl.replace(/.*(\d)+\/(\d)+.*/, 'Item $1-$2');
},
},
methods: {
cutstring(s) {
return s.length > 30 ? `${s.substring(0, 26)} ...` : s;
},
},
mounted() {
this.$root.$on('update-metadata', (index) => {
this.sequenceindex = index;
});
},
};
</script>
<template>
<div :class="[ css['metadata'], css['fixed'] ]">
<ul>
<li v-if="Object.keys(collection).length" :class="css.item">
<div :class="[ 'heading-style--4', css.heading ]">
Collection
</div>
<div :class="css.label">
Title:
</div>
<div :class="css.description">
{{ collection.title ? collection.title[0].title : '' }}
</div>
<div :class="css.label">
Collector:
</div>
<div :class="css.description">
{{ collection.collector ? collection.collector.name : '' }}
</div>
<div :class="css.label">
Description:
</div>
<div :class="css.description">
{{ collection.description }}
</div>
</li>
<li :class="css.item">
<div :class="[ 'heading-style--4', css.heading ]">
Manifest {{ sequenceindex + 1 }} / {{ manifests.length }}
</div>
<div :class="css.label">
Label:
</div>
<div :class="css.description">
{{ manifesttitle }}
</div>
</li>
</ul>
</div>
</template>
<script>
import { cssmap } from '@/mixins/navigation';
export default {
name: 'Metadata',
props: {
collection: Object,
manifests: Array,
},
data() {
return {
css: cssmap,
sequenceindex: 0,
};
},
computed: {
manifesttitle() {
return this.manifests[this.sequenceindex].label;
},
},
mounted() {
this.$root.$on('update-metadata', (index) => {
this.sequenceindex = index;
});
},
};
</script>
<template>
<div :class="css['nav-arrows']">
<button
:class="[ css['nav-arrow'], css['nav-arrow--left'], 'btn-width' ]"
:disabled="sequenceindex <= 0"
title="Previous Manifest"
v-html="`${vectors['skip-back']}`"
@click="
--sequenceindex;
itemindex = firstiteminsequence;
updateItem(itemurls[itemindex]);
updateMetadata(sequenceindex);
updateTreeNodes(sequenceindex);"
>
</button>
<button
:class="[ css['nav-arrow'], css['nav-arrow--left'], 'btn-width' ]"
:disabled="itemindex <= 0"
title="Previous Item"
v-html="`${vectors['arrow-alt-left']}`"
@click="
--itemindex;
sequenceindex = computedsequenceindex;
updateItem(itemurls[itemindex]);
updateMetadata(sequenceindex);
updateTreeNodes(sequenceindex);"
>
</button>
<button>
<input
:class="[ css['nav-arrow'], 'btn-width' ]"
style="text-align: center;"
title="Enter Page"
type="text"
size="2"
v-model.number="itemindex"
@keyup.enter="
sequenceindex = computedsequenceindex;
updateItem(itemurls[itemindex]);
updateMetadata(sequenceindex);
updateTreeNodes(sequenceindex);"
/>
</button>
<button
:class="[ css['nav-arrow'], css['nav-arrow--right'], 'btn-width' ]"
:disabled="itemindex >= itemurls.length - 1"
title="Next Item"
v-html="`${vectors['arrow-alt-right']}`"
@click="
++itemindex;
sequenceindex = computedsequenceindex;
updateItem(itemurls[itemindex]);
updateMetadata(sequenceindex);
updateTreeNodes(sequenceindex);"
>
</button>
<button
:class="[ css['nav-arrow'], css['nav-arrow--right'], 'btn-width' ]"
:disabled="sequenceindex >= manifests.length - 1"
title="Next Manifest"
v-html="`${vectors['skip-forward']}`"
@click="
++sequenceindex;
itemindex = firstiteminsequence;
updateItem(itemurls[itemindex]);
updateMetadata(sequenceindex);
updateTreeNodes(sequenceindex);"
>
</button>
</div>
</template>
<script>
import Navigation, { cssmap } from '@/mixins/navigation';
export default {
name: 'NavbarExtended',
mixins: [Navigation],
data() {
return {
css: cssmap,
};
},
};
</script>
<style scoped lang="css">
.btn-width {
width: 60px;
}
</style>
<template>
<div :class="css['nav-arrows']">
<button
:class="[ css['nav-arrow'], css['nav-arrow--left'] ]"
:title="titleprev"
v-html="previous()"
:disabled="itemindex <= 0"
@click="
--itemindex;
sequenceindex = computedsequenceindex;
updateItem(itemurls[itemindex]);
updateMetadata(sequenceindex);
updateTreeNodes(sequenceindex);"
>
</button>
<button
:class="[ css['nav-arrow'], css['nav-arrow--right'] ]"
:title="titlenext"
v-html="next()"
:disabled="itemindex >= itemurls.length - 1"
@click="
++itemindex;
sequenceindex = computedsequenceindex;
updateItem(itemurls[itemindex]);
updateMetadata(sequenceindex);
updateTreeNodes(sequenceindex);"
>
</button>
</div>
</template>
<script>
import Navigation, { cssmap } from '@/mixins/navigation';
export default {
name: 'Navbar',
mixins: [Navigation],
data() {
return {
css: cssmap,
};
},
methods: {
previous() {
return `${this.vectors['arrow-alt-left']}<span aria-hidden="true">${this.captionprev}</span>`;
},
next() {
return `<span aria-hidden="true">${this.captionnext}</span>${this.vectors['arrow-alt-right']}`;
},
},
computed: {
captionprev() {
return this.sequenceindex > 0 && this.firstiteminsequence === this.itemindex
? 'Prev Manifest'
: 'Prev Item';
},
captionnext() {
const lastindexes = this.lastiteminsequence;
return this.sequenceindex < this.sequencecount - 1
&& lastindexes[this.sequenceindex] === this.itemindex
? 'Next Manifest'
: 'Next Item';
},
lastiteminsequence() {
const lastindexes = [];
for (let seqidx = 0; seqidx < this.sequencecount; seqidx += 1) {
lastindexes[seqidx] = seqidx === 0
? this.manifests[seqidx].sequence.length - 1
: lastindexes[(seqidx - 1)] + this.manifests[seqidx].sequence.length;
}
return lastindexes;
},
},
};
</script>
<template>
<figure id="openseadragon" style="height: 100vh; overflow: hidden;">
<nav>
<button style="margin-left: 8px; margin-top: 8px;"
v-for="(btn, idx) in buttons" :key="idx"
class="image__interact-button"
:id="btn.id"
v-html="btn.svg"
>
</button>
</nav>
</figure>
</template>
<script>
import OpenSeadragon from 'openseadragon';
export default {
name: 'OpenSeadragon',
props: {
imageurl: String,
vectors: Object,
},
data() {
return {
buttons: [
{ id: 'zoom-in', svg: this.vectors['search-plus'] },
{ id: 'zoom-out', svg: this.vectors['search-minus'] },
{ id: 'default', svg: this.vectors.expand },
{ id: 'fullscreen', svg: this.vectors['expand-alt'] },
],
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');
},
};
</script>
<template>
<div>
<q-drawer bordered show-if-above side="left" v-model="node" :width="$q.screen.width / 5">
<Toolbar heading="Treeview" />
<q-separator />
<q-tabs v-model="tab" shrink>
<q-route-tab to="/" exact label="TwinView" />
<q-route-tab to="/text" exact label="TextView" />
<q-route-tab to="/image" exact label="ImageView" />
</q-tabs>
<q-separator />&nbsp;
<Treeview
:depth="depth"
:itemurl="itemurl"
:itemurls="itemurls"
:label="label"
:manifests="manifests"
:tree="tree"
:vectors="vectors"
>
</Treeview>
</q-drawer>
<q-drawer bordered show-if-above side="right" v-model="meta" :width="$q.screen.width / 5">
<Toolbar heading="Metadata" />
<q-separator />
<Metadata v-if="manifests.length"
:collection="collection"
:manifests="manifests"
>
</Metadata>
</q-drawer>
</div>
</template>
<script>
import Metadata from '@/components/metadata.vue';
import Toolbar from '@/components/quasar-toolbar.vue';
import Treeview from '@/components/treeview.vue';
export default {
name: 'Drawer',
components: {
Metadata,
Toolbar,
Treeview,
},
props: {
collection: Object,
depth: Number,
itemurl: String,
itemurls: Array,
label: String,
manifests: Array,
tree: Array,
vectors: Object,
},
data() {
return {
meta: true,
node: true,
tab: 'Twin',
};
},
mounted() {
this.$root.$on('update-panel-status', (status) => {
this.meta = status.metadata;
this.node = status.treeview;
});
},
};
</script>
<template>
<q-header elevated class="bg-white text-black">
<Infobar v-if="manifests.length"
:collection="collection"
:itemurl="itemurl"
:manifests="manifests"
:vectors="vectors"
>
</Infobar>
<div class="sub-viewer-1__nav">
<Togglebar
:status="status"
:vectors="vectors"
>
</Togglebar>
<Navbar
:itemurls="itemurls"
:manifests="manifests"
:vectors="vectors"
>
</Navbar>
</div>
</q-header>
</template>
<script>
import Infobar from '@/components/infobar.vue';
import Navbar from '@/components/navbar.vue';
import Togglebar from '@/components/togglebar.vue';
export default {
name: 'Header',
components: {
Infobar,
Navbar,
Togglebar,
},
props: {
collection: Object,
itemurl: String,
itemurls: Array,
manifests: Array,
status: Object,
vectors: Object,
},
};
</script>
<template>
<q-toolbar class="bg-grey-3 sticky">
<q-toolbar-title class="text-bold">
{{ heading | capitalize }}
</q-toolbar-title>
</q-toolbar>
</template>
<script>
export default {
name: 'Toolbar',
props: {
heading: {
type: String,
required: true,
},
},
filters: {
capitalize(s) {
return s.toUpperCase();
},
},
};
</script>
<style scoped lang="css">
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
</style>
<template>
<ul class="sub-viewer-1-nav__items" title="Tab options">
<li v-for="(name, idx) in panels" :key="idx">
<button
class="sub-viewer-1-nav-item"
:aria-selected="toggleAria(idx)"
:title="toggleTitle(idx)"
@click="updateStatus(idx);"
>
<!-- NOTE:
if vectors are passed down from parent, the icons don't render;
hence just the svg paths are passed and toggled.
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path :d="togglePath(idx)" transform="translate(56 56)"></path>
</svg>
<span aria-hidden="true">{{ name }}</span>
</button>
</li>
<li>
<button class="sub-viewer-1-reset" title="Reset Tabs" @click="resetPanelStatus();">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path :d="svg.undo" transform="translate(56 59)"></path>
</svg>
<span aria-hidden="true">{{ 'Reset Tabs' | capitalize }}</span>
</button>
</li>
</ul>
</template>
<script>
export default {
name: 'Togglebar',
props: {
status: Object,
vectors: Object,
},
data() {
return {
panels: ['treeview', 'text', 'image', 'metadata'],
svg: {
'check-circle': 'M200,0 C89.5427419,0 0,89.5427419 0,200 C0,310.457258 89.5427419,400 200,400 C310.457258,400 400,310.457258 400,200 C400,89.5427419 310.457258,0 200,0 Z M200,38.7096774 C289.13871,38.7096774 361.290323,110.847581 361.290323,200 C361.290323,289.13871 289.152419,361.290323 200,361.290323 C110.86129,361.290323 38.7096774,289.152419 38.7096774,200 C38.7096774,110.86129 110.847581,38.7096774 200,38.7096774 M313.067742,143.76371 L294.893548,125.442742 C291.129839,121.648387 285.002419,121.623387 281.208065,125.387903 L167.214516,238.465323 L118.995161,189.854839 C115.231452,186.060484 109.104032,186.035484 105.309677,189.799194 L86.9879032,207.973387 C83.1935484,211.737097 83.1685484,217.864516 86.9330645,221.659677 L160.143548,295.462903 C163.907258,299.257258 170.034677,299.282258 173.829032,295.517742 L313.01371,157.45 C316.807258,153.685484 316.831452,147.558065 313.067742,143.76371 L313.067742,143.76371 Z',
circle: 'M200,0 C89.516129,0 0,89.516129 0,200 C0,310.483871 89.516129,400 200,400 C310.483871,400 400,310.483871 400,200 C400,89.516129 310.483871,0 200,0 Z M200,361.290323 C110.887097,361.290323 38.7096774,289.112903 38.7096774,200 C38.7096774,110.887097 110.887097,38.7096774 200,38.7096774 C289.112903,38.7096774 361.290323,110.887097 361.290323,200 C361.290323,289.112903 289.112903,361.290323 200,361.290323 Z',
undo: 'M9.52380952,-0.00019195871 L31.5166667,-0.00019195871 C36.8650794,-0.00019195871 41.1650794,4.4031746 41.0380952,9.75079365 L39.1753968,87.9793651 C74.5436508,34.7888889 135.088889,-0.214285714 203.803968,-0.00019195871 C312.047619,0.33968254 400.169048,88.8960317 400.000243,197.139683 C399.830159,305.699206 311.77381,393.650794 203.174603,393.650794 C152.439683,393.650794 106.188889,374.454762 71.2873016,342.930159 C67.2293651,339.265079 67.0380952,332.961111 70.9047619,329.094444 L86.5698413,313.429365 C90.1396825,309.859524 95.897619,309.631746 99.665873,312.99127 C127.153175,337.496825 163.40873,352.380952 203.174603,352.380952 C289.144444,352.380952 358.730159,282.807937 358.730159,196.825397 C358.730159,110.855556 289.157143,41.2698413 203.174603,41.2698413 C140.043651,41.2698413 85.7611111,78.7952381 61.3690476,132.779365 L161.677778,130.39127 C167.024603,130.264286 171.428571,134.563492 171.428571,139.912698 L171.428571,161.904762 C171.428571,167.164286 167.164286,171.428571 161.904762,171.428571 L9.52380952,171.428571 C4.26428571,171.428571 0,167.164286 0,161.904762 L0,9.52380952 C0,4.26428571 4.26428571,-0.00019195871 9.52380952,-0.00019195871 Z',
},
};
},
filters: {
capitalize(s) {
return s.toUpperCase();
},
},
methods: {
resetPanelStatus() {
for (let index = 0; index < this.panels.length; index += 1) {
this.status[this.panels[index]] = true;
}
this.$root.$emit('update-panel-status', this.status);
},
toggleAria(id) {
return !!this.status[this.panels[id]];
},
togglePath(id) {
return this.status[this.panels[id]]
? this.svg['check-circle']
: this.svg.circle;
},
toggleTitle(id) {
const caption = this.ucfirst(this.panels[id]);
return this.status[this.panels[id]] ? `Hide ${caption} Tab` : `Show ${caption} Tab`;
},
ucfirst(s) { </