Skip to content

GitLab

Commit 5237e0a2 authored by schneider210's avatar schneider210
Browse files

init panel order config: 1st draft. init npm publishing. minor corrections... 

init panel order config: 1st draft. init npm publishing. minor corrections regarding indents and prop order
parent 599b9843
Hide whitespace changes
Inline Side-by-side
.npmrc 0 → 100644
View file @ 5237e0a2
//gitlab.gwdg.de/api/v4/projects/10921/packages/npm/:_authToken=$AUTH_TOKEN
//gitlab.gwdg.de/api/v4/packages/npm/:_authToken=$AUTH_TOKEN
@subugoe:registry=https://gitlab.gwdg.de/api/v4/packages/npm/
CHANGELOG.md
View file @ 5237e0a2
......@@ -5,6 +5,14 @@ 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/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [1.3.0] - 2020-08-03
### Added
- rewrite of mainview template. components are dynamic now and the order is configurable
### Changed
- several minors
## [1.2.1] - 2020-08-12
### Changed
......
README.md
View file @ 5237e0a2
......@@ -181,20 +181,40 @@ It's a json object. So if you are going to make any changes and you have to quot
"manifest": "Manuscript"
},
"panels": {
"tree": {
"name": "Contents",
"show": true
"annotations": {
"heading": "Annotations",
"order": 4,
"show": true,
"tab": false
},
"image": {
"heading": "Image",
"order": 2,
"show": true,
"tab": false
},
"meta": {
"heading": "Metadata",
"order": 4,
"show": true,
"tab": true
},
"text": {
"name": "Text",
"show": true
"heading": "Text",
"order": 3,
"show": true,
"tab": false
},
"image": {
"name": "Image",
"show": true
"tree": {
"heading": "Treeview",
"order": 5,
"show": true,
"tab": true
},
"metadata": {
"name": "Metadata",
"tabs": {
"default": "Treeview",
"heading": "Tabs",
"order": 1,
"show": true
}
},
......@@ -237,20 +257,23 @@ It's a json object. So if you are going to make any changes and you have to quot
the label of the item respectively
Assuming your collection consists of letters, you'd maybe want to name it "letter" or just "sheet" for instance.<br />
This change affects the captions of the navbuttons located in the headerbar and the metadata section.<br />
This change affects the captions of the navbuttons located in the headerbar and the metadata section.
Defaults to `Sheet`
Defaults to `Sheet`
- **manifest**:<br />
same as for `item` but related to the manifest title<br />
Defaults to `Manuscript`
Defaults to `Manuscript`
- **panels**
It's keys correspond to the panelnames, e.g. "contents", "text", "image", "metadata".
Each key consists of further sub-keys: `name` and `show`.
Change either name-key according to your liking and set either show-key to **false** if you don't want the Viewer to show the appropriate panel/s.
It's keys correspond to the panelnames, e.g. "contents", "text", "image" and so on.
<br />
**Note:** Pls **leave these keys UNTOUCHED** since these are for internal use only!
<br /><br />
Each of these keys consists of further sub-keys: `heading`, `order`, `show` and `tab`.
Change either sub-key according to your liking. (Set either show-key to **false** for instance, if you don't want the Viewer to show the appropriate panel/s)
Example given:
......@@ -258,14 +281,20 @@ It's a json object. So if you are going to make any changes and you have to quot
{
"panels": {
"tree": {
"name": "ToC",
"show": false
"heading": "toC",
"order": 3,
"show": false,
"tab": false
}
}
}
```
Defaults to **true** for every `show`-key
- **heading** refers to the caption in each panel's toolbar
- **order** means the order in which the panels will appear from left to right
- **show** toggles (show or rather hide) the appropriate panel respectively
- **tab** denotes, if the panel will be grouped together with others inside a single panel
- **standalone**
......
package.json
View file @ 5237e0a2
{
"name": "viewer",
"version": "1.2.0",
"version": "1.3.0",
"description": "Viewer for the modular framework to present digital editions",
"productName": "EMo Viewer",
"keywords": [
......@@ -32,6 +32,9 @@
"url": "https://gitlab.gwdg.de/subugoe/emo/Qviewer.git"
},
"private": false,
"publishConfig": {
"@subugoe:registry": "https://gitlab.gwdg.de/api/v4/projects/10921/packages/npm/"
},
"dependencies": {
"@quasar/extras": "^1.9.3",
"openseadragon": "^2.4.2",
......
src/App.vue
View file @ 5237e0a2
......@@ -12,12 +12,14 @@
<q-page-container>
<router-view
:annotations="annotations"
:collection="collection"
:config="config"
:contenturl="contenturl"
:fontsize="fontsize"
:imageurl="imageurl"
:itemlabel="itemlabel"
:labels="config.labels"
:language="itemlanguage"
:manifests="manifests"
:request="request"
......@@ -92,6 +94,11 @@ export default {
this.collection = data;
this.label = this.getLabel(data);
this.request(data.annotationCollection)
.then((annotations) => {
this.annotations = annotations.annotationCollection;
});
this.tree.push(
{
children: [],
......
src/components/annotations.vue 0 → 100644
View file @ 5237e0a2
<template>
<div>
<q-list>
<q-item v-for="anno in Object.entries(annotations)" :key="anno.id">
<q-item-section>
<q-item-label overline class="text-uppercase">{{ anno[0] }}</q-item-label>
<q-item-label>{{ anno[1] }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
</template>
<script>
export default {
name: 'Annotations',
props: {
annotations: Object,
},
data() {
return {
};
},
methods: {
},
mounted() {
},
};
</script>
src/components/content.vue
View file @ 5237e0a2
<template>
<div>
<div class="row sticky">
<div>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
flat
round
size="md"
title="Increase Textsize"
@click="increase()"
>
<q-icon :name="fasSearchPlus" size="sm" />
</q-btn>
<div class="q-pa-md q-gutter-sm">
<div class="scroll">
<q-infinite-scroll>
<div class="row sticky">
<div>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
flat
round
size="md"
title="Increase Textsize"
@click="increase()"
>
<q-icon :name="fasSearchPlus" size="sm" />
</q-btn>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
flat
round
size="md"
title="Decrease Textsize"
@click="decrease()"
>
<q-icon :name="fasSearchMinus" />
</q-btn>
</div>
</div>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
flat
round
size="md"
title="Decrease Textsize"
@click="decrease()"
>
<q-icon :name="fasSearchMinus" />
</q-btn>
</div>
</div>
<div class="row" style="display: contents">
<div :id="nodeid" :style="`font-size: ${fontsize}px`" v-html="content"></div>
<div class="row" style="display: contents">
<div :id="nodeid" :style="`font-size: ${fontsize}px`" v-html="content"></div>
</div>
</q-infinite-scroll>
</div>
</div>
</template>
......
src/components/language.vue
View file @ 5237e0a2
<template>
<div class="language col-xs-auto">
<div class="col-xs-auto">
<q-btn
color="grey"
flat
......
src/components/metadata.vue
View file @ 5237e0a2
<template>
<div>
<div class="scroll">
<q-list v-if="Object.keys(collection).length">
<q-item>
<q-item-section class="text-h6 caps">Collection</q-item-section>
......@@ -38,7 +38,7 @@
<q-list>
<q-item>
<q-item-section class="text-h6 caps">
{{ config.labels.manifest }} {{ sequenceindex + 1 }} / {{ manifests.length }}
{{ labels.manifest }} {{ sequenceindex + 1 }} / {{ manifests.length }}
</q-item-section>
</q-item>
......@@ -55,7 +55,7 @@
<q-list>
<q-item>
<q-item-section class="text-h6 caps">
{{ config.labels.item }} {{ itemindex + 1 }} / {{ itemcount }}
{{ labels.item }} {{ itemindex + 1 }} / {{ itemcount }}
</q-item-section>
</q-item>
......@@ -81,8 +81,8 @@ export default {
name: 'Metadata',
props: {
collection: Object,
config: Object,
itemlabel: String,
labels: Object,
language: String,
manifests: Array,
},
......@@ -118,9 +118,3 @@ export default {
},
};
</script>
<style scoped>
.caps {
font-variant: small-caps;
}
</style>
src/components/navbar.vue
View file @ 5237e0a2
......@@ -8,9 +8,9 @@
@click="toggleSheet(--itemindex)"
>
<q-icon
class="q-pr-sm"
:name="fasArrowLeft"
size="24px"
class="q-pr-sm"
/>
{{ captionprev }}
</q-btn>
......
src/components/openseadragon.vue
View file @ 5237e0a2
<template>
<figure id="openseadragon">
<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>
<div class="q-pa-md q-gutter-sm overflow-hidden">
<div class="scroll">
<figure id="openseadragon" class="scroll-panel">
<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>
</div>
</div>
</template>
<script>
......
src/components/softwareinfo.vue
View file @ 5237e0a2
<template>
<div class="softwareinfo col-xs-auto" title="Project info">
<div class="col-xs-auto" title="Project info">
<q-btn
flat
color="grey"
......@@ -22,7 +22,7 @@
<p>Copyright (c) 2020 Göttingen University - Göttingen State and University Library</p>
<p class="q-mb-none">
Version 1.2.0, licensed under GNU Affero General Public License v3.0
Version 1.3.0, licensed under GNU Affero General Public License v3.0
</p>
</q-card-section>
......@@ -71,8 +71,7 @@ import {
fasBug,
fasCode,
fasBook,
}
from '@quasar/extras/fontawesome-v5';
} from '@quasar/extras/fontawesome-v5';
export default {
name: 'Softwareinfo',
......
src/components/tabs.vue 0 → 100644
View file @ 5237e0a2
<template>
<q-card flat>
<q-tabs v-model="tab" active-bg-color="grey-4" align="right">
<q-tab v-for="panel in panels"
:key="panel.order"
:label="panel.heading"
:name="panel.heading"
/>
</q-tabs>
<q-separator />
<q-tab-panels v-model="tab" animated class="content-panel" keep-alive>
<q-tab-panel v-for="panel in panels" :key="panel.order" :name="panel.heading">
<component :is="panel.heading" v-bind="$props" />
</q-tab-panel>
</q-tab-panels>
</q-card>
</template>
<script>
import Metadata from '@/components/metadata.vue';
import Treeview from '@/components/tree.vue';
export default {
name: 'Tabs',
components: {
Metadata,
Treeview,
},
props: {
collection: Object,
config: Object,
itemlabel: String,
labels: Object,
language: String,
manifests: Array,
tree: Array,
},
data() {
return {
panels: [],
tab: '',
};
},
created() {
Object.values(this.config.panels).forEach((panel) => {
if (panel.tab === true) {
this.panels.push(panel);
}
});
this.tab = this.config.panels.tabs.default;
},
mounted() {
},
};
</script>
src/components/togglebar/toggleIndex.vue
View file @ 5237e0a2
......@@ -2,16 +2,27 @@
<div>
<ToggleFilter>
<q-list class="toggle-list">
<q-item v-for="(name, idx) in togglekeys"
<q-item v-for="(name, idx) in togglekeys" :key="idx"
class="bg-grey-2"
clickable
v-close-popup
:aria-selected="toggleAria(idx)"
:key="idx"
:title="toggleTitle(idx)"
@click="toggleIcon(idx); updateStatus(idx)"
>
<q-icon class="q-pr-xs" size="xs" :name="toggleIcon(idx)" />
{{ panelstates[name].name | capitalize }}
<q-icon class="q-pr-xs q-mt-xs" size="xs" :name="toggleIcon(idx)" />
<q-item-section>{{ panelstates[name].heading | capitalize }}</q-item-section>
</q-item>
<q-item
class="bg-grey-5"
clickable
v-close-popup
title="Reset panels to default view"
@click="resetPanelStatus"
>
<q-icon class="q-pr-xs q-mt-xs" size="xs" :name="fasUndo" />
<q-item-section>{{ 'Reset Panels' | capitalize }}</q-item-section>
</q-item>
<q-item
class="bg-grey-4"
......@@ -34,7 +45,8 @@ import {
fasCircle,
fasCheckCircle,
} from '@quasar/extras/fontawesome-v5';
import ToggleFilter from './toggleFilter';
import ToggleFilter from '@/components/togglebar/toggleFilter.vue';
export default {
name: 'ToggleIndex',
......@@ -47,7 +59,6 @@ export default {
},
data() {
return {
states: {},
togglekeys: [],
};
},
......@@ -63,11 +74,10 @@ export default {
},
resetPanelStatus() {
// NOTE: just loop over the initial states formerly configured to be shown (e.g. *true*)
// leave the initial panel/s configured to be hidden (e.g. *false*) untouched!
// and leave the initial panel/s configured to be hidden (e.g. *false*) untouched!
for (let idx = 0; idx < this.togglekeys.length; idx += 1) {
this.panelstates[this.togglekeys[idx]].show = true;
}
this.$root.$emit('update-panel-status', this.updateEmitter(this.panelstates));
},
toggleAria(id) {
return !!this.panelstates[this.togglekeys[id]].show;
......@@ -76,7 +86,7 @@ export default {
return this.panelstates[this.togglekeys[id]].show ? fasCheckCircle : fasCircle;
},
toggleTitle(id) {
const caption = this.ucfirst(this.panelstates[this.togglekeys[id]].name);
const caption = this.ucfirst(this.panelstates[this.togglekeys[id]].heading);
return this.panelstates[this.togglekeys[id]].show
? `Hide ${caption} Tab`
......@@ -85,20 +95,8 @@ export default {
ucfirst(s) {
return s.charAt(0).toUpperCase() + s.slice(1);
},
updateEmitter(status) {
Object.entries(status).forEach(([panel, state]) => {
this.states[panel] = state.show;
});
return this.states;
},
updateStatus(id) {
// NOTE: leave the initial panelstates untouched! Configured by the project only!
// original panelstates needed in resetPanelStatus() to look up the initial states,
// which otherwise would be incidentally overwritten; hence: => *statecopy*
const statecopy = this.panelstates;
statecopy[this.togglekeys[id]].show = !statecopy[this.togglekeys[id]].show;
this.$root.$emit('update-panel-status', this.updateEmitter(statecopy));
this.panelstates[this.togglekeys[id]].show = !this.panelstates[this.togglekeys[id]].show;
},
},
created() {
......@@ -106,8 +104,13 @@ export default {
this.fasCircle = fasCircle;
this.fasCheckCircle = fasCheckCircle;
const panels = Object.entries(this.panelstates).sort((a, b) => a[1].order - b[1].order);
// just show the toggle buttons needed according to the config
Object.entries(this.panelstates).forEach(([panel, state]) => {
panels.forEach(([panel, state]) => {
if (state.tab === true) {
state.show = false;
}
if (state.show === true) {
this.togglekeys.push(panel);
}
......
src/components/tree.vue
View file @ 5237e0a2
......@@ -9,10 +9,7 @@
:selected.sync="selected"
>
<template v-slot:default-body={node}>
<div
v-if="!node.children"
:id="`selectedItem-${node['label']}`">
</div>
<div v-if="!node.children" :id="`selectedItem-${node['label']}`"></div>
</template>
</q-tree>
</div>
......@@ -38,13 +35,13 @@ export default {
this.$q.iconSet.set(matIcons);
},
mounted() {
// expand the root node as well as the first knot which contains the actual item selected
this.expanded.push(this.tree[0].label, this.manifests[0].label);
this.$root.$on('update-item', (item) => {
this.selected = item;
});
// expand the root node as well as the first knot which contains the actual item selected
this.expanded.push(this.tree[0].label, this.manifests[0].label);
this.$root.$on('update-sequence-index', (index) => {
if (index !== this.sequenceindex) {
this.sequenceindex = index;
......
src/css/global.sass
View file @ 5237e0a2
// global extra classes
@import '../css/responsive-heights.sass'
.scroll-panel
position: relative
.sticky
......@@ -23,3 +25,16 @@
.without-dropdown
> *
display: flex
.caps
font-variant: small-caps
.scroll
-ms-overflow-style: none
overflow: auto
scrollbar-width: none
@include makeResponsiveHeight()
.scroll::-webkit-scrollbar
display: none
src/index.template.html
View file @ 5237e0a2
......@@ -37,25 +37,40 @@
"manifest": "Manuscript"
},