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 @@
"name": "viewer",
"version": "0.0.1",
"description": "Viewer for the modular framework to present digital editions",
"productName": "Emo Viewer",
"productName": "EMo Viewer",
"cordovaId": "de.uni-goettingen.sub.emo",
"capacitorId": "",
"author": "Mathias Göbel <goebel@sub.uni-goettingen.de>",
"private": true,
"scripts": {
"build": "quasar build",
"build:css": "bin/build-css.sh",
"dev": "quasar dev",
"lint": "eslint --ext .js,.vue src",
"update:svg": "bin/update-svg.sh",
"watch:css": "bin/watch-css.sh"
"lint": "eslint --ext .js,.vue src"
},
"dependencies": {
"@quasar/extras": "^1.6.4",
......@@ -28,13 +25,7 @@
"eslint-config-airbnb-base": "^14.0.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.1",
"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"
"eslint-plugin-vue": "^6.1.2"
},
"engines": {
"node": ">= 10.18.1",
......
......@@ -13,7 +13,6 @@ module.exports = function (ctx) {
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
css: [
// 'app.scss'
'~src/statics/emo-quasar.css'
],
// https://github.com/quasarframework/quasar/tree/dev/extras
......@@ -32,7 +31,7 @@ module.exports = function (ctx) {
// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
framework: {
// iconSet: 'material-icons', // Quasar icon set
iconSet: 'fontawesome-v5',
lang: 'en-us', // Quasar language pack
// Possible values for "all":
......@@ -47,8 +46,6 @@ module.exports = function (ctx) {
// components: [],
// directives: [],
iconSet: 'fontawesome-v5',
// Quasar plugins
plugins: [],
cssAddon: true
......@@ -110,8 +107,8 @@ module.exports = function (ctx) {
workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
workboxOptions: {}, // only for GenerateSW
manifest: {
name: 'Emo Viewer',
short_name: 'Emo Viewer',
name: 'EMo Viewer',
short_name: 'EMo Viewer',
description: 'Viewer for the modular framework to present digital editions',
display: 'standalone',
orientation: 'portrait',
......
<template>
<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>
</template>
<script>
import Header from '@/components/quasar-header.vue';
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>
<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 {
.then((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 @@
<q-header elevated class="bg-white text-black">
<div class="bar row justify-center">
<Infobar v-if="manifests.length"
class="col-12 col-auto q-px-md"
class="
col-auto
col-12
q-px-md
"
:collection="collection"
:itemurl="itemurl"
:manifests="manifests"
......
$typography-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@import "./node_modules/quasar/src/css/variables";
// @import "./node_modules/quasar/src/components/icon/QIcon";
// Mixins
// @import "./node_modules/quasar/src/mixins/panel";
// Components
// @import "./node_modules/quasar/src/components/ajax-bar/QAjaxBar";
// @import "./node_modules/quasar/src/components/avatar/QAvatar";
// @import "./node_modules/quasar/src/components/badge/QBadge";
// @import "./node_modules/quasar/src/components/banner/QBanner";
// @import "./node_modules/quasar/src/components/bar/QBar";
// @import "./node_modules/quasar/src/components/breadcrumbs/QBreadcrumbs";
// @import "./node_modules/quasar/src/components/btn/QBtn";
// @import "./node_modules/quasar/src/components/btn-dropdown/QBtnDropdown";
// @import "./node_modules/quasar/src/components/btn-group/QBtnGroup";
// @import "./node_modules/quasar/src/components/card/QCard";
// @import "./node_modules/quasar/src/components/carousel/QCarousel";
// @import "./node_modules/quasar/src/components/chat/QChatMessage";
// @import "./node_modules/quasar/src/components/checkbox/QCheckbox";
// @import "./node_modules/quasar/src/components/chip/QChip";
// @import "./node_modules/quasar/src/components/circular-progress/QCircularProgress";
// @import "./node_modules/quasar/src/components/color/QColor";
// @import "./node_modules/quasar/src/components/date/QDate";
// @import "./node_modules/quasar/src/components/dialog/QDialog";
// @import "./node_modules/quasar/src/components/dialog-bottom-sheet/BottomSheet";
// @import "./node_modules/quasar/src/components/dialog-plugin/DialogPlugin";
// @import "./node_modules/quasar/src/components/editor/QEditor";