Merge pull request #5603 from lduarte1991/lduarte-harvardx-pr32

Image Annotation Tool: Border and tag-based coloring

common/static/css/vendor/ova/richText-annotator.css

@@ -47,3 +47,8 @@ div.mce-tinymce.mce-container.mce-panel {
 	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkBBB07nraNoQAAAhZJREFUKM+NkstrE1EUxr+5c08ykztpJtVoazHBF8FgQQzonyBKEZS6FrQKLl0EXBRT0ZULJSs3oii4TyHgu90IlTaL6qouWlv7Ck1N0BSnmZk714WbPHz07M4534+Pw3eAHdTY8A9+Nd9/bshU1DpnO4HXjh2ZY2J9/OSTxHTrnP8PvJYf+BDQ6qEDaQBB43jrTusUFy4oPjsYWYzF+VS91nxLYfdhKgONaQT3W/KMxr1XY5e+qj86f8zsKYYsZ6AvjWFzA8ORHkAnwN8So7evzL/8pzMAXL/Hq8mMv1up371T7Z+/c3n9cKeuDS6Xy6dN07zLuZ56Onk2Ed2/ANJsnE/PQMpgyffle+kYzwazB1+3waVS6X48Hr9BRPB9H57nYXplFKeSt8D1Hriug9XKF0x+Lmw+ys8m2m42DOOn4zhQSsGyLOi6jqONm9isbmFVFlDbaGKx8QaB1rvdlbNhGLAsC0IIGIYBIQSy2ROQ0oOp7wOPraHXEugRvDtnzjmi0SiICEIIEBGklAB9B6cmbG0AUnrY5m73h+m6DsYYTNMEYwxEBMY0hGNVhHkcZigBO9qHlDHS7cwYg23bAIBQKAQigud7IH0XwtxDoHwEIQ9SLKx0wa7rPiaivYyxESklXNeFBg0mjyNQTQSuATMSm6ipuYt//eVcLhdeXl5+UKlUlur1upqamVAv3j3/VCyOD3VqfwF6uLp3q+vMcgAAAABJRU5ErkJggg==');
 	background-repeat: no-repeat;
 }
+
+/* Fixes conflicting design between tinymce css and annotator css */
+.mce-ico.mce-i-resize {
+	font-family: 'tinymce';
+}

common/static/js/vendor/ova/OpenSeaDragonAnnotation.js

@@ -187,7 +187,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
             }
             
             // if the colored highlights by tags plugin it is notified to colorize
-               annotator.publish('colorizeHighlight', [an]);
+            annotator.publish('externalCallToHighlightTags', [an]);
         },
         
         /**
@@ -231,7 +231,11 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                 var span = document.createElement('span');
                 var rectPosition = an.rangePosition;
                 span.className = "annotator-hl";
-                span.style.border = '2px solid rgba(0,0,0,0.5)';
+                
+                // outline and border below create a double line one black and one white
+                // so to be able to differentiate when selecting dark or light images
+                span.style.border = '2px solid rgb(255, 255, 255)';
+                span.style.outline = '2px solid rgb(0, 0, 0)';
                 span.style.background = 'rgba(0,0,0,0)';
                 
                 // Adds listening items for the viewer and editor
@@ -305,7 +309,12 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                 viewer.innerTracker.setTracking(false);
                 this.rect = document.createElement('div');
                 this.rect.style.background = 'rgba(0,0,0,0)';
-                this.rect.style.border = '2px solid rgba(0,0,0,0.5)';
+                
+                // outline and border below create a double line one black and one white
+                // so to be able to differentiate when selecting dark or light images
+                this.rect.style.border = '2px solid rgb(255, 255, 255)';
+                this.rect.style.outline = '2px solid rgb(0, 0, 0)';
+                
                 this.rect.style.position = 'absolute';
                 this.rect.className = 'DrawingRect';
                 // set the initial position
@@ -1026,6 +1035,10 @@ OpenSeadragonAnnotation = function (element, options) {
     function reloadEditor(){
         tinymce.EditorManager.execCommand('mceRemoveEditor',true, "annotator-field-0");
         tinymce.EditorManager.execCommand('mceAddEditor',true, "annotator-field-0");
+        
+        // if person hits into/out of fullscreen before closing the editor should close itself
+        // ideally we would want to keep it open and reposition, this would make a great TODO in the future
+        annotator.editor.hide();
     }
 
     var self = this;
@@ -1044,6 +1057,14 @@ OpenSeadragonAnnotation = function (element, options) {
     document.addEventListener("msfullscreenchange", function () {
         reloadEditor();
     }, false);
+
+    // for some reason the above doesn't work when person hits ESC to exit full screen...
+    $(document).keyup(function(e) {
+        // esc key reloads editor as well
+        if (e.keyCode == 27) { 
+            reloadEditor();
+        }   
+    });
     
     this.options = options;
 

common/static/js/vendor/ova/catch/js/catch.js

@@ -504,6 +504,13 @@ CatchAnnotation.prototype = {
         
         // Search Button
         el.on("click", ".searchbox .search-icon", onSearchButtonClick);
+        // Search should also run when user hits ENTER
+        $('input[name=search]').keyup(function(e) {
+            // ENTER == 13
+            if(e.which == 13) {
+                onSearchButtonClick();
+            }
+        });
 
         // Clear Search Button
         el.on("click", ".searchbox .clear-search-icon", onClearSearchButtonClick);
@@ -1001,6 +1008,9 @@ CatchAnnotation.prototype = {
             var positionAnnotator = videojs.findPosition(wrapper[0]);
             var positionAdder = {};
 
+            // the following addition to display makes sure the editor shows up
+            // after opening TinyMCE/editor within the image source
+            positionAdder.display = "block";
             positionAdder.left = positionLeft.left - positionAnnotator.left;
             positionAdder.top = positionLeft.top + 20 - positionAnnotator.top;
 
@@ -1010,9 +1020,9 @@ CatchAnnotation.prototype = {
             this.annotator.onAdderClick();
             
             // Set vertical editor
+            $(this.annotator.editor.element).css(positionAdder);
             this.annotator.editor.resetOrientation();
             this.annotator.editor.invertY();
-            this.annotator.editor.element.find('.annotator-widget').css('min-width', replyElem.css('width'));
 
             // set parent 
             var parentValue = $(this.annotator.editor.element).find(".reply-item span.parent-annotation");

common/static/js/vendor/ova/reply-annotator.js

@@ -64,14 +64,24 @@ Annotator.Plugin.Reply = (function(_super) {
 	
 	// New JSON for the database
 	Reply.prototype.pluginSubmit = function(field, annotation) {
-		var replyItem = $(this.annotator.editor.element).find(".reply-item span.parent-annotation"),
-			parent = replyItem.html()!=''?replyItem.html():'0';
-                console.log(parent);
-                console.log(replyItem.html());
-		if (parent!='0') annotation.media = 'comment';
-		annotation.parent = parent;//set 0, because it is not a reply
-		console.log(annotation.parent);
-                return annotation.parent;
+		// since each annotation has their own reply item, this "find" is element specific
+		var replyItem = $(this.annotator.editor.element).find(".reply-item span.parent-annotation");
+		// checks to see if the current annotation is a reply by checking parent numbers
+		var parent = replyItem.html() !== '' ? replyItem.html() : '0';
+		// if the parent number is not empty or zero, we know that this is a comment
+		if (parent !== '0') {
+			annotation.media = 'comment';
+		}
+
+		// apparently some browsers continue adding <font> tags here for nonreplies
+		// this will check and set to 0 (nonreply) if it fails
+		if (parseInt(parent, 10) === NaN){
+			parent = '0';
+		}
+		
+		// set 0, because it is not a reply
+		annotation.parent = parent;
+		return annotation.parent;
 	};
 	
 

common/static/js/vendor/ova/richText-annotator.js

@@ -93,6 +93,17 @@ Annotator.Plugin.RichText = (function(_super) {
                 // set the modification in the textarea of annotator
                 $(editor.element).find('textarea')[0].value = tinymce.activeEditor.getContent();
             });
+
+            // creates a function called whenever editor is resized
+            ed.on('init', function(mceInstance) {
+
+                // get win means this event activates when window is resized
+                tinymce.dom.Event.bind(ed.getWin(), 'resize', function(e){
+
+                    // mceInstance.target gets the editor, its id is used to retrieved iframe
+                    $("#"+mceInstance.target.id+"_ifr").css('min-width', '400px');
+                });
+            });
             // new button to add Rubrics of the url https://gteavirtual.org/rubric
             ed.addButton('rubric', {
                 icon: 'rubric',