Merge pull request #4504 from lduarte1991/lduarte-harvardx-pr11

Annotation Tools: Added Grouping Plug-In

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

+.groupButton {
+    background-color: rgba(255, 255, 10, 0.3);
+    position: absolute;
+    width: 30px;
+    text-align: center;
+    right: -17px;
+    cursor: pointer;
+    font-size: 13px;
+    padding: 2px;
+    border: 1px solid black;
+    border-bottom-left-radius: 5px;
+    border-top-left-radius: 5px;
+    transition: 0.5s;
+}
+
+.groupButton:hover {
+    width: 60px;
+    transition: 0.5s;
+}
+
+.onOffGroupButton, .onOffGroupButton.buttonOn {
+    border: 1px solid blue;
+    background-color: rgba(255, 255, 10, 0.3);
+    padding: 5px;
+    cursor: pointer;
+    border-radius: 5px;
+    color: black;
+    position: relative;
+    margin-left: auto;
+    margin-bottom: 10px;
+    width: 220px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.onOffGroupButton.buttonOff {
+    border: 1px solid black;
+    background-color: rgba(8, 8, 8, 0.3);
+    padding: 5px;
+    cursor: pointer;
+    border-radius: 5px;
+    color: black;
+    position: relative;
+    margin-left: auto;
+    margin-bottom: 10px;
+    width: 220px;
+    font-weight: bold;
+    text-align: center;
+}

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

@@ -902,6 +902,7 @@ Annotator.Plugin.HighlightTags = (function(_super) {
         this.updateViewer = __bind(this.updateViewer, this);
         this.colorize = __bind(this.colorize, this);
         this.updateField = __bind(this.updateField, this);
+        this.externalCall = __bind(this.externalCall, this);
 
         this.options = options;
         _ref = HighlightTags.__super__.constructor.apply(this, arguments);
@@ -950,6 +951,7 @@ Annotator.Plugin.HighlightTags = (function(_super) {
         this.annotator.subscribe('annotationUpdated', this.colorize);
         this.annotator.subscribe('flaggedAnnotation', this.updateViewer);
         this.annotator.subscribe('annotationCreated', this.colorize);
+        this.annotator.subscribe('externalCallToHighlightTags', this.externalCall);
 
     };
     
@@ -1054,6 +1056,8 @@ Annotator.Plugin.HighlightTags = (function(_super) {
                 $(annotations[annNum]).css("background","");
             }
         }
+        
+        this.annotator.publish('colorizeCompleted');
     }
     
     HighlightTags.prototype.updateField = function(field, annotation){
@@ -1130,6 +1134,13 @@ Annotator.Plugin.HighlightTags = (function(_super) {
         this.annotator.publish("finishedDrawingTags");
     }
     
+    //The following will call the colorize function during an external call and then return
+    //an event signaling completion.
+    HighlightTags.prototype.externalCall = function(){
+        this.colorize();
+        this.annotator.publish('finishedExternalCallToHighlightTags');
+    }
+    
     return HighlightTags;
 
 })(Annotator.Plugin);

lms/envs/common.py

@@ -908,6 +908,7 @@ main_vendor_js = [
     'js/vendor/ova/tags-annotator.js',
     'js/vendor/ova/flagging-annotator.js',
     'js/vendor/ova/diacritic-annotator.js',
+    'js/vendor/ova/grouping-annotator.js',
     'js/vendor/ova/jquery-Watch.js',
     'js/vendor/ova/openseadragon.js',
     'js/vendor/ova/OpenSeaDragonAnnotation.js',
@@ -939,6 +940,7 @@ PIPELINE_CSS = {
             'css/vendor/ova/tags-annotator.css',
             'css/vendor/ova/flagging-annotator.css',
             'css/vendor/ova/diacritic-annotator.css',
+            'css/vendor/ova/grouping-annotator.css',
             'css/vendor/ova/ova.css',
             'js/vendor/ova/catch/css/main.css'
         ],

lms/templates/textannotation.html

@@ -154,7 +154,7 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
         },
         optionsVideoJS: {techOrder: ["html5","flash","youtube"]},
         optionsRS: {},
-        optionsOVA: {posBigNew:'none'},
+        optionsOVA: {posBigNew:'none', default_tab:"${default_tab}"},
         optionsRichText: {
             tinymce:{
                 selector: "li.annotator-item textarea",
@@ -177,6 +177,9 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
     //Load the plugin Video/Text Annotation
     var ova = new OpenVideoAnnotation.Annotator($('#textHolder'),options);
 
+    if (typeof Annotator.Plugin["Grouping"] === 'function') 
+        ova.annotator.addPlugin("Grouping");
+
     var userId = ('${default_tab}'.toLowerCase() === 'instructor') ? 
             '${instructor_email}':
             '${user.email}';