feat: Scroll to highlighted text on card hover

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();

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 -->