Feature/#21 configure panels

CHANGELOG.md

@@ -5,6 +5,12 @@ 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.9] - 2020-06-16
+
+### Added
+
+- config option (index.html): tell the viewer with which panels to start
+
 ## [0.0.8] - 2020-06-16
 
 ### Added

package.json

@@ -6,7 +6,9 @@
   "cordovaId": "de.uni-goettingen.sub.emo",
   "capacitorId": "",
   "author": "Mathias Göbel <goebel@sub.uni-goettingen.de>",
-  "contributors": ["Nils Windisch"],
+  "contributors": [
+    "Nils Windisch"
+  ],
   "private": true,
   "scripts": {
     "build": "quasar build",
@@ -16,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": {

src/App.vue

@@ -21,6 +21,7 @@
           :manifests="manifests"
           :pagelabel="pagelabel"
           :request="request"
+          :status="status"
           :tree="tree"
         />
       </q-page-container>
@@ -56,9 +57,7 @@ export default {
       label: '',
       pagelabel: '',
       manifests: [],
-      status: {
-        image: true, text: true, metadata: true, treeview: true,
-      },
+      status: {},
       tree: [],
     };
   },
@@ -84,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)

src/components/togglebar.vue

@@ -44,7 +44,7 @@ export default {
   },
   data() {
     return {
-      panels: ['treeview', 'text', 'image', 'metadata'],
+      panels: [],
     };
   },
   filters: {
@@ -81,6 +81,13 @@ export default {
     this.fasUndo = fasUndo;
     this.fasCircle = fasCircle;
     this.fasCheckCircle = fasCheckCircle;
+
+    // just show the panel buttons needed according to the config
+    Object.entries(this.status).forEach(([panel, state]) => {
+      if (state === true) {
+        this.panels.push(panel);
+      }
+    });
   },
 };
 </script>

src/index.template.html

@@ -26,7 +26,13 @@
       "entrypoint": "https://ahikar-test.sub.uni-goettingen.de/api/textapi/ahikar/3r9ps/collection.json",
       "itemlabel": "Page",
       "manifestlabel": "Manuscript",
-      "standalone": true
+      "standalone": true,
+      "panels": {
+        "image": true,
+        "text": true,
+        "metadata": true,
+        "treeview": true
+      }
     }
     </script>
 

src/views/quasar-mainview.vue

@@ -88,6 +88,7 @@ export default {
     manifests: Array,
     pagelabel: String,
     request: Function,
+    status: Object,
     tree: Array,
   },
   data() {
@@ -111,9 +112,7 @@ export default {
         { state: [0, 0, 1, 0], ratio: [0, 0, 0.1] },
         { state: [0, 0, 0, 1], ratio: [100, 0, 0] },
       ],
-      panels: {
-        treeview: true, text: true, image: true, metadata: true,
-      },
+      panels: {},
       splitterone: 25,
       splittertwo: 33,
       splitterthree: 50,
@@ -138,6 +137,12 @@ export default {
       });
     },
   },
+  created() {
+    Object.entries(this.status).forEach(([panel, state]) => {
+      this.panels[panel] = state;
+    });
+    this.setSplitterRatio(this.panels);
+  },
   mounted() {
     this.$root.$on('update-panel-status', (status) => {
       this.panels = status;