From 4e9b3b638abd8a1c6cd7ce48e71945d2d32ac6c6 Mon Sep 17 00:00:00 2001
From: Arthur Barrett <abarrett@fas.harvard.edu>
Date: Wed, 6 Sep 2017 16:23:46 -0400
Subject: [PATCH] Fixes a few issues with tag highlighting.

- Fixes error when viewing annotation replies and the annotation has a
  tag that is not assigned a color (because it was not setup for the
  assignment).
- Fixes the "Enable highlight tagging" checkbox so it is automatically
  checked when it was previously enabled.
- Ensures that when tags are added to an annotation, whitespace is
  automatically stripped. This fixes colorization issues caused by
  whitespace in the tag name.
---
 .../create_new_assignment2.html               |  3 +--
 hx_lti_initializer/static/DashboardView.js    | 18 ++++++++++++++++--
 .../plugins/highlightTags-annotator.js        | 19 ++++++++++---------
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/hx_lti_assignment/templates/hx_lti_assignment/create_new_assignment2.html b/hx_lti_assignment/templates/hx_lti_assignment/create_new_assignment2.html
index 6ac4e01e..0ba9baf6 100644
--- a/hx_lti_assignment/templates/hx_lti_assignment/create_new_assignment2.html
+++ b/hx_lti_assignment/templates/hx_lti_assignment/create_new_assignment2.html
@@ -155,8 +155,7 @@ <h2>Annotation Dashboard Settings</h2>
 	<input class='hx-textfield full-width' type='number' id='pagination-limit' value='{{form.pagination_limit.value}}'>
 
 	<h3>Optional plug-ins</h3>
-
-	<input type='checkbox' {% if form.allow_highlights.value == "True" %}checked{% endif %} id='enable-tags'>
+	<input type='checkbox' {% if form.allow_highlights.value == True %}checked{% endif %} id='enable-tags'>
 	<label for='enable-tags'>Enable highlight tagging</label>
 
 	<div class='save' id='add-tags-button' {% if not form.allow_highlights.value or tag_list|length > 0 %}style='display:none;'{% endif %}>Add custom highlight tags</div>
diff --git a/hx_lti_initializer/static/DashboardView.js b/hx_lti_initializer/static/DashboardView.js
index 9c255db4..d7c56552 100644
--- a/hx_lti_initializer/static/DashboardView.js
+++ b/hx_lti_initializer/static/DashboardView.js
@@ -799,9 +799,8 @@
 
         jQuery('.annotationModal svg').show();
         if (annotationItem.tags && annotationItem.tags.length > 0) {
-            var tagColor = AController.main.tags[annotationItem.tags[annotationItem.tags.length-1]];
+            var tagColor = this.getAnnotationColor(annotationItem);
             var cssColor = "rgba(" + tagColor.red + ", " + tagColor.green + ", " + tagColor.blue + ", 1)";
-            
             jQuery('.annotationModal svg path').attr('stroke', cssColor);
             if (typeof(annotationItem.svg) === "undefined" ) {
                 jQuery('.annotationModal.item-modal-' + annotationItem.id.toString() + ' .zoomToImageBounds img').css('border', '3px solid ' + cssColor);
@@ -813,6 +812,21 @@
 
     };
 
+    $.DashboardView.prototype.getAnnotationColor = function(annotationItem) {
+        var tags = annotationItem.hasOwnProperty('tags') && annotationItem.tags ? annotationItem.tags : [];
+        var tag_colors = AController.main.tags || {};
+        var tag_color = false;
+
+        for(var i = tags.length - 1; i >= 0; i--) {
+            if(tag_colors[tags[i]]) {
+                tag_color = tag_colors[tags[i]];
+                break;
+            }
+        }
+
+        return tag_color;
+    };
+
     $.DashboardView.prototype.sortAnnotationsByCreated = function(annotations) {
         var compareCreated = function(a, b) {
             if (!("created" in a && "created" in b)) {
diff --git a/hx_lti_initializer/static/vendors/Annotator/plugins/highlightTags-annotator.js b/hx_lti_initializer/static/vendors/Annotator/plugins/highlightTags-annotator.js
index ff67e3db..d7029b40 100644
--- a/hx_lti_initializer/static/vendors/Annotator/plugins/highlightTags-annotator.js
+++ b/hx_lti_initializer/static/vendors/Annotator/plugins/highlightTags-annotator.js
@@ -343,15 +343,16 @@ Annotator.Plugin.HighlightTags.prototype.updateViewer = function(field, annotati
 
 // The following function is run when a person hits submit.
 Annotator.Plugin.HighlightTags.prototype.pluginSubmit = function(field, annotation) {
-    arr = $(field).find('input[name=tags]').val().split(',');
-    //console.log(arr.indexOf("") !== -1);
-    //console.log(arr.length === 1);
-    if (arr.indexOf("") !== -1 && arr.length === 1) {
-    	annotation.tags = [];
-    } else {
-    	annotation.tags = arr;
+    var submitted_tags = $(field).find('input[name=tags]').val().split(',');
+    var submitted_tag, cleaned_tags = [];
+    for(var i = 0; i < submitted_tags.length; i++) {
+        submitted_tag = submitted_tags[i].trim();
+        if(submitted_tag !== "") {
+            cleaned_tags.push(submitted_tag);
+        }
     }
-    //console.log(annotation.tags);
+    annotation.tags = cleaned_tags;
+    //console.log("highlightTags::pluginSubmit()", "submitted:", submitted_tags, "cleaned:", annotation.tags);
 };
 
 // The following will call the colorize function during an external call and then return
@@ -360,4 +361,4 @@ Annotator.Plugin.HighlightTags.prototype.externalCall = function() {
 	var self = Annotator._instances[0].plugins.HighlightTags;
     self.colorize();
     self.annotator.publish('finishedExternalCallToHighlightTags');
-};
\ No newline at end of file
+};