fix: update set highlighting and loading order

subugoe · Mar 23, 2023 · e119421 · e119421
1 parent fd5d861
commit e119421
Show file tree

Hide file tree

Showing 8 changed files with 304 additions and 75 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
 /dist
+/tests
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -56,5 +56,6 @@ module.exports = {
     // allow debugger during development only
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'max-len': 0,
+    'allow-parens': 'as-needed',
   },
 };
diff --git a/examples/ahiqar-arabic-karshuni.html b/examples/ahiqar-arabic-karshuni.html
@@ -29,7 +29,7 @@
 <script>
 window.addEventListener('load', function () {
   window.tido = new window.Tido({
-    "collection": "https://ahiqar.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
+    "collection": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
     colors: {
       primary: "#1a3771"
     },

diff --git a/index.html b/index.html
@@ -28,7 +28,147 @@
 <script type="module" src="/src/main.js"></script>
 <script>
   window.addEventListener('load', function () {
-    window.tido = new window.Tido();
+    window.tido = new window.Tido({
+      "manifest": "http://localhost:1745/textapi/sample/manifest.json",
+      labels: {
+        item: "Seite",
+        manifest: "Dokument"
+      },
+      colors: {
+        forceMode: "light",
+        primary: "#4569cc"
+      },
+      lang: "de",
+      panels: [
+        {
+          views: [{
+            id: "image",
+            label: "Manuskript",
+            connector: {
+              id: 3
+            }
+          }]
+        },
+        {
+          label: "Text",
+          views: [
+            {
+              id: "text1",
+              label: "Edierter Text",
+              connector: {
+                id: 4,
+                options: {
+                  type: "edited"
+                }
+              }
+            },
+            {
+              id: "text2",
+              label: "Transkription",
+              connector: {
+                id: 4,
+                options: {
+                  type: "transcription"
+                }
+              }
+            }
+          ]
+        },
+        {
+          label: "Kommentar",
+          views: [
+            {
+              id: "annotations1",
+              label: "Kommentare",
+              connector: {
+                id: 5,
+                options: {
+                  types: [
+                    {
+                      name: "Editorial Comment",
+                      icon: "biChatFill"
+                    },
+                    {
+                      name: "Abstract",
+                      annotationType: "text",
+                      displayWhen: "edited"
+                    }
+                  ]
+                }
+              }
+            },
+            {
+              id: "annotations2",
+              label: "Register",
+              connector: {
+                id: 5,
+                options: {
+                  types: [
+                    {
+                      name: "Person",
+                      icon: "biPersonFill"
+                    },
+                    {
+                      name: "Place",
+                      icon: "biGeoAltFill"
+                    },
+                    {
+                      name: "Org",
+                      icon: "biBank2"
+                    },
+                    {
+                      name: "Object",
+                      icon: "biArchiveFill"
+                    },
+                    {
+                      name: "Date",
+                      icon: "biCalendarWeek"
+                    },
+                    {
+                      name: "Work",
+                      icon: "biJournals"
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
+        {
+          label: "Dokumentdaten",
+          views: [
+            {
+              id: "meta",
+              label: "Metadaten",
+              connector: {
+                id: 2,
+                options: {
+                  collection: {
+                    all: true
+                  },
+                  manifest: {
+                    all: true
+                  },
+                  item: {
+                    all: true
+                  }
+                }
+              }
+            },
+            {
+              id: "tree",
+              label: "Inhalt",
+              connector: {
+                id: 1
+              }
+            }
+          ]
+        }
+      ],
+      translations: {
+        Edition_license: 'Editionslizenz'
+      }
+    });
   });
 </script>
 </body>

diff --git a/src/css/_global.scss b/src/css/_global.scss
@@ -58,43 +58,6 @@ h3 {
   width: 100%;
 }
 
-.annotation-tooltip {
-  background-color: $grey-2 !important;
-  box-shadow: $shadow-1;
-  color: #000 !important;
-  font-size: 14px;
-  left: 0;
-  opacity: 0;
-  padding: 8px;
-  position: absolute;
-  text-decoration: none !important;
-  top: 0;
-  transition: opacity 0.5s;
-  width: 240px;
-  z-index: 10000;
-}
-
-.annotation-tooltip {
-  -webkit-touch-callout: none;
-}
-
-.annotation-animated-tooltip {
-  opacity: 1;
-}
-
-.referenced-annotation {
-  display: block;
-  margin-bottom: 4px;
-}
-
-.referenced-annotation:first-of-type {
-  padding-top: 4px;
-}
-
-.referenced-annotation:last-of-type {
-  margin-bottom: 0;
-}
-
 .q-btn--dense .q-icon, .q-btn--round .q-icon {
   svg {
     // Safari fix

diff --git a/src/store/annotations/actions.js b/src/store/annotations/actions.js
@@ -65,12 +65,13 @@ export const setFilteredAnnotations = ({ commit, getters, rootGetters }, types)
 };
 
 export const addHighlightAttributesToText = ({ getters }, dom) => {
+  console.log('addhigh')
   const { annotations } = getters;
 
   // Add range attributes
-  [...dom.querySelectorAll('[data-target]:not([value=""])')]
-    .map((el) => el.getAttribute('data-target').replace('_start', '').replace('_end', ''))
-    .forEach((targetSelector) => Utils.addRangeHighlightAttributes(targetSelector, dom));
+  // [...dom.querySelectorAll('[data-target]:not([value=""])')]
+  //   .map((el) => el.getAttribute('data-target').replace('_start', '').replace('_end', ''))
+  //   .forEach((targetSelector) => Utils.addRangeHighlightAttributes(targetSelector, dom));
 
   // Add single attributes
   annotations.forEach((annotation) => {
@@ -143,6 +144,71 @@ export const initAnnotations = async ({ dispatch }, url) => {
 };
 
 export const addHighlightHoverListeners = ({ getters, rootGetters }) => {
+
+  const annotationElements = Array.from(document.querySelectorAll('[data-annotation]'));
+
+  annotationElements
+    // Annotations can be nested, so we filter out all outer elements from this selection and
+    // iterate over the deepest elements
+    .filter(el => [...el.childNodes].filter(childNode => childNode.nodeName === '#text').length > 0)
+    .forEach(deepestEl => {
+      console.log(deepestEl)
+      deepestEl.addEventListener(
+        'mouseenter',
+        () => {
+          console.log('hover')
+          // Hovering is only supported for selected annotations
+          if (!AnnotationUtils.isAnnotationSelected(deepestEl)) return;
+
+          const { filteredAnnotations } = getters;
+          const annotationTooltipModels = filteredAnnotations.reduce((acc, curr) => {
+            const { id } = curr;
+            const name = rootGetters['config/getIconByType'](curr.body['x-content-type']);
+
+            acc[id] = {
+              value: curr.body.value,
+              name,
+            };
+            return acc;
+          }, {});
+
+          let current = deepestEl;
+
+          const annotationIds = [current.getAttribute('data-annotation-ids')];
+
+          while (current.parentElement.getAttribute('data-annotation')) {
+            annotationIds.push(current.getAttribute('data-annotation-ids'));
+            current = current.parentElement;
+          }
+
+          // checks for duplicate class names.
+          const currentAnnotationTooltipModels = annotationIds
+            // Flatten
+            .join(' ').split(' ')
+            .map(id => {
+              return annotationTooltipModels[id]
+            })
+            .filter(m => m);
+
+          AnnotationUtils.createTooltip.bind(
+            this,
+            current,
+            currentAnnotationTooltipModels,
+            document.getElementById('text-content')
+          )();
+        },
+        false,
+      );
+      deepestEl.addEventListener(
+        'mouseout',
+        () => document.querySelectorAll('.annotation-tooltip2').forEach((el) => el.remove()),
+        false,
+      );
+    });
+
+  return;
+
+
   const { filteredAnnotations } = getters;
   const annotationIds = filteredAnnotations.reduce((acc, curr) => {
     const { id } = curr;
@@ -157,11 +223,11 @@ export const addHighlightHoverListeners = ({ getters, rootGetters }) => {
 
   document.querySelectorAll('[data-annotation]')
     .forEach((el) => {
-      const childOtherNodes = [...el.childNodes].filter((x) => x.nodeName !== '#text').length;
+      const hasChildNodes = [...el.childNodes].filter((x) => x.nodeName !== '#text').length > 0;
 
-      if (!childOtherNodes) {
+      if (!hasChildNodes) {
         const classNames = [];
-        el = AnnotationUtils.backTrackNestedAnnotations(el, classNames);
+        el = AnnotationUtils.getHighestParentAnnotationElement(el);
         const annotationClasses = [];
 
         // checks for duplicate class names.
@@ -183,6 +249,7 @@ export const addHighlightHoverListeners = ({ getters, rootGetters }) => {
             'mouseenter',
             () => {
               if (AnnotationUtils.isAnnotationSelected(el)) {
+                console.log('sel')
                 AnnotationUtils.createTooltip.bind(this, el, annotationClasses)();
               }
             },