From 44cedec6626d557ec1f4b8ae8a7f6622554a7e0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sven=20K=C3=A4stle?= <sven.kaestle@gmx.de>
Date: Sat, 23 Jun 2018 17:55:47 +0200
Subject: [PATCH] feat: Add user color support for different users
---
.../webapp/assets/css/annotationStyle.css | 3 --
.../main/webapp/assets/js/annotationScript.js | 36 +++++++++++++++----
2 files changed, 29 insertions(+), 10 deletions(-)
diff --git a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
index e8ceddfd..30b94431 100644
--- a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
+++ b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
@@ -33,9 +33,6 @@ ol {
height: 10px;
/* background-color: orange; */
}
-.hl {
- background-color: yellow;
-}
.annotation-card {
width: 100%;
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
index 4e63550a..828f4b36 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
@@ -1,7 +1,7 @@
-// set color, userId and targetId
-var userId = 11;
+// initialize userId, userColors and targetId
+var userId = randomUserId();
+var userColors = new Map();
var targetId = 200;
-var color = getRandomColor();
// declare document text
var documentText;
@@ -155,7 +155,7 @@ function displayAnnotation(annotation) {
list.prepend(
$('<li>')
.mouseenter(function () {
- addHighlightedText(annotation.startCharacter, annotation.endCharacter);
+ addHighlightedText(annotation.startCharacter, annotation.endCharacter, annotation.userId);
})
.mouseleave(function () {
deleteHighlightedText();
@@ -166,7 +166,7 @@ function displayAnnotation(annotation) {
$('<div>').attr('class', 'annotation-card')
.append(
$('<div>').attr('class', 'annotation-header')
- .css('background-color', color)
+ .css('background-color', getUserColor(annotation.userId))
.append(
$('<div>').attr('class', 'annotation-header-title')
.append(
@@ -224,9 +224,9 @@ function displayAnnotation(annotation) {
* @param startCharacter the offset of the start character
* @param endCharacter the offset of the end character
*/
-function addHighlightedText(startCharacter, endCharacter) {
+function addHighlightedText(startCharacter, endCharacter, userId) {
// create <span> tag with the annotated text
- var replacement = $('<span></span>').css('background-color', color).html(documentText.slice(startCharacter, endCharacter));
+ var replacement = $('<span></span>').css('background-color', getUserColor(userId)).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();
@@ -262,6 +262,21 @@ function getSelectedText() {
}
}
+/**
+ * Get color based on user id
+ *
+ * @param userId the id of the user
+ * @returns {string} the user color
+ */
+function getUserColor(userId) {
+ // insert new color if there is no userId key
+ if (userColors.get(userId) == null) {
+ userColors.set(userId, getRandomColor());
+ }
+ // return the color
+ return userColors.get(userId);
+}
+
/**
* Generate a random color of the format 'rgb(r, g, b)'
*
@@ -346,3 +361,10 @@ function toggleButtonHandler(element) {
element.children("i").toggleClass("fa-chevron-down fa-chevron-up")
}
+/*
+ MOCKUP FUNCTIONS
+ */
+function randomUserId() {
+ return Math.floor((Math.random() * 10) + 1);;
+}
+
--
GitLab