diff --git a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js index f1f7cceee7683b61b501bb70a15914c6419d677a..f2b891a1fc2b2b39f72904a66b7b1418a28f9243 100644 --- a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js +++ b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js @@ -341,6 +341,11 @@ function displayAnnotation(annotation) { .data('annotation', annotation) .mouseenter(function () { addHighlightedText(annotation.body.startCharacter, annotation.body.endCharacter, annotation.userToken); + + // scroll document text to anchor element + let documentText = $('#documentText'); + let anchor = $('#anchor'); + documentText.scrollTo(anchor); }) .mouseleave(function () { deleteHighlightedText(); @@ -362,7 +367,7 @@ function displayAnnotation(annotation) { */ function addHighlightedText(startCharacter, endCharacter, userToken) { // create <span> tag with the annotated text - var replacement = $('<span></span>').css('background-color', getUserColor(userToken)).html(documentText.slice(startCharacter, endCharacter)); + var replacement = $('<span></span>').attr('id', 'anchor').css('background-color', getUserColor(userToken)).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(); diff --git a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp index 4780336a2892c60367e12b6484ccd04012128bbf..30aeafc119b7260833a65f05194117114feffd2c 100644 --- a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp +++ b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp @@ -20,6 +20,8 @@ <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 - scrollTo --> + <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script> <!-- js - annotation websocket script --> <script src="../assets/js/annotationWebsocket.js"></script> <!-- js - annotation REST script -->