Skip to content

GitLab

Commit 181590b4 authored by schneider210's avatar schneider210
Browse files

Merge branch 'feature/#36-configurability-metadata-content' into 'develop' 

Feature/#36 configurability metadata content

See merge request subugoe/emo/Qviewer!85
parents 3543b437 bc347914
Pipeline #155122 passed with stages
in 3 minutes and 46 seconds
Hide whitespace changes
Inline Side-by-side
README.md
View file @ 181590b4
......@@ -17,8 +17,8 @@ Also the commit short hash can be used to see a demo.
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
- [Viewer components](#viewer-components)
- [Latest version and integration](#latest-version-and-integration)
- [Viewer Components](#viewer-components)
- [Latest Version and Integration](#latest-version-and-integration)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
......@@ -26,16 +26,16 @@ Also the commit short hash can be used to see a demo.
- [Set up `global` project requirements via `npm`](#set-up-global-project-requirements-via-npm)
- [Clone the repository](#clone-the-repository)
- [Get the dependencies](#get-the-dependencies)
- [Usage](#usage)
- [Start the Viewer in `development mode` (hot reloading, error reporting, etc.)](#start-the-viewer-in-development-mode-hot-reloading-error-reporting-etc)
- [Usage](#usage)
- [`development mode` (hot reloading, error reporting, etc.)](#development-mode-hot-reloading-error-reporting-etc)
- [`Linting`](#linting)
- [`Testing`](#testing)
- [`Build` the app for production](#build-the-app-for-production)
- [Customize the Configuration](#customize-the-configuration)
- [Configure the Viewer](#configure-the-viewer)
- [The keys in detail](#the-keys-in-detail)
- [Configure the panels](#configure-the-panels)
- [The keys in detail:](#the-keys-in-detail)
- [`Building` the app for production](#building-the-app-for-production)
- [Configuration](#configuration)
- [a) Configure the Viewer](#a-configure-the-viewer)
- [The Keys in Detail](#the-keys-in-detail)
- [b) Configure the Panels](#b-configure-the-panels)
- [The Panel Keys in Detail](#the-panel-keys-in-detail)
- [Dockerfile](#dockerfile)
- [Connecting the Viewer to a Backend](#connecting-the-viewer-to-a-backend)
- [Architecture](#architecture)
......@@ -45,13 +45,13 @@ Also the commit short hash can be used to see a demo.
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## Viewer components
## Viewer Components
![Viewer components](img/Viewer.png)
## Latest version and integration
## Latest Version and Integration
To embed the viewer for production get [the latest compiled and minified version is available](https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/jobs/artifacts/develop/download?job=build_main_and_develop)
To embed the viewer for production [get the latest compiled and minified version](https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/jobs/artifacts/develop/download?job=build_main_and_develop)
It is a zip archive. You can extract the build by typing:
```bash
......@@ -164,9 +164,9 @@ npm install
That's it. You should now be able to run the Viewer.
## Usage
### Usage
### Start the Viewer in `development mode` (hot reloading, error reporting, etc.)
#### `development mode` (hot reloading, error reporting, etc.)
```bash
npm run dev
......@@ -177,8 +177,9 @@ npm run dev
#### `Linting`
```bash
npm run lint # to lint js- and vue-files
npm run lint:scss # to lint the styles
npm run lint # to lint js- and vue-files
npm run lint:scss # to lint the styles
npm run lint:markdown # to lint the markdown
```
#### `Testing`
......@@ -190,7 +191,7 @@ npm run test:unit
The Viewer makes use of **jest** in collaboration with the *expect-library*.
Tests reside under **tests/unit/specs/** and are supposed to have a file ending of either `*.test.js` or `*.spec.js`.
#### `Build` the app for production
#### `Building` the app for production
```bash
npm run build
......@@ -198,27 +199,28 @@ npm run build
**Note**: The complete build is located at `/dist/spa/`.
## Customize the Configuration
## Configuration
See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).
The Viewer is build with *Vue.js* and *Quasar*.
If you want to change the Quasar configuration, please [refer to their respective docs](https://quasar.dev/quasar-cli/quasar-conf) (Configuring quasar.conf.js).
## Configure the Viewer
There are two files in regards to configuration. Both deal with the Viewer's startup behaviour.
There are two files in regards to configuration:
- a) configure the Viewer (**src/index.template.html**)
- change the color scheme
- show or hide individual bars (info, navigation, toggles)
- rename labels
- tell the Viewer how it will be used (standalone / embedded)
- change the color scheme
- usage (standalone / embedded)
- b) configure the panels (**src/config/panels.js**)
- set the order of the panels
- group the components inside a panel (e.g. turn them into tabs)
- rename the panel headings
- switch the panel/s off completely
- switch the panel/s off
a) Locate the `script` section in the `index.template.html` file:
### a) Configure the Viewer
Locate the `script` section in the `index.template.html` file:
As a rule of thumb, every key with a boolean value (e.g. *true* or *false*) defaults to `true` and denotes to show the appropriate component.
......@@ -226,6 +228,11 @@ As a rule of thumb, every key with a boolean value (e.g. *true* or *false*) defa
<script id="emo-config" type="application/json">
{
"entrypoint": "https://{server}{/prefix}/{collection}/collection.json",
"colors": {
"primary": "",
"secondary": "grey",
"accent": "darkred"
},
"headers": {
"all": true,
"info": true,
......@@ -236,21 +243,37 @@ As a rule of thumb, every key with a boolean value (e.g. *true* or *false*) defa
"item": "Sheet",
"manifest": "Manuscript"
},
"standalone": true,
"colors": {
"primary": false,
"secondary": false,
"accent": false
}
"meta": {
"collection": {
"all": true,
"collector": true,
"description": true,
"title": true
},
"manifest": {
"all": true,
"creation": true,
"editor": true,
"label": true,
"location": true,
"origin": true
},
"item": {
"all": true,
"label": true,
"language": true
}
},
"standalone": true
}
</script>
```
**Note**:
It's a *JSON* object. So if you are going to make any changes and you have to quote these (see *labels*), please use *double quotes* only.
It's a *JSON* object. So if you are going to make any changes and you have to quote these (see *labels* or colors), please use *double quotes* only.
### The Keys in Detail
#### The Keys in Detail
- **entrypoint**
......@@ -258,9 +281,19 @@ It's a *JSON* object. So if you are going to make any changes and you have to qu
(Further details below: [Connecting the Viewer to a Backend](#connecting-the-viewer-to-a-backend))
**Note**:
You have to provide at least a valid entrypoint (see below). Otherwise the Viewer won't show anything at all!
- **colors**
Set the colors used in the frontend.
`primary` and `accent` should be a darker tone, so that white text is visible if used as background. It's the other way around with `secondary`.
Hex values (like `#a1a1a1`) or color names (like `hotpink`) are fine.
If any value is left blank (e.g. `"primary": "",`), a default color scheme will be used.
- **headers**
- **all**
......@@ -303,25 +336,32 @@ It's a *JSON* object. So if you are going to make any changes and you have to qu
Same as for `item` but related to the manifest title.
Defaults to `Manuscript`.
- **standalone**
- **meta**
denotes if the Viewer will be used as a single page application 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.
set either of the values to `false` to switch it off. if you set an `all`-key to `false` the other fields within the same object aren't taken into account.
Defaults to `true`.
e.g. neither of *collector*, *description* and *title* will be displayed:
- **colors**
Set the colors used in the frontend.
```json
"meta": {
"collection": {
"all": false,
"collector": true,
"description": true,
"title": true
}
}
```
`primary` and `accent` should be a darker tone, so that white text is visible if used as background. It's the other way around with `secondary`.
- **standalone**
Hex values (like `#a1a1a1`) or color names (like `hotpink`) are fine.
denotes if the Viewer will be used as a single page application 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.
If any value is left blank (e.g. `"primary": "",`), a default color scheme will be used.
Defaults to `true`.
## Configure the panels
### b) Configure the Panels
b) In order to configure the panels, locate the `panels.js` file inside the `src/config` folder of your project dir and find the *panels* constant at the top of the file:
In order to configure the panels, locate the `panels.js` file inside the `src/config` folder of your project dir and find the *panels* constant at the top of the file:
```js
const panels = [
......@@ -355,7 +395,7 @@ b) In order to configure the panels, locate the `panels.js` file inside the `src
It consists of four objects according to the maximum number of panels, that can be shown at once.
Each object inside that constant consists of similar keys: `id`, `connector`, `pane_label` and `show`.
### The Panel Keys in Detail
#### The Panel Keys in Detail
- **id**
......@@ -372,7 +412,7 @@ Each object inside that constant consists of similar keys: `id`, `connector`, `p
- 5 = Annotations
**Note**:
These IDs are supposed to be *unique*, so please make sure not to repeat these!
- **panel_label**
......
src/components/color.vue
View file @ 181590b4
......@@ -43,11 +43,11 @@
</template>
<script>
import { fasPalette } from '@quasar/extras/fontawesome-v5';
import { colors } from 'quasar';
import { fasPalette } from '@quasar/extras/fontawesome-v5';
export default {
name: 'color',
name: 'Color',
created() {
this.fasPalette = fasPalette;
},
......
src/components/metadata.vue
View file @ 181590b4
<template>
<div class="scroll-panel">
<!-- Collection-->
<q-list v-if="Object.keys(collection).length">
<q-list v-if="Object.keys(collection).length && config.meta.collection.all">
<q-item>
<q-item-section class="text-h6 caps">Collection</q-item-section>
</q-item>
<q-item>
<q-item v-if="config.meta.collection.title">
<q-item-section>
<q-item-label overline class="text-uppercase">Title:</q-item-label>
<q-item-label>
......@@ -15,7 +15,7 @@
</q-item-section>
</q-item>
<q-item>
<q-item v-if="config.meta.collection.collector">
<q-item-section>
<q-item-label overline class="text-uppercase">Collector:</q-item-label>
<q-item-label>
......@@ -24,7 +24,7 @@
</q-item-section>
</q-item>
<q-item>
<q-item v-if="config.meta.collection.description">
<q-item-section>
<q-item-label overline class="text-uppercase">Description:</q-item-label>
<q-item-label>
......@@ -33,46 +33,46 @@
</q-item-section>
</q-item>
<q-separator inset class="q-mt-md q-mb-sm" />
<q-separator v-if="showSeparator(config.meta.collection.all)" inset class="q-mt-md q-mb-sm" />
</q-list>
<!-- Manifest-->
<q-list>
<q-list v-if="config.meta.manifest.all">
<q-item>
<q-item-section class="text-h6 caps">
{{ labels.manifest }} {{ sequenceindex + 1 }} / {{ manifests.length }}
</q-item-section>
</q-item>
<q-item>
<q-item v-if="config.meta.manifest.label">
<q-item-section>
<q-item-label overline class="text-uppercase">Label:</q-item-label>
<q-item-label>{{ title }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item v-if="config.meta.manifest.creation">
<q-item-section>
<q-item-label overline class="text-uppercase">Year of creation:</q-item-label>
<q-item-label>{{ date }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item v-if="config.meta.manifest.editor">
<q-item-section>
<q-item-label overline class="text-uppercase">Editor:</q-item-label>
<q-item-label>{{ editor }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item v-if="config.meta.manifest.location">
<q-item-section>
<q-item-label overline class="text-uppercase">Current location:</q-item-label>
<q-item-label>{{ location }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item v-if="config.meta.manifest.origin">
<q-item-section>
<q-item-label overline class="text-uppercase">Origin:</q-item-label>
<q-item-label>{{ origin }}</q-item-label>
......@@ -80,24 +80,24 @@
</q-item>
</q-list>
<q-separator inset class="q-mt-md q-mb-sm" />
<q-separator v-if="showSeparator(config.meta.manifest.all)" inset class="q-mt-md q-mb-sm" />
<!-- Item-->
<q-list>
<q-list v-if="config.meta.item.all">
<q-item>
<q-item-section class="text-h6 caps">
{{ labels.item }} {{ itemindex + 1 }} / {{ itemcount }}
</q-item-section>
</q-item>
<q-item>
<q-item v-if="config.meta.item.label">
<q-item-section>
<q-item-label overline class="text-uppercase">Label:</q-item-label>
<q-item-label>{{ itemlabel }}</q-item-label>
</q-item-section>
</q-item>
<q-item>
<q-item v-if="config.meta.item.language">
<q-item-section>
<q-item-label overline class="text-uppercase">Language:</q-item-label>
<q-item-label>{{ language }}</q-item-label>
......@@ -111,6 +111,7 @@
export default {
name: 'Metadata',
props: {
config: Object,
collection: Object,
itemlabel: String,
labels: Object,
......@@ -123,6 +124,11 @@ export default {
sequenceindex: 0,
};
},
methods: {
showSeparator(showme) {
return showme === true;
},
},
computed: {
date() {
return this.manifests[this.sequenceindex]['x-date'];
......
src/components/softwareinfo.vue
View file @ 181590b4
......@@ -13,8 +13,7 @@
<q-dialog v-model="infobox">
<q-card>
<q-card-section>
<!-- FIXME: this is an actual headding, but marked as DIV -->
<div class="text-h5 q-pb-md">EMo Viewer</div>
<h1 class="text-h5 q-pb-md">EMo Viewer</h1>
<p class="text-weight-bold">
Slim, easy to use and mobile-friendly text and image viewer
......
src/components/togglebar/toggleFilter.vue
View file @ 181590b4
<template>
<!-- FIXME: semantically this is not a section -->
<section class="filter-buttons">
<div class="filter-buttons">
<q-btn-dropdown
v-if="$q.screen.width < 1100"
:dropdown-icon="dropicon"
......@@ -19,7 +18,7 @@
>
<slot />
</div>
</section>
</div>
</template>
<script>
......
src/css/global.scss
View file @ 181590b4
......@@ -33,6 +33,7 @@ body {
.content-panel .q-tab-panel {
padding: 8px;
> * {
padding: 0 !important;
}
......
src/index.template.html
View file @ 181590b4
......@@ -24,6 +24,11 @@
<script id="emo-config" type="application/json">
{
"entrypoint": "https://ahikar-test.sub.uni-goettingen.de/api/textapi/ahikar/3r9ps/collection.json",
"colors": {
"primary": "",
"secondary": "",
"accent": ""
},
"headers": {
"all": true,
"info": true,
......@@ -34,12 +39,28 @@
"item": "Sheet",
"manifest": "Manuscript"
},
"standalone": true,
"colors": {
"primary": "black",
"secondary": "papayawhip",
"accent": "darkred"
}
"meta": {
"collection": {
"all": true,
"collector": true,
"description": true,
"title": true
},
"manifest": {
"all": true,
"creation": true,
"editor": true,
"label": true,
"location": true,
"origin": true
},
"item": {
"all": true,
"label": true,
"language": true
}
},
"standalone": true
}
</script>
......
src/views/mainview.vue
View file @ 181590b4
......@@ -59,6 +59,7 @@ export default {
},
props: {
collection: Object,
config: Object,
contenturl: String,
fontsize: Number,
imageurl: String,
......
Markdown is supported
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