Skip to content
GitLab
Commit b263c29c authored by dindigala's avatar dindigala
Browse files

feat: when changing sheet the selected tab remains open

parent c42cf023
Pipeline #222853 passed with stages
in 4 minutes and 43 seconds
Hide whitespace changes
Inline Side-by-side
src/App.vue
View file @ b263c29c
......@@ -23,6 +23,7 @@
:annotations="annotations"
:collection="collection"
:config="config"
:contentindex="contentindex"
:contenttypes="contentTypes"
:contenturls="contentUrls"
:fontsize="fontsize"
......@@ -31,6 +32,7 @@
:item="item"
:labels="config.labels"
:manifests="manifests"
:oncontentindexchange="oncontentindexchange"
:panels="panels"
:request="request"
:tree="tree"
......@@ -61,6 +63,7 @@ export default {
collection: {},
collectiontitle: '',
config: {},
contentindex: 0,
contentTypes: [],
contentUrls: [],
fontsize: 16,
......@@ -253,7 +256,16 @@ export default {
.then((data) => {
this.item = data;
const previousManifest = (this.contentUrls[0] || '').split('/').pop().split('-')[0];
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 || '';
if (data.annotationCollection) {
......@@ -403,6 +415,10 @@ export default {
: this.getManifest(this.config.entrypoint);
},
oncontentindexchange(index) {
this.contentindex = index;
},
onItemUrlChange() {
if (this.loaded) {
return;
......
src/components/annotations/annotations.vue
View file @ b263c29c
......@@ -11,6 +11,7 @@
<q-tab
v-for="annotationTab in annotationTabs"
:key="annotationTab.key"
:class="{'disabled-tab': annotationTab.key === currentTab}"
:label="$t(annotationTab.collectionTitle)"
:name="annotationTab.key"
@click="activeTab(annotationTab.key, annotationTab.type)"
......@@ -111,8 +112,7 @@ export default {
key,
collectionTitle: key,
type,
}))
.filter((el) => this.annotations.find((x) => el.type.includes(x.body['x-content-type'])));
}));
},
annotationTabConfig() {
return this.config?.annotations?.tabs || {};
......@@ -196,10 +196,16 @@ export default {
},
},
mounted() {
this.currentTab = this.annotationTabs?.[0].key;
this.$root.$on('update-annotations', this.onContentUpdate);
this.$root.$on('update-annotation-loading', (isProcessing) => {
this.isProcessing = !!isProcessing;
});
this.$root.$on('manifest-changed', () => {
this.currentTab = this.annotationTabs?.[0].key;
});
},
methods: {
activeTab(key) {
......@@ -356,7 +362,6 @@ export default {
onContentUpdate(ids) {
try {
this.currentTab = this.annotationTabs[0].key;
this.contentIds = ids;
this.highlightActiveContent(this.filteredAnnotations);
......@@ -576,4 +581,8 @@ export default {
flex: 1;
flex-direction: column;
}
.disabled-tab {
pointer-events: none;
}
</style>
src/components/content.vue
View file @ b263c29c
<template>
<div class="item">
<q-tabs
v-model="activeTab"
v-model="activeTabContents"
dense
class="text-grey q-mb-sm"
active-color="$q.dark.isActive ? 'white' : 'accent'"
......@@ -79,6 +79,10 @@ export default {
type: Array,
default: () => [],
},
contentindex: {
type: Number,
default: () => 0,
},
fontsize: {
type: Number,
default: () => 16,
......@@ -87,6 +91,10 @@ export default {
type: Array,
default: () => [],
},
oncontentindexchange: {
type: Function,
default: () => null,
},
request: {
type: Function,
default: null,
......@@ -101,7 +109,7 @@ export default {
},
},
data: () => ({
activeTab: null,
activeTabContents: '',
content: '',
fontSizeLimits: {
min: 14,
......@@ -115,75 +123,93 @@ export default {
return Object.keys(support).length && support.url !== '';
},
activeTab() {
return this.contenturls[this.contentindex];
},
},
watch: {
fontsize() {
this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
},
async activeTab(url) {
this.$root.$emit('update-annotation-loading', true);
activeTabContents(url) {
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) {
await this.getSupport(this.manifests[0].support);
}
if (this.supportType) {
await this.getSupport(this.manifests[0].support);
}
const annotationPanelHidden = this.panels.find(
(x) => x.panel_label === 'Annotations' && !x.show,
);
const parser = new DOMParser();
let dom = parser.parseFromString(data, 'text/html');
if (!annotationPanelHidden) {
const spans = [
...dom.querySelectorAll('[data-target]:not([value=""])'),
];
const spanIds = [
...new Set(
spans.map((x) => x
.getAttribute('data-target')
.replace('_start', '')
.replace('_end', '')),
),
];
spanIds.forEach((selector) => {
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;
const annotationPanelHidden = this.panels.find(
(x) => x.panel_label === 'Annotations' && !x.show,
);
const parser = new DOMParser();
let dom = parser.parseFromString(data, 'text/html');
if (!annotationPanelHidden) {
const spans = [
...dom.querySelectorAll('[data-target]:not([value=""])'),
];
const spanIds = [
...new Set(
spans.map((x) => x
.getAttribute('data-target')
.replace('_start', '')
.replace('_end', '')),
),
];
spanIds.forEach((selector) => {
dom = this.replaceSelectorWithSpan(selector, dom);
});
return prev;
}, {});
await this.delay(200);
const dataTargets = [...dom.querySelectorAll('[id]')].map((x) => x.getAttribute('id'));
this.$root.$emit('update-annotations', displayedAnnotations);
this.$root.$emit('update-annotation-loading', false);
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);
this.$root.$emit('update-annotations', displayedAnnotations);
this.$root.$emit('update-annotation-loading', false);
},
immediate: true,
},
},
async created() {
this.fasSearchPlus = fasSearchPlus;
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() {
......@@ -194,6 +220,13 @@ export default {
this.getSupport(this.manifests[index].support);
}
});
const [contenturls] = this.contenturls[0];
this.$root.$on('manifest-changed', () => {
this.activeTabContents = contenturls;
this.oncontentindexchange(0);
});
},
methods: {
async delay(ms = 2500) {
......
src/index.template.html
View file @ b263c29c
......@@ -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": [
......
src/mixins/panels.js
View file @ b263c29c
......@@ -75,6 +75,10 @@ export default {
this.panels = newPanels;
});
this.$root.$on('manifest-changed', () => {
this.panels = [...this.panels].map((tab) => ({ ...tab, tab_model: 'tab0' }));
});
this.$root.$on('add-panel', () => {
const newPanel = {
id: uuidv4(),
......
src/views/mainview.vue
View file @ b263c29c
......@@ -93,6 +93,10 @@ export default {
type: Object,
default: () => {},
},
contentindex: {
type: Number,
default: () => 0,
},
contenttypes: {
type: Array,
default: () => [],
......@@ -125,6 +129,10 @@ export default {
type: Array,
default: () => [],
},
oncontentindexchange: {
type: Function,
default: () => null,
},
panels: {
type: Array,
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