Commit 27741dcb authored by dindigala's avatar dindigala
Browse files

Merge branch 'issue/nested-motif-refactor' into feat/text-hover

parents c70e5f76 3c9bec0e
......@@ -233,6 +233,17 @@ export default {
addIcon(element, annotation) {
const contentType = annotation.body['x-content-type'];
let foundSvg = false;
[...element.children].forEach((el) => {
if (el.nodeName === 'svg' && el.getAttribute('data-annotation-icon')) {
foundSvg = true;
}
});
if (foundSvg) {
return;
}
try {
const svg = this.createSVG(this.getIconName(contentType));
svg.setAttribute(
......@@ -429,25 +440,6 @@ export default {
<style lang="scss">
/* not in scope to style the text */
.annotation {
background-color: $grey-4;
border-bottom: 1px solid;
/**
* adding a linting exception here,
* because 1px is invalid, but needed here
* adding a global rule for this would introduce unnecessary error proneness
*/
/* stylelint-disable */
margin: 0 1px;
padding: 1px 1px 2px 1px;
/* stylelint-enable */
white-space: nowrap;
@media (prefers-color-scheme: dark) {
background-color: $grey-9;
}
}
.annotation-disabled {
border-bottom: 0;
padding-bottom: inherit;
......
......@@ -34,7 +34,7 @@
>
<a
:class="$q.dark.isActive ? 'text-dark' : 'text-white'"
:href="`${redirectUrl}?searchTerm=${searchTerm}`"
:href="`${redirectUrl}search.html?searchTerm=${searchTerm}`"
class="header-links"
>
<q-icon
......
......@@ -11,10 +11,9 @@
<q-tab
v-for="(contenturl, i) in contenturls"
:key="`content${i}`"
:name="contenturl"
:class="contenturls.length == 1 && 'default-cursor'"
:disable="contenturls.length == 1"
:class="{'disabled-tab': contenturl === activeTab}"
:label="$t(contenttypes[i])"
:name="contenturl"
/>
</q-tabs>
......@@ -139,7 +138,7 @@ export default {
let dom = parser.parseFromString(data, 'text/html');
if (!annotationPanelHidden) {
const spans = [
...dom.querySelectorAll('span[data-target]:not([value=""])'),
...dom.querySelectorAll('[data-target]:not([value=""])'),
];
const spanIds = [
......@@ -279,4 +278,8 @@ export default {
overflow: auto;
padding: 8px;
}
.disabled-tab {
pointer-events: none;
}
</style>
......@@ -5,10 +5,11 @@
:class="$q.dark.isActive ? 'bg-white' : 'bg-accent'"
>
<BreadCrumbNavigation
v-if="$route.query.source==='external'"
v-if="$route.query.source === 'external'"
:config="config"
/>
</div>
<div class="header__wrap">
<q-toolbar v-if="config['header_section'].titles">
<TitleBar
......@@ -30,10 +31,10 @@
<q-toolbar class="q-pb-sm">
<Navbar
v-if="config['header_section'].navigation"
:default-view="defaultView"
:itemurls="itemurls"
:labels="config.labels"
:manifests="manifests"
:default-view="defaultView"
/>
<q-space />
......@@ -59,8 +60,8 @@
</template>
<script>
import Navbar from '@/components/navbar.vue';
import BreadCrumbNavigation from '@/components/breadcrumbnavigation.vue';
import Navbar from '@/components/navbar.vue';
import TitleBar from '@/components/titlebar.vue';
import TogglePanels from '@/components/togglebar/togglePanels.vue';
import Tools from '@/components/tools.vue';
......@@ -68,17 +69,13 @@ import Tools from '@/components/tools.vue';
export default {
name: 'Header',
components: {
BreadCrumbNavigation,
Navbar,
TitleBar,
TogglePanels,
BreadCrumbNavigation,
Tools,
},
props: {
defaultView: {
type: Function,
default: () => {},
},
collectiontitle: {
type: String,
default: () => '',
......@@ -87,6 +84,10 @@ export default {
type: Object,
default: () => {},
},
defaultView: {
type: Function,
default: () => {},
},
imageurl: {
type: String,
default: () => '',
......
<template>
<div>
<h1 class="text-h5 text-bold text-uppercase q-mb-none q-mt-xs">
{{ ahiqar ? $t('cTitle') : collectiontitle }}
<h1
v-if="collectiontitle"
class="text-h5 text-bold text-uppercase q-mb-none q-mt-xs"
>
{{ collectiontitle }}
</h1>
<h2 class="text-h6 text-bold text-uppercase q-mt-none q-mb-none">
<span>{{ manifesttitle }}</span>
<q-icon
class="q-pb-xs q-pl-sm q-pr-sm"
size="xs"
:color="$q.dark.isActive ? 'white' : 'accent'"
:name="fasChevronRight"
/>
<span>{{ $t('Sheet') }} {{ item.n }}</span>
</h2>
</div>
......@@ -37,7 +43,6 @@ export default {
},
data() {
return {
ahiqar: true,
sequenceindex: 0,
};
},
......
......@@ -7,7 +7,6 @@ export default {
colorScheme: 'Farbschema ändern',
Contents: 'Inhalt',
contentsMetadata: 'Inhalt & Metadaten',
cTitle: 'Die Geschichte und Redewendungen von Ahikar dem Weisen',
'Current location': 'Aktueller Standort',
'Date of creation': 'Erstelldatum',
Decrease: 'Verkleinern',
......
......@@ -7,7 +7,6 @@ export default {
colorScheme: 'Change color',
Contents: 'Contents',
contentsMetadata: 'Contents & Metadata',
cTitle: 'The Story and Proverbs of Ahiqar the Wise',
'Current location': 'Current location',
'Date of creation': 'Date of creation',
Decrease: 'Decrease',
......
......@@ -31,7 +31,7 @@
-->
<script id="tido-config" type="application/json">
{
"entrypoint": "https://subugoe.pages.gwdg.de/emo/backend/sampledata/collection.json",
"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/syriac/collection.json",
"annotations": {
"show": true,
"types": [
......
......@@ -3,17 +3,23 @@ export default {
getAllElementsFromSelector(selector, arr = []) {
const el = document.getElementById(selector);
if (el) {
arr.push(el);
// https://www.geeksforgeeks.org/queue-data-structure/
const queue = [];
[...el.children].forEach((child) => {
arr.push(child);
});
queue.push(el);
while (queue.length) {
const popped = queue.pop();
arr.push(popped);
[...popped.children].forEach((child) => {
queue.push(child);
});
}
return arr;
}
return [...document.querySelectorAll(`.${selector}`)];
},
getElementById(id) {
if (!id) {
return null;
......@@ -81,8 +87,8 @@ export default {
},
replaceSelectorWithSpan(selector, root) {
const start = root.querySelector(`span[data-target="${selector}_start"]`);
const end = root.querySelector(`span[data-target="${selector}_end"]`);
const start = root.querySelector(`[data-target="${selector}_start"]`);
const end = root.querySelector(`[data-target="${selector}_end"]`);
let started = false;
let ended = false;
......@@ -90,28 +96,29 @@ export default {
function replaceRecursive(element) {
if (!element.childNodes) return;
[...element.childNodes].forEach((c) => {
if (c === start) started = true;
if (c === end) ended = true;
[...element.childNodes].forEach((childNode) => {
if (childNode === start) started = true;
if (childNode === end) ended = true;
if (ended) return;
if (c.nodeName === 'SPAN' && c.getAttribute('data-annotation') && started) {
c.classList.add(selector);
if (childNode.nodeName === 'SPAN' && childNode.getAttribute('data-annotation') && started) {
childNode.classList.add(selector);
}
if (c.nodeName === '#text') {
if (childNode.nodeName === '#text') {
if (started) {
if (c.textContent && c.textContent.trim()) {
const s = document.createElement('span');
s.setAttribute('class', selector);
s.setAttribute('data-annotation', true);
s.innerHTML = c.textContent;
c.replaceWith(s);
if (childNode.textContent && childNode.textContent.trim()) {
const span = document.createElement('span');
span.setAttribute('class', selector);
span.setAttribute('data-annotation', true);
span.innerHTML = childNode.textContent;
childNode.replaceWith(span);
}
}
} else {
replaceRecursive(c);
replaceRecursive(childNode);
}
});
}
......@@ -183,8 +190,9 @@ export default {
stripSelector(annotation) {
return `.${annotation.target.selector.startSelector.value
.replace("span[data-target='", '')
.replace("_start']", '')
.replace("_end']", '')}`;
.replace("'", '')
.replace('_start]', '')
.replace('_end]', '')}`;
},
stripTargetId(annotation, removeDot = true) {
......@@ -218,28 +226,6 @@ export default {
));
},
updateNestedMotifToggle(id, annotationClassOperation) {
const element = this.getElementById(id);
if (!element) {
return;
}
this.updateTextContentClass(
element,
annotationClassOperation,
'annotation-disabled',
);
const nextId = element.getAttribute('data-next');
if (!nextId) {
return;
}
this.updateNestedMotifToggle(nextId, annotationClassOperation);
},
updateTextContentClass(element, task = 'add', ...className) {
if (!element) {
return;
......
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