Commit d4850b95 authored by schneider210's avatar schneider210
Browse files

group contents and metadata in one single panel. exchnage meta by annotation...

group contents and metadata in one single panel. exchnage meta by annotation panel and adjust splitter ratios
parent 9fd13e9c
...@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file. ...@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [1.1.1] - 2020-08-03
### Fixed
- fix tree bug if meta panel is active. implement listener for active panel tab
## [1.1.0] - 2020-07-29
### Added
- metadata panel exchanged by annotation panel (no content yet). therefore metadata goes into the tree panel.
both of the latter became tabs inside this one panel.
- panel order changed to: contents / metadata (tabs), image, text, annotations
## [1.0.1]- 2020-07-30 ## [1.0.1]- 2020-07-30
### Changed ### Changed
......
...@@ -42,6 +42,7 @@ export default { ...@@ -42,6 +42,7 @@ export default {
}, },
data() { data() {
return { return {
annotations: {},
collection: {}, collection: {},
collectiontitle: '', collectiontitle: '',
contenturl: '', contenturl: '',
......
...@@ -11,33 +11,25 @@ ...@@ -11,33 +11,25 @@
title="Increase Textsize" title="Increase Textsize"
@click="increase()" @click="increase()"
> >
<q-icon <q-icon :name="fasSearchPlus" size="sm" />
size="sm"
:name="fasSearchPlus"
/>
</q-btn> </q-btn>
<q-btn <q-btn
class="q-mr-sm q-mb-sm cursor-pointer" class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8" color="grey-8"
round
flat flat
round
size="md" size="md"
title="Decrease Textsize" title="Decrease Textsize"
@click="decrease()" @click="decrease()"
> >
<q-icon <q-icon :name="fasSearchMinus" />
size="sm"
:name="fasSearchMinus"
/>
</q-btn> </q-btn>
</div> </div>
</div> </div>
<div class="row" style="display: contents"> <div class="row" style="display: contents">
<div <div :id="nodeid" :style="`font-size: ${fontsize}px`" v-html="content"></div>
:style="`font-size: ${fontsize}px`"
:id="nodeid" v-html="content">
</div>
</div> </div>
</div> </div>
</template> </template>
......
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<div> <div>
<q-btn <q-btn
unelevated unelevated
color="black q-pr-sm"
class="q-mb-md" class="q-mb-md"
color="black q-pr-sm"
:disabled="itemindex <= 0" :disabled="itemindex <= 0"
@click="toggleSheet(--itemindex)" @click="toggleSheet(--itemindex)"
> >
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<p>Copyright (c) 2020 Göttingen University - Göttingen State and University Library</p> <p>Copyright (c) 2020 Göttingen University - Göttingen State and University Library</p>
<p class="q-mb-none"> <p class="q-mb-none">
Version 1.0.0, licensed under GNU Affero General Public License v3.0 Version 1.1.1, licensed under GNU Affero General Public License v3.0
</p> </p>
</q-card-section> </q-card-section>
......
// global extra classes // global extra classes
.scrollPanel { .scrollpanel {
position: relative; position: relative;
.sticky { .sticky {
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<script id="emo-config" type="application/json"> <script id="emo-config" type="application/json">
{ {
"entrypoint": "https://ahikar-test.sub.uni-goettingen.de/api/textapi/ahikar/3r9ps/collection.json", "entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/3r9ps/collection.json",
"headers": { "headers": {
"all": true, "all": true,
"info": true, "info": true,
...@@ -37,23 +37,24 @@ ...@@ -37,23 +37,24 @@
"manifest": "Manuscript" "manifest": "Manuscript"
}, },
"panels": { "panels": {
"tree": { "tabs": {
"name": "Contents", "default": "contents",
"name": "Contents & Meta",
"position": 1, "position": 1,
"show": true "show": true
}, },
"text": { "image": {
"name": "Text", "name": "Image",
"position": 2, "position": 2,
"show": true "show": true
}, },
"image": { "text": {
"name": "Image", "name": "Text",
"position": 3, "position": 3,
"show": true "show": true
}, },
"metadata": { "annotations": {
"name": "Metadata", "name": "Annotations",
"position": 4, "position": 4,
"show": true "show": true
} }
......
...@@ -8,15 +8,18 @@ export default { ...@@ -8,15 +8,18 @@ export default {
return { return {
itemindex: 0, itemindex: 0,
sequenceindex: 0, sequenceindex: 0,
tab: '',
}; };
}, },
methods: { methods: {
toggleSheet(itemIndex) { toggleSheet(itemIndex) {
const link = this.itemurls[itemIndex]; if (this.tab !== 'contents') {
const tree = document.getElementsByClassName('view-tree')[0]; const link = this.itemurls[itemIndex];
window.location.hash = `selectedItem-${link}`;
window.location.hash = `selectedItem-${link}`; const tree = document.getElementsByClassName('view-tree')[0];
tree.scrollBy(0, -80); tree.scrollBy(0, -80);
}
this.sequenceindex = this.computedsequenceindex; this.sequenceindex = this.computedsequenceindex;
this.updateItem(this.itemurls[itemIndex], this.sequenceindex); this.updateItem(this.itemurls[itemIndex], this.sequenceindex);
...@@ -90,6 +93,10 @@ export default { ...@@ -90,6 +93,10 @@ export default {
}, },
}, },
mounted() { mounted() {
this.$root.$on('update-tab', (tab) => {
this.tab = tab;
});
this.$root.$on('update-item-index', (index) => { this.$root.$on('update-item-index', (index) => {
this.itemindex = index; this.itemindex = index;
}); });
......
...@@ -2,27 +2,76 @@ ...@@ -2,27 +2,76 @@
<q-page> <q-page>
<q-splitter v-model="splitterone" :limits="[0, 100]"> <q-splitter v-model="splitterone" :limits="[0, 100]">
<template v-show="config.panels.tree.show && states.tree" v-slot:before> <template v-show="config.panels.tabs.show && states.tabs" v-slot:before>
<Toolbar :heading="config.panels.tree.name" /> <Toolbar :heading="config.panels.tabs.name" />
<q-separator /> <q-separator />
<Treeview v-if="tree.length && manifests.length" <q-card>
:manifests="manifests" <q-tabs v-model="tab"
:tree="tree" align="right"
> active-bg-color="grey-4"
</Treeview> >
<q-tab name="contents" label="Contents" @click="updateTab()" />
<q-tab name="meta" label="Metadata" @click="updateTab()" />
</q-tabs>
<q-separator />
<q-tab-panels v-model="tab" animated keep-alive>
<q-tab-panel name="contents">
<Treeview v-if="tree.length && manifests.length"
:manifests="manifests"
:tree="tree"
>
</Treeview>
</q-tab-panel>
<q-tab-panel name="meta">
<div class="scrollpanel">
<Metadata v-if="manifests.length"
:collection="collection"
:config="config"
:language="language"
:manifests="manifests"
:itemlabel="itemlabel"
>
</Metadata>
</div>
</q-tab-panel>
</q-tab-panels>
</q-card>
</template> </template>
<template v-slot:after> <template v-slot:after>
<q-splitter v-model="splittertwo" :limits="[0, 100]"> <q-splitter v-model="splittertwo" :limits="[0, 100]">
<template v-show="config.panels.image.show && states.image && imageurl" v-slot:before>
<Toolbar :heading="config.panels.image.name" />
<q-separator />
<div class="q-pa-md q-gutter-sm overflow-hidden">
<div class="scrollpanel">
<OpenSeadragon
:key="imageurl"
:imageurl="imageurl"
>
</OpenSeadragon>
</div>
</div>
</template>
<template v-slot:after>
<q-splitter v-model="splitterthree" :limits="[0, 100]">
<template v-show="config.panels.text.show && states.text" v-slot:before> <template v-show="config.panels.text.show && states.text" v-slot:before>
<Toolbar :heading="config.panels.text.name" /> <Toolbar :heading="config.panels.text.name" />
<q-separator /> <q-separator />
<div class="q-pa-md q-gutter-sm"> <div class="q-pa-md q-gutter-sm">
<div class="scrollPanel"> <div class="scrollpanel">
<q-infinite-scroll> <q-infinite-scroll>
<Content <Content
:key="contenturl" :key="contenturl"
...@@ -37,46 +86,19 @@ ...@@ -37,46 +86,19 @@
</div> </div>
</template> </template>
<template v-slot:after> <template v-show="config.panels.annotations.show && states.annotations" v-slot:after>
<q-splitter v-model="splitterthree" :limits="[0, 100]"> <Toolbar :heading="config.panels.annotations.name" />
<template v-show="config.panels.image.show && states.image && imageurl" v-slot:before> <q-separator />
<Toolbar :heading="config.panels.image.name" />
<q-separator />
<div class="q-pa-md q-gutter-sm" style="overflow:hidden">
<div class="scrollPanel">
<OpenSeadragon
:key="imageurl"
:imageurl="imageurl"
>
</OpenSeadragon>
</div>
</div>
</template>
<template v-show="config.panels.metadata.show && states.metadata" v-slot:after>
<Toolbar :heading="config.panels.metadata.name" />
<q-separator />
<div class="scrollPanel">
<q-infinite-scroll>
<Metadata v-if="manifests.length"
:collection="collection"
:config="config"
:language="language"
:manifests="manifests"
:itemlabel="itemlabel"
>
</Metadata>
</q-infinite-scroll>
</div>
</template>
</q-splitter>
</template> </template>
</q-splitter> </q-splitter>
</template> </template>
</q-splitter>
</template>
</q-splitter> </q-splitter>
</q-page> </q-page>
</template> </template>
...@@ -110,7 +132,7 @@ export default { ...@@ -110,7 +132,7 @@ export default {
}, },
data() { data() {
return { return {
// status: tree, text, image, metadata // status: tree, image, text, annotations
matrix: [ matrix: [
{ state: [1, 1, 1, 1], ratio: [25, 33, 50] }, { state: [1, 1, 1, 1], ratio: [25, 33, 50] },
{ state: [0, 0, 0, 0], ratio: [0, 0, 0] }, { state: [0, 0, 0, 0], ratio: [0, 0, 0] },
...@@ -133,6 +155,7 @@ export default { ...@@ -133,6 +155,7 @@ export default {
splittertwo: 33, splittertwo: 33,
splitterthree: 50, splitterthree: 50,
states: {}, states: {},
tab: '',
}; };
}, },
methods: { methods: {
...@@ -167,6 +190,9 @@ export default { ...@@ -167,6 +190,9 @@ export default {
} }
}); });
}, },
updateTab() {
this.$root.$emit('update-tab', this.tab);
},
}, },
created() { created() {
// filter the panel's showcases and leave the config object untouched // filter the panel's showcases and leave the config object untouched
...@@ -174,6 +200,8 @@ export default { ...@@ -174,6 +200,8 @@ export default {
this.states[panel] = states.show; this.states[panel] = states.show;
}); });
this.setSplitterRatio(this.states); this.setSplitterRatio(this.states);
this.tab = this.config.panels.tabs.default;
}, },
mounted() { mounted() {
// emitted by @/components/togglebar.vue // emitted by @/components/togglebar.vue
...@@ -194,13 +222,13 @@ export default { ...@@ -194,13 +222,13 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../css/responsive-heights.scss'; @import '../css/responsive-heights.scss';
.scrollPanel { .scrollpanel {
-ms-overflow-style: none; -ms-overflow-style: none;
overflow: auto; overflow: auto;
scrollbar-width: none; scrollbar-width: none;
@include makeResponsiveHeight(); @include makeResponsiveHeight();
} }
.scrollPanel::-webkit-scrollbar { .scrollpanel::-webkit-scrollbar {
display: none; display: none;
} }
</style> </style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment