Der Text scheint hier eine Lücke aufzuweisen. Zum einen fehlt das bei Kyrillregelmäßig auf die Junktur καὶ μάλα folgende Adverb, zum anderen vermisst man einen Ausdruck,von dem der Infinitiv παρατρέπεσθαι abhängen könnte. Agellio (1607)hat, um zumindest das zweiteDesiderat auszugleichen, ἀναγκαῖον vorgeschlagen. Schwartz schlägt, beide Mängel bedenkend,ὀρθῶς οὐ φάμεν vor. Die Übersetzung versucht, den unvollständigen Satz mit eigenen Ergänzungenin einen unmittelbaren Zusammenhang mit dem Nestoriuszitat, dessen Wortmaterial er enthält, zusetzen (vgl. oben CV166,III,5,2).
Inhalt: Kyrill unterzieht die Christologie seines GegnersNestorius einer groß angelegten Kritik. Zu diesem Zweck zitiert er zahlreiche ihm anstößigerscheinende Aussagen, die jener im Vorfeld getätigt hatte, und stellt diesen dann seineeigenen Ansichten gegenüber.
Literatur: Pusey (1881), S. 1–184.
",
+ "doctitle": "
Kyrills, des überaus heiligen Erzbischofs von Alexandria,
‚Gegen die Schmähungen des Nestorius‘
Fünfbändige Widerlegung oder die fünf Bücher des heiligen Kyrill
",
+ "libI-pre": "
libI-pre Foo bar bal Foooooo aweohjk j.
",
+ "libI-1": "
libI-1 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libI-2": "
libI-2 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libI-3": "
libI-3 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libI-4": "
libI-4 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libI-5": "
libI-5 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libI-6": "
libI-6 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libI-7": "
libI-7 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libI-8": "
libI-8 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libI-9": "
libI-9 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libI-10": "
libI-10 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-pre": "
libII-pre Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-1": "
libII-1 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-2": "
libII-2 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-3": "
libII-3 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-4": "
libII-4 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-5": "
libII-5 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-6": "
libII-6 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-7": "
libII-7 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-8": "
libII-8 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-9": "
libII-9 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-10": "
libII-10 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-11": "
libII-11 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-12": "
libII-12 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-13": "
libII-13 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libII-14": "
libII-14 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIII-pre": "
libIII-pre Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIII-1": "
libIII-1 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIII-2": "
libIII-2 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIII-3": "
libIII-3 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIII-4": "
libIII-4 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIII-5": "
libIII-5 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIII-6": "
libIII-6 Erinnert euch in vollem Umfang auch an das, was immer wieder von mir gesagt worden ist, der ich im Hinblick auf den Herrscher Christus die zweifachen Naturen unterscheide – nämlich durch die zweifache Natur, aber die einheitlicheWürde. Die Autorität der Naturen ist nämlich wegen der Verbindungeine, wobei die Naturen gänzlich in ihrereigentümlichen Ordnung verbleiben, die Würde jedoch, wie ich zuvor sagte, zu einer einheitlichen Autorität verbunden wird. Du bist vermutlich in jeder inscht vn guter Auffassungsgabe, weil dudich dazu entschlossen hast, der göttlich inspirierten Schrift zufolgen, die einen Herrn Jesus Christus nennt und nicht separat den aus der Nachkommenschaft Abrahams [Stam- menden] und den aus Gott, dem Vater,[gezeugten] Logos bestimmt. Daneben ist es aber auch nötig, Folgendeszu bedenken. Eine Sache ist nämlich die Gottheit, eine andere aber dieuns entsprechende Menschheit dem Prinzip nach, das den Naturen innewohnt. Durch einen Zusammenschluss aber, der auf einer wahrhaftenEinung basiert,[ergibt sich] aus beiden einChristus, wie ich immer wieder gesagt habe.Wenn allerdings die Hypostasen, wie du sagst, in zwei aufgeteilt sind undman sie als separat und für sich existierend betrachtet, wie kommt es[dann] zum Zusammenschluss zu einerPerson, wenn man nicht eben irgendwie sagt, dass ein Einzelnes einem Einzelnen zu eigen sei, wie zum Beispiel der dazugehörige Leib wohl als etwasder menschlichen Seele Eigenes betrachtet wird, obwohl er im Vergleichzu ihr von anderer Art ist? Seele und Leib sind wohl schließlich nichtdasselbe. Doch vielleicht wird jemand sagen: ‚Warum wird die heilige undverehrte Trinität in drei Hypostasen unterschieden, bringt abereine Natur der Gottheit hervor?‘ Weil, möchte ichsagen, die Identität im Hinblick auf das Wesen, die mit Notwendigkeit dem Unterschied der Hypostasenfolgt, den Geist der Gläubigen zu einer Natur der Gottheit hinaufführt. Weil aber im Falle des Immanuel die Gottheit imVergleich mit der Menschheit etwas anderes ist, wenn wir nicht sagen,dass der Leib auf Grundlage einer wahren Einung dem Logos zu eigengeworden ist, wie sollte [da] eine Person von beidenhervorgebracht werden, wenn uns jede der beiden Hypostasen Eigenes mit sich bringt unter der Annahme, dass sie separiert vorliege? Und wenn dasAngenommene dem nicht zu eigen geworden ist, der angenommen hat, wirdeine Verbindung, die einfach auf Grundlage eines Zusammenschlusseszustande kommt, der allein in Würde und Autorität begründet ist, nicht ausreichen, den einen und alleinigen Christus hervorzubringen, der in einer Person Gott und zugleich Mensch ist.Dann erst, erst in diesem Moment<fürchtest> du auch völlig zu Recht>, dich ‚von dem Glauben an ihn abzuwenden‘, auch wenn er dem Fleisch nach als ‚aus derNachkommenschaft Abra- hams stammend‘ aufgefasst wird.Wenn du aber, indem du sagst, dass es einen und ei- nen anderen gebe, und außerdem behauptest, dass man den Glauben demder Nach- kommenschaft Abrahams entstammenden entgegenbringen müsse,sollst du wissen, und zwar ganz gewiss,dass du den Vorwurf der Menschenverehrung auf dein eigenes Hauptausgießt, obwohl du es von dir zurückweist, und das durchaus berechtigt, als Menschenverehrer zu gelten.Da er aber überhaupt wenig von dem, was zu bedenken angemessen wäre, bedacht hat, verunglimpft erdas große Geheimnis der Frömmigkeit auch auf andere Weise und fügt unmittelbar an: Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque
",
+ "libIV-pre": "
libIV-pre Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIV-1": "
libIV-1 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIV-2": "
libIV-2 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIV-3": "
libIV-3 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIV-4": "
libIV-4 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIV-5": "
libIV-5 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIV-6": "
libIV-6 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
",
+ "libIV-7": "
libIV-6 Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae
"
+ }
+ }
+}
diff --git a/src/lib/data/content.js b/src/lib/data/content.js
new file mode 100644
index 0000000..ea93bfd
--- /dev/null
+++ b/src/lib/data/content.js
@@ -0,0 +1,14 @@
+// Import local JSON files
+export { textData } from './aco-text.json';
+export { notesData } from './aco-notes.json';
+
+// Get JSON from Web-API
+// import { api } from '$lib/constants/constants';
+
+// export const { textData } = fetch(`${api}/json/aco-text.json`).then((r) => {
+// return r.json();
+// });
+
+// export const { notesData } = fetch(`${api}/json/aco-notes.json`).then((r) => {
+// return r.json();
+// });
diff --git a/src/lib/functions/floatingApparatus/README.md b/src/lib/functions/floatingApparatus/README.md
new file mode 100644
index 0000000..12095bc
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/README.md
@@ -0,0 +1,11 @@
+# Comments on Conventions
+
+### Measuring Offsets and Overlaps
+
+- .offsetTop and .style.top are measured relative to the next _positioned_ parent. So make sure that this is the parent column.
+- .top is fixed at the reference height in the text while for the offset transform.translateY is used.
+- .offsetTop and .transform.translateY return a snapshot of a potentially moving element. Hence, they are unreliable together with css-transitions. As a workaround the offset is also stored in an additional attribute "instantTranslateY" which can be read from at any time.
+
+# Comments on Maintainance
+
+- Make sure to sync constants with +page.svelte
diff --git a/src/lib/functions/floatingApparatus/constants.js b/src/lib/functions/floatingApparatus/constants.js
new file mode 100644
index 0000000..aa82c71
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/constants.js
@@ -0,0 +1,2 @@
+export const ID_CONTAINER_TEXT = 'containerText';
+export const OFFSET_POPUP = -400; // in pixel
diff --git a/src/lib/functions/floatingApparatus/getInstantOffsetTop.js b/src/lib/functions/floatingApparatus/getInstantOffsetTop.js
new file mode 100644
index 0000000..fb6f6ad
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/getInstantOffsetTop.js
@@ -0,0 +1,20 @@
+import { getInstantTranslateY } from './getInstantTranslateY';
+
+export function getInstantOffsetTop(el, edge) {
+ if (!el) return null; // safety guard
+ switch (edge) {
+ case 'attop':
+ return el.offsetTop + getInstantTranslateY(el) || 0;
+ case 'atbottom':
+ const computedStyles = window.getComputedStyle(el);
+ return (
+ el.offsetTop +
+ getInstantTranslateY(el) +
+ el?.offsetHeight +
+ parseFloat(computedStyles.marginTop) +
+ parseFloat(computedStyles.marginBottom) || 0
+ );
+ default:
+ return null;
+ }
+}
diff --git a/src/lib/functions/floatingApparatus/getInstantTranslateY.js b/src/lib/functions/floatingApparatus/getInstantTranslateY.js
new file mode 100644
index 0000000..cbe6818
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/getInstantTranslateY.js
@@ -0,0 +1,3 @@
+export function getInstantTranslateY(el) {
+ return Number(el?.getAttribute('instantTranslateY')) || 0;
+}
diff --git a/src/lib/functions/floatingApparatus/getOffsetTop.js b/src/lib/functions/floatingApparatus/getOffsetTop.js
new file mode 100644
index 0000000..a56ff3c
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/getOffsetTop.js
@@ -0,0 +1,15 @@
+export function getOffsetTop(el, edge) {
+ if (!el) return null; // safety guard
+ switch (edge) {
+ case 'attop':
+ return el.offsetTop || 0;
+ case 'atbottom':
+ const computedStyles = window.getComputedStyle(el);
+ return (
+ el.offsetTop +
+ el?.offsetHeight +
+ parseFloat(computedStyles.marginTop) +
+ parseFloat(computedStyles.marginBottom) || 0
+ );
+ }
+}
diff --git a/src/lib/functions/floatingApparatus/handleMarkClick.js b/src/lib/functions/floatingApparatus/handleMarkClick.js
new file mode 100644
index 0000000..d2ba071
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/handleMarkClick.js
@@ -0,0 +1,34 @@
+import { selectMark } from './selectMark';
+import { unselectMarks } from './unselectMarks';
+import { moveNote } from './moveNote';
+import { showMultiMarkPopup } from './showMultiMarkPopup';
+
+export function handleMarkClick(ev, selectedNote, multiMarkPopupIds) {
+ // no mark clicked
+ if (!ev.target.classList.contains('mark')) {
+ multiMarkPopupIds.ids = [];
+ selectedNote.id = '';
+ unselectMarks();
+ return;
+ }
+
+ let ids = [];
+ try {
+ //!FIX
+ ids = JSON.parse(ev.target.dataset.ids);
+ } catch (error) {
+ ids = [ev.target.dataset.ids];
+ }
+
+ switch (ids.length) {
+ case 0:
+ return;
+ case 1:
+ selectMark(ids[0]);
+ moveNote(ids[0]);
+ selectedNote.id = ids[0];
+ break;
+ default:
+ showMultiMarkPopup(ids, multiMarkPopupIds, ev.target);
+ }
+}
diff --git a/src/lib/functions/floatingApparatus/handleNoteClick.js b/src/lib/functions/floatingApparatus/handleNoteClick.js
new file mode 100644
index 0000000..d043ffd
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/handleNoteClick.js
@@ -0,0 +1,7 @@
+import { selectMark } from './selectMark';
+import { moveNote } from './moveNote';
+
+export function handleNoteClick(id) {
+ selectMark(id);
+ moveNote(id);
+}
diff --git a/src/lib/functions/floatingApparatus/handlePopupClick.js b/src/lib/functions/floatingApparatus/handlePopupClick.js
new file mode 100644
index 0000000..1e9b6d1
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/handlePopupClick.js
@@ -0,0 +1,9 @@
+import { selectMark } from './selectMark';
+import { moveNote } from './moveNote';
+
+export function handlePopupClick(id, selectedNote, multiMarkPopupIds) {
+ selectMark(id);
+ moveNote(id);
+ multiMarkPopupIds.ids = [];
+ selectedNote.id = id;
+}
diff --git a/src/lib/functions/floatingApparatus/index.js b/src/lib/functions/floatingApparatus/index.js
new file mode 100644
index 0000000..b3180b7
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/index.js
@@ -0,0 +1,17 @@
+// Helpers for translating notes
+export { setTranslateY } from './setTranslateY';
+export { getInstantTranslateY } from './getInstantTranslateY';
+export { getOffsetTop } from './getOffsetTop';
+export { getInstantOffsetTop } from './getInstantOffsetTop';
+
+// Place, select, unselect and move notes
+export { placeNotes } from './placeNotes'; // original placement (do this onMount)
+export { selectMark } from './selectMark'; //
+export { moveNote } from './moveNote';
+export { unselectMarks } from './unselectMarks';
+
+// Handle interaction with notes, marks and popups
+export { handleNoteClick } from './handleNoteClick';
+export { handleMarkClick } from './handleMarkClick';
+export { handlePopupClick } from './handlePopupClick';
+export { showMultiMarkPopup } from './showMultiMarkPopup';
diff --git a/src/lib/functions/floatingApparatus/moveNote.js b/src/lib/functions/floatingApparatus/moveNote.js
new file mode 100644
index 0000000..9a582da
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/moveNote.js
@@ -0,0 +1,46 @@
+import { setTranslateY } from './setTranslateY';
+import { getInstantTranslateY } from './getInstantTranslateY';
+import { getInstantOffsetTop } from './getInstantOffsetTop';
+import { ID_CONTAINER_TEXT } from './constants';
+
+export function moveNote(id) {
+ const elNoteRef = document.querySelector(`.note-start[data-id=${id}]`);
+ const elNoteBox = document.querySelector(`.notebox[data-id=${id}]`);
+ const elContainerText = document.querySelector(`#${ID_CONTAINER_TEXT}`);
+ const elContainer = document.querySelector('#scrollContainer');
+
+ // Move entire column (via marginTop)
+ // const elContainerNotes = document.querySelector('#containerNotes');
+ // elContainerNotes.style.marginTop = `${offset}px`;
+
+ // Move noteboxe to reference position (i.e. reset translateY)
+ setTranslateY(elNoteBox, 0);
+
+ // Detect Overlap and move other boxes up or down until there is no overlap
+ let el = elNoteBox;
+ let elPrev = elNoteBox?.previousElementSibling;
+ let overlapTop = getInstantOffsetTop(elPrev, 'atbottom') - getInstantOffsetTop(el, 'attop');
+ while (overlapTop > 0 && elPrev) {
+ setTranslateY(elPrev, getInstantTranslateY(elPrev) - overlapTop); // move up
+ el = elPrev;
+ elPrev = el.previousElementSibling;
+ overlapTop = getInstantOffsetTop(elPrev, 'atbottom') - getInstantOffsetTop(el, 'attop');
+ }
+
+ el = elNoteBox;
+ let elNext = elNoteBox?.nextElementSibling;
+ let overlapBottom = getInstantOffsetTop(el, 'atbottom') - getInstantOffsetTop(elNext, 'attop');
+ while (overlapBottom > 0 && elNext) {
+ setTranslateY(elNext, getInstantTranslateY(elNext) + overlapBottom); // move down
+ el = elNext;
+ elNext = el.nextElementSibling;
+ overlapBottom = getInstantOffsetTop(el, 'atbottom') - getInstantOffsetTop(elNext, 'attop');
+ }
+
+ // Scroll to note
+ elContainer.scrollTo({
+ // Important: offsetTop is measured relative to the next *positioned* parent!
+ top: elContainerText.offsetTop + elNoteRef.offsetTop - window.innerHeight * 0.3,
+ behavior: 'smooth'
+ });
+}
diff --git a/src/lib/functions/floatingApparatus/placeNotes.js b/src/lib/functions/floatingApparatus/placeNotes.js
new file mode 100644
index 0000000..6d5e90a
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/placeNotes.js
@@ -0,0 +1,24 @@
+import { getOffsetTop } from './getOffsetTop';
+import { setTranslateY } from './setTranslateY';
+
+export function placeNotes(ids) {
+ let offsetSum = 0;
+ ids.forEach((id) => {
+ const elNoteBox = document.querySelector(`.notebox[data-id=${id}]`);
+ const elNoteRef = document.querySelector(`.note-start[data-id=${id}]`);
+ const offsetRef = elNoteRef?.offsetTop;
+
+ // Move to reference height
+ elNoteBox.style.top = `${offsetRef}px`;
+
+ // Adjust visual height if overlap with previous notebox
+ const elNoteBoxPrev = elNoteBox?.previousElementSibling;
+ if (elNoteBoxPrev) {
+ const overlapTop = getOffsetTop(elNoteBoxPrev, 'atbottom') - offsetRef; // overlap if positive
+ offsetSum += Math.max(0, overlapTop);
+ if (overlapTop > 0) {
+ setTranslateY(elNoteBox, offsetSum);
+ }
+ }
+ });
+}
diff --git a/src/lib/functions/floatingApparatus/selectMark.js b/src/lib/functions/floatingApparatus/selectMark.js
new file mode 100644
index 0000000..682b40f
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/selectMark.js
@@ -0,0 +1,10 @@
+import { unselectMarks } from './unselectMarks';
+
+export function selectMark(id) {
+ // Remove old highlights
+ unselectMarks();
+ const elSpan = document.querySelectorAll(`span.mark[data-ids*=${id}]`);
+ elSpan.forEach((el) => {
+ el.classList.add('highlighted');
+ });
+}
diff --git a/src/lib/functions/floatingApparatus/setTranslateY.js b/src/lib/functions/floatingApparatus/setTranslateY.js
new file mode 100644
index 0000000..4fd5e3f
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/setTranslateY.js
@@ -0,0 +1,5 @@
+export function setTranslateY(el, value) {
+ if (!el) return; // safety guard
+ el.style.transform = `translateY(${value}px)`;
+ el.setAttribute('instantTranslateY', value);
+}
diff --git a/src/lib/functions/floatingApparatus/showMultiMarkPopup.js b/src/lib/functions/floatingApparatus/showMultiMarkPopup.js
new file mode 100644
index 0000000..ae55cf0
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/showMultiMarkPopup.js
@@ -0,0 +1,21 @@
+import { ID_CONTAINER_TEXT, OFFSET_POPUP } from './constants';
+import { tick } from 'svelte';
+
+export function showMultiMarkPopup(ids, multiMarkPopupIds, elMark) {
+ // Feed ids to state, which will trigger popup-component
+ multiMarkPopupIds.ids = ids;
+
+ // Make sure that popup exists
+ tick().then(() => {
+ const elPopup = document.querySelector('.multimark-popup');
+ const elContainer = document.querySelector(`#${ID_CONTAINER_TEXT}`);
+ const rectMark = elMark.getBoundingClientRect();
+ const rectContainer = elContainer.getBoundingClientRect();
+
+ //! Replace this with propper Skeleton Popover Component
+ elPopup.style.display = 'none';
+ elPopup.style.top = `${rectMark.top - rectContainer.top + OFFSET_POPUP}px`;
+ elPopup.style.left = `${rectMark.left + window.scrollX}px`;
+ elPopup.style.display = 'block';
+ });
+}
diff --git a/src/lib/functions/floatingApparatus/unselectMarks.js b/src/lib/functions/floatingApparatus/unselectMarks.js
new file mode 100644
index 0000000..48842cd
--- /dev/null
+++ b/src/lib/functions/floatingApparatus/unselectMarks.js
@@ -0,0 +1,6 @@
+export function unselectMarks() {
+ const elSpan = document.querySelectorAll(`span.mark`);
+ elSpan.forEach((el) => {
+ el.classList.remove('highlighted');
+ });
+}
diff --git a/src/lib/functions/protoHTMLconversion/extractNoteIds.js b/src/lib/functions/protoHTMLconversion/extractNoteIds.js
new file mode 100644
index 0000000..1e0bc78
--- /dev/null
+++ b/src/lib/functions/protoHTMLconversion/extractNoteIds.js
@@ -0,0 +1,14 @@
+export function extractNoteIds(text) {
+ let ids = [];
+ let match;
+
+ const regex = /<\/span>/g;
+ while ((match = regex.exec(text)) !== null) {
+ // This is necessary to avoid infinite loops with zero-width matches
+ if (match.index === regex.lastIndex) {
+ regex.lastIndex++;
+ }
+ ids.push(match[1]);
+ }
+ return ids;
+}
diff --git a/src/lib/functions/protoHTMLconversion/generateLineNumbers.js b/src/lib/functions/protoHTMLconversion/generateLineNumbers.js
new file mode 100644
index 0000000..1319810
--- /dev/null
+++ b/src/lib/functions/protoHTMLconversion/generateLineNumbers.js
@@ -0,0 +1,12 @@
+export function generateLineNumbers(text) {
+ // Match a-line, p and br tags
+ const matches = text.match(/(<\/a>)|(<\/?p>)|()/g);
+ const linesText = matches ? matches.join('') : '';
+
+ // Insert line-number as text at every 5th line
+ const numbersText = linesText.replace(/<\/a>/g, (match, lineNumber) => {
+ return `${!(lineNumber % 5) ? lineNumber : "00 "}`;
+ });
+
+ return numbersText;
+}
diff --git a/src/lib/functions/protoHTMLconversion/generateMainText.js b/src/lib/functions/protoHTMLconversion/generateMainText.js
new file mode 100644
index 0000000..e6b7ef8
--- /dev/null
+++ b/src/lib/functions/protoHTMLconversion/generateMainText.js
@@ -0,0 +1,55 @@
+function insertNoteSpans(text) {
+ let openIds = [];
+ let result = '';
+ let lastIndex = 0;
+
+ text.replace(
+ /<\/span>|<\/span>/g,
+ (match, startId, endId, offset) => {
+ // Capture text before this match
+ let precedingText = text.slice(lastIndex, offset);
+ if (precedingText.trim()) {
+ let idsAttribute = JSON.stringify(openIds);
+ if (openIds.length > 0) {
+ let multiIdsClass = openIds.length > 1 ? 'multiple-ids' : '';
+ let myclass = ['mark', multiIdsClass].filter(Boolean).join(' ');
+ result += `${precedingText}`;
+ } else {
+ result += precedingText; // Preserve text without wrapping
+ }
+ }
+
+ if (startId) {
+ // Handle note-start tag
+ openIds.push(startId);
+ result += ``;
+ } else if (endId) {
+ // Handle note-end tag
+ result += ``;
+ openIds = openIds.filter((id) => id !== endId); // Remove closed ID
+ }
+
+ lastIndex = offset + match.length;
+ }
+ );
+
+ // Append remaining text after last match
+ let remainingText = text.slice(lastIndex);
+ if (remainingText.trim()) {
+ result += remainingText;
+ }
+
+ return result;
+}
+
+export function generateMainText(text) {
+ // Remove line numbers
+ text = text.replace(/]*[line|page]="[^"]*"[^>]*><\/a>/g, '');
+ // Insert spans
+ text = insertNoteSpans(text);
+ // Transform lib-number
+ text = text.replace(/<\/a>/g, (match, libNumber) => {
+ return `Buch ${libNumber}`;
+ });
+ return text.trim();
+}
diff --git a/src/lib/functions/protoHTMLconversion/generatePageNumbers.js b/src/lib/functions/protoHTMLconversion/generatePageNumbers.js
new file mode 100644
index 0000000..5c01e47
--- /dev/null
+++ b/src/lib/functions/protoHTMLconversion/generatePageNumbers.js
@@ -0,0 +1,11 @@
+export function generatePageNumbers(text) {
+ // Match a-page, p and br tags
+ const matches = text.match(/(<\/a>)|()/g);
+ const pageText = matches ? matches.join('') : '';
+
+ // Insert page-number as text and add class
+ const numbersText = pageText.replace(/<\/a>/g, (match, pageNumber) => {
+ return `Seite ${pageNumber}`;
+ });
+ return numbersText;
+}
diff --git a/src/lib/functions/protoHTMLconversion/index.js b/src/lib/functions/protoHTMLconversion/index.js
new file mode 100644
index 0000000..c10ee19
--- /dev/null
+++ b/src/lib/functions/protoHTMLconversion/index.js
@@ -0,0 +1,10 @@
+// Generate html for mainText, lineNumbers and pageNumbers
+export { generateMainText } from './generateMainText';
+export { generateLineNumbers } from './generateLineNumbers';
+export { generatePageNumbers } from './generatePageNumbers';
+
+// Extract NoteIds
+// This will extract all referenced data-ids for a text.
+// This is useful if text.json and notes.json don't match or don't follow the same structure.
+// However, this could be dropped completely, if the json files match.
+export { extractNoteIds } from './extractNoteIds';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index eb82088..df1b265 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -43,6 +43,6 @@
>
-