Commits (70)
......@@ -5,12 +5,12 @@ cache:
stages:
- build
- deploy
- preserve-pages
build:
image: node:latest
image: docker.gitlab.gwdg.de/subugoe/emo/qviewer/node:latest
stage: build
script:
- npm install --global @quasar/cli
- npm install
- quasar build
artifacts:
......@@ -18,18 +18,44 @@ build:
- dist/
pages:
image: node:latest
before_script:
- dnf install -y jq
- dnf install -y zip
- dnf install -y unzip
image: docker.gitlab.gwdg.de/mgoebel/swiss_knife/fedora:latest
# at the very early stage lets deploy for every branch
# only:
# - master
# - develop
stage: deploy
cache:
untracked: true
paths:
- public
when: always
script:
- cp --remove-destination --recursive dist/* public
- bash update-artifacts.sh
- bash gitlab-remove-old-artifacts.sh
environment:
name: ${CI_COMMIT_REF_SLUG}
url: https://subugoe.pages.gwdg.de/emo/Qviewer/${CI_COMMIT_REF_SLUG}/
artifacts:
name: "$CI_COMMIT_SHORT_SHA"
paths:
- public
pushback:
before_script:
- dnf install -y zip
image: docker.gitlab.gwdg.de/mgoebel/swiss_knife/fedora:latest
stage: preserve-pages
script:
- zip -r updated-artifact.zip public
artifacts:
name: "updated-artifact"
paths:
- updated-artifact.zip
.production:
image: node:latest
only:
......
# Description
Just leave a short summary what the bug is about and where you came to notice it.
# Bugs
## Description
Just leave a short summary what the bug is about and in which context you noticed it.
Feel free to delete sections that doesn't suit the case you're dealing with.
### I expected the following to happen
## I expected the following to happen:
## On the contrary, I observed:
### On the contrary, I observed
# How to reproduce the bug
## How to reproduce the bug
Please describe briefly how you discovered the bug and what a developer has to do to reproduce it.
_Steps:_
* Step 1
* Step 2
* ...
# Severity
* Step 1
* Step 2
* ...
## Severity
How much impact does this bug have on the product or further development?
* [ ] Minor
* [ ] Major
* [ ] Critical
* [ ] Blocker
# Platform
* [ ] Unix
* [ ] Windows
* [ ] MacOS
# Browser
* [ ] Safari
* [ ] Chrome/Chromium
* [ ] Firefox
* [ ] Other: ?
# Program and – if applicable – dependency version
* [ ] Minor
* [ ] Major
* [ ] Critical
* [ ] Blocker
## Platform
* [ ] Unix
* [ ] Windows
* [ ] MacOS
## Browser
* [ ] Safari
* [ ] Chrome/Chromium
* [ ] Firefox
* [ ] Other: ?
## Program and – if applicable – dependency version
Which version of the software did you use?
# Related Tickets
Add related issues if applicable.
## Related Tickets
Add related issues.
/cc @mgoebel, @schneider210
/cc [Mathias Göbel](https://gitlab.gwdg.de/mgoebel), [Frank Schneider](https://gitlab.gwdg.de/schneider210), [Michelle Weidling](https://gitlab.gwdg.de/mrodzis)
# Description
# Feature Requests
## Description
Just leave a short summary what the feature is about.
# Use Cases
If you can, please provide use cases for this feature.
## User Stories
As (role of the user) I need (what has to be done) in order to (what I want to achieve with this feature).
## Classification
# Classification
Is this feature an enhancement of existing code or a completely new feature?
* [ ] enhancement
* [ ] new feature
* [ ] enhancement
* [ ] new feature
## Related Tickets
# Related Tickets
Add all related issues if applicable.
Add all related issues.
/cc @mgoebel, @schneider210
/cc [Mathias Göbel](https://gitlab.gwdg.de/mgoebel), [Frank Schneider](https://gitlab.gwdg.de/schneider210), [Michelle Weidling](https://gitlab.gwdg.de/mrodzis)
Well, it seems that it is impossible to write software without bugs. That's why
we are really happy that you are here. Thank you very much! Please take a moment
to help us include the purposed bugfix by filling out the following form.
# Bug fix
# Related Tickets
Add all related issues and especially those to be closed. Keep in mind that every
bugfix branch needs an issue that properly describes the bug beforehand. If your
fix addresses something untracked, please open a ticket at first.
Well, it seems that it is impossible to write software without bugs.
That's why we are really happy that you are here.
Thank you very much!
Please take a moment to help us include the purposed bug fix by filling out the following form.
## Related
## Closes
Feel free to delete sections that doesn't suit the case you're dealing with.
## Summary
# Summary
Apart from what is mentioned in the main ticket you are going to close with this
MR, tell us what you have done to achieve this goal.
# Changelog
## Related Tickets
Add all related issues and especially those to be closed.
Keep in mind that every `bugfix` branch needs an issue that properly describes the bug beforehand.
If your fix addresses something untracked, please open a ticket first.
## Does the result of the MR comply to our "definition of done"?
* [ ] Unit tests passed
* [ ] Code reviewed
* [ ] Acceptance criteria met
* [ ] Functional tests passed
* [ ] Non-Functional requirements met
* [ ] Product Owner accepts the User Story
### Related
### Closes
## Changelog
* [ ] I added a statement to the CHANGELOG.
/cc @schneider210 @mgoebel
/cc [Mathias Göbel](https://gitlab.gwdg.de/mgoebel), [Frank Schneider](https://gitlab.gwdg.de/schneider210), [Michelle Weidling](https://gitlab.gwdg.de/mrodzis)
# Feature
We welcome every new feature to the upstream branch!
But at first we ask you to fill in the following information about your feature.
So please take a few minutes to make this great thing even better.
Please fill in the following information about your feature.
Feel free to delete sections that doesn't suit the case you're dealing with.
## Summary
# Summary
This MR provides…
# Use Cases
## Does the result of the MR comply to our "definition of done"?
* [ ] Unit tests passed
* [ ] Code reviewed
* [ ] Acceptance criteria met
* [ ] Functional tests passed
* [ ] Non-Functional requirements met
* [ ] Product Owner accepts the User Story
## Use Cases
If you can, please provide use cases for this feature.
# Documentation
## Documentation
Shall we add your feature to the documentation?
* [ ] I've already did it!
* [ ] At least I added a headline to the documentation.
## Function Documentation
* [ ] Of course I prepared all my functions with an appropriate documentation.
### Function Documentation
* [ ] Of course I provided all my functions with an appropriate documentation.
### Are there parts of the documentation we have to adjust
## Are there parts of the documentation we have to adjust?
* [ ] No.
* [ ] Yes, but I'd like someone else to do it.
* [ ] Yes, and I already did!
# Tests
## Tests
Are we able to test this new feature?
* [ ] Yes, everything can be done via unit tests.
* [ ] Yes, you can test by following these steps: …
* [ ] No, it is not possible.
# Changelog
## Changelog
* [ ] I added a statement to the CHANGELOG.
# Related Tickets
## Related Tickets
Add all related issues and especially those to be closed.
## Related
## Closes
### Related
### Closes
# Logs and Screenshots
## Logs and Screenshots
/cc @schneider210 @mgoebel
/cc [Mathias Göbel](https://gitlab.gwdg.de/mgoebel), [Frank Schneider](https://gitlab.gwdg.de/schneider210), [Michelle Weidling](https://gitlab.gwdg.de/mrodzis)
# Changelog
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
### 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
### Fixed
- Reverted the changes and fixed the icons to nest inside image.
## [0.0.13] - 2020-06-25
### Added
- 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
### Added
- Added behaviour to Optimize scroll panels.
- Fixed panel icons to top of the panel.
### Fixed
- item is now highlighted when the user clicks a nav navbuttons
- 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
### Added
- config option (index.html): switch off the headerbars individually (e.g. Infobar, NavBar, ToggleBar)
### Changed
- default itemlabel from `Page` to `Sheet`
- config options: labels for item and manifest are gathered under `labels`
- header can also be switched off completely by setting the appropriate value to *false*
### Fixed
- items are highlighted consecutively when browsing by navbuttons
## [0.0.10] - 2020-06-17
### Added
- config option (index.html): switch off the header including all of it's components
## [0.0.9] - 2020-06-16
### Added
- config option (index.html): tell the viewer with which panels to start
## [0.0.8] - 2020-06-16
### Added
- an architecture diagram giving an overview of how the EMo Viewer works and interacts with a backend.
## [0.0.7] - 2020-06-12
### Added
- information in the README on how to configure the Viewer
## [0.0.6] - 2020-06-09
### Added
- information in the README on how to establish a link between the Viewer and a backend.
- missing general README section about contributing and versioning.
## [0.0.6] - 2020-05-29
### Changes
- add user stories and 'definition of done' criteria to issue templates (where applicable).
this should improve the development workflow for all stakeholders.
## [0.0.5] - 2020-05-20
### Added
- add a contribution guideline
- added titles in the footer for Language- and Info-icon
### Changed
- make README more comprehensible for outsiders
### Fixed
- icons side by side via css float
## [0.0.4] - 2020-05-19
### 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.
- Software info includes links to documentation, source code and bug reporting
## [0.0.3] - 2020-05-18
### Added
- extended config object in index.html by a key named "standalone" (Possible values: true || false).
This indicates if the viewer will be used embedded or standalone respectively.
If used in the latter case, the language toggle shows up in the footer and vice versa.
## [0.0.2] - 2020-05-15
### Added
- openseadragon.vue: Event listener for fullscreen change
### Changed
- toggle fs icon on fullscreen change
## [0.0.1] - 2020-05-14
### Added
- This CHANGELOG file
### Added
- Pages deployment on per commit and per branch base
# How To Contribute
The following is a set of guidelines for contributing to the EMo Viewer.
Feel free to propose changes whenever the workflow could be improved!
## Issue Tracker
Issues are created and assigned by the project's Product Owner during a sprint planning in the [issue tracker](https://gitlab.gwdg.de/subugoe/emo/QViewer/-/issues).
As soon as you start working on a assigned issue, switch its label to `Doing`.
This will cause the issue to be moved into the right list of the repository's [board](https://gitlab.gwdg.de/subugoe/emo/QViewer/-/boards).
## Internal Workflow
### Reporting Bugs or Change Requests
Bugs and change requests are managed by the project's Product Owner.
Please report any problems that aren't related to the bugfix/feature you're working on right now to her/him.
Bug reports can also be handed it via [mail](mailto:gitlab+subugoe-emo-qviewer-10921-issue-@gwdg.de).
She/he will create an issue in the correct repository and ask for assignees in the course of the next sprint planning.
### Git Flow
For developing in EMo we use `git flow` as a branching and development model.
This means that all development will be reviewed before they will be merged to the `develop` branch.
Please confer [Atlassian's git flow tutorial](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) for more information on how git flow works.
Every branch should be to dedicated to an issue, i.e. there shouldn't be any branches without a corresponding ticket.
Each branch should start with the dedicated issue number and a short description on what the ticket is about, e.g. `feature/#1-contributing`.
All issues will be arranged in [milestones](https://gitlab.gwdg.de/groups/subugoe/ahiqar/-/milestones).
Milestones are always group-wide, so we combine tickets from all repositories associated with Ahiqar to a single milestone.
The milestone number is increased with each sprint in accordance to [Semantic Versioning](https://semver.org/).
### Merge Requests (MR)
Merge requests should be peer reviewed before merging them into `develop`.
A well-tried workflow is:
1. A developer decides to work on a feature.
She uses the current development branch as a base for her work.
She commits her changes to a separate feature branch.
After some time she finishes the feature and wants it to be part of the development branch.
2. Before creating her merge request, the developer rebases her branch on the basis of `develop`.
This minimizes the change of merge conflicts.
You can either use `rebase` or `merge` for this.
3. The developer creates a merge request and assigns everybody she sees fit to properly review her code to it.
She uses one of the proposed merge templates in order to not forget anything and ease her reviewers' work.
4. To avoid diffusion of responsibility, she also assigns one of the chosen assignees as MUST.
This means that this person has to approve the MR, otherwise the merge cannot be done.
Although GitLab sends notifications to everybody who is newly assigned to a MR, she should notify the MUST assignee personally (in case he or she doesn't notice the mail sent by GitLab).
The MR settings are:
* The MR is associated with the current sprint's [milestone](https://gitlab.gwdg.de/groups/subugoe/ahiqar/-/milestones).
* The boxes for "Squash Commit" and "Deleting branch after Merge" are ticked
5. The MUST assignee reviews the changes according to style, variable naming, understandability, documentation provided, functionality, etc.
If everything is to his or her liking, he or she approves the MR.
The other assignees are free to review the code as well.
**Note:** MRs without docs should not be accepted.
6. After the MR has been (dis)approved, the assignee removes his- or herself from the list of assignees.
The MUST assignee informs the developer over the review being done.
7. The developer merges her changes into the development branch.
If a merge conflict occurs the person who has proposed the MR is responsible for solving all conflicts.
FROM node:latest
RUN npm install --global @quasar/cli
\ No newline at end of file
# Emo Viewer (viewer)
# EMo Viewer
Viewer for the modular framework to present digital editions
Viewer for the modular framework to present digital editions.
Demo: https://subugoe.pages.gwdg.de/emo/Qviewer/
**Note:**
Although the EMo Viewer is designed as a generic viewer for digital editions, it is currently developed within the scope of the [Ahiqar project](https://gitlab.gwdg.de/subugoe/ahiqar).
This is the reason for "Ahiqar" being mentioned several times in the docs of this repo.
## Install the dependencies
Demo: <https://subugoe.pages.gwdg.de/emo/Qviewer/develop>
(For newer branches the demo is deployed in a directory named with branch name lowercased, shortened to 63 bytes, and with everything except `0-9` and `a-z` replaced with `-` (CI_COMMIT_REF_SLUG).
Also the commit short hash can be used to see a demo.
**Overview:**
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installing](#installing)
- [Get the Dependencies](#get-the-dependencies)
- [Start the App in Development Mode (Hot-Code Reloading, Error Reporting, etc.)](#start-the-app-in-development-mode-hot-code-reloading-error-reporting-etc)
- [Lint the files](#lint-the-files)
- [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)
- [Dockerfile](#dockerfile)
- [Connecting the Viewer to a Backend](#connecting-the-viewer-to-a-backend)
- [Contributing](#contributing)
- [Versioning](#versioning)
- [Authors](#authors)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## Getting Started
### Prerequisites
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)
For using the development mode you also need
- quasar-cli (globally installed)
To get all dependencies via `npm`, simply run
```bash
npm install -g @vue/cli @vue/cli-service-global @quasar/cli
```
### Installing
### Get the Dependencies
```bash
npm install
```
### Start the app in development mode (hot-code reloading, error reporting, etc.)
### Start the App in Development Mode (Hot-Code Reloading, Error Reporting, etc.)
```bash
quasar dev
......@@ -22,12 +74,123 @@ quasar dev
npm run lint
```
### Build the app for production
### Build the App for Production
```bash
quasar build
```
### Customize the configuration
### Customize the Configuration
See [Configuring quasar.conf.js](https://quasar.dev/quasar-cli/quasar-conf-js).
## Configure the Viewer
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.
```html
<script id="emo-config" type="application/json">
{
"entrypoint": "https://{server}{/prefix}/{collection}/collection.json",
"headers": {
"all": true,
"info": false,
"navigation": true,
"toggle": true
},
"labels": {
"item": "Sheet",
"manifest": "Manuscript"
},
"panels": {
"image": true,
"text": false,
"metadata": true,
"treeview": true
},
"standalone": true
}
</script>
```
### 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))
- **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)*
- **info**
- 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
- **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**
- **labels**
- **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
Defaults to **Sheet**
- **manifest**
- same as for `item` but related to the manifest title
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
- **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.
Defaults to **true**
## Dockerfile
The dockerfile is used at GitLab CI.
It needs to be updated, when either node or quasar-cli should be updated.
```bash
docker build --pull -t docker.gitlab.gwdg.de/subugoe/emo/qviewer/node .
docker push docker.gitlab.gwdg.de/subugoe/emo/qviewer/node
```
## Connecting the Viewer to a Backend
The viewer expects JSON that complies to the [SUB's generic TextAPI](https://subugoe.pages.gwdg.de/emo/text-api/) in order to function properly.
To establish a link to the backend, the viewer's entrypoint in `src/index.template.html` has to be modified:
```html
"entrypoint": "https://{server}{/prefix}/{collection}/collection.json"
```
The entrypoint should point to the collection you want to be displayed.
## Architecture
![Architecture diagram of the EMo viewer](img/emo_architecture.png)
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
## Versioning
We use [SemVer](https://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/tags).
## Authors
See the list of [contributors](https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/graphs/develop) who participated in this project.
#!/bin/bash
#
# Some lines have been commented since they don't work properly at the moment.
# We left them in there as a basis in case we want to improve the performance
# of the build process at a later stage.
#
#active_branches=$(cat $1 | jq '.[].name')
## prepare branch names for BASH regex matching
#active_branches=${active_branches//[\/#]/\-}
#active_branches=${active_branches//\"/}
#active_branches=$(for branch in $active_branches; do echo $branch | tr '[:upper:]' '[:lower:]'; done)
# get current date in seconds–standard procedure for comparing two dates
current_date=$(date "+%Y%m%d")
current_date_in_s=$(date -d $current_date "+%s")
cd public
for entry in *
do
last_modified=$(date -r $entry "+%Y%m%d")
last_modified_in_s=$(date -d $last_modified +%s)
# difference in days
diff=$((($current_date_in_s - $last_modified_in_s) / (24*3600)))
# remove entries that are older than 2 weeks ...
if [[ $diff -gt 14 ]]; then
rm -r $entry
## ... keep the single commit entries ...
#elif [[ ${#entry} == 8 && ${entry} =~ [a-z0-9] ]]; then
# :
## ... but throw away entries of branches that have already been deleted
#elif [[ ! ${active_branches[@]} =~ ${entry} ]]; then
# rm -r $entry
fi
done
This diff is collapsed.
......@@ -6,6 +6,9 @@
"cordovaId": "de.uni-goettingen.sub.emo",
"capacitorId": "",
"author": "Mathias Göbel <goebel@sub.uni-goettingen.de>",
"contributors": [
"Nils Windisch"
],
"private": true,
"scripts": {
"build": "quasar build",
......@@ -15,19 +18,19 @@
"dependencies": {
"@quasar/extras": "^1.7.0",
"openseadragon": "^2.4.2",
"quasar": "^1.9.16"
"quasar": "^1.12.4"
},
"devDependencies": {
"@quasar/app": "^1.7.4",
"@quasar/app": "^1.9.6",
"autoprefixer": "^9.7.6",
"babel-eslint": "^10.0.1",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-airbnb-base": "^14.2.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-vue": "^6.1.2",
"node-sass": "^4.14.0",
"sass": "^1.26.5",
"node-sass": "^4.14.1",
"sass": "^1.26.8",
"sass-loader": "^8.0.2"
},
"engines": {
......
......@@ -13,7 +13,8 @@ module.exports = function (ctx) {
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: [
// 'app.scss'
'../statics/support.css'
'../statics/support.css',
'/quasar.treeview.scss'
],
// https://github.com/quasarframework/quasar/tree/dev/extras
......@@ -27,7 +28,7 @@ module.exports = function (ctx) {
// 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
// 'roboto-font', // optional, you are not bound to it
// 'material-icons' // optional, you are not bound to it
'material-icons'
],
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
......
<template>
<div id="q-app">
<q-layout view="hHh lpr fff">
<Header
<q-layout view="hHh lpr fFf">
<Header v-if="config.headers.all"
:collectiontitle="collectiontitle"
:config="config"
:itemurls="itemurls"
......@@ -15,25 +15,33 @@
:collection="collection"
:config="config"
:contenturl="contenturl"
:fontsize="fontsize"
:imageurl="imageurl"
:language="itemlanguage"
:manifests="manifests"
:pagelabel="pagelabel"
:request="request"
:status="status"
:tree="tree"
/>
</q-page-container>
<Footer
:standalone="config.standalone"
/>
</q-layout>
</div>
</template>
<script>
import Header from '@/components/quasar-header.vue';
import Footer from '@/components/quasar-footer.vue';
export default {
name: 'Viewer',
components: {
Header,
Footer,
},
data() {
return {
......@@ -41,6 +49,7 @@ export default {
collectiontitle: '',
contenturl: '',
config: {},
fontsize: 14,
imageurl: '',
itemlanguage: '',
itemurl: '',
......@@ -48,9 +57,7 @@ export default {
label: '',
pagelabel: '',
manifests: [],
status: {
image: true, text: true, metadata: true, treeview: true,
},
status: {},
tree: [],
};
},
......@@ -76,6 +83,10 @@ export default {
},
getConfig() {
this.config = JSON.parse(document.getElementById('emo-config').text);
if (Object.keys(this.config.panels).length) {
this.status = this.config.panels;
}
},
getItemData(url) {
this.request(url)
......@@ -104,7 +115,7 @@ export default {
urls.push(
{
label: obj.id,
labelKey: `${this.config.itemlabel} ${ctr += 1}`,
labelKey: `${this.config.labels.item} ${ctr += 1}`,
handler: (node) => {
if (this.itemurl === node.label) {
return;
......@@ -188,6 +199,9 @@ export default {
this.$root.$on('update-panel-status', (status) => {
this.status = status;
});
this.$root.$on('change-fontsize', (fontsize) => {
this.fontsize = fontsize;
});
},
};
</script>
<template>
<div :id="nodeid" v-html="content"></div>
<div>
<div class="row iconPosition">
<div class="content">
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
flat
round
size="md"
@click="increase()"
>
<q-icon
size="sm"
:name="fasSearchPlus"
title="Increase"
/>
</q-btn>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
color="grey-8"
round
flat
size="md"
@click="decrease()"
>
<q-icon
size="sm"
:name="fasSearchMinus"
title="Decrease"
/>
</q-btn>
</div>
</div>
<div class="row">
<div
class="col-md-10 offset-md-1" :style="`font-size: ${fontsize}px`"
:id="nodeid" v-html="content">
</div>
</div>
</div>
</template>
<script>
import { fasSearchPlus, fasSearchMinus } from '@quasar/extras/fontawesome-v5';
export default {
name: 'Content',
props: {
contenturl: String,
fontsize: Number,
manifests: Array,
request: Function,
},
......@@ -18,6 +60,20 @@ export default {
};
},
methods: {
decrease() {
const min = 8;
let textsize = this.fontsize;
textsize -= textsize > min ? 1 : 0;
this.$root.$emit('change-fontsize', textsize);
},
increase() {
const max = 32;
let textsize = this.fontsize;
textsize += textsize < max ? 1 : 0;
this.$root.$emit('change-fontsize', textsize);
},
getSupport(obj) {
if (obj.type === 'css') {
this.request(obj.url, 'text')
......@@ -33,6 +89,9 @@ export default {
},
},
async created() {
this.fasSearchPlus = fasSearchPlus;
this.fasSearchMinus = fasSearchMinus;
this.content = await this.request(this.contenturl, 'text').then((data) => data);
},
mounted() {
......@@ -46,7 +105,12 @@ export default {
</script>
<style scoped>
div {
margin: 16px;
}
.content {
margin: 16px;
}
.iconPosition {
position: sticky;
top: 0;
background: #fff;
}
</style>
<template>
<div class="language">
<div class="language col-xs-auto">
<q-btn
flat
color="grey"
label="">
label=""
title="Change language"
>
<q-icon
class=""
size="md"
:name="fasLanguage" />
:name="fasLanguage"
/>
<q-menu
fit
anchor="center middle"
......@@ -22,7 +24,6 @@
<q-item-section>DE</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<!--
......
......@@ -35,7 +35,7 @@
<q-list>
<q-item>
<q-item-section class="text-h6 caps">
{{ config.manifestlabel }} {{ sequenceindex + 1 }} / {{ manifests.length }}
{{ config.labels.manifest }} {{ sequenceindex + 1 }} / {{ manifests.length }}
</q-item-section>
</q-item>
<q-item>
......@@ -51,7 +51,7 @@
<q-list>
<q-item>
<q-item-section class="text-h6 caps">
{{ config.itemlabel }} {{ itemindex + 1 }} / {{ itemcount }}
{{ config.labels.item }} {{ itemindex + 1 }} / {{ itemcount }}
</q-item-section>
</q-item>
<q-item>
......
......@@ -19,14 +19,14 @@
{{ captionprev }}
</q-btn>
<q-input
<!-- <q-input
color="teal"
class="q-mb-md"
dense
min="1"
standout
type="number"
:placeholder="config.itemlabel"
:placeholder="config.labels.item"
>
<template v-slot:append>
<q-icon
......@@ -34,7 +34,7 @@
size="20px"
/>
</template>
</q-input>
</q-input> -->
<q-btn
unelevated
......
......@@ -5,7 +5,6 @@
v-for="(btn, idx) in buttons" :key="idx"
class="q-mr-sm q-mb-sm"
color="grey-8"
style="background: #FFFFFF"
round
flat
size="md"
......@@ -24,6 +23,7 @@ import {
fasSearchMinus,
fasExpand,
fasExpandArrowsAlt,
fasCompressArrowsAlt,
} from '@quasar/extras/fontawesome-v5';
export default {
......@@ -58,14 +58,23 @@ export default {
const viewer = new OpenSeadragon.Viewer(this.options);
OpenSeadragon.setString('Tooltips.Home', 'Default View');
OpenSeadragon.setString('Tooltips.FullPage', 'Toggle Fullscreen');
document.addEventListener('fullscreenchange', () => {
Object.values(this.buttons).forEach((v) => {
if (v.id === 'fullscreen') {
v.svg = document.fullscreenElement !== null ? fasCompressArrowsAlt : fasExpandArrowsAlt;
}
});
});
},
};
</script>
<style scoped>
figure {
height: 100vh;
margin: 16px;
overflow: hidden;
}
figure {
display: inline-block;
height: 60vh;
margin: 16px;
width: 100%;
}
</style>