refactor: minor method add according to the data changes

src/components/annotations/annotations.vue

@@ -231,6 +231,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(

src/components/content.vue

@@ -138,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 = [

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;
@@ -184,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) {