Merge branch 'release/v.1.0.6'

content/help/help.html → content/help/help_de.html

@@ -11,7 +11,7 @@
 	<p>Sollen alle Zitate im gewählten Interepretationstext hevorgehoben werden, so kann dies in den Einstellungen aktiviert werden. Die Einstellungen sind über das Zahnrad-Icon oben rechts erreichbar. Ist diese Einstellung aktiviert, so kann im Interpretationstext ein beliebiges Zitat ausgewählt werden, was dann dazu führt, dass auch im literarischen Werk automatisch die dazugehörige Stelle angezeigt wird.</p>
 
 	<h3>Technischer Hintergrund</h3>
-	<img id="img_segmentation" src="img/segmentation.svg" alt="Segmentation">
+	<img id="img_segmentation" src="img/segmentation_de.svg" alt="Segmentation">
 	<p>Die oben stehende Abbildung zeigt den Ansatz zur Findung von Schlüsselstellen durch Zusammenfassen überlappender Zitate.</p>
 
 	<p><a target="_blank" href="https://doi.org/10.5281/zenodo.4737131">Ein Poster zum Verfahren</a> gibt einen Einblick in den technischen Hintergrund.</p>

content/help/help_en.html

+<div id="help_container">
+	<h3>Introduction</h3>
+	<p>The website serves to visualize and explore literal quotations from literary texts in literary interpretation texts. Currently, only quotations with a minimum length of 5 words are used.<br>
+		Broadly speaking, the website consists of three parts, which are described below.
+	<p>On the left side is a heat map that gives an overall impression of the literary work. The darker a passage is shown, the more frequently it was cited.</p>
+	<p>To the right is the literary text. The font size indicates how often a passage is cited. The font color (gray scale) indicates how many interpretation texts cite a passage.
+		For visualization, it is necessary that overlapping citations are combined into larger passages (see section <i>Technical Background</i>).</p>
+	<p>For a more detailed examination of a passage, it can be selected. Then, at the bottom right, next to the literary text, a list of interpretation texts is displayed that cite part or all of the selected passage. Here, in turn, a concrete quotation can now be selected, which leads to the corresponding interpretation text being displayed at the top right. In the literary work as well as in the interpretation text, the selected quotation is highlighted in color.</p>
+
+	<h3>Settings</h3>
+	<p>If all quotations in the selected interpretation text should be highlighted, this can be activated in the settings. The settings can be reached via the gear icon in the upper right corner. If this setting is activated, any citation can be selected in the interpretation text, which then results in the corresponding passage being automatically displayed in the literary work as well.</p>
+
+	<h3>Technical Background</h3>
+	<img id="img_segmentation" src="img/segmentation_en.svg" alt="Segmentation">
+	<p>The figure above shows the approach to finding key passages by grouping overlapping citations.</p>
+
+	<p><a target="_blank" href="https://doi.org/10.5281/zenodo.4737131">A poster on the process</a> provides insight into the technical background.</p>
+</div>
\ No newline at end of file

content/help/references_en.html

+<div id="references_container">
+    <a target="_blank" href="https://www.hu-berlin.de"><img id="img_hu_logo" src="img/hu_logo.svg" alt="HU Berlin Logo"></a>
+
+    <h3>References</h3>
+    <p>The website and underlying algorithms were created as part of the project
+        <a target="_blank" href="https://www.projekte.hu-berlin.de/de/schluesselstellen">What Matters? Key passages in literary works</a>
+        in the priority program
+        <a target="_blank" href="https://dfg-spp-cls.github.io">Computational Literary Studies (SPP 2207)</a>.
+    </p>
+
+    <p><a target="_blank" href="https://scm.cms.hu-berlin.de/schluesselstellen/lotte">The underlying algorithm</a> is inspired by
+        <a target="_blank" href="https://dickgrune.com/Programs/similarity_tester/">sim_text</a> and
+        <a target="_blank" href="https://people.f4.htw-berlin.de/~weberwu/simtexter/522789_Sofia-Kalaidopoulou_bachelor-thesis.pdf">similarity texter</a>.
+        <a target="_blank" href="https://scm.cms.hu-berlin.de/schluesselstellen/lottevizex">A white-label version of the website</a> is also available.
+    </p>
+
+    <a target="_blank" href="https://www.dfg.de"><img id="img_dfg_logo" src="img/dfg_logo.svg" alt="DFG Logo"></a>
+
+    <h3>Contact</h3>
+    <p><a target="_blank" href="https://www.ibi.hu-berlin.de/de/ueber-uns/personen/arnold/">Frederik Arnold</a></p>
+</div>
\ No newline at end of file

js/js.js

@@ -949,8 +949,14 @@ async function loadImportantSegmentLinks() {
     return loadJson(path);
 }
 
-async function loadHelpDialog() {
-    let helpContent = await loadFile('content/help/help.html');
+async function loadHelpDialog(lang) {
+    let help_file = 'help_de.html';
+
+    if (lang === 'en') {
+        help_file = 'help_en.html';
+    }
+
+    let helpContent = await loadFile(`content/help/${help_file}`);
     helpDialogContent.innerText = '';
     helpDialogContent.insertAdjacentHTML('afterbegin', helpContent);
 }
@@ -1020,13 +1026,23 @@ function prepareSegmentElements() {
     }
 }
 
-async function showInitialScreen() {
+async function showInitialScreen(lang) {
+    //TODO: add real localization
+
+    let welcomeString = 'Herzlich Willkommen';
+    let chooseWorkString = 'Wähle ein Werk:';
+
+    if (lang === 'en') {
+        welcomeString = 'Welcome';
+        chooseWorkString = 'Select work:'
+    }
+
     let titleElement = document.createElement('h2');
-    titleElement.appendChild(document.createTextNode('Herzlich Willkommen'));
+    titleElement.appendChild(document.createTextNode(welcomeString));
     sourceTextContainer.appendChild(titleElement);
 
     let pElement = document.createElement('h3');
-    pElement.appendChild(document.createTextNode('Wähle ein Werk:'));
+    pElement.appendChild(document.createTextNode(chooseWorkString));
     sourceTextContainer.appendChild(pElement);
 
     let ulElement = document.createElement('ul');
@@ -1038,17 +1054,25 @@ async function showInitialScreen() {
         }
         let liElement = document.createElement('li');
         let aElement = document.createElement('a');
-        aElement.setAttribute('href', 'index.html?work=' + collection);
+        aElement.setAttribute('href', `index.html?work=${collection}&lang=${lang}`);
         aElement.appendChild(document.createTextNode(info.author + ': ' + info.title));
         liElement.appendChild(aElement);
         ulElement.appendChild(liElement);
     }
     sourceTextContainer.appendChild(ulElement);
 
-    let helpContent = await loadFile('content/help/help.html');
+    let help_file = 'help_de.html';
+    let references_file = 'references_de.html';
+
+    if (lang === 'en') {
+        help_file = 'help_en.html';
+        references_file = 'references_en.html';
+    }
+
+    let helpContent = await loadFile(`content/help/${help_file}`);
     sourceTextContainer.insertAdjacentHTML('beforeend', helpContent);
 
-    let referenceContent = await loadFile('content/help/references.html');
+    let referenceContent = await loadFile(`content/help/${references_file}`);
     targetTextContainer.insertAdjacentHTML('afterbegin', referenceContent);
 }
 
@@ -1116,11 +1140,11 @@ function closeHelp() {
     helpDialog.style.display = "none";
 }
 
-async function populateMenu() {
+async function populateMenu(lang) {
     menuList.innerText = '';
     let liHomeElement = document.createElement('li');
     let aHomeElement = document.createElement('a');
-    aHomeElement.setAttribute('href', 'index.html');
+    aHomeElement.setAttribute('href', `index.html?lang=${lang}`);
     aHomeElement.appendChild(document.createTextNode('Home'));
     liHomeElement.appendChild(aHomeElement);
     menuList.appendChild(liHomeElement);
@@ -1132,7 +1156,7 @@ async function populateMenu() {
         }
         let liElement = document.createElement('li');
         let aElement = document.createElement('a');
-        aElement.setAttribute('href', 'index.html?work=' + collection);
+        aElement.setAttribute('href', `index.html?work=${collection}&lang=${lang}`);
         aElement.appendChild(document.createTextNode(info.author + ': ' + info.title));
         liElement.appendChild(aElement);
         menuList.appendChild(liElement);
@@ -1155,6 +1179,16 @@ window.onload = async function() {
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
 
+    let lang = 'de'
+
+    if(urlParams.has('lang')) {
+        lang = urlParams.get('lang');
+
+        if (lang !== 'en') {
+            lang = 'de'
+        }
+    }
+
     if (urlParams.has('work')) {
         selectedCollection = urlParams.get('work');
 
@@ -1172,10 +1206,10 @@ window.onload = async function() {
         displayStatistics();
         loadPageMap();
     } else {
-        await showInitialScreen();
+        await showInitialScreen(lang);
     }
 
-    await populateMenu();
-    await loadHelpDialog();
+    await populateMenu(lang);
+    await loadHelpDialog(lang);
     loadSettings();
 };