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> <template>
<div <div class="annotations">
v-if="annotations.length" <q-tabs
class="q-ma-sm annotations" v-model="currentTab"
> active-color="$q.dark.isActive ? 'white' : 'accent'"
<q-list> align="justify"
<q-item class="text-grey q-mb-sm"
v-for="annotation in hotAnnotations" dense
:id="'list' + annotation.strippedId" indicator-color="$q.dark.isActive ? 'white' : 'accent'"
:key="annotation.strippedId"
clickable
padding="xs"
class="q-pa-sm q-pl-xs q-mb-xs"
@click="toggle(annotation); statusCheck();"
>
<q-item-section
avatar
class="q-mr-none"
>
<q-icon
:name="getIcon(annotation.body['x-content-type'])"
size="16px"
/>
</q-item-section>
<q-item-section>
<AnnotationUrls :content="annotation.body.value" />
</q-item-section>
</q-item>
</q-list>
<q-page-sticky
position="bottom-right"
:offset="[18, 18]"
> >
<q-fab <q-tab
color="primary" v-for="annotationTab in annotationTabs"
direction="up" :key="annotationTab.key"
vertical-actions-align="right" :label="annotationTab.collectionTitle"
:icon="icons.fasCog" :name="annotationTab.key"
:active-icon="icons.fasChevronDown" @click="activeTab(annotationTab.key)"
/>
</q-tabs>
<div
v-if="currentAnnotation.length"
class="q-ma-sm"
>
<q-list>
<q-item
v-for="annotation in currentAnnotation"
:id="'list' + annotation.strippedId"
:key="annotation.strippedId"
clickable
padding="xs"
class="q-pa-sm q-pl-xs q-mb-xs"
@click="toggle(annotation); statusCheck();"
>
<q-item-section
avatar
class="q-mr-none"
>
<q-icon
:name="getIcon(annotation.body['x-content-type'])"
size="16px"
/>
</q-item-section>
<q-item-section>
<AnnotationUrls :content="annotation.body.value" />
</q-item-section>
</q-item>
</q-list>
<q-page-sticky
position="bottom-right"
:offset="[18, 18]"
> >
<q-fab-action <q-fab
color="primary"
label="Highlight All Annotations in Text Panel"
label-position="left"
:disable="selectedAll"
:icon="icons.fasEye"
@click="toggleTo(true)"
/>
<q-fab-action
color="primary" color="primary"
label="Remove All Highlights in Text Panel" direction="up"
label-position="left" vertical-actions-align="right"
:disable="selectedNone" :icon="icons.fasCog"
:icon="icons.fasEyeSlash" :active-icon="icons.fasChevronDown"
@click="toggleTo(false)" >
/> <q-fab-action
</q-fab> color="primary"
</q-page-sticky> label="Highlight All Annotations in Text Panel"
</div> label-position="left"
:disable="selectedAll"
:icon="icons.fasEye"
@click="toggleTo(true)"
/>
<q-fab-action
color="primary"
label="Remove All Highlights in Text Panel"
label-position="left"
:disable="selectedNone"
:icon="icons.fasEyeSlash"
@click="toggleTo(false)"
/>
</q-fab>
</q-page-sticky>
</div>
<div <div
v-else v-else
class="q-pa-sm" class="q-pa-sm"
> >
<Notification :message="$t(messages.none)" /> <Notification :message="$t(messages.none)" />
</div>
</div> </div>
</template> </template>
...@@ -101,12 +120,32 @@ export default { ...@@ -101,12 +120,32 @@ export default {
hotAnnotations: [], hotAnnotations: [],
selectedAll: undefined, selectedAll: undefined,
selectedNone: undefined, selectedNone: undefined,
currentTab: 'editorial',
}; };
}, },
computed: { computed: {
configuredTypes() { configuredTypes() {
return this.config.annotations.types.map((type) => type.contenttype); 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() { created() {
this.icons = Icons; this.icons = Icons;
...@@ -124,9 +163,14 @@ export default { ...@@ -124,9 +163,14 @@ export default {
clearInterval(interval); clearInterval(interval);
} }
}, 500); }, 500);
this.currentTab = 'editorial';
}); });
}, },
methods: { methods: {
activeTab(key) {
this.currentTab = key;
},
createSVG(name) { createSVG(name) {
const [path, viewBox] = Icons[name].split('|'); const [path, viewBox] = Icons[name].split('|');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
...@@ -176,12 +220,20 @@ export default { ...@@ -176,12 +220,20 @@ export default {
setText(annotation) { setText(annotation) {
const contentType = annotation.body['x-content-type']; const contentType = annotation.body['x-content-type'];
const svg = this.createSVG(this.getIconName(contentType));
const id = this.stripAnnotationId(annotation.target.id); const id = this.stripAnnotationId(annotation.target.id);
const textElement = document.getElementById(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.prepend(svg);
textElement.classList.toggle('annotation'); textElement.classList.toggle('annotation');
textElement.classList.toggle('annotation-disabled'); textElement.classList.toggle('annotation-disabled');
}, },
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
--> -->
<script id="tido-config" type="application/json"> <script id="tido-config" type="application/json">
{ {
"entrypoint": "", "entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
"annotations": { "annotations": {
"show": true, "show": true,
"types": [ "types": [
...@@ -49,6 +49,10 @@ ...@@ -49,6 +49,10 @@
"contenttype": "Editorial Comment", "contenttype": "Editorial Comment",
"icon": "fasComment", "icon": "fasComment",
"label": "Comments" "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