Commit a5da0429 authored by schneider210's avatar schneider210
Browse files

rename 'pagelabel' to 'itemlabel'; revert former changes in regards to...

rename 'pagelabel' to 'itemlabel'; revert former changes in regards to 'imgeurl' due to wrong branch; expand first knot in tree by default which holds the actual item selected; dynamic collection title in tree instead of literal one
parent 299ece9f
......@@ -5,28 +5,61 @@ 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).
## [0.0.15] - 2020-07-10
## [0.0.19] - 2020-07-10
### Changed
- The page deployment now takes places without having to store any data externally.
We only rely on previous artifacts for new pipelines.
## [0.0.14] - 2020-06-24
## [0.0.18] - 2020-07-02
### Fixed
- TreeView: expanded-stack. switched from pop() to splice(). pop() broke the stack, since it deals with the stack tail
- TreeView: root node (collection title) is expandable / collapsible now as well
## [0.0.17] - 2020-07-01
### Fixed
- TreeView: according to the Quasar maintainer, q-tree doesn't provide a possibility to have nodes selected and expanded in the same step. it behaves so by design!
So: provided a handler function to fake this very behaviour. Manifest titles now toggle on click (expand / collapse) without being selected.
- Actual Item is now selected at Viewer start (init)
- expanded-stack grew by clicking an item (same title has been pushed onto the array/stack over and over again). this is now handled by comparing the appropriate sequence-index.
## [0.0.16] - 2020-06-25
### Added
- Configured to anchor manifest title to top of the panel.
## [0.0.15] - 2020-06-24
### Fixed
- Reverted the changes and fixed the icons to nest inside image.
## [0.0.13] - 2020-06-25
## [0.0.14] - 2020-06-23
### Added
- filter function to the tree: now able to filter by labels, e.g. 122v
### Changed
- delete obsolete code sections
- fix indents for better readability
- extend the README file in regards to front-end setup
- delete quasar's `selected`-prop used for the *q-tree*-component to disable the selection of manifest titles
- rename var `pagelabel` to `ìtemlabel` which seems to be more descriptive
- remove artifacts from blob that are older than 2 weeks.
this generally speeds up the build process and prevents errors since GitLab can only handle artifacts up to a certain size.
- Configured to anchor manifest title to top of the panel.
## [0.0.12] - 2020-06-22
## [0.0.13] - 2020-06-22
### Added
......@@ -35,14 +68,14 @@ this generally speeds up the build process and prevents errors since GitLab can
### Fixed
- item is now highlighted when the user clicks a nav navbuttons
- item is now highlighted when the user clicks a nav-button
- click events are bound for the zoom icons are now bound to the embracing buttons instead of the icons
## [0.0.11] - 2020-06-19
## [0.0.12] - 2020-06-19
### Added
- config option (index.html): switch off the headerbars individually (e.g. Infobar, NavBar, ToggleBar)
- config option (index.html): switch off the header bars individually (e.g. Infobar, NavBar, ToggleBar)
### Changed
......@@ -54,35 +87,35 @@ this generally speeds up the build process and prevents errors since GitLab can
- items are highlighted consecutively when browsing by navbuttons
## [0.0.10] - 2020-06-17
## [0.0.11] - 2020-06-17
### Added
- config option (index.html): switch off the header including all of it's components
## [0.0.9] - 2020-06-16
## [0.0.10] - 2020-06-16
### Added
- config option (index.html): tell the viewer with which panels to start
## [0.0.8] - 2020-06-16
## [0.0.9] - 2020-06-16
### Added
- an architecture diagram giving an overview of how the EMo Viewer works and interacts with a backend.
- an architecture diagram giving an overview of how the EMo Viewer works and interacts with a back-end.
## [0.0.7] - 2020-06-12
## [0.0.8] - 2020-06-12
### Added
- information in the README on how to configure the Viewer
## [0.0.6] - 2020-06-09
## [0.0.7] - 2020-06-09
### Added
- information in the README on how to establish a link between the Viewer and a backend.
- information in the README on how to establish a link between the Viewer and a back-end.
- missing general README section about contributing and versioning.
## [0.0.6] - 2020-05-29
......@@ -111,7 +144,7 @@ this should improve the development workflow for all stakeholders.
### Added
- Text can now be zoomed in and out to a max of 32px and min of 8px. The fontsize defaults to 14px. It is tracked during browsing.
- Text can now be zoomed in and out to a max of 32px and min of 8px. The font size defaults to 14px. It is tracked during browsing.
- Software info includes links to documentation, source code and bug reporting
## [0.0.3] - 2020-05-18
......
......@@ -40,44 +40,75 @@ Also the commit short hash can be used to see a demo.
To get the EMo Viewer up and running you should have the following software installed:
- npm
- vue-cli (globally installed)
- vue-cli-service-global (globally installed)
- **curl**
- **npm**
- **nvm**
For using the development mode you also need
- quasar-cli (globally installed)
**Note**:
To get all dependencies via `npm`, simply run
We recommend to make use of *nvm*, since there might be issues with npm regarding permissions.
The main purpose of `nvm` is to have multiple node versions installed in regards to different projects which might demand some sort of backwards compatibility.
It enables you to just switch to the appropriate node version.
Besides it also keeps track of resolving permission issues,
since all your global installations go to your home directory (~/.nvm/) instead of being applied systemwide.
```bash
npm install -g @vue/cli @vue/cli-service-global @quasar/cli
```
#### Set up *nvm* and the recent stable version of *node.js*
### Installing
```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
nvm install stable
```
**Note**:
### Get the Dependencies
After the nvm installation is done, please `restart` your shell session once. That's due to changes to your profile environment.
```bash
npm install
```
#### Set up *global* project requirements via npm
```bash
npm install -g @vue/cli @vue/cli-service-global @quasar/cli
```
#### Clone the repository
```bash
git clone git@gitlab.gwdg.de:subugoe/emo/viewer.git
```
### Installation
#### Get the dependencies
Head over to your project directory, where you just cloned the repository to as described above and get all the dependencies needed by simply typing:
```bash
cd /path/to/projectdir
npm install
```
That's it. You now should be able to run the Viewer.
## Usage
### Start the App in Development Mode (Hot-Code Reloading, Error Reporting, etc.)
#### Start a local instance of a dev server
```bash
quasar dev
npm run dev
```
(usually located at: `localhost:8080`)
### Lint the files
#### Lint the files
```bash
npm run lint
```
### Build the App for Production
#### Build the App for Production
```bash
quasar build
npm run build
```
### Customize the Configuration
......@@ -88,7 +119,9 @@ See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).
Locate the `index.template.html` file inside the root of your project dir and find the script section:
*Please note:* it's a json object. So if you are going to make any changes and you have to quote these, use double quotes but single ones.
**Note**:
It's a json object. So if you are going to make any changes and you have to quote these, use double quotes but single ones.
```html
<script id="emo-config" type="application/json">
......@@ -118,45 +151,51 @@ Locate the `index.template.html` file inside the root of your project dir and fi
### The keys in detail
- **entrypoint**
- to link the viewer to a backend, the entrypoint should point to the collection you want to be displayed. (Further details below: [Connecting the Viewer to a Backend](#connecting-the-viewer-to-a-backend))
to link the viewer to a backend, the entrypoint should point to the collection you want to be displayed. (Further details below: [Connecting the Viewer to a Backend](#connecting-the-viewer-to-a-backend))
- **headers**
- **all**
- set this value to `false` if you want to completely switch off all the headerbars at once. This value is preceeding. If it's set to false, the other settings for the individual bars are not taken into account.
*(A use case might be to embed the Viewer into an existing website and you simply need more space)*
set this value to `false` if you want to completely switch off all the headerbars at once. This value takes precedence. If it's set to *false*, the other settings for the individual bars are not taken into account.
*(A use case might be to embed the Viewer into an existing website and you simply need more screen space)*
- **info**
- set this value to `false` if you want to switch off the Infobar (breadcrumbs)
set this value to `false` if you want to switch off the Infobar (breadcrumbs)
- **navigation**
- set this value to `false` if you want to switch off the NavBar
set this value to `false` if you want to switch off the NavBar
- **toggle**
- set this value to `false` if you want to switch off the ToggleBar. Please *note*: if you turn this one off, you won't be able to toggle the panels anymore
All header values default to **true**
set this value to `false` if you want to switch off the ToggleBar.
**Note**: if you turn this one off, you won't be able to toggle the panels anymore.
All header values default to **true**
- **labels**
- **item**
- the label of the item respectively
- **item**: 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.
This change affects the captions of the navigational tools, e.g. the navbuttons in the header as well as the prefix of each treenode displayed and the metadata section
Assuming your collection consists of letters, you'd maybe want to name it "letter" or just "sheet" for instance.
This change affects the captions of the navbuttons located in the headerbar and the metadata section.
Defaults to **Sheet**
Defaults to **Sheet**
- **manifest**
- same as for `item` but related to the manifest title
- **manifest**: same as for `item` but related to the manifest title
Defaults to **Manuscript**
Defaults to **Manuscript**
- **panels**
- It's keys correspond to the panelnames, e.g. "treeview", "text", "image", "metadata".
Set either value to **false** if you don't want the Viewer to show the appropriate panel/s.
Defaults to **true** for every panel
It's keys correspond to the panelnames, e.g. "treeview", "text", "image", "metadata".
Set either value to **false** if you don't want the Viewer to show the appropriate panel/s.
Defaults to **true** for every panel
- **standalone**
- **standalone**
- denotes if the Viewer will be used as a single page application on it's own or if it will be embedded into an existing page. If you want to use it in the latter case, please toggle the value to "false". That way the language toggle in the footer section will not show up.
denotes if the Viewer will be used as a single page application on it's own or if it will be embedded into an existing page. If you want to use it in the latter case, please toggle the value to "false". That way the language toggle in the footer section will not show up.
Defaults to **true**
Defaults to **true**
## Dockerfile
......
......@@ -5,14 +5,17 @@
"productName": "EMo Viewer",
"cordovaId": "de.uni-goettingen.sub.emo",
"capacitorId": "",
"author": "Mathias Göbel <goebel@sub.uni-goettingen.de>",
"author": [
"Mathias Göbel <goebel@sub.uni-goettingen.de>",
"Frank Schneider <frank.schneider@sub.uni-goettingen.de>"
],
"contributors": [
"Nils Windisch"
],
"private": true,
"scripts": {
"build": "quasar build",
"dev": "quasar dev",
"dev": "quasar dev --modern",
"lint": "eslint --ext .js,.vue src"
},
"dependencies": {
......
......@@ -4,9 +4,9 @@
<Header v-if="config.headers.all"
:collectiontitle="collectiontitle"
:config="config"
:itemlabel="itemlabel"
:itemurls="itemurls"
:manifests="manifests"
:pagelabel="pagelabel"
:status="status"
/>
......@@ -17,18 +17,16 @@
:contenturl="contenturl"
:fontsize="fontsize"
:imageurl="imageurl"
:itemlabel="itemlabel"
:language="itemlanguage"
:manifests="manifests"
:pagelabel="pagelabel"
:request="request"
:status="status"
:tree="tree"
/>
</q-page-container>
<Footer
:standalone="config.standalone"
/>
<Footer :standalone="config.standalone" />
</q-layout>
</div>
</template>
......@@ -51,11 +49,11 @@ export default {
config: {},
fontsize: 14,
imageurl: '',
itemlabel: '',
itemlanguage: '',
itemurl: '',
itemurls: [],
label: '',
pagelabel: '',
manifests: [],
status: {},
tree: [],
......@@ -74,7 +72,17 @@ export default {
this.collection = data;
this.label = this.getLabel(data);
this.tree.push({ label: this.label, labelKey: this.label, children: [] });
this.tree.push(
{
children: [],
handler: (node) => {
this.$root.$emit('update-tree-knots', node.label);
},
label: this.label,
'label-key': this.label,
selectable: false,
},
);
if (Array.isArray(data.sequence)) {
data.sequence.forEach((seq) => this.getManifest(seq.id));
......@@ -92,10 +100,11 @@ export default {
this.request(url)
.then((data) => {
this.collectiontitle = data.title;
this.contenturl = data.content;
this.imageurl = data.image && data.image.id ? data.image.id : '';
this.itemlabel = data.n ? data.n : 'No itemlabel :(';
this.itemlanguage = data.language;
this.pagelabel = data.n ? data.n : 'No pagelabel :(';
});
},
getItemIndex(nodelabel) {
......@@ -115,7 +124,7 @@ export default {
urls.push(
{
label: obj.id,
labelKey: `${this.config.labels.item} ${ctr += 1}`,
'label-key': `${this.config.labels.item} ${ctr += 1}`,
handler: (node) => {
if (this.itemurl === node.label) {
return;
......@@ -149,9 +158,13 @@ export default {
this.tree[0].children.push(
{
label: data.label,
labelKey: data.label,
children: this.getItemUrls(data.sequence, data.label),
label: data.label,
'label-key': data.label,
handler: (node) => {
this.$root.$emit('update-tree-knots', node.label);
},
selectable: false,
},
);
......
<template>
<div>
<div class="row iconPosition">
<div class="row sticky">
<div class="content">
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
......@@ -16,6 +16,7 @@
title="Increase"
/>
</q-btn>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
......@@ -32,6 +33,7 @@
</q-btn>
</div>
</div>
<div class="row">
<div
class="col-md-10 offset-md-1" :style="`font-size: ${fontsize}px`"
......@@ -108,7 +110,7 @@ export default {
.content {
margin: 16px;
}
.iconPosition {
.sticky {
position: sticky;
top: 0;
background: #fff;
......
......@@ -5,7 +5,7 @@
<q-icon class="q-pb-sm" size="40px" :name="fasChevronRight" />
<span>{{ cut(manifesttitle) }}</span>
<q-icon class="q-pb-sm" size="40px" :name="fasChevronRight" />
<span>{{ pagelabel }}</span>
<span>{{ itemlabel }}</span>
</h1>
</div>
</template>
......@@ -17,8 +17,8 @@ export default {
name: 'Infobar',
props: {
collectiontitle: String,
itemlabel: String,
manifests: Array,
pagelabel: String,
},
data() {
return {
......@@ -45,6 +45,3 @@ export default {
},
};
</script>
<style>
</style>
<template>
<div class="language col-xs-auto">
<q-btn
flat
color="grey"
label=""
flat
title="Change language"
>
<q-icon
......@@ -11,61 +10,23 @@
size="md"
:name="fasLanguage"
/>
<q-menu
fit
anchor="center middle"
self="center middle">
fit
self="center middle"
>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup>
<q-item-section>EN</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section>DE</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<!--
<q-btn color="primary" label="Anchor/Self Menu">
<q-menu
anchor="center middle"
self="center middle"
>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup>
<q-item-section>anchor="center middle"</q-item-section>
</q-item>
<q-item clickable v-close-popup>
<q-item-section>self="center middle"</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
-->
<!--
<q-btn-dropdown
dense
flat
color="red"
label="Language Switch" dropdown-icon="fasChevronRight">
<q-list>
<q-item clickable v-close-popup @click="onItemClick">
<q-item-section>
<q-item-label>Deutsch</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="onItemClick">
<q-item-section>
<q-item-label>English</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
-->
</div>
</template>
......@@ -74,11 +35,6 @@ import { fasLanguage } from '@quasar/extras/fontawesome-v5';
export default {
name: 'Language',
methods: {
onItemClick() {
// console.log('Clicked on an Item')
},
},
created() {
this.fasLanguage = fasLanguage;
},
......
......@@ -4,6 +4,7 @@
<q-item>
<q-item-section class="text-h6 caps">Collection</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label overline class="text-uppercase">Title:</q-item-label>
......@@ -12,6 +13,7 @@
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label overline class="text-uppercase">Collector:</q-item-label>
......@@ -20,6 +22,7 @@
</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label overline class="text-uppercase">Description:</q-item-label>
......@@ -38,6 +41,7 @@
{{ config.labels.manifest }} {{ sequenceindex + 1 }} / {{ manifests.length }}
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label overline class="text-uppercase">Label:</q-item-label>
......@@ -54,12 +58,14 @@
{{ config.labels.item }} {{ itemindex + 1 }} / {{ itemcount }}
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label overline class="text-uppercase">Label:</q-item-label>
<q-item-label>{{ pagelabel }}</q-item-label>
<q-item-label>{{ itemlabel }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-item-label overline class="text-uppercase">Language:</q-item-label>
......@@ -76,9 +82,9 @@ export default {
props: {
collection: Object,
config: Object,
itemlabel: String,
language: String,
manifests: Array,
pagelabel: String,
},
data() {
return {
......@@ -111,7 +117,7 @@ export default {
</script>
<style scoped>
.caps {
font-variant: small-caps;
}
.caps {
font-variant: small-caps;
}
</style>