Merge branch 'issue/nested-motif-refactor' into feat/text-hover

src/components/annotations/annotations.vue

@@ -233,6 +233,17 @@ export default {
 
     addIcon(element, annotation) {
       const contentType = annotation.body['x-content-type'];
+      let foundSvg = false;
+
+      [...element.children].forEach((el) => {
+        if (el.nodeName === 'svg' && el.getAttribute('data-annotation-icon')) {
+          foundSvg = true;
+        }
+      });
+
+      if (foundSvg) {
+        return;
+      }
       try {
         const svg = this.createSVG(this.getIconName(contentType));
         svg.setAttribute(
@@ -429,25 +440,6 @@ export default {
 
 <style lang="scss">
 /* not in scope to style the text */
-.annotation {
-  background-color: $grey-4;
-  border-bottom: 1px solid;
-  /**
-  * adding a linting exception here,
-  * because 1px is invalid, but needed here
-  * adding a global rule for this would introduce unnecessary error proneness
-  */
-  /* stylelint-disable */
-  margin: 0 1px;
-  padding: 1px 1px 2px 1px;
-  /* stylelint-enable */
-  white-space: nowrap;
-
-  @media (prefers-color-scheme: dark) {
-    background-color: $grey-9;
-  }
-}
-
 .annotation-disabled {
   border-bottom: 0;
   padding-bottom: inherit;

src/components/breadcrumbnavigation.vue

@@ -34,7 +34,7 @@
         >
           <a
             :class="$q.dark.isActive ? 'text-dark' : 'text-white'"
-            :href="`${redirectUrl}?searchTerm=${searchTerm}`"
+            :href="`${redirectUrl}search.html?searchTerm=${searchTerm}`"
             class="header-links"
           >
             <q-icon

src/components/content.vue

@@ -11,10 +11,9 @@
       <q-tab
         v-for="(contenturl, i) in contenturls"
         :key="`content${i}`"
-        :name="contenturl"
-        :class="contenturls.length == 1 && 'default-cursor'"
-        :disable="contenturls.length == 1"
+        :class="{'disabled-tab': contenturl === activeTab}"
         :label="$t(contenttypes[i])"
+        :name="contenturl"
       />
     </q-tabs>
 
@@ -139,7 +138,7 @@ export default {
       let dom = parser.parseFromString(data, 'text/html');
       if (!annotationPanelHidden) {
         const spans = [
-          ...dom.querySelectorAll('span[data-target]:not([value=""])'),
+          ...dom.querySelectorAll('[data-target]:not([value=""])'),
         ];
 
         const spanIds = [
@@ -279,4 +278,8 @@ export default {
   overflow: auto;
   padding: 8px;
 }
+
+.disabled-tab {
+  pointer-events: none;
+}
 </style>

src/components/header.vue

@@ -5,10 +5,11 @@
       :class="$q.dark.isActive ? 'bg-white' : 'bg-accent'"
     >
       <BreadCrumbNavigation
-        v-if="$route.query.source==='external'"
+        v-if="$route.query.source === 'external'"
         :config="config"
       />
     </div>
+
     <div class="header__wrap">
       <q-toolbar v-if="config['header_section'].titles">
         <TitleBar
@@ -30,10 +31,10 @@
         <q-toolbar class="q-pb-sm">
           <Navbar
             v-if="config['header_section'].navigation"
+            :default-view="defaultView"
             :itemurls="itemurls"
             :labels="config.labels"
             :manifests="manifests"
-            :default-view="defaultView"
           />
 
           <q-space />
@@ -59,8 +60,8 @@
 </template>
 
 <script>
-import Navbar from '@/components/navbar.vue';
 import BreadCrumbNavigation from '@/components/breadcrumbnavigation.vue';
+import Navbar from '@/components/navbar.vue';
 import TitleBar from '@/components/titlebar.vue';
 import TogglePanels from '@/components/togglebar/togglePanels.vue';
 import Tools from '@/components/tools.vue';
@@ -68,17 +69,13 @@ import Tools from '@/components/tools.vue';
 export default {
   name: 'Header',
   components: {
+    BreadCrumbNavigation,
     Navbar,
     TitleBar,
     TogglePanels,
-    BreadCrumbNavigation,
     Tools,
   },
   props: {
-    defaultView: {
-      type: Function,
-      default: () => {},
-    },
     collectiontitle: {
       type: String,
       default: () => '',
@@ -87,6 +84,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    defaultView: {
+      type: Function,
+      default: () => {},
+    },
     imageurl: {
       type: String,
       default: () => '',

src/components/titlebar.vue

 <template>
   <div>
-    <h1 class="text-h5 text-bold text-uppercase q-mb-none q-mt-xs">
-      {{ ahiqar ? $t('cTitle') : collectiontitle }}
+    <h1
+      v-if="collectiontitle"
+      class="text-h5 text-bold text-uppercase q-mb-none q-mt-xs"
+    >
+      {{ collectiontitle }}
     </h1>
+
     <h2 class="text-h6 text-bold text-uppercase q-mt-none q-mb-none">
       <span>{{ manifesttitle }}</span>
+
       <q-icon
         class="q-pb-xs q-pl-sm q-pr-sm"
         size="xs"
         :color="$q.dark.isActive ? 'white' : 'accent'"
         :name="fasChevronRight"
       />
+
       <span>{{ $t('Sheet') }} {{ item.n }}</span>
     </h2>
   </div>
@@ -37,7 +43,6 @@ export default {
   },
   data() {
     return {
-      ahiqar: true,
       sequenceindex: 0,
     };
   },

src/i18n/de/index.js

@@ -7,7 +7,6 @@ export default {
   colorScheme: 'Farbschema ändern',
   Contents: 'Inhalt',
   contentsMetadata: 'Inhalt & Metadaten',
-  cTitle: 'Die Geschichte und Redewendungen von Ahikar dem Weisen',
   'Current location': 'Aktueller Standort',
   'Date of creation': 'Erstelldatum',
   Decrease: 'Verkleinern',

src/i18n/en-us/index.js

@@ -7,7 +7,6 @@ export default {
   colorScheme: 'Change color',
   Contents: 'Contents',
   contentsMetadata: 'Contents & Metadata',
-  cTitle: 'The Story and Proverbs of Ahiqar the Wise',
   'Current location': 'Current location',
   'Date of creation': 'Date of creation',
   Decrease: 'Decrease',

src/index.template.html

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

src/mixins/annotation.js

@@ -3,17 +3,23 @@ export default {
     getAllElementsFromSelector(selector, arr = []) {
       const el = document.getElementById(selector);
       if (el) {
-        arr.push(el);
+        // https://www.geeksforgeeks.org/queue-data-structure/
+        const queue = [];
 
-        [...el.children].forEach((child) => {
-          arr.push(child);
-        });
+        queue.push(el);
+
+        while (queue.length) {
+          const popped = queue.pop();
+          arr.push(popped);
+          [...popped.children].forEach((child) => {
+            queue.push(child);
+          });
+        }
         return arr;
       }
 
       return [...document.querySelectorAll(`.${selector}`)];
     },
-
     getElementById(id) {
       if (!id) {
         return null;
@@ -81,8 +87,8 @@ export default {
     },
 
     replaceSelectorWithSpan(selector, root) {
-      const start = root.querySelector(`span[data-target="${selector}_start"]`);
-      const end = root.querySelector(`span[data-target="${selector}_end"]`);
+      const start = root.querySelector(`[data-target="${selector}_start"]`);
+      const end = root.querySelector(`[data-target="${selector}_end"]`);
 
       let started = false;
       let ended = false;
@@ -90,28 +96,29 @@ export default {
       function replaceRecursive(element) {
         if (!element.childNodes) return;
 
-        [...element.childNodes].forEach((c) => {
-          if (c === start) started = true;
-          if (c === end) ended = true;
+        [...element.childNodes].forEach((childNode) => {
+          if (childNode === start) started = true;
+          if (childNode === end) ended = true;
 
           if (ended) return;
 
-          if (c.nodeName === 'SPAN' && c.getAttribute('data-annotation') && started) {
-            c.classList.add(selector);
+          if (childNode.nodeName === 'SPAN' && childNode.getAttribute('data-annotation') && started) {
+            childNode.classList.add(selector);
           }
 
-          if (c.nodeName === '#text') {
+          if (childNode.nodeName === '#text') {
             if (started) {
-              if (c.textContent && c.textContent.trim()) {
-                const s = document.createElement('span');
-                s.setAttribute('class', selector);
-                s.setAttribute('data-annotation', true);
-                s.innerHTML = c.textContent;
-                c.replaceWith(s);
+              if (childNode.textContent && childNode.textContent.trim()) {
+                const span = document.createElement('span');
+
+                span.setAttribute('class', selector);
+                span.setAttribute('data-annotation', true);
+                span.innerHTML = childNode.textContent;
+                childNode.replaceWith(span);
               }
             }
           } else {
-            replaceRecursive(c);
+            replaceRecursive(childNode);
           }
         });
       }
@@ -183,8 +190,9 @@ export default {
     stripSelector(annotation) {
       return `.${annotation.target.selector.startSelector.value
         .replace("span[data-target='", '')
-        .replace("_start']", '')
-        .replace("_end']", '')}`;
+        .replace("'", '')
+        .replace('_start]', '')
+        .replace('_end]', '')}`;
     },
 
     stripTargetId(annotation, removeDot = true) {
@@ -218,28 +226,6 @@ export default {
       ));
     },
 
-    updateNestedMotifToggle(id, annotationClassOperation) {
-      const element = this.getElementById(id);
-
-      if (!element) {
-        return;
-      }
-
-      this.updateTextContentClass(
-        element,
-        annotationClassOperation,
-        'annotation-disabled',
-      );
-
-      const nextId = element.getAttribute('data-next');
-
-      if (!nextId) {
-        return;
-      }
-
-      this.updateNestedMotifToggle(nextId, annotationClassOperation);
-    },
-
     updateTextContentClass(element, task = 'add', ...className) {
       if (!element) {
         return;