Merge branch 'feature/#20-document-project-config' into 'develop'

Feature/#20 document project config

See merge request subugoe/emo/Qviewer!21

CHANGELOG.md

@@ -5,6 +5,27 @@ 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.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

README.md

@@ -93,48 +93,71 @@ Locate the `index.template.html` file inside the root of your project dir and fi
 ```html
     <script id="emo-config" type="application/json">
     {
-      "entrypoint": "https://ahikar-test.sub.uni-goettingen.de/api/textapi/ahikar/3r9ps/collection.json",
-      "itemlabel": "Page",
-      "manifestlabel": "Manuscript",
-      "standalone": true,
+      "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": true,
-        "metadata": false,
-        "treeview": false
-      }
+        "text": false,
+        "metadata": true,
+        "treeview": true
+      },
+      "standalone": true
     }
     </script>
 ```
 
 ### The keys in detail
 
-- **entrypoint:**
+- **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))
-- **itemlabel:**
-  - 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.
+- **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 "**Page**"
-
-- **manifestlabel:**
-  - same as above related to the manifest title
-
-  Defaults to "**Manuscript**"
+  Defaults to **Sheet**
 
-- **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.
+  - **manifest**
+     - same as for `item` but related to the manifest title
 
-  Defaults to "**true**" (Note: do not quote this value since it is a boolean)
+  Defaults to **Manuscript**
 
-- **panels:**
-  - it's a nested object. It's keys correspond to the panelnames, e.g. "treeview", "text", "image", "metadata".
+- **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.

src/App.vue

 <template>
   <div id="q-app">
     <q-layout view="hHh lpr fFf">
-      <Header
+      <Header v-if="config.headers.all"
         :collectiontitle="collectiontitle"
         :config="config"
         :itemurls="itemurls"
@@ -115,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;

src/components/metadata.vue

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

src/components/navbar.vue

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

src/components/quasar-header.vue

 <template>
   <q-header elevated class="bg-white text-black">
     <div class="bar row justify-between items-center">
-      <Infobar v-if="manifests.length"
+      <Infobar v-if="config.headers.info && manifests.length"
         class="col-xs-12 q-pl-md"
         :collectiontitle="collectiontitle"
         :manifests="manifests"
@@ -10,7 +10,7 @@
     </div>
 
     <div class="bar row q-px-md justify-sm-between">
-      <Navbar
+      <Navbar v-if="config.headers.navigation"
         class="
           col
           col-md-6
@@ -25,7 +25,7 @@
         :manifests="manifests"
       />
 
-      <Togglebar
+      <Togglebar v-if="config.headers.toggle"
         class="
           col
           col-md-auto

src/components/quasar-tree.vue

@@ -36,6 +36,9 @@ export default {
     this.$root.$on('update-sequence-index', (index) => {
       this.expanded.push(this.manifests[index].label);
     });
+    this.$root.$on('update-item', (item) => {
+      this.selected = item;
+    });
   },
 };
 </script>

src/index.template.html

@@ -24,15 +24,23 @@
     <script id="emo-config" type="application/json">
     {
       "entrypoint": "https://ahikar-test.sub.uni-goettingen.de/api/textapi/ahikar/3r9ps/collection.json",
-      "itemlabel": "Page",
-      "manifestlabel": "Manuscript",
-      "standalone": true,
+      "headers": {
+        "all": true,
+        "info": true,
+        "navigation": true,
+        "toggle": true
+      },
+      "labels": {
+        "item": "Sheet",
+        "manifest": "Manuscript"
+      },
       "panels": {
         "image": true,
         "text": true,
         "metadata": true,
         "treeview": true
-      }
+      },
+      "standalone": true
     }
     </script>
 

src/mixins/navigation.js

@@ -24,13 +24,13 @@ export default {
 
       return this.sequenceindex < this.sequencecount - 1
       && lastindexes[this.sequenceindex] === this.itemindex
-        ? `Next ${this.config.manifestlabel}`
-        : `Next ${this.config.itemlabel}`;
+        ? `Next ${this.config.labels.manifest}`
+        : `Next ${this.config.labels.item}`;
     },
     captionprev() {
       return this.sequenceindex > 0 && this.firstiteminsequence === this.itemindex
-        ? `Prev ${this.config.manifestlabel}`
-        : `Prev ${this.config.itemlabel}`;
+        ? `Prev ${this.config.labels.manifest}`
+        : `Prev ${this.config.labels.item}`;
     },
     computedsequenceindex() {
       const itemcount = this.itemspersequence;