Commit f64e38a9 authored by dindigala's avatar dindigala
Browse files

feat: implement motifs tab in annotations

parent cdf6950b
Pipeline #201628 passed with stages
in 3 minutes and 12 seconds
<template>
<div class="annotations">
<q-tabs
v-model="currentTab"
active-color="$q.dark.isActive ? 'white' : 'accent'"
align="justify"
class="text-grey q-mb-sm"
dense
indicator-color="$q.dark.isActive ? 'white' : 'accent'"
>
<q-tab
v-for="annotationTab in annotationTabs"
:key="annotationTab.key"
:label="annotationTab.collectionTitle"
:name="annotationTab.key"
@click="activeTab(annotationTab.key)"
/>
</q-tabs>
<div
v-if="annotations.length"
class="q-ma-sm annotations"
v-if="currentAnnotation.length"
class="q-ma-sm"
>
<q-list>
<q-item
v-for="annotation in hotAnnotations"
v-for="annotation in currentAnnotation"
:id="'list' + annotation.strippedId"
:key="annotation.strippedId"
clickable
......@@ -65,6 +83,7 @@
>
<Notification :message="$t(messages.none)" />
</div>
</div>
</template>
<script>
......@@ -101,12 +120,32 @@ export default {
hotAnnotations: [],
selectedAll: undefined,
selectedNone: undefined,
currentTab: 'editorial',
};
},
computed: {
configuredTypes() {
return this.config.annotations.types.map((type) => type.contenttype);
},
currentAnnotation() {
const tabFields = this.annotationTabs.find((collection) => collection.key === this.currentTab);
return this.hotAnnotations.filter((annotationCollection) => tabFields.field.includes(annotationCollection.body['x-content-type']));
},
annotationTabs() {
return [
{
collectionTitle: 'Editorial',
key: 'editorial',
field: ['Place', 'Person', 'Editorial Comment'],
},
{
collectionTitle: 'Motifs',
key: 'motifs',
field: ['Motif'],
},
];
},
},
created() {
this.icons = Icons;
......@@ -124,9 +163,14 @@ export default {
clearInterval(interval);
}
}, 500);
this.currentTab = 'editorial';
});
},
methods: {
activeTab(key) {
this.currentTab = key;
},
createSVG(name) {
const [path, viewBox] = Icons[name].split('|');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
......@@ -176,12 +220,20 @@ export default {
setText(annotation) {
const contentType = annotation.body['x-content-type'];
const svg = this.createSVG(this.getIconName(contentType));
const id = this.stripAnnotationId(annotation.target.id);
const textElement = document.getElementById(id);
let svg = null;
try {
svg = this.createSVG(this.getIconName(contentType));
} catch (err) {
svg = null;
}
if (svg) {
textElement.prepend(svg);
}
textElement.classList.toggle('annotation');
textElement.classList.toggle('annotation-disabled');
},
......
......@@ -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": [
......@@ -49,6 +49,10 @@
"contenttype": "Editorial Comment",
"icon": "fasComment",
"label": "Comments"
},
{
"contenttype": "Motif",
"label": "Motifs"
}
]
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment