Merge branch 'feature/#38-KeepfocusonItem' into 'develop'

Feature/#38: Keep focus of selected tree item (button navigation)

See merge request subugoe/emo/Qviewer!28

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.22] - 2020-07-13
+
+### Added
+
+- Refactored logic to keep focus on selected item in the tree view.
+
 ## [0.0.21] - 2020-07-13
 
 ### Fixed

src/components/navbar.vue

@@ -5,11 +5,7 @@
       color="black q-pr-sm"
       class="q-mb-md"
       :disabled="itemindex <= 0"
-      @click="
-        --itemindex;
-        sequenceindex = computedsequenceindex;
-        updateItem(itemurls[itemindex]);
-        updateSequenceIndex(sequenceindex);"
+      @click="toggleSheet(--itemindex)"
       >
       <q-icon
         :name="fasArrowLeft"
@@ -41,11 +37,7 @@
       class="q-mb-md"
       color="black"
       :disabled="itemindex >= itemurls.length - 1"
-      @click="
-        ++itemindex;
-        sequenceindex = computedsequenceindex;
-        updateItem(itemurls[itemindex]);
-        updateSequenceIndex(sequenceindex);"
+      @click="toggleSheet(++itemindex)"
       >
       {{ captionnext }}
       <q-icon
@@ -69,6 +61,19 @@ export default {
     this.fasArrowLeft = fasArrowLeft;
     this.fasCheck = fasCheck;
   },
+  methods: {
+    toggleSheet(itemIndex) {
+      const link = this.itemurls[itemIndex];
+      const tree = document.getElementsByClassName('view-tree')[0];
+
+      window.location.hash = `selectedItem-${link}`;
+      tree.scrollBy(0, -80);
+
+      this.sequenceindex = this.computedsequenceindex;
+      this.updateItem(this.itemurls[itemIndex]);
+      this.updateSequenceIndex(this.sequenceindex);
+    },
+  },
 };
 </script>
 

src/components/quasar-tree.vue

@@ -20,9 +20,17 @@
       label-key="label-key"
       node-key="label"
       :expanded.sync="expanded"
+      :filter="filter"
+      :filter-method="search"
       :nodes="tree"
       :selected.sync="selected"
       >
+      <template v-slot:default-body={node}>
+        <div
+          v-if="!node.children"
+          :id="`selectedItem-${node['label']}`">
+        </div>
+      </template>
     </q-tree>
 <!-- ^^ these ones go up here
     :filter="filter"