Diacritic Plugin for Annotator Tool: Pull-request Fixes

Making sure extension comes after annotator css

common/lib/xmodule/xmodule/textannotation_module.py

@@ -48,20 +48,20 @@ class AnnotatableFields(object):
         default='None',
     )
     annotation_storage_url = String(
-        help="Location of Annotation backend", 
-        scope=Scope.settings, 
-        default="http://your_annotation_storage.com", 
-        display_name="Url for Annotation Storage"
+        help=_("Location of Annotation backend"),
+        scope=Scope.settings,
+        default="http://your_annotation_storage.com",
+        display_name=_("Url for Annotation Storage"),
     )
     annotation_token_secret = String(
-        help="Secret string for annotation storage", 
-        scope=Scope.settings, 
-        default="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", 
-        display_name="Secret Token String for Annotation"
+        help=_("Secret string for annotation storage"),
+        scope=Scope.settings,
+        default="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
+        display_name=_("Secret Token String for Annotation"),
     )
     diacritics = String(
-        display_name="Diacritic Marks",
-        help= "Add diacritic marks to be added to a text using the comma-separated form, i.e. markname;urltomark;baseline,markname2;urltomark2;baseline2",
+        display_name=_("Diacritic Marks"),
+        help=_("Add diacritic marks to be added to a text using the comma-separated form, i.e. markname;urltomark;baseline,markname2;urltomark2;baseline2"),
         scope=Scope.settings,
         default='',
     )

common/lib/xmodule/xmodule/videoannotation_module.py

@@ -34,10 +34,29 @@ class AnnotatableFields(object):
         scope=Scope.settings,
         default=_('Video Annotation'),
     )
-    sourceurl = String(help=_("The external source URL for the video."), display_name=_("Source URL"), scope=Scope.settings, default="http://video-js.zencoder.com/oceans-clip.mp4")
-    poster_url = String(help=_("Poster Image URL"), display_name=_("Poster URL"), scope=Scope.settings, default="")
-    annotation_storage_url = String(help=_("Location of Annotation backend"), scope=Scope.settings, default="http://your_annotation_storage.com", display_name=_("Url for Annotation Storage"))
-    annotation_token_secret = String(help=_("Secret string for annotation storage"), scope=Scope.settings, default="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", display_name=_("Secret Token String for Annotation"))
+    sourceurl = String(
+        help=_("The external source URL for the video."),
+        display_name=_("Source URL"),
+        scope=Scope.settings, default="http://video-js.zencoder.com/oceans-clip.mp4"
+    )
+    poster_url = String(
+        help=_("Poster Image URL"),
+        display_name=_("Poster URL"),
+        scope=Scope.settings,
+        default=""
+    )
+    annotation_storage_url = String(
+        help=_("Location of Annotation backend"),
+        scope=Scope.settings,
+        default="http://your_annotation_storage.com", 
+        display_name=_("Url for Annotation Storage"),
+    )
+    annotation_token_secret = String(
+        help=_("Secret string for annotation storage"),
+        scope=Scope.settings,
+        default="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
+        display_name=_("Secret Token String for Annotation")
+    )
 
 class VideoAnnotationModule(AnnotatableFields, XModule):
     '''Video Annotation Module'''

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

@@ -18,80 +18,101 @@
  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
  
-var _ref,
-  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
-  __hasProp = {}.hasOwnProperty,
-  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+var _ref;
+var __bind = function(fn, me){ 
+    return function(){ 
+        return fn.apply(me, arguments); 
+    }; 
+};
+var __hasProp = {}.hasOwnProperty;
+var __extends = function(child, parent) { 
+    for (var key in parent) { 
+        if (__hasProp.call(parent, key)) 
+            child[key] = parent[key]; 
+    } 
+    function ctor() { this.constructor = child; } 
+    ctor.prototype = parent.prototype; 
+    child.prototype = new ctor(); 
+    child.__super__ = parent.prototype; 
+    return child; 
+};
 
 Annotator.Plugin.Diacritics = (function(_super) {
-	__extends(Diacritics, _super);
-	
-	//Options will include diacritic name, picture used, baseline
+    __extends(Diacritics, _super);
+    
+    //Options will include diacritic name, picture used, baseline
     Diacritics.prototype.options = null;
     Diacritics.prototype.diacriticmarks = null;
-	
-    //initiate diacritics elements
-	function Diacritics(element,options) {
-		this.pluginSubmit = __bind(this.pluginSubmit, this);
-		this.updateDiacritics = __bind(this.updateDiacritics, this);
+    
+    /**
+     * Declares all the functions and variables that the plugin will need.
+     * @constructor
+     */
+    function Diacritics(element,options) {
+        this.pluginSubmit = __bind(this.pluginSubmit, this);
+        this.updateDiacritics = __bind(this.updateDiacritics, this);
         this.updateViewer = __bind(this.updateViewer, this);
         this.getDiacritics = __bind(this.getDiacritics, this);
         this.getPos = __bind(this.getPos, this);
-        this.putMarkatLocation = __bind(this.putMarkatLocation, this);
-        this.updateEditorForDiacritics = __bind(this.updateEditorForDiacritics, this);
+        this.putMarkAtLocation = __bind(this.putMarkAtLocation, this);
+        this.updateEditorForDiacritics = 
+            __bind(this.updateEditorForDiacritics, this);
         
         this.options = options;
         this.diacriticmarks = this.getDiacritics();
-		_ref = Diacritics.__super__.constructor.apply(this, arguments);
-		return _ref;
-	}
-	
+        _ref = Diacritics.__super__.constructor.apply(this, arguments);
+        return _ref;
+    }
+    
     //example variables to be used to receive input in the annotator view
-	Diacritics.prototype.field = null;
-	Diacritics.prototype.input = null;
+    Diacritics.prototype.field = null;
+    Diacritics.prototype.input = null;
     
-    //this function will initialize the plug in
-    Diacritics.prototype.pluginInit = function() {
-		console.log("Diacritics-pluginInit");
-		
+    /**
+     * Initalizes the Plug-in for diacritic marks. It adds in the field for the mark
+     * and sets up listeners from the Annotator.js file to make changes as needed
+     */
+    Diacritics.prototype.pluginInit = function() {        
         //Check that annotator is working
-		if (!Annotator.supported()) {
-			return;
-		}
-		var di = this.diacriticmarks;
-		
+        if (!Annotator.supported()) {
+            return;
+        }
+        var di = this.diacriticmarks;
+        
         //-- Editor
         var self = this;
         if(di != 'undefined'){
             $.each(di,function(item){
                 self.field = self.annotator.editor.addField({
-           		    type: 'checkbox', //options (textarea,input,select,checkbox)
-    			    label: Annotator._t(item),
-    			    submit: self.pluginSubmit,
-    		    });
+                    //options (textarea,input,select,checkbox)
+                    type: 'checkbox', 
+                    label: Annotator._t(item),
+                    submit: self.pluginSubmit,
+                });
+            });
+        
+            //-- Viewer
+            this.annotator.viewer.addField({
+                load: this.updateViewer,
             });
-		
-    		//-- Viewer
-    		var newview = this.annotator.viewer.addField({
-    			load: this.updateViewer,
-    		});
 
             this.annotator.subscribe('annotationsLoaded', this.updateDiacritics);
             this.annotator.subscribe('annotationUploaded', this.updateDiacritics);
-    		this.annotator.subscribe('annotationDeleted', this.updateDiacritics);
+            this.annotator.subscribe('annotationDeleted', this.updateDiacritics);
             this.annotator.subscribe('annotationUpdated', this.updateDiacritics);
             this.annotator.subscribe('annotationEditorShown', this.updateEditorForDiacritics, this.field);
             
-            var self = this;
-            $(window).resize(function() {
-                self.updateDiacritics();
-            });
+            $(window).resize(this.updateDiacritics.bind(this));
         }
         
-		return this.input = $(this.field).find(':input');
-	};
+        return this.input = $(this.field).find(':input');
+    };
     
-    //The following function is run when a person hits submit.
+    /**
+     * Adds or removes tag from checked/unchecked boxes of diacritics available
+     * @param field {Object} - element which holds editor
+     * @param annotation {Object} - object that contains annotation information from database
+     */
     Diacritics.prototype.pluginSubmit = function(field, annotation) {
         var checkedItems = $(this.field).find(':input');
         var self = this;
@@ -100,105 +121,150 @@ Annotator.Plugin.Diacritics = (function(_super) {
                 var index = $.inArray(checkedItems[item].placeholder, annotation.tags);
                 if(index != -1){
                     annotation.tags.splice(index, 1);  
-                    if (typeof $($('.annotator-wrapper')[0]).find('div.'+annotation.id)[0] != 'undefined'){
-                        $($('.annotator-wrapper')[0]).find('div.'+annotation.id)[0].remove();
-                    } else {
-                        $($('.annotator-wrapper')[0]).find('div.undefined')[0].remove();   
+                    var annotatorWrapper = $('.annotator-wrapper').first();
+                    var element = annotatorWrapper.find('div.' + annotation.id);
+                    
+                    if(!element.length){
+                        element = annotatorWrapper.find('div.undefined');
                     }
+                    
+                    element.remove();
                 }
                
-                if(checkedItems[item].checked == true){
+                if(checkedItems[item].checked === true){
                     annotation.tags.unshift(checkedItems[item].placeholder);
-                    self.putMarkatLocation(annotation,  checkedItems[item].placeholder);
+                    self.putMarkAtLocation(annotation,  checkedItems[item].placeholder);
                 }
             } else {
-                if(checkedItems[item].checked == true){
-                    annotation['tags'] = [checkedItems[item].placeholder];
-                    self.putMarkatLocation(annotation, checkedItems[item].placeholder);
+                if(checkedItems[item].checked === true){
+                    annotation.tags = [checkedItems[item].placeholder];
+                    self.putMarkAtLocation(annotation, checkedItems[item].placeholder);
                 }
             }
         });
-		
-    }
+        
+    };
 
-    Diacritics.prototype.putMarkatLocation = function (annotation, mark){
+    /**
+     * Draws the mark above a specific annotation
+     * @param annotation {Object} - location where mark should go
+     * @param mark {string}- type of mark that should go above annotation
+     */
+    Diacritics.prototype.putMarkAtLocation = function (annotation, mark){
         var loc = this.getPos(annotation.highlights[0]);
         var alignment = this.diacriticmarks[mark][1];
         var imgurl = this.diacriticmarks[mark][0];
         
-        var newdiv = document.createElement('div');
-        var className = 'mark ' + annotation.id;
-        newdiv.setAttribute('class',className);
-        if(alignment == 'top'){
-           $(newdiv).css('top',""+(loc.y-5)+"px");
-        } else if(alignment == 'bottom'){
-           $(newdiv).css('top',""+(loc.y+loc.height-5)+"px");   
-        } else{
-           $(newdiv).css('top',""+loc.y+"px");   
+        var top;
+        switch(alignment){
+            case 'top':
+                top = (loc.y-5);
+                break;
+            case 'bottom':
+                top = (loc.y + loc.height-5);
+                break;
+            default:
+                top = loc.y;
         }
-        $(newdiv).css('left',""+(loc.x+(loc.width/2.0)-5)+"px");
-        $(newdiv).css('background-image', 'url('+imgurl+')');
-        $('.annotator-wrapper')[0].appendChild(newdiv);
-    }
-        
+        $('<div></div>').addClass('mark ' + annotation.id).css({
+            'top': top,
+            'left': loc.x + (0.5 * loc.width) - 5,
+            'background-image': 'url(' + imgurl +')',
+        }).appendTo('.annotator-wrapper');
+    };
+    
+    /**
+     * Gets the Diacritics from the instantiation in studio
+     * @returns An object with the diacritics instantiated
+     */ 
     Diacritics.prototype.getDiacritics = function(){
+        var diacritics = {};
+        var diacriticsList;
         if(typeof this.options.diacritics != 'undefined'){
-            var self = this;
-            var final = new Object(), prelim = this.options.diacritics.split(",");
-            prelim.forEach(function(item){
+            diacriticsList = this.options.diacritics.split(",");
+            $.each(diacriticsList, function(key, item){
                 var temp = item.split(";");
-                if (temp.length <3) {return undefined;}
-                final[temp[0]] = [temp[1],temp[2]];
+                if (temp.length > 2) {
+                    diacritics[temp[0]] = [temp[1], temp[2]];
+                }
             });
-            return final;
         }
-        console.log("Was undefined");
-        return undefined;
-    }
+        return diacritics;
+    };
     
+    /**
+     * Gets the position of a specific element given the wrapper
+     * @param el {Object} - element you are trying to get the position of
+     */
     Diacritics.prototype.getPos = function(el) {
-        var off = $(el).offset();
-        return {x: off.left-$($('.annotator-wrapper')[0]).offset().left, y: off.top-$($('.annotator-wrapper')[0]).offset().top, width:$(el).width(), height:$(el).height()};
-    }
+        var element = $(el),
+        elementOffset = element.offset(),
+        annotatorOffset = $('.annotator-wrapper').offset();
+
+        return {
+            x: elementOffset.left - annotatorOffset.left, 
+            y: elementOffset.top - annotatorOffset.top, 
+            width: element.width(), 
+            height: element.height()
+        };
+    };
     
+    /**
+     * Redraws the marks above annotations by cycling through tags
+     */
     Diacritics.prototype.updateDiacritics = function(){
         $('.mark').remove();
-        var annotations = this.annotator.plugins['Store'].annotations;
+        var annotations = this.annotator.plugins.Store.annotations;
         var self = this;
-        annotations.forEach(function(ann){
-            $.each(self.diacriticmarks, function(item){
-                if($.inArray(item, ann.tags) != -1){
-                    self.putMarkatLocation(ann, item); 
+        $.each(annotations, function(key, annotation){
+            $.each(self.diacriticmarks, function(tag){
+                if($.inArray(tag, annotation.tags) != -1){
+                    self.putMarkAtLocation(annotation, tag); 
                 }
             });
         });
-    }
+    };
     
-    Diacritics.prototype.updateViewer = function(field,annotation){
+    /**
+     * Removes unnecessary field that Annotator automatically adds to popup
+     * @param {Object} field - the html element that represents the popup
+     * @param {Object} annotation - the annotation element that holds metadata
+     */
+    Diacritics.prototype.updateViewer = function(field, annotation){
         $(field).remove();
-    }
-    
-    Diacritics.prototype.updateEditorForDiacritics = function(field, annotation){
+    };
+
+    /**
+     * Function for adding Diacritic choices to the annotator popup
+     * @param {Object} field - the html element that represents the popup
+     * @param {Object} annotation - the annotation element that holds metadata
+     */
+    Diacritics.prototype.updateEditorForDiacritics = 
+        function(field, annotation){
+        
+        // if no tags are present, no need to go through this
         if (typeof annotation.tags == 'undefined'){
             return;   
         }
-        var self = this;
         
         var inputItems = $(this.field).find(':input');
-        var dictOfItems = {}
-        $.each(inputItems, function(item){
-            inputItems[item].checked = false;
-            dictOfItems[inputItems[item].placeholder] = inputItems[item];
+        var dictOfItems = {};
+        var self = this;
+        
+        // add each diacritic mark to a dictionary and default to off
+        $.each(inputItems, function(key,item){
+            item.checked = false;
+            dictOfItems[item.placeholder] = item;
         });
-        annotation.tags.forEach(function(tag){
-            if(typeof self.diacriticmarks[tag] != 'undefined'){
+
+        // match tags to diacritics and check off the ones that are true
+        $.each(annotation.tags, function(key,tag){
+            if(self.diacriticmarks[tag]){
                 dictOfItems[tag].checked = true;
             }
         });
-    }
-    
-    
-    
+    };
+        
     return Diacritics;
 
-})(Annotator.Plugin);
+})(Annotator.Plugin);
\ No newline at end of file

lms/envs/common.py

@@ -871,8 +871,8 @@ PIPELINE_CSS = {
             'css/vendor/jquery.qtip.min.css',
             'css/vendor/responsive-carousel/responsive-carousel.css',
             'css/vendor/responsive-carousel/responsive-carousel.slide.css',
-            'css/vendor/ova/edx-annotator.css',
             'css/vendor/ova/annotator.css',
+            'css/vendor/ova/edx-annotator.css',
             'css/vendor/ova/video-js.min.css',
             'css/vendor/ova/rangeslider.css',
             'css/vendor/ova/share-annotator.css',

lms/templates/textannotation.html

@@ -148,6 +148,9 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
             highlightTags:{
                 tag: "${tag}",
             },
+            diacriticMarks:{
+                diacritics: "${diacritic_marks}"
+            }
         },
         optionsVideoJS: {techOrder: ["html5","flash","youtube"]},
         optionsRS: {},