Commit 5c4c34f9 authored by dindigala's avatar dindigala
Browse files

Merge branch 'feat/#300-changing-tabs' into 'develop'

feat/300: when changing sheet the selected tab remains open

See merge request !213
parents c42cf023 5c74208e
Pipeline #223449 passed with stages
in 6 minutes and 5 seconds
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
:annotations="annotations" :annotations="annotations"
:collection="collection" :collection="collection"
:config="config" :config="config"
:contentindex="contentindex"
:contenttypes="contentTypes" :contenttypes="contentTypes"
:contenturls="contentUrls" :contenturls="contentUrls"
:fontsize="fontsize" :fontsize="fontsize"
...@@ -31,6 +32,7 @@ ...@@ -31,6 +32,7 @@
:item="item" :item="item"
:labels="config.labels" :labels="config.labels"
:manifests="manifests" :manifests="manifests"
:oncontentindexchange="oncontentindexchange"
:panels="panels" :panels="panels"
:request="request" :request="request"
:tree="tree" :tree="tree"
...@@ -61,6 +63,7 @@ export default { ...@@ -61,6 +63,7 @@ export default {
collection: {}, collection: {},
collectiontitle: '', collectiontitle: '',
config: {}, config: {},
contentindex: 0,
contentTypes: [], contentTypes: [],
contentUrls: [], contentUrls: [],
fontsize: 16, fontsize: 16,
...@@ -253,7 +256,16 @@ export default { ...@@ -253,7 +256,16 @@ export default {
.then((data) => { .then((data) => {
this.item = data; this.item = data;
const previousManifest = (this.contentUrls[0] || '').split('/').pop().split('-')[0];
this.contentUrls = this.getContentUrls(data.content); this.contentUrls = this.getContentUrls(data.content);
const currentManifest = this.contentUrls[0].split('/').pop().split('-')[0];
if (previousManifest !== currentManifest) {
this.$root.$emit('manifest-changed');
}
this.imageurl = data.image.id || ''; this.imageurl = data.image.id || '';
if (data.annotationCollection) { if (data.annotationCollection) {
...@@ -403,6 +415,10 @@ export default { ...@@ -403,6 +415,10 @@ export default {
: this.getManifest(this.config.entrypoint); : this.getManifest(this.config.entrypoint);
}, },
oncontentindexchange(index) {
this.contentindex = index;
},
onItemUrlChange() { onItemUrlChange() {
if (this.loaded) { if (this.loaded) {
return; return;
......
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<q-tab <q-tab
v-for="annotationTab in annotationTabs" v-for="annotationTab in annotationTabs"
:key="annotationTab.key" :key="annotationTab.key"
:class="{'disabled-tab': annotationTab.key === currentTab}"
:label="$t(annotationTab.collectionTitle)" :label="$t(annotationTab.collectionTitle)"
:name="annotationTab.key" :name="annotationTab.key"
@click="activeTab(annotationTab.key, annotationTab.type)" @click="activeTab(annotationTab.key, annotationTab.type)"
...@@ -111,8 +112,7 @@ export default { ...@@ -111,8 +112,7 @@ export default {
key, key,
collectionTitle: key, collectionTitle: key,
type, type,
})) }));
.filter((el) => this.annotations.find((x) => el.type.includes(x.body['x-content-type'])));
}, },
annotationTabConfig() { annotationTabConfig() {
return this.config?.annotations?.tabs || {}; return this.config?.annotations?.tabs || {};
...@@ -196,10 +196,16 @@ export default { ...@@ -196,10 +196,16 @@ export default {
}, },
}, },
mounted() { mounted() {
this.currentTab = this.annotationTabs?.[0].key;
this.$root.$on('update-annotations', this.onContentUpdate); this.$root.$on('update-annotations', this.onContentUpdate);
this.$root.$on('update-annotation-loading', (isProcessing) => { this.$root.$on('update-annotation-loading', (isProcessing) => {
this.isProcessing = !!isProcessing; this.isProcessing = !!isProcessing;
}); });
this.$root.$on('manifest-changed', () => {
this.currentTab = this.annotationTabs?.[0].key;
});
}, },
methods: { methods: {
activeTab(key) { activeTab(key) {
...@@ -356,7 +362,6 @@ export default { ...@@ -356,7 +362,6 @@ export default {
onContentUpdate(ids) { onContentUpdate(ids) {
try { try {
this.currentTab = this.annotationTabs[0].key;
this.contentIds = ids; this.contentIds = ids;
this.highlightActiveContent(this.filteredAnnotations); this.highlightActiveContent(this.filteredAnnotations);
...@@ -576,4 +581,8 @@ export default { ...@@ -576,4 +581,8 @@ export default {
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
} }
.disabled-tab {
pointer-events: none;
}
</style> </style>
<template> <template>
<div class="item"> <div class="item">
<q-tabs <q-tabs
v-model="activeTab" v-model="activeTabContents"
dense dense
class="text-grey q-mb-sm" class="text-grey q-mb-sm"
active-color="$q.dark.isActive ? 'white' : 'accent'" active-color="$q.dark.isActive ? 'white' : 'accent'"
...@@ -79,6 +79,10 @@ export default { ...@@ -79,6 +79,10 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
contentindex: {
type: Number,
default: () => 0,
},
fontsize: { fontsize: {
type: Number, type: Number,
default: () => 16, default: () => 16,
...@@ -87,6 +91,10 @@ export default { ...@@ -87,6 +91,10 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
oncontentindexchange: {
type: Function,
default: () => null,
},
request: { request: {
type: Function, type: Function,
default: null, default: null,
...@@ -101,7 +109,7 @@ export default { ...@@ -101,7 +109,7 @@ export default {
}, },
}, },
data: () => ({ data: () => ({
activeTab: null, activeTabContents: '',
content: '', content: '',
fontSizeLimits: { fontSizeLimits: {
min: 14, min: 14,
...@@ -115,75 +123,95 @@ export default { ...@@ -115,75 +123,95 @@ export default {
return Object.keys(support).length && support.url !== ''; return Object.keys(support).length && support.url !== '';
}, },
activeTab() {
return this.contenturls[this.contentindex];
},
}, },
watch: { watch: {
fontsize() { fontsize() {
this.$refs.contentsize.style.fontSize = `${this.fontsize}px`; this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
}, },
async activeTab(url) { activeTabContents(url) {
this.$root.$emit('update-annotation-loading', true); this.oncontentindexchange(this.contenturls.findIndex((x) => x === url));
},
activeTab: {
async handler(url) {
if (!url) {
return;
}
this.$root.$emit('update-annotation-loading', true);
const data = await this.request(url, 'text'); const data = await this.request(url, 'text');
if (this.supportType) { if (this.supportType) {
await this.getSupport(this.manifests[0].support); await this.getSupport(this.manifests[0].support);
} }
const annotationPanelHidden = this.panels.find( const annotationPanelHidden = this.panels.find(
(x) => x.panel_label === 'Annotations' && !x.show, (x) => x.panel_label === 'Annotations' && !x.show,
); );
const parser = new DOMParser(); const parser = new DOMParser();
let dom = parser.parseFromString(data, 'text/html'); let dom = parser.parseFromString(data, 'text/html');
if (!annotationPanelHidden) { if (!annotationPanelHidden) {
const spans = [ const spans = [
...dom.querySelectorAll('[data-target]:not([value=""])'), ...dom.querySelectorAll('[data-target]:not([value=""])'),
]; ];
const spanIds = [ const spanIds = [
...new Set( ...new Set(
spans.map((x) => x spans.map((x) => x
.getAttribute('data-target') .getAttribute('data-target')
.replace('_start', '') .replace('_start', '')
.replace('_end', '')), .replace('_end', '')),
), ),
]; ];
spanIds.forEach((selector) => { spanIds.forEach((selector) => {
dom = this.replaceSelectorWithSpan(selector, dom); dom = this.replaceSelectorWithSpan(selector, dom);
});
const dataTargets = [...dom.querySelectorAll('[id]')].map((x) => x.getAttribute('id'));
dataTargets.forEach((selector) => this.addHighlightToTargetIds(selector, dom));
}
this.content = dom.documentElement.innerHTML;
const displayedAnnotations = [
...dom.querySelectorAll('[data-annotation]'),
]
.map((x) => x.getAttribute('class'))
.reduce((prev, curr) => {
(curr || '').split(' ').forEach((c) => {
prev[c.replace(/\./g, '')] = true;
}); });
return prev;
}, {});
await this.delay(200); const dataTargets = [...dom.querySelectorAll('[id]')].map((x) => x.getAttribute('id'));
this.$root.$emit('update-annotations', displayedAnnotations); dataTargets.forEach((selector) => this.addHighlightToTargetIds(selector, dom));
this.$root.$emit('update-annotation-loading', false); }
this.content = dom.documentElement.innerHTML;
// to improve performance, here we are trying to get candidates of annotation that are
// possibly be the annotation and try to match them with their respective annotations.
const displayedAnnotations = [
...dom.querySelectorAll('[data-annotation]'),
]
.map((x) => x.getAttribute('class'))
.reduce((prev, curr) => {
(curr || '').split(' ').forEach((c) => {
prev[c.replace(/\./g, '')] = true;
});
return prev;
}, {});
await this.delay(200);
this.$root.$emit('update-annotations', displayedAnnotations);
this.$root.$emit('update-annotation-loading', false);
},
immediate: true,
}, },
}, },
async created() { async created() {
this.fasSearchPlus = fasSearchPlus; this.fasSearchPlus = fasSearchPlus;
this.fasSearchMinus = fasSearchMinus; this.fasSearchMinus = fasSearchMinus;
const [contentUrl] = this.contenturls; const activeTab = this.contenturls[this.contentindex];
const [contenturls] = this.contenturls[0];
this.activeTab = contentUrl; this.activeTabContents = activeTab;
if (!activeTab) {
this.oncontentindexchange(0);
this.activeTabContents = contenturls;
}
}, },
mounted() { mounted() {
...@@ -194,6 +222,13 @@ export default { ...@@ -194,6 +222,13 @@ export default {
this.getSupport(this.manifests[index].support); this.getSupport(this.manifests[index].support);
} }
}); });
const [contenturls] = this.contenturls[0];
this.$root.$on('manifest-changed', () => {
this.activeTabContents = contenturls;
this.oncontentindexchange(0);
});
}, },
methods: { methods: {
async delay(ms = 2500) { async delay(ms = 2500) {
......
...@@ -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": [
......
...@@ -75,6 +75,10 @@ export default { ...@@ -75,6 +75,10 @@ export default {
this.panels = newPanels; this.panels = newPanels;
}); });
this.$root.$on('manifest-changed', () => {
this.panels = [...this.panels].map((tab) => ({ ...tab, tab_model: 'tab0' }));
});
this.$root.$on('add-panel', () => { this.$root.$on('add-panel', () => {
const newPanel = { const newPanel = {
id: uuidv4(), id: uuidv4(),
......
...@@ -93,6 +93,10 @@ export default { ...@@ -93,6 +93,10 @@ export default {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
contentindex: {
type: Number,
default: () => 0,
},
contenttypes: { contenttypes: {
type: Array, type: Array,
default: () => [], default: () => [],
...@@ -125,6 +129,10 @@ export default { ...@@ -125,6 +129,10 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
oncontentindexchange: {
type: Function,
default: () => null,
},
panels: { panels: {
type: Array, type: Array,
default: () => [], default: () => [],
......
Supports Markdown
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