feat: variants list

subugoe · Jul 25, 2024 · 216922b · 216922b
1 parent 318d2ae
commit 216922b
Show file tree

Hide file tree

Showing 3 changed files with 229 additions and 5 deletions.
diff --git a/examples/ahiqar-arabic-karshuni-with-variants-local.html b/examples/ahiqar-arabic-karshuni-with-variants-local.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+<head><title>TIDO</title>
+  <meta charset="utf-8">
+  <meta name="description" content="">
+  <meta name="format-detection" content="telephone=no">
+  <meta name="msapplication-tap-highlight" content="no">
+  <meta name="viewport" content="initial-scale=1,maximum-scale=5,minimum-scale=1,width=device-width">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="dist/tido.css">
+  <style>
+    html, body {
+      margin: 0;
+    }
+    #app {
+      height: 100vh;
+    }
+  </style>
+</head>
+<body>
+<noscript><strong>We're sorry but TIDO doesn't work properly without JavaScript enabled. Please enable it to
+  continue.</strong></noscript>
+
+<div id="app"></div>
+<script src="dist/tido.js"></script>
+<script>
+window.addEventListener('load', function () {
+  window.tido = new window.Tido({
+    "collection": "http://localhost:8181/ahiqar/textapi/ahiqar/arabic-karshuni/collection.json",
+    "labels": {
+      "item": "Sheet",
+      "manifest": "Manuscript"
+    },
+    "colors": {
+      "forceMode": "light"
+    },
+    "panels": [
+      {
+        "label": "contents_and_metadata",
+        "views": [
+          {
+            "id": "tree",
+            "label": "contents",
+            "connector": {
+              "id": 1
+            }
+          },
+          {
+            "id": "metadata",
+            "label": "metadata",
+            "connector": {
+              "id": 2,
+              "options": {
+                "collection": {
+                  "all": true
+                },
+                "manifest": {
+                  "all": true
+                },
+                "item": {
+                  "all": true
+                }
+              }
+            }
+          }
+        ]
+      },
+      {
+        "label": "image",
+        "views": [
+          {
+            "id": "image",
+            "label": "Image",
+            "connector": {
+              "id": 3
+            }
+          }]
+      },
+      {
+        "label": "text",
+        "views": [
+          {
+            "id": "text1",
+            "label": "Transcription",
+            "default": true,
+            "connector": {
+              "id": 4,
+              "options": {
+                "type": "transcription"
+              }
+            }
+          },
+          {
+            "id": "text2",
+            "label": "Transliteration",
+            "connector": {
+              "id": 4,
+              "options": {
+                "type": "transliteration"
+              }
+            }
+          },
+          {
+            "id": "annotations3",
+            "label": "Variants",
+            "connector": {
+              "id": 5,
+              "options": {
+                "types": [
+                  {
+                    "name": "Variant",
+                    "icon": "biPenFill"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      },
+      {
+        "label": "annotations",
+        "views": [
+          {
+            "id": "annotations1",
+            "label": "Editorial",
+            "connector": {
+              "id": 5,
+              "options": {
+                "types": [
+                  {
+                    "name": "Person",
+                    "icon": "biPersonFill"
+                  },
+                  {
+                    "name": "Place",
+                    "icon": "biGeoAltFill"
+                  },
+                  {
+                    "name": "Editorial Comment",
+                    "icon": "biChatFill"
+                  },
+                  {
+                    "name": "Reference",
+                    "icon": "biBoxArrowUpRight"
+                  }
+                ]
+              }
+            }
+          },
+          {
+            "id": "annotations2",
+            "label": "Motif",
+            "connector": {
+              "id": 5,
+              "options": {
+                "types": [
+                  {
+                    "name": "Motif",
+                    "icon": "biPenFill"
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      }
+    ],
+    "translations": {
+      "en": {
+        "contents_and_metadata": "Contents & Metadata"
+      }
+    }
+  });
+});
+</script>
+</body>
+</html>
diff --git a/src/components/annotations/AnnotationVariantItem.vue b/src/components/annotations/AnnotationVariantItem.vue
@@ -0,0 +1,27 @@
+<template>
+    <div v-for="(variant, i) in annotation.body.value" :key="i"  class="t-items-center t-flex">
+          <span v-if="variant.witness" v-html="variant.witness" class="t-mr-7"/>
+          <span v-else  class="t-mr-7"> - </span>
+          <span v-html="variant.entry"/>
+    </div>
+</template>
+
+
+
+<script setup lang="ts">
+
+export interface Props {
+  annotation: Annotation
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  annotation: () => <Annotation>{},
+})
+
+</script>
+
+
+
+<style scoped>
+
+</style>
diff --git a/src/components/annotations/AnnotationsList.vue b/src/components/annotations/AnnotationsList.vue
@@ -12,21 +12,30 @@
       ]"
       @click="isText(annotation) ? ()=>{} : toggle(annotation)"
     >
-      <div class="t-flex t-items-center t-space-x-2">
-        <AnnotationIcon
+
+        <div v-if="!isVariant(annotation)" class="t-flex t-items-center t-space-x-2"> 
+          <AnnotationIcon
           v-if="!isText(annotation)"
           :name="getIconName(annotation.body['x-content-type'])"
-        />
+          />
+          <span  v-html="annotation.body.value"/>
+        </div>
+
+        <div v-else>
+          <AnnotationVariantItem :annotation="annotation" />
+        </div>
+
         <!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
-        <span v-html="annotation.body.value" />
-      </div>
+
+        
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import AnnotationIcon from '@/components/annotations/AnnotationIcon.vue';
+import AnnotationVariantItem from '@/components/annotations/AnnotationVariantItem.vue'
 
 interface AnnotationTypesMapping {
   [key: string]: string | 'annotation'
@@ -62,4 +71,15 @@ function isText(annotation: Annotation): boolean {
 function getIconName(typeName: string): string {
   return props.types.find(({ name }) => name === typeName)?.icon || 'pencil';
 }
+
+function isVariant(annotation) {
+  return annotation.body['x-content-type'] === 'Variant';
+}
+
 </script>
+
+
+<style lang="scss" scoped>
+
+
+</style>