exchange deprecated jquery template module with jsRender template

gemeinsamforschen/src/main/webapp/annotation/create-unstructured-annotation.jsp

@@ -38,6 +38,9 @@
     <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
     <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
 
+    <!-- jsrender -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.2/jsrender.js"></script>
+
 
 </head>
 
@@ -62,22 +65,21 @@
                     <div class="infobox dossier">
                         <p>Ordne allen Textteilen passende Kategorien zu. Markiere den Text, klicke auf die rechte Mousetaste und wähle die passende Kategorie.</p>
 
-                    </div>
-                    <div id="missingAnnotation" class="alert alert-warning"></div>
-
-                        <ol id="annotations">
+            </div>
+            <div id="missingAnnotation" class="alert alert-warning"></div>
+            <ol id="annotations">
+            <script id="annotationTemplate" type="text/x-jsrender">
 
-                        </ol>
-                        <script id="annotationTemplate" type="text/x-jQuery-tmpl">
-                        <li class="spacing">
-                        <div id="${annotationType}" class="category-card not-added">
-                            <p>${annotationType}</p>
+                {{for categories}}
+                    <li class="spacing">
+                        <div id="{{>name}}" class="category-card not-added">
+                            <p>{{>name}}</p>
                         </div>
                     </li>
-
-                        </script>
-
-                </div>
+                {{/for}}
+            </script>
+            </ol>
+        </div>
 
         <div class="col span_chat">
             <chat:chatWindow orientation="right" scope="project"/>

gemeinsamforschen/src/main/webapp/annotation/js/unstructuredAnnotation.js

@@ -74,6 +74,7 @@ $(document).ready(function () {
  * Handel the category selection
  *
  * @param category The chosen category
+ * @param color
  * @param startCharacter The start character of the selected range
  * @param endCharacter The end character of the selected range
  */
@@ -81,7 +82,6 @@ function handleCategorySelection(category, color, startCharacter, endCharacter)
     // if highlighting is possible
     // TODO: reimplement isAlreadyHighlighted for quillJs
     if (!isAlreadyHighlighted(startCharacter, endCharacter)) {
-        // TODO: change to quill subject
         // TODO: add status bar switch if text is annotated
         // TODO: add save for backend
         // TODO: add reload of saved annotations after site reload
@@ -98,23 +98,6 @@ function handleCategorySelection(category, color, startCharacter, endCharacter)
 
 }
 
-/**
- * Get the text value of the selected text
- *
- * @returns {string} The text
- */
-function getSelectedText() {
-    if (window.getSelection) {
-        return window.getSelection().toString();
-    }
-    else if (document.getSelection) {
-        return document.getSelection();
-    }
-    else if (document.selection) {
-        return document.selection.createRange().text;
-    }
-}
-
 /**
  * Check if the selected range is already highlighted
  *
@@ -140,27 +123,6 @@ function isAlreadyHighlighted(startCharacter, endCharacter) {
     return isHighlighted;
 }
 
-/**
- * Iterate over all data arrays and calculate the offset for a given start character
- *
- * @param startCharacter The given start character
- * @returns {number} The offset
- */
-function calculateExtraOffset(startCharacter) {
-    let extraOffset = 0;
-    $('#annotations').find('.category-card').each(function () {
-        let array = $(this).data('array');
-        if (array != null) {
-            for (let i = 0; i < array.length; i++) {
-                if (array[i].end <= startCharacter) {
-                    extraOffset += 22 + $(this).attr('id').length;
-                }
-            }
-        }
-    });
-    return extraOffset;
-}
-
 /**
  * Save start and end character to the data array of a category
  *
@@ -239,7 +201,7 @@ function saveButtonHandler() {
 
                 // send the post request to the back-end and save promise
                 promises.push(createSubmissionPart(submissionPartPostRequest, function (response) {
-                    console.log("send " + response.category + "'s post request to back-end")
+                    console.log(`send ${response.category} 's post request to back-end`);
                 }));
                 categoriesSent.push(category);
             }
@@ -277,6 +239,7 @@ function finalizeDossier(submissionId) {
  * Handle the category click and start the saving event
  *
  * @param key The selected category
+ * @param color
  */
 function handleCategoryClick(key, color) {
     let selection = quill.getSelection();
@@ -287,10 +250,10 @@ function handleCategoryClick(key, color) {
 }
 
 function buildAnnotationList() {
-    let categories = ["TITEL", "RECHERCHE", "LITERATURVERZEICHNIS", "FORSCHUNGSFRAGE", "UNTERSUCHUNGSKONZEPT",
-        "METHODIK", "DURCHFUEHRUNG", "AUSWERTUNG"];
-    for (let i in categories) {
-        let tmplObject = {annotationType: categories[i].toLowerCase()};
-        $('#annotationTemplate').tmpl(tmplObject).appendTo('#annotations');
-    }
+    let data = {categories: [{name: "TITEL"}, {name: "RECHERCHE"}, {name: "LITERATURVERZEICHNIS"}, {name: "FORSCHUNGSFRAGE"}, {name: "UNTERSUCHUNGSKONZEPT"},
+            {name: "METHODIK"}, {name: "DURCHFUEHRUNG"}, {name: "AUSWERTUNG"}]};
+
+    let tmpl = $.templates("#annotationTemplate");
+    let html = tmpl.render(data);
+    $("#annotations").html(html);
 }