Merge branch 'feat/#300-changing-tabs' into 'develop'

feat/300: when changing sheet the selected tab remains open

See merge request !213

src/App.vue

@@ -23,6 +23,7 @@
         :annotations="annotations"
         :collection="collection"
         :config="config"
+        :contentindex="contentindex"
         :contenttypes="contentTypes"
         :contenturls="contentUrls"
         :fontsize="fontsize"
@@ -31,6 +32,7 @@
         :item="item"
         :labels="config.labels"
         :manifests="manifests"
+        :oncontentindexchange="oncontentindexchange"
         :panels="panels"
         :request="request"
         :tree="tree"
@@ -61,6 +63,7 @@ export default {
       collection: {},
       collectiontitle: '',
       config: {},
+      contentindex: 0,
       contentTypes: [],
       contentUrls: [],
       fontsize: 16,
@@ -253,7 +256,16 @@ export default {
         .then((data) => {
           this.item = data;
 
+          const previousManifest = (this.contentUrls[0] || '').split('/').pop().split('-')[0];
+
           this.contentUrls = this.getContentUrls(data.content);
+
+          const currentManifest = this.contentUrls[0].split('/').pop().split('-')[0];
+
+          if (previousManifest !== currentManifest) {
+            this.$root.$emit('manifest-changed');
+          }
+
           this.imageurl = data.image.id || '';
 
           if (data.annotationCollection) {
@@ -403,6 +415,10 @@ export default {
         : this.getManifest(this.config.entrypoint);
     },
 
+    oncontentindexchange(index) {
+      this.contentindex = index;
+    },
+
     onItemUrlChange() {
       if (this.loaded) {
         return;

src/components/annotations/annotations.vue

@@ -11,6 +11,7 @@
       <q-tab
         v-for="annotationTab in annotationTabs"
         :key="annotationTab.key"
+        :class="{'disabled-tab': annotationTab.key === currentTab}"
         :label="$t(annotationTab.collectionTitle)"
         :name="annotationTab.key"
         @click="activeTab(annotationTab.key, annotationTab.type)"
@@ -111,8 +112,7 @@ export default {
           key,
           collectionTitle: key,
           type,
-        }))
-        .filter((el) => this.annotations.find((x) => el.type.includes(x.body['x-content-type'])));
+        }));
     },
     annotationTabConfig() {
       return this.config?.annotations?.tabs || {};
@@ -196,10 +196,16 @@ export default {
     },
   },
   mounted() {
+    this.currentTab = this.annotationTabs?.[0].key;
+
     this.$root.$on('update-annotations', this.onContentUpdate);
     this.$root.$on('update-annotation-loading', (isProcessing) => {
       this.isProcessing = !!isProcessing;
     });
+
+    this.$root.$on('manifest-changed', () => {
+      this.currentTab = this.annotationTabs?.[0].key;
+    });
   },
   methods: {
     activeTab(key) {
@@ -356,7 +362,6 @@ export default {
 
     onContentUpdate(ids) {
       try {
-        this.currentTab = this.annotationTabs[0].key;
         this.contentIds = ids;
         this.highlightActiveContent(this.filteredAnnotations);
 
@@ -576,4 +581,8 @@ export default {
   flex: 1;
   flex-direction: column;
 }
+
+.disabled-tab {
+  pointer-events: none;
+}
 </style>

src/components/content.vue

 <template>
   <div class="item">
     <q-tabs
-      v-model="activeTab"
+      v-model="activeTabContents"
       dense
       class="text-grey q-mb-sm"
       active-color="$q.dark.isActive ? 'white' : 'accent'"
@@ -79,6 +79,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    contentindex: {
+      type: Number,
+      default: () => 0,
+    },
     fontsize: {
       type: Number,
       default: () => 16,
@@ -87,6 +91,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    oncontentindexchange: {
+      type: Function,
+      default: () => null,
+    },
     request: {
       type: Function,
       default: null,
@@ -101,7 +109,7 @@ export default {
     },
   },
   data: () => ({
-    activeTab: null,
+    activeTabContents: '',
     content: '',
     fontSizeLimits: {
       min: 14,
@@ -115,75 +123,95 @@ export default {
 
       return Object.keys(support).length && support.url !== '';
     },
+    activeTab() {
+      return this.contenturls[this.contentindex];
+    },
   },
 
   watch: {
     fontsize() {
       this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
     },
-    async activeTab(url) {
-      this.$root.$emit('update-annotation-loading', true);
+    activeTabContents(url) {
+      this.oncontentindexchange(this.contenturls.findIndex((x) => x === url));
+    },
+    activeTab: {
+      async handler(url) {
+        if (!url) {
+          return;
+        }
+        this.$root.$emit('update-annotation-loading', true);
 
-      const data = await this.request(url, 'text');
+        const data = await this.request(url, 'text');
 
-      if (this.supportType) {
-        await this.getSupport(this.manifests[0].support);
-      }
+        if (this.supportType) {
+          await this.getSupport(this.manifests[0].support);
+        }
 
-      const annotationPanelHidden = this.panels.find(
-        (x) => x.panel_label === 'Annotations' && !x.show,
-      );
-
-      const parser = new DOMParser();
-      let dom = parser.parseFromString(data, 'text/html');
-      if (!annotationPanelHidden) {
-        const spans = [
-          ...dom.querySelectorAll('[data-target]:not([value=""])'),
-        ];
-
-        const spanIds = [
-          ...new Set(
-            spans.map((x) => x
-              .getAttribute('data-target')
-              .replace('_start', '')
-              .replace('_end', '')),
-          ),
-        ];
-
-        spanIds.forEach((selector) => {
-          dom = this.replaceSelectorWithSpan(selector, dom);
-        });
-
-        const dataTargets = [...dom.querySelectorAll('[id]')].map((x) => x.getAttribute('id'));
-
-        dataTargets.forEach((selector) => this.addHighlightToTargetIds(selector, dom));
-      }
-      this.content = dom.documentElement.innerHTML;
-
-      const displayedAnnotations = [
-        ...dom.querySelectorAll('[data-annotation]'),
-      ]
-        .map((x) => x.getAttribute('class'))
-        .reduce((prev, curr) => {
-          (curr || '').split(' ').forEach((c) => {
-            prev[c.replace(/\./g, '')] = true;
+        const annotationPanelHidden = this.panels.find(
+          (x) => x.panel_label === 'Annotations' && !x.show,
+        );
+
+        const parser = new DOMParser();
+        let dom = parser.parseFromString(data, 'text/html');
+        if (!annotationPanelHidden) {
+          const spans = [
+            ...dom.querySelectorAll('[data-target]:not([value=""])'),
+          ];
+
+          const spanIds = [
+            ...new Set(
+              spans.map((x) => x
+                .getAttribute('data-target')
+                .replace('_start', '')
+                .replace('_end', '')),
+            ),
+          ];
+
+          spanIds.forEach((selector) => {
+            dom = this.replaceSelectorWithSpan(selector, dom);
           });
-          return prev;
-        }, {});
 
-      await this.delay(200);
+          const dataTargets = [...dom.querySelectorAll('[id]')].map((x) => x.getAttribute('id'));
 
-      this.$root.$emit('update-annotations', displayedAnnotations);
-      this.$root.$emit('update-annotation-loading', false);
+          dataTargets.forEach((selector) => this.addHighlightToTargetIds(selector, dom));
+        }
+        this.content = dom.documentElement.innerHTML;
+
+        // to improve performance, here we are trying to get candidates of annotation that are
+        // possibly be the annotation and try to match them with their respective annotations.
+        const displayedAnnotations = [
+          ...dom.querySelectorAll('[data-annotation]'),
+        ]
+          .map((x) => x.getAttribute('class'))
+          .reduce((prev, curr) => {
+            (curr || '').split(' ').forEach((c) => {
+              prev[c.replace(/\./g, '')] = true;
+            });
+            return prev;
+          }, {});
+
+        await this.delay(200);
+
+        this.$root.$emit('update-annotations', displayedAnnotations);
+        this.$root.$emit('update-annotation-loading', false);
+      },
+      immediate: true,
     },
   },
   async created() {
     this.fasSearchPlus = fasSearchPlus;
     this.fasSearchMinus = fasSearchMinus;
 
-    const [contentUrl] = this.contenturls;
+    const activeTab = this.contenturls[this.contentindex];
+    const [contenturls] = this.contenturls[0];
 
-    this.activeTab = contentUrl;
+    this.activeTabContents = activeTab;
+
+    if (!activeTab) {
+      this.oncontentindexchange(0);
+      this.activeTabContents = contenturls;
+    }
   },
 
   mounted() {
@@ -194,6 +222,13 @@ export default {
         this.getSupport(this.manifests[index].support);
       }
     });
+
+    const [contenturls] = this.contenturls[0];
+
+    this.$root.$on('manifest-changed', () => {
+      this.activeTabContents = contenturls;
+      this.oncontentindexchange(0);
+    });
   },
   methods: {
     async delay(ms = 2500) {

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-			"entrypoint": "",
+			"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
       "annotations": {
         "show": true,
         "types": [

src/mixins/panels.js

@@ -75,6 +75,10 @@ export default {
       this.panels = newPanels;
     });
 
+    this.$root.$on('manifest-changed', () => {
+      this.panels = [...this.panels].map((tab) => ({ ...tab, tab_model: 'tab0' }));
+    });
+
     this.$root.$on('add-panel', () => {
       const newPanel = {
         id: uuidv4(),

src/views/mainview.vue

@@ -93,6 +93,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    contentindex: {
+      type: Number,
+      default: () => 0,
+    },
     contenttypes: {
       type: Array,
       default: () => [],
@@ -125,6 +129,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    oncontentindexchange: {
+      type: Function,
+      default: () => null,
+    },
     panels: {
       type: Array,
       default: () => [],