From 33bf673578f10d8010cb979f55a0e07443d0901a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sven=20K=C3=A4stle?= <sven.kaestle@gmx.de>
Date: Sun, 9 Sep 2018 13:50:49 +0200
Subject: [PATCH] feat: Add search bar to annotation list
---
.../webapp/assets/css/annotationStyle.css | 14 ++++-
.../main/webapp/assets/js/annotationScript.js | 59 +++++++++++++++++--
.../webapp/assets/js/annotationWebsocket.js | 1 -
.../main/webapp/pages/annotation-document.jsp | 1 +
4 files changed, 65 insertions(+), 10 deletions(-)
diff --git a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
index a9ed0b54..9e618c7d 100644
--- a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
+++ b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
@@ -17,7 +17,8 @@ ol {
.rightcolumn {
float: right;
width: 25%;
- display: inline-block;
+ display: flex;
+ flex-flow: column;
overflow: scroll;
/* background-color: blue; */
}
@@ -29,7 +30,9 @@ ol {
/* background-color: yellow; */
}
.rightcontent {
- margin: 10px;
+ padding: 10px;
+ flex: 1;
+ overflow: scroll;
}
.leftcontent {
max-height: 100%;
@@ -51,7 +54,7 @@ ol {
background-color: white;
}
.annotation-card:hover {
- box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+ box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
}
.annotation-header {
padding: 5px;
@@ -164,4 +167,9 @@ ol {
color: black;
font-weight: bold;
}
+#annotation-search {
+ width: 100%;
+ padding: 5px;
+ font-size: 11px;
+}
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
index b6f25d8c..efc433ea 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
@@ -267,10 +267,30 @@ function displayAnnotation(annotation) {
dateIcon = "fas fa-clock";
}
+ // declare variables
+ let display, input, filter, user, title, comment;
+ input = $('#annotation-search');
+ filter = input.val().toLowerCase();
+
+ user = annotation.userToken.toLowerCase();
+ title = annotation.body.title.toLowerCase();
+ comment = annotation.body.comment.toLowerCase();
+
+ // hiding based on user, title and comment
+ if (user.indexOf(filter) > -1 ||
+ title.indexOf(filter) > -1 ||
+ comment.indexOf(filter) > -1) {
+ display = ''
+ }
+ else {
+ display = 'none'
+ }
+
// insert annotation card
list.prepend(
// list element
$('<li>')
+ .css('display', display)
.attr('class', 'listelement')
.append(
// annotation card
@@ -296,7 +316,7 @@ function displayAnnotation(annotation) {
$('<i>').attr('class', 'fas fa-user')
)
.append(
- $('<span>').append(annotation.userToken)
+ $('<span>').attr('class', 'annotation-header-data-user').append(annotation.userToken)
)
)
.append(
@@ -371,11 +391,9 @@ function displayAnnotation(annotation) {
.mouseleave(function () {
deleteHighlightedText();
})
- .append(function () {
- if ($('#annotations li').filter( ".listelement" ).length > 0) {
- return $('<div>').attr('class', 'spacing')
- }
- })
+ .append(
+ $('<div>').attr('class', 'spacing')
+ )
);
}
@@ -791,3 +809,32 @@ function isAnnotationInRange(start, end) {
}
return false;
}
+
+/**
+ * Display or hide annotations based on filter string
+ */
+function searchAnnotation() {
+ // declare variables
+ let input, filter;
+ input = $('#annotation-search');
+ filter = input.val().toLowerCase();
+
+ // iterate over annotation card and hide those who don't match the search query
+ $('#annotations').find('li').each(function () {
+ let user, title, comment;
+ user = $(this).find('.annotation-header-data-user').text().toLowerCase();
+ title = $(this).find('.annotation-header-data-title').text().toLowerCase();
+ comment = $(this).find('.annotation-body-text').text().toLowerCase();
+
+ // hiding based on user, title and comment
+ if (user.indexOf(filter) > -1 ||
+ title.indexOf(filter) > -1 ||
+ comment.indexOf(filter) > -1) {
+ $(this).css('display', '')
+ }
+ else {
+ $(this).css('display', 'none')
+ }
+ });
+
+}
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/annotationWebsocket.js b/gemeinsamforschen/src/main/webapp/assets/js/annotationWebsocket.js
index 5c3ced1b..585b09c0 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/annotationWebsocket.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/annotationWebsocket.js
@@ -8,7 +8,6 @@ function connect(targetId, targetCategory) {
ws.onmessage = function (e) {
var message = JSON.parse(e.data);
- console.log(message.from)
if (message.type === "CREATE") {
// get annotation from server
diff --git a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
index d8e499fe..9cf34a1f 100644
--- a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
+++ b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
@@ -62,6 +62,7 @@
</div>
</div>
<div class="rightcolumn">
+ <input type="text" id="annotation-search" onkeyup="searchAnnotation()" placeholder="Suchen...">
<div class="rightcontent">
<ol id="annotations">
</ol>
--
GitLab