group contents and metadata in one single panel. exchnage meta by annotation...

group contents and metadata in one single panel. exchnage meta by annotation panel and adjust splitter ratios

CHANGELOG.md

@@ -5,6 +5,18 @@ 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).
 
+## [1.1.1] - 2020-08-03
+
+### Fixed
+- fix tree bug if meta panel is active. implement listener for active panel tab
+
+## [1.1.0] - 2020-07-29
+
+### Added
+- metadata panel exchanged by annotation panel (no content yet). therefore metadata goes into the tree panel.
+both of the latter became tabs inside this one panel.
+- panel order changed to: contents / metadata (tabs), image, text, annotations
+
 ## [1.0.1]- 2020-07-30
 
 ### Changed

src/App.vue

@@ -42,6 +42,7 @@ export default {
   },
   data() {
     return {
+      annotations: {},
       collection: {},
       collectiontitle: '',
       contenturl: '',

src/components/content.vue

@@ -11,33 +11,25 @@
           title="Increase Textsize"
           @click="increase()"
           >
-          <q-icon
-            size="sm"
-            :name="fasSearchPlus"
-          />
+          <q-icon :name="fasSearchPlus" size="sm" />
         </q-btn>
 
         <q-btn
           class="q-mr-sm q-mb-sm cursor-pointer"
           color="grey-8"
-          round
           flat
+          round
           size="md"
           title="Decrease Textsize"
           @click="decrease()"
           >
-          <q-icon
-            size="sm"
-            :name="fasSearchMinus"
-          />
+          <q-icon :name="fasSearchMinus" />
         </q-btn>
       </div>
     </div>
+
     <div class="row" style="display: contents">
-      <div
-        :style="`font-size: ${fontsize}px`"
-        :id="nodeid" v-html="content">
-      </div>
+      <div :id="nodeid" :style="`font-size: ${fontsize}px`" v-html="content"></div>
     </div>
   </div>
 </template>

src/components/navbar.vue

@@ -2,8 +2,8 @@
   <div>
     <q-btn
       unelevated
-      color="black q-pr-sm"
       class="q-mb-md"
+      color="black q-pr-sm"
       :disabled="itemindex <= 0"
       @click="toggleSheet(--itemindex)"
       >

src/components/softwareinfo.vue

@@ -22,7 +22,7 @@
           <p>Copyright (c) 2020 Göttingen University - Göttingen State and University Library</p>
 
           <p class="q-mb-none">
-            Version 1.0.0, licensed under GNU Affero General Public License v3.0
+            Version 1.1.1, licensed under GNU Affero General Public License v3.0
           </p>
         </q-card-section>
 

src/css/global.scss

 // global extra classes
-.scrollPanel {
+.scrollpanel {
   position: relative;
 
   .sticky {

src/index.template.html

@@ -25,7 +25,7 @@
 
     <script id="emo-config" type="application/json">
     {
-      "entrypoint": "https://ahikar-test.sub.uni-goettingen.de/api/textapi/ahikar/3r9ps/collection.json",
+      "entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/3r9ps/collection.json",
       "headers": {
         "all": true,
         "info": true,
@@ -37,23 +37,24 @@
         "manifest": "Manuscript"
       },
       "panels": {
-        "tree": {
-          "name": "Contents",
+        "tabs": {
+          "default": "contents",
+          "name": "Contents & Meta",
           "position": 1,
           "show": true
         },
-        "text": {
-          "name": "Text",
+        "image": {
+          "name": "Image",
           "position": 2,
           "show": true
         },
-        "image": {
-          "name": "Image",
+        "text": {
+          "name": "Text",
           "position": 3,
           "show": true
         },
-        "metadata": {
-          "name": "Metadata",
+        "annotations": {
+          "name": "Annotations",
           "position": 4,
           "show": true
         }

src/mixins/navigation.js

@@ -8,15 +8,18 @@ export default {
     return {
       itemindex: 0,
       sequenceindex: 0,
+      tab: '',
     };
   },
   methods: {
     toggleSheet(itemIndex) {
-      const link = this.itemurls[itemIndex];
-      const tree = document.getElementsByClassName('view-tree')[0];
+      if (this.tab !== 'contents') {
+        const link = this.itemurls[itemIndex];
+        window.location.hash = `selectedItem-${link}`;
 
-      window.location.hash = `selectedItem-${link}`;
-      tree.scrollBy(0, -80);
+        const tree = document.getElementsByClassName('view-tree')[0];
+        tree.scrollBy(0, -80);
+      }
 
       this.sequenceindex = this.computedsequenceindex;
       this.updateItem(this.itemurls[itemIndex], this.sequenceindex);
@@ -90,6 +93,10 @@ export default {
     },
   },
   mounted() {
+    this.$root.$on('update-tab', (tab) => {
+      this.tab = tab;
+    });
+
     this.$root.$on('update-item-index', (index) => {
       this.itemindex = index;
     });

src/views/quasar-mainview.vue

@@ -2,27 +2,76 @@
   <q-page>
     <q-splitter v-model="splitterone" :limits="[0, 100]">
 
-      <template v-show="config.panels.tree.show && states.tree" v-slot:before>
-        <Toolbar :heading="config.panels.tree.name" />
+      <template v-show="config.panels.tabs.show && states.tabs" v-slot:before>
+        <Toolbar :heading="config.panels.tabs.name" />
+
         <q-separator />
 
-        <Treeview v-if="tree.length && manifests.length"
-          :manifests="manifests"
-          :tree="tree"
-          >
-        </Treeview>
+        <q-card>
+          <q-tabs v-model="tab"
+            align="right"
+            active-bg-color="grey-4"
+            >
+            <q-tab name="contents" label="Contents" @click="updateTab()" />
+            <q-tab name="meta" label="Metadata" @click="updateTab()" />
+          </q-tabs>
+
+          <q-separator />
+
+          <q-tab-panels v-model="tab" animated keep-alive>
+            <q-tab-panel name="contents">
+              <Treeview v-if="tree.length && manifests.length"
+                :manifests="manifests"
+                :tree="tree"
+                >
+              </Treeview>
+            </q-tab-panel>
+
+            <q-tab-panel name="meta">
+              <div class="scrollpanel">
+                <Metadata v-if="manifests.length"
+                  :collection="collection"
+                  :config="config"
+                  :language="language"
+                  :manifests="manifests"
+                  :itemlabel="itemlabel"
+                  >
+                </Metadata>
+              </div>
+            </q-tab-panel>
+          </q-tab-panels>
+        </q-card>
       </template>
 
       <template v-slot:after>
         <q-splitter v-model="splittertwo" :limits="[0, 100]">
 
+          <template v-show="config.panels.image.show && states.image && imageurl" v-slot:before>
+            <Toolbar :heading="config.panels.image.name" />
+
+            <q-separator />
+
+            <div class="q-pa-md q-gutter-sm overflow-hidden">
+              <div class="scrollpanel">
+                <OpenSeadragon
+                  :key="imageurl"
+                  :imageurl="imageurl"
+                  >
+                </OpenSeadragon>
+              </div>
+            </div>
+          </template>
+
+      <template v-slot:after>
+        <q-splitter v-model="splitterthree" :limits="[0, 100]">
+
           <template v-show="config.panels.text.show && states.text" v-slot:before>
             <Toolbar :heading="config.panels.text.name" />
+
             <q-separator />
 
             <div class="q-pa-md q-gutter-sm">
-              <div class="scrollPanel">
-
+              <div class="scrollpanel">
                 <q-infinite-scroll>
                   <Content
                     :key="contenturl"
@@ -37,46 +86,19 @@
             </div>
           </template>
 
-          <template v-slot:after>
-            <q-splitter v-model="splitterthree" :limits="[0, 100]">
-
-              <template v-show="config.panels.image.show && states.image && imageurl" v-slot:before>
-                <Toolbar :heading="config.panels.image.name" />
-                <q-separator />
-
-                <div class="q-pa-md q-gutter-sm" style="overflow:hidden">
-                  <div class="scrollPanel">
-                    <OpenSeadragon
-                      :key="imageurl"
-                      :imageurl="imageurl"
-                      >
-                    </OpenSeadragon>
-                  </div>
-                </div>
-              </template>
-
-              <template v-show="config.panels.metadata.show && states.metadata" v-slot:after>
-                <Toolbar :heading="config.panels.metadata.name" />
-                <q-separator />
-
-                <div class="scrollPanel">
-                  <q-infinite-scroll>
-                    <Metadata v-if="manifests.length"
-                      :collection="collection"
-                      :config="config"
-                      :language="language"
-                      :manifests="manifests"
-                      :itemlabel="itemlabel"
-                      >
-                    </Metadata>
-                  </q-infinite-scroll>
-                </div>
-              </template>
-            </q-splitter>
+          <template v-show="config.panels.annotations.show && states.annotations" v-slot:after>
+            <Toolbar :heading="config.panels.annotations.name" />
+
+            <q-separator />
+
           </template>
         </q-splitter>
       </template>
+
+        </q-splitter>
+      </template>
     </q-splitter>
+
   </q-page>
 </template>
 
@@ -110,7 +132,7 @@ export default {
   },
   data() {
     return {
-      // status: tree, text, image, metadata
+      // status: tree, image, text, annotations
       matrix: [
         { state: [1, 1, 1, 1], ratio: [25, 33, 50] },
         { state: [0, 0, 0, 0], ratio: [0, 0, 0] },
@@ -133,6 +155,7 @@ export default {
       splittertwo: 33,
       splitterthree: 50,
       states: {},
+      tab: '',
     };
   },
   methods: {
@@ -167,6 +190,9 @@ export default {
         }
       });
     },
+    updateTab() {
+      this.$root.$emit('update-tab', this.tab);
+    },
   },
   created() {
     // filter the panel's showcases and leave the config object untouched
@@ -174,6 +200,8 @@ export default {
       this.states[panel] = states.show;
     });
     this.setSplitterRatio(this.states);
+
+    this.tab = this.config.panels.tabs.default;
   },
   mounted() {
     // emitted by @/components/togglebar.vue
@@ -194,13 +222,13 @@ export default {
 <style lang="scss" scoped>
   @import '../css/responsive-heights.scss';
 
-  .scrollPanel {
+  .scrollpanel {
     -ms-overflow-style: none;
     overflow: auto;
     scrollbar-width: none;
     @include makeResponsiveHeight();
   }
-  .scrollPanel::-webkit-scrollbar {
+  .scrollpanel::-webkit-scrollbar {
     display: none;
   }
 </style>