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

bin/build-css.sh

-#!/bin/bash
-
-node-sass --source-map-embed --include-path scss src/css/style.scss src/statics/emo-quasar.css

bin/update-svg.sh

-#!/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/watch-css.sh

-#!/bin/bash
-
-nodemon -e sass -x "npm run build:css"

package.json

@@ -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",

quasar.conf.js

@@ -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',

src/App.vue

 <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>

src/EmoViewer.vue

-<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>

src/components/content.vue

@@ -21,6 +21,9 @@ export default {
           .then((content) => {
             this.content = content;
           });
+      })
+      .catch(() => {
+        // nested async request. promise is pending, so JSON_parse fails
       });
   },
 };

src/components/quasar-drawer.vue

-<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>

src/components/quasar-header.vue

@@ -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"

src/css/style.scss

-$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";