diff --git a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
index 74ac1c7a1a6fa585af3de0ca37f55496f13f22e9..b69d4dc4cf8a2fd900e7ad1debdf79650ce9f2d2 100644
--- a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
+++ b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
@@ -127,7 +127,7 @@ ol {
margin-right: 5px;
cursor: pointer;
}
-.annotation-footer-date {
+.flex-one {
flex: 1
}
.container-fluid-content {
@@ -135,7 +135,7 @@ ol {
flex-flow: column;
height: 100%;
}
-.content-header {
+.flex {
display: flex;
}
.full-height {
@@ -148,4 +148,7 @@ ol {
.leftcontent-text {
overflow: scroll;
}
+.resize-vertical {
+ resize: vertical;
+}
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
index 9fd988a809f90a46bd57e798ed3d198384177f54..7ca850714f87359c130171de86eed305354b345e 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,33 +19,16 @@ $(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;
+
+ // display annotation create modal
+ $('#annotation-create-modal').modal("show");
+ }
}
},
@@ -61,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: "Ein Titel wird benötigt",
+ maxlength: "Maximal 120 Zeichen erlaubt"
+ },
+ comment: {
+ required: "Ein Kommentar wird benötigt",
+ maxlength: "Maximal 400 Zeichen erlaubt"
+ }
+ }
+ });
+
+ /**
+ * 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
@@ -266,7 +305,7 @@ function displayAnnotation(annotation) {
)
.append(
// timestamp
- $('<div>').attr('class', 'annotation-footer-date overflow-hidden')
+ $('<div>').attr('class', 'flex-one overflow-hidden')
.append(
$('<i>').attr('class', dateIcon)
)
@@ -460,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 9f2969275d66042918a5d32cd44d1f8044d3d735..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 -->
@@ -43,7 +45,7 @@
<div class="page-content-wrapper full-height">
<div class="container-fluid full-height">
<div class="container-fluid-content">
- <div class="content-header">
+ <div class="flex">
<h1>gemeinsam Forschen
<a href="#">
<span class="glyphicon glyphicon-envelope"
@@ -78,7 +80,39 @@
</div>
</div>
</div>
+ <!-- annotation create modal -->
+ <div id="annotation-create-modal" class="modal fade" role="dialog">
+ <div class="modal-dialog modal-dialog-centered modal-sm">
+ <div class="modal-content">
+
+ <!-- modal header -->
+ <div class="modal-header flex">
+ <h4 class="modal-title flex-one">Annotation</h4>
+ <button type="button" class="close" data-dismiss="modal">×</button>
+ </div>
+
+ <!-- modal body -->
+ <div class="modal-body">
+ <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" 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" 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>
+ </div>
+ </div>
+ </div>
</div>
</body>
-</html>
\ No newline at end of file
+</html>