diff --git a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
index c1c095a7c1dfb2c8e6d75d3d8eb3958969f6d085..1ca0c6db859f7c10eb9cd0e7e9308e4208859105 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
@@ -4,8 +4,8 @@ var userColors = new Map();
var userColorsDark = new Map();
var targetId = 200;
-// declare document text
-var documentText;
+// declare document text, start and end character
+var documentText, startCharacter, endCharacter;
/**
* This function will fire when the DOM is ready
@@ -19,36 +19,17 @@ $(document).ready(function() {
selector: '.context-menu-one',
callback: function(key, options) {
- // close context menu
- window.close;
-
- // initialize selected body
- var body = getSelectedText();
-
- // if user selected something
- if (body.length > 0) {
- // annotationPostRequest
- var annotationPostRequest = {
- userToken: userToken,
- targetId: targetId,
- body: {
- title: "title",
- comment: body,
- startCharacter: window.getSelection().getRangeAt(0).startOffset,
- endCharacter: window.getSelection().getRangeAt(0).endOffset
- }
- };
-
- console.log(annotationPostRequest);
-
- createAnnotation(annotationPostRequest, function(response) {
- // display the new annotation
- displayAnnotation(response);
-
- });
- }
+ // action for 'annotation' click
+ if (key == 'annotation') {
+ // show modal if something is selected
+ if (getSelectedText().length > 0) {
+ startCharacter = window.getSelection().getRangeAt(0).startOffset;
+ endCharacter = window.getSelection().getRangeAt(0).endOffset;
- $('#annotation-create-modal').modal('show');
+ // display annotation create modal
+ $('#annotation-create-modal').modal("show");
+ }
+ }
},
items: {
@@ -63,6 +44,62 @@ $(document).ready(function() {
location.href="givefeedback.jsp?token=" + getUserTokenFromUrl();
});
+
+
+ /**
+ * validation of annotation create form inside the modal
+ */
+ $('#annotation-create-form').validate({
+ rules: {
+ title: {
+ required: true,
+ maxlength: 120
+ },
+ comment: {
+ required: true,
+ maxlength: 400
+ }
+ },
+ messages: {
+ title: {
+ required: "Bitte geben Sie einen Titel ein",
+ maxlength: "Ihr Titel darf maximal 120 Zeichen lang sein"
+ },
+ comment: {
+ required: "Bitte geben Sie einen Kommentar ein",
+ maxlength: "Ihr Kommentar darf maximal 400 Zeichen lang sein"
+ }
+ }
+ });
+
+ /**
+ * Save button of the annotation create modal
+ * hide modal and build new annotation
+ */
+ $('#btnSave').click(function () {
+ if ($('#annotation-create-form').valid()) {
+ // get title and comment from form
+ var title = $('#annotation-form-title').val();
+ var comment = $('#annotation-form-comment').val();
+
+ // hide and clear the modal
+ $('#annotation-create-modal').modal('hide');
+
+ // save the new annotation in db and display it
+ saveNewAnnotation(title, comment, startCharacter, endCharacter);
+ }
+ });
+
+ /**
+ * Clear the title and comment input field of the modal
+ */
+ $('#annotation-create-modal').on('hidden.bs.modal', function(){
+ // clear title
+ $('#annotation-form-title').val('');
+ // clear comment
+ $('#annotation-form-comment').val('')
+ });
+
documentText = $('#documentText').html();
// fetch annotations from server on page start
@@ -462,3 +499,32 @@ function toggleButtonHandler(element) {
// toggle between up and down button
element.children("i").toggleClass("fa-chevron-down fa-chevron-up")
}
+
+/**
+ * Save a new annotation in database and list
+ *
+ * @param title The title of the new annotation
+ * @param comment The comment of the new annotation
+ * @param startCharacter The startCharacter based on the annotated text
+ * @param endCharacter The endCharacter based on the annotated text
+ */
+function saveNewAnnotation(title, comment, startCharacter, endCharacter) {
+ // build annotationPostRequest
+ var annotationPostRequest = {
+ userToken: userToken,
+ targetId: targetId,
+ body: {
+ title: title,
+ comment: comment,
+ startCharacter: startCharacter,
+ endCharacter: endCharacter
+ }
+ };
+
+ // send new annotation to back-end and display it in list
+ createAnnotation(annotationPostRequest, function(response) {
+ // display the new annotation
+ displayAnnotation(response);
+
+ });
+}
diff --git a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
index 9e428cc34b9caea0c30d93a2921006cbfb12204d..1b1515c1712672bbae51adc783f37c9800176678 100644
--- a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
+++ b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
@@ -24,6 +24,8 @@
<!-- js - jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+ <!-- js - jQuery validation plugin -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<!-- js - bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- js - jQuery ui position -->
@@ -91,24 +93,22 @@
<!-- modal body -->
<div class="modal-body">
- <form>
+ <form id="annotation-create-form">
<div class="form-group">
<label for="annotation-form-title" class="col-form-label">Titel:</label>
- <input type="text" class="form-control" id="annotation-form-title">
+ <input type="text" class="form-control" id="annotation-form-title" name="title">
</div>
<div class="form-group">
<label for="annotation-form-comment" class="col-form-label">Kommentar:</label>
- <textarea class="form-control resize-vertical" id="annotation-form-comment"></textarea>
+ <textarea class="form-control resize-vertical" id="annotation-form-comment" name="comment"></textarea>
</div>
</form>
+ <!-- modal footer -->
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
+ <button id="btnSave" type="button" class="btn btn-success">Speichern</button>
+ </div>
</div>
-
- <!-- modal footer -->
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
- <button type="button" class="btn btn-primary">Speichern</button>
- </div>
-
</div>
</div>
</div>