Commit 0f33bd97 authored by schneider210's avatar schneider210
Browse files

codecleaning: delete obsoltes; uninstall obsolete dev-dependencies; implement...

codecleaning: delete obsoltes; uninstall obsolete dev-dependencies; implement routing base; bugfix: content threw parse-error regarding nested promises
parent 1148d05a
Pipeline #132218 failed with stages
in 1 minute and 53 seconds
#!/bin/bash
node-sass --source-map-embed --include-path scss src/css/style.scss src/statics/emo-quasar.css
#!/bin/bash
TOO_MANY_ARGS=255
usage() {
echo "Usage: ${0##*/}. No arguments required."
exit $TOO_MANY_ARGS
}
[ $# -ge 1 ] && usage
SOURCE_PATH="node_modules/frontend-templating/src/icon/"
TARGET_PATH="src/statics/icons/"
declare -a SVG=(\
"angle-double-right--light.svg"\
"angle-right--light.svg"\
"arrow-alt-left--normal.svg"\
"arrow-alt-right--normal.svg"\
"caret-right--light.svg"\
"check-circle--normal.svg"\
"circle--normal.svg"\
"expand-alt--light.svg"\
"expand--light.svg"\
"search-plus--light.svg"\
"search-minus--light.svg"\
"undo--normal.svg"\
)
[ ! -d $TARGET_PATH ] && mkdir -p $TARGET_PATH
for i in "${SVG[@]}"; do
[ -e $SOURCE_PATH"$i" ] && cp $SOURCE_PATH"$i" $TARGET_PATH || echo "No such file: $i. Skipping ..."
done
unset SOURCE_PATH TARGET_PATH SVG
[ $? -eq 0 ] && exit 0
#!/bin/bash
nodemon -e sass -x "npm run build:css"
This diff is collapsed.
...@@ -2,18 +2,15 @@ ...@@ -2,18 +2,15 @@
"name": "viewer", "name": "viewer",
"version": "0.0.1", "version": "0.0.1",
"description": "Viewer for the modular framework to present digital editions", "description": "Viewer for the modular framework to present digital editions",
"productName": "Emo Viewer", "productName": "EMo Viewer",
"cordovaId": "de.uni-goettingen.sub.emo", "cordovaId": "de.uni-goettingen.sub.emo",
"capacitorId": "", "capacitorId": "",
"author": "Mathias Göbel <goebel@sub.uni-goettingen.de>", "author": "Mathias Göbel <goebel@sub.uni-goettingen.de>",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "quasar build", "build": "quasar build",
"build:css": "bin/build-css.sh",
"dev": "quasar dev", "dev": "quasar dev",
"lint": "eslint --ext .js,.vue src", "lint": "eslint --ext .js,.vue src"
"update:svg": "bin/update-svg.sh",
"watch:css": "bin/watch-css.sh"
}, },
"dependencies": { "dependencies": {
"@quasar/extras": "^1.6.4", "@quasar/extras": "^1.6.4",
...@@ -28,13 +25,7 @@ ...@@ -28,13 +25,7 @@
"eslint-config-airbnb-base": "^14.0.0", "eslint-config-airbnb-base": "^14.0.0",
"eslint-loader": "^3.0.3", "eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.1", "eslint-plugin-import": "^2.20.1",
"eslint-plugin-vue": "^6.1.2", "eslint-plugin-vue": "^6.1.2"
"node-sass": "^4.13.1",
"nodemon": "^2.0.3",
"postcss-calc": "^7.0.2",
"postcss-custom-properties": "^9.1.1",
"sass": "^1.26.3",
"sass-loader": "^8.0.2"
}, },
"engines": { "engines": {
"node": ">= 10.18.1", "node": ">= 10.18.1",
......
...@@ -13,7 +13,6 @@ module.exports = function (ctx) { ...@@ -13,7 +13,6 @@ module.exports = function (ctx) {
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: [ css: [
// 'app.scss' // 'app.scss'
'~src/statics/emo-quasar.css'
], ],
// https://github.com/quasarframework/quasar/tree/dev/extras // https://github.com/quasarframework/quasar/tree/dev/extras
...@@ -32,7 +31,7 @@ module.exports = function (ctx) { ...@@ -32,7 +31,7 @@ module.exports = function (ctx) {
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
framework: { framework: {
// iconSet: 'material-icons', // Quasar icon set iconSet: 'fontawesome-v5',
lang: 'en-us', // Quasar language pack lang: 'en-us', // Quasar language pack
// Possible values for "all": // Possible values for "all":
...@@ -47,8 +46,6 @@ module.exports = function (ctx) { ...@@ -47,8 +46,6 @@ module.exports = function (ctx) {
// components: [], // components: [],
// directives: [], // directives: [],
iconSet: 'fontawesome-v5',
// Quasar plugins // Quasar plugins
plugins: [], plugins: [],
cssAddon: true cssAddon: true
...@@ -110,8 +107,8 @@ module.exports = function (ctx) { ...@@ -110,8 +107,8 @@ module.exports = function (ctx) {
workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest' workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
workboxOptions: {}, // only for GenerateSW workboxOptions: {}, // only for GenerateSW
manifest: { manifest: {
name: 'Emo Viewer', name: 'EMo Viewer',
short_name: 'Emo Viewer', short_name: 'EMo Viewer',
description: 'Viewer for the modular framework to present digital editions', description: 'Viewer for the modular framework to present digital editions',
display: 'standalone', display: 'standalone',
orientation: 'portrait', orientation: 'portrait',
......
<template> <template>
<div id="q-app"> <div id="q-app">
<router-view /> <q-layout view="hHh lpr fff">
<Header
:collection="collection"
:itemurl="itemurl"
:itemurls="itemurls"
:manifests="manifests"
:status="status"
/>
<q-page-container>
<router-view
:collection="collection"
:imageurl="imageurl"
:itemurl="itemurl"
:manifests="manifests"
:request="request"
:tree="tree"
/>
</q-page-container>
</q-layout>
</div> </div>
</template> </template>
<script> <script>
import Header from '@/components/quasar-header.vue';
export default { export default {
name: 'App', name: 'Viewer',
components: {
Header,
},
data() {
return {
collection: {},
config: {},
imageurl: '',
itemcontent: {},
itemurl: '',
itemurls: [],
label: '',
manifests: [],
status: {
image: true, text: true, metadata: true, treeview: true,
},
tree: [],
};
},
methods: {
async request(url, responsetype = 'json') {
const response = await fetch(url);
const data = await (responsetype === 'text' ? response.text() : response.json());
return data;
},
getCollection(url) {
this.request(url)
.then((data) => {
this.collection = data;
this.label = this.getLabel(data);
this.tree.push({ label: this.label, children: [] });
if (Array.isArray(data.sequence)) {
data.sequence.forEach((seq) => this.getManifest(seq.id));
}
});
},
getConfig() {
this.config = JSON.parse(document.getElementById('emo-config').text);
},
getImageUrl(url) {
this.request(url)
.then((data) => {
this.imageurl = data.image && data.image.id ? data.image.id : '';
});
},
getItemContent(itemurl) {
this.request(itemurl)
.then((data) => {
this.itemcontent.collectiontitle = data.title ? data.title : 'No Title provided';
this.itemcontent.contenturl = data.content;
this.itemcontent.imageurl = data.image && data.image.id ? data.image.id : '';
this.itemcontent.itemlanguage = data.language;
this.itemcontent.pagenumber = data.n ? data.n : 'No pagenumber provided';
});
},
getItemIndex(nodelabel) {
let idx = 0;
this.itemurls.forEach((item, index) => {
if (item === nodelabel) {
idx = index;
}
});
return idx;
},
getItemUrls(sequence, label) {
const urls = [];
sequence.forEach((obj) => {
urls.push(
{
label: obj.id,
handler: (node) => {
if (this.itemurl === node.label) {
return;
}
this.$root.$emit('update-item', node.label);
this.$root.$emit('update-item-index', this.getItemIndex(node.label));
this.$root.$emit('update-nav-sequence', this.getSequenceIndex(label));
this.$root.$emit('update-sequence-index', label);
},
},
);
});
return urls;
},
getLabel(data) {
if (Object.keys(this.collection).length) {
return data.title && data.title[0].title ? data.title[0].title : data.label;
}
return data.label ? data.label : 'Manifest <small>(No label available)</small>';
},
getManifest(url) {
this.request(url)
.then((data) => {
if (!Array.isArray(data.sequence)) {
data.sequence = [data.sequence];
}
if (data.sequence[0] !== 'undefined') {
data.sequence.map((seq) => this.itemurls.push(seq.id));
}
this.manifests.push(data);
this.tree[0].children.push(
{ label: data.label, children: this.getItemUrls(data.sequence, data.label) },
);
if (!this.label) {
this.label = this.getLabel(data);
}
// make sure that urls are set just once on init
if (!this.itemurl && data.sequence[0]) {
this.itemurl = data.sequence[0].id;
this.getImageUrl(data.sequence[0].id);
}
});
},
getSequenceIndex(nodelabel) {
let index = 0;
this.manifests.forEach((manifest, idx) => {
if (manifest.label === nodelabel) {
index = idx;
}
});
return index;
},
init() {
return this.config.entrypoint.match(/collection.json\s?$/)
? this.getCollection(this.config.entrypoint)
: this.getManifest(this.config.entrypoint);
},
},
created() {
this.getConfig();
this.init();
this.itemurls.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
},
mounted() {
this.$root.$on('update-item', (url) => {
this.itemurl = url;
this.$router.push({ query: { itemurl: url } });
// NOTE: Set imageurl to an empty string. Otherwise, if there is no corresponding image,
// the "preceding" image according to the "preceding" itemurl will be shown.
this.imageurl = '';
this.getImageUrl(url);
});
this.$root.$on('update-panel-status', (status) => {
this.status = status;
});
},
}; };
</script> </script>
<template>
<q-layout view="hHh lpr fff">
<Header
:collection="collection"
:itemurl="itemurl"
:itemurls="itemurls"
:manifests="manifests"
:status="status"
/>
<q-page-container>
<MainView
:collection="collection"
:imageurl="imageurl"
:itemurl="itemurl"
:manifests="manifests"
:request="request"
:tree="tree"
/>
</q-page-container>
</q-layout>
</template>
<script>
import MainView from '@/views/quasar-mainview.vue';
import Header from '@/components/quasar-header.vue';
export default {
name: 'EmoViewer',
components: {
MainView,
Header,
},
data() {
return {
collection: {},
config: {},
imageurl: '',
itemurl: '',
itemurls: [],
label: '',
manifests: [],
status: {
image: true, text: true, metadata: true, treeview: true,
},
tree: [],
};
},
methods: {
async request(url, responsetype = 'json') {
const response = await fetch(url);
const data = await (responsetype === 'text' ? response.text() : response.json());
return data;
},
getCollection(url) {
this.request(url)
.then((data) => {
this.collection = data;
this.label = this.getLabel(data);
this.tree.push({ label: this.label, children: [] });
if (Array.isArray(data.sequence)) {
data.sequence.forEach((seq) => this.getManifest(seq.id));
}
});
},
getConfig() {
this.config = JSON.parse(document.getElementById('emo-config').text);
},
getImageUrl(url) {
this.request(url)
.then((data) => {
this.imageurl = data.image && data.image.id ? data.image.id : '';
});
},
getItemIndex(nodelabel) {
let idx = 0;
this.itemurls.forEach((item, index) => {
if (item === nodelabel) {
idx = index;
}
});
return idx;
},
getItemurls(sequence, label) {
const urls = [];
if (Array.isArray(sequence)) {
sequence.forEach((obj) => {
urls.push(
{
label: obj.id,
handler: (node) => {
if (this.itemurl === node.label) {
return;
}
this.$root.$emit('update-item', node.label);
this.$root.$emit('update-item-index', this.getItemIndex(node.label));
this.$root.$emit('update-sequence-index', label);
},
},
);
});
} else {
urls.push({ label: sequence.id });
}
return urls;
},
getLabel(data) {
if (Object.keys(this.collection).length) {
return data.title && data.title[0].title ? data.title[0].title : data.label;
}
return data.label ? data.label : 'Manifest <small>(No label available)</small>';
},
getManifest(url) {
this.request(url)
.then((data) => {
this.manifests.push(data);
if (!this.label) {
this.label = this.getLabel(data);
}
if (Array.isArray(data.sequence) && data.sequence[0] !== 'undefined') {
data.sequence.map((seq) => this.itemurls.push(seq.id));
}
this.tree[0].children.push(
{ label: data.label, children: this.getItemurls(data.sequence, data.label) },
);
// make sure that urls are set just once on init
if (!this.itemurl && data.sequence[0]) {
this.itemurl = data.sequence[0].id;
this.getImageUrl(this.itemurl);
}
});
},
init() {
return this.config.entrypoint.match(/collection.json\s?$/)
? this.getCollection(this.config.entrypoint)
: this.getManifest(this.config.entrypoint);
},
},
created() {
this.getConfig();
this.init();
this.itemurls.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
},
mounted() {
this.$root.$on('update-item', (url) => {
this.itemurl = url;
this.$router.push({ query: { itemurl: url } });
// NOTE: Set imageurl to an empty string. Otherwise, if there is no corresponding image,
// the "preceding" image according to the "preceding" itemurl will be shown.
this.imageurl = '';
this.getImageUrl(url);
});
this.$root.$on('update-panel-status', (status) => {
this.status = status;
});
},
};
</script>
...@@ -21,6 +21,9 @@ export default { ...@@ -21,6 +21,9 @@ export default {
.then((content) => { .then((content) => {
this.content = content; this.content = content;
}); });
})
.catch(() => {
// nested async request. promise is pending, so JSON_parse fails
}); });
}, },
}; };
......
<template>
<div>
<q-drawer bordered show-if-above side="left" v-model="node" :width="$q.screen.width / 5">
<Toolbar heading="Treeview" />
<q-separator />
<q-tabs v-model="tab" shrink>
<q-route-tab to="/" exact label="TwinView" />
<q-route-tab to="/text" exact label="TextView" />
<q-route-tab to="/image" exact label="ImageView" />
</q-tabs>
<q-separator />&nbsp;
<Treeview
:depth="depth"
:itemurl="itemurl"
:itemurls="itemurls"
:label="label"
:manifests="manifests"
:tree="tree"
>
</Treeview>
</q-drawer>
<q-drawer bordered show-if-above side="right" v-model="meta" :width="$q.screen.width / 5">
<Toolbar heading="Metadata" />
<q-separator />
<Metadata v-if="manifests.length"
:collection="collection"
:manifests="manifests"
>
</Metadata>
</q-drawer>
</div>
</template>
<script>
import Metadata from '@/components/metadata.vue';
import Toolbar from '@/components/quasar-toolbar.vue';
import Treeview from '@/components/treeview.vue';
export default {
name: 'Drawer',
components: {
Metadata,
Toolbar,
Treeview,
},
props: {
collection: Object,
depth: Number,
itemurl: String,
itemurls: Array,
label: String,
manifests: Array,
tree: Array,
},
data() {
return {
meta: true,
node: true,
tab: 'Twin',
};
},
mounted() {
this.$root.$on('update-panel-status', (status) => {
this.meta = status.metadata;
this.node = status.treeview;
});
},
};
</script>
...@@ -2,7 +2,11 @@ ...@@ -2,7 +2,11 @@
<q-header elevated class="bg-white text-black"> <q-header elevated class="bg-white text-black">
<div class="bar row justify-center"> <div class="bar row justify-center">
<Infobar v-if="manifests.length" <Infobar v-if="manifests.length"