From 65fcc977f0278c8f5f8331f6ba85c1a8d33863e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sven=20K=C3=A4stle?= <sven.kaestle@gmx.de>
Date: Mon, 13 Aug 2018 10:37:25 +0200
Subject: [PATCH] feat: Implement client-side REST api and add simple
highlighting of text
---
.../assets/css/unstructured-annotation.css | 20 ++--
.../assets/js/unstructuredAnnotation.js | 99 ++++++++++++++++++-
.../main/webapp/assets/js/unstructuredRest.js | 45 +++++++++
.../webapp/pages/unstructured-annotation.jsp | 6 +-
4 files changed, 154 insertions(+), 16 deletions(-)
diff --git a/gemeinsamforschen/src/main/webapp/assets/css/unstructured-annotation.css b/gemeinsamforschen/src/main/webapp/assets/css/unstructured-annotation.css
index 33154df4..7a2ec45e 100644
--- a/gemeinsamforschen/src/main/webapp/assets/css/unstructured-annotation.css
+++ b/gemeinsamforschen/src/main/webapp/assets/css/unstructured-annotation.css
@@ -2,16 +2,6 @@ body, html {
height: 100vh;
width: 100vw;
}
-ol {
- padding: 0px;
- margin: 0px;
- list-style-type: none;
- height: 100%;
-}
-li {
- height: calc((100% - 70px) / 8);
- min-height: 40px;
-}
.content-mainpage {
display: flex;
box-sizing: border-box;
@@ -37,6 +27,16 @@ li {
.rightcontent {
height: 100%;
}
+.rightcontent ol {
+ padding: 0px;
+ margin: 0px;
+ list-style-type: none;
+ height: 100%;
+}
+.rightcontent li {
+ height: calc((100% - 70px) / 8);
+ min-height: 40px;
+}
.leftcontent {
max-height: 100%;
display: flex;
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js
index 8bf6cc28..ea01fb02 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js
@@ -1,3 +1,5 @@
+var documentText;
+
/**
* This function will fire when the DOM is ready
*/
@@ -7,11 +9,14 @@ $(document).ready(function() {
getFullSubmission(getSubmissionIdFromUrl(), function (response) {
// set text in div
$('#documentText').html(response.text);
+
}, function () {
- // jump to previous page on error
+ // jump to upload page on error
location.href="unstructured-upload.jsp?token="+getUserTokenFromUrl();
});
+
+
/**
* Context menu handler
*/
@@ -20,14 +25,41 @@ $(document).ready(function() {
callback: function(key, options) {
// TODO - show and handle more options
+ if (key === "titel" ||
+ key === "recherche" ||
+ key === "literaturverzeichnis" ||
+ key === "forschungsfrage" ||
+ key === "untersuchungskonzept" ||
+ key === "methodik" ||
+ key === "durchfuehrung" ||
+ key === "auswertung") {
+ if (getSelectedText().length > 0) {
+ let startCharacter = window.getSelection().getRangeAt(0).startOffset;
+ let endCharacter = window.getSelection().getRangeAt(0).endOffset;
+ let selectedText = getSelectedText();
+
+ handleCategorySelection(selectedText, key, startCharacter, endCharacter);
- // action for 'annotation' click
- if (key == 'annotation') {
+ }
}
},
items: {
- "annotation": {name: "Annotation", icon: "edit"}
+ "annotation": {
+ name: "Annotation",
+ icon: "edit",
+ items: {
+ "titel": {name: "Titel"},
+ "recherche": {name: "Recherche"},
+ "literaturverzeichnis": {name: "Literaturverzeichnis"},
+ "forschungsfrage": {name: "Forschungsfrage"},
+ "untersuchungskonzept": {name: "Untersuchungskonzept"},
+ "methodik": {name: "Methodik"},
+ "durchfuehrung": {name: "Durchführung"},
+ "auswertung": {name: "Auswertung"}
+ }
+ }
+
}
});
@@ -50,3 +82,62 @@ function getSubmissionIdFromUrl() {
}
+function handleCategorySelection(text, category, startCharacter, endCharacter) {
+ var elem = $('#' + category);
+ elem.toggleClass("not-added added");
+
+ addHighlightedText(startCharacter, endCharacter);
+
+ isAlreadyHighlighted(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;
+ }
+}
+
+/**
+ * Add a highlighted text at specific position
+ *
+ * @param startCharacter The offset of the start character
+ * @param endCharacter The offset of the end character
+ */
+function addHighlightedText(startCharacter, endCharacter) {
+
+ var documentText = $('#documentText').text();
+ var documentHtml = $('#documentText').html();
+
+ // create <span> tag with the annotated text
+ var replacement = $('<span></span>').css('background-color', 'lightgreen').html(documentText.slice(startCharacter, endCharacter));
+
+ // wrap an <p> tag around the replacement, get its parent (the <p>) and ask for the html
+ var replacementHtml = replacement.wrap('<p/>').parent().html();
+
+ // insert the replacementHtml
+ var newDocument = documentText.slice(0, startCharacter) + replacementHtml + documentText.slice(endCharacter);
+
+ // set new document text
+ $('#documentText').html(newDocument);
+}
+
+function isAlreadyHighlighted(startCharacter, endCharacter) {
+ $('#annotations').each(function () {
+ if ($(this).find(".category-card").attr("added")) {
+ console.log("hi")
+ }
+ });
+ return false;
+}
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredRest.js b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredRest.js
index 9193c022..9dcd1fd8 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredRest.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredRest.js
@@ -41,4 +41,49 @@ function getFullSubmission(id, responseHandler, errorHandler) {
errorHandler();
}
})
+}
+
+/**
+ * POST: Save an submission part in the database
+ *
+ * @param submissionPartPostRequest The post request
+ * @param responseHandler The response handler
+ */
+function createSubmissionPart(submissionPartPostRequest, responseHandler) {
+ var url = "../rest/submissions/part/";
+ var json = JSON.stringify(fullSubmissionPostRequest);
+ $.ajax({
+ url: url,
+ type: "POST",
+ data: json,
+ contentType: "application/json",
+ dataType: "json",
+ success: function (response) {
+ responseHandler(response);
+ }
+ });
+}
+
+/**
+ * GET: Get a specific submission part for a given id
+ *
+ * @param id The id of the submission part
+ * @param responseHandler The response handler
+ * @param errorHandler The error handler
+ */
+function getSubmissionPart(id, responseHandler, errorHandler) {
+ var url = "../rest/submissions/part/" + id;
+ $.ajax({
+ url: url,
+ type: "GET",
+ dataType: "json",
+ success: function (response) {
+ // handle the response
+ responseHandler(response);
+ },
+ error: function () {
+ // handle the error
+ errorHandler();
+ }
+ })
}
\ No newline at end of file
diff --git a/gemeinsamforschen/src/main/webapp/pages/unstructured-annotation.jsp b/gemeinsamforschen/src/main/webapp/pages/unstructured-annotation.jsp
index a87c7ff3..bdce1c37 100644
--- a/gemeinsamforschen/src/main/webapp/pages/unstructured-annotation.jsp
+++ b/gemeinsamforschen/src/main/webapp/pages/unstructured-annotation.jsp
@@ -14,14 +14,16 @@
<!-- css - contextMenu -->
<link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
+ <!-- js - jQuery validation plugin -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<!-- js - jQuery ui position -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- js - contextMenu script -->
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
- <!-- js - unstructuredUpload -->
- <script src="../assets/js/unstructuredAnnotation.js"></script>
<!-- js - unstructuredRest -->
<script src="../assets/js/unstructuredRest.js"></script>
+ <!-- js - unstructuredUpload -->
+ <script src="../assets/js/unstructuredAnnotation.js"></script>
</head>
--
GitLab