Merge pull request #4378 from lduarte1991/lduarte-harvardx-pr10

Annotation Tool: Fixed Flagging for Instructor flag removal

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

@@ -6,52 +6,133 @@ var _ref,
 Annotator.Plugin.Flagging = (function(_super) {
     __extends(Flagging, _super);
     
-	//If you do not have options, delete next line and the parameters in the declaration function
     Flagging.prototype.options = null;
     
-    //declaration function, remember to set up submit and/or update as necessary, if you don't have
-    //options, delete the options line below.
+    // declaration function, remember to set up submit and/or update as necessary, if you don't have
+    // options, delete the options line below.
     function Flagging(element,options) {
         this.updateViewer = __bind(this.updateViewer, this);
+        this.updateField = __bind(this.updateField, this);
+        this.submitField = __bind(this.submitField, this);
         this.flagAnnotation = __bind(this.flagAnnotation, this);
         this.unflagAnnotation = __bind(this.unflagAnnotation, this);
+        this.getTotalFlaggingTags = __bind(this.getTotalFlaggingTags, this);
         this.options = options;
         _ref = Flagging.__super__.constructor.apply(this, arguments);
         return _ref;
     }
     
-    //example variables to be used to receive input in the annotator view
+    // variables to be used to receive input in the annotator view
     Flagging.prototype.field = null;
     Flagging.prototype.input = null;
     Flagging.prototype.hasPressed = false;
+    Flagging.prototype.activeAnnotation = null;
+    Flagging.prototype.mixedTags = null;
     
-    //this function will initialize the plug in. Create your fields here in the editor and viewer.
+    // this function will initialize the plug-in
     Flagging.prototype.pluginInit = function() {
         console.log("Flagging-pluginInit");
-		//Check that annotator is working
+        
+        // Check that annotator is working
         if (!Annotator.supported()) {
             return;
         }
         
+        // -- Editor
+        //creates a checkbox to remove all flags
+        var self = this;
+        this.field = this.annotator.editor.addField({
+            type: 'checkbox',
+            load: this.updateField,
+            // Translators: please note that this is not a literal flag, but rather a report
+            label: Annotator._t(gettext('Check the box to remove all flags.')),
+            submit: this.submitField,
+        });
         
-		//-- Viewer
+        // -- Viewer
         var newview = this.annotator.viewer.addField({
             load: this.updateViewer,
         });
 
-        
-
         return this.input = $(this.field).find(':input');
     };
     
+    /**
+     * Gets the total number of tags associated with the flagging tool.
+     * @param {Object} annotation Annotation item from Annotator.
+     */
+    Flagging.prototype.getTotalFlaggingTags = function(annotation){
+        var tags = (typeof annotation.tags !== 'undefined') ? annotation.tags.slice() : [];
+        // Goes through and gets the number of tags that contained the keyword "flagged"
+        return $.grep(tags, function(tag, index){
+            return (tag.indexOf('flagged') !== -1);
+        }).length;
+    }
+    
+    /**
+     * Creates a new field in the editor in order to delete the flagged tags.
+     * @param {HTMLElement} field The HTML element contained in the editor reserved for flagging.
+     * @param {Object} annotation Annotation item from Annotator.
+     */
+    Flagging.prototype.updateField = function(field, annotation) {
+        
+        // figure out whether annotation is of image or not
+        var user_email = annotation.media === "image" ? 
+                            osda.options.optionsAnnotator.permissions.user.id:
+                            ova.options.optionsAnnotator.permissions.user.id;
+        
+        // get total number of flag tags as well as save a copy of the mixed tags
+        var totalFlags = this.getTotalFlaggingTags(annotation);   
+        this.mixedTags = annotation.tags;     
+        var self = this;
+        
+        // only show this field if you are an instructor and there are flags to remove
+        if(Catch.options.instructor_email === user_email && totalFlags > 0){
+            // Translators: 'totalFlags' is the number of flags solely for that annotation
+            var message = ngettext("Check the box to remove %(totalFlags)s flag.", "Check the box to remove %(totalFlags)s flags.", totalFlags);
+            $(field).find('label')[0].innerHTML = interpolate(message, {totalFlags : totalFlags}, true);
+            this.activeAnnotation = annotation;
+            
+            // add function to change the text when the user checks the box or removes the check
+            $(field).find('input').change(function(evt){
+                if(!$(field).find('input:checkbox:checked').val()){
+                    var count = self.getTotalFlaggingTags(self.activeAnnotation);
+                    // Translators: 'count' is the number of flags solely for that annotation that will be removed
+                    var message = ngettext("Check the box to remove %(count)s flag.", "Check the box to remove %(count)s flags.", count)
+                    $(field).find('label')[0].innerHTML = interpolate(message, {count: count}, true);
+                } else {
+                    $(field).find('label')[0].innerHTML = gettext("All flags have been removed. To undo, uncheck the box.");
+                }
+            });
+            $(field).show();
+        } else {
+            $(field).hide();
+        }
+    }
     
-    //The following allows you to edit the annotation popup when the viewer has already
-    //hit submit and is just viewing the annotation.
+    /**
+     * Makes last-minute changes to the annotation right before it is saved in the server.
+     * @param {HTMLElement} field The HTML element contained in the editor reserved for flagging.
+     * @param {Object} annotation Annotation item from Annotator.     
+     */
+    Flagging.prototype.submitField = function(field, annotation) {
+        // if the user did not check the box go back and input all of the tags. 
+        if (!$(field).find('input:checkbox:checked').val()){
+            annotation.tags = this.mixedTags;
+        }
+    }
+    
+    /** 
+     * The following allows you to edit the annotation popup when the viewer has already
+     * hit submit and is just viewing the annotation.
+     * @param {HTMLElement} field The HTML element contained in the editor reserved for flagging.
+     * @param {Object} annotation Annotation item from Annotator.
+     */
     Flagging.prototype.updateViewer = function(field, annotation) {
-        $(field).remove();//remove the empty div created by annotator
         var self = this;
         this.hasPressed = false;
-        //perform routine to check if user has pressed the button before
+        
+        // perform routine to check if user has pressed the button before
         var tags = typeof annotation.tags != 'undefined'?annotation.tags:[];
         var user = this.annotator.plugins.Permissions.user.id;
         tags.forEach(function(t){
@@ -62,40 +143,93 @@ Annotator.Plugin.Flagging = (function(_super) {
                 
             }
         });
+
+        // changes display based on check done above
         var fieldControl = $(this.annotator.viewer.element.find('.annotator-controls')).parent();
         if (this.hasPressed) {
-			fieldControl.prepend('<button title="You have already reported this annotation." class="flag-icon-used">');
-            var flagEl = fieldControl.find('.flag-icon-used'),
-                self = this;
+
+            // make sure to use id when searching for the item so that only one of them gets changed
+            var message = gettext("You have already reported this annotation.");
+            fieldControl.prepend('<button title="' + message + '" class="flag-icon-used" id="' + annotation.id + '">');
+            
+            var flagEl = fieldControl.find('.flag-icon-used#' + annotation.id);
+            var self = this;
+            
+            // sets function to unflag after next click
             flagEl.click(function(){self.unflagAnnotation(annotation,user,flagEl,field)});
+        
         } else{
-            fieldControl.prepend('<button title="Report annotation as inappropriate or offensive." class="flag-icon">');
-            var flagEl = fieldControl.find('.flag-icon'),
-                self = this;
+            
+            // likewise, make sure to use id when searching for the item so that only one is changed
+            var message = gettext("Report annotation as inappropriate or offensive.");
+            fieldControl.prepend('<button title="' + message + '" class="flag-icon" id="' + annotation.id + '">');
+            
+            var flagEl = fieldControl.find('.flag-icon#' + annotation.id);
+            var self = this;
+            
+            // sets function to flag after next click
             flagEl.click(function(){self.flagAnnotation(annotation,user,flagEl,field)});
+        }
         
+        var user_email = annotation.media === "image" ? 
+                            osda.options.optionsAnnotator.permissions.user.id:
+                            ova.options.optionsAnnotator.permissions.user.id;
+        var totalFlags = this.getTotalFlaggingTags(annotation);
+        
+        // only show the number of times an annotation has been flagged if they are the instructors
+        if(Catch.options.instructor_email === user_email && totalFlags > 0){
+            // Translators: 'count' is the number of flags solely for that annotation
+            var message = ngettext("This annotation has %(count)s flag.","This annotation has %(count)s flags.", totalFlags);
+            $(field).append("<div class=\"flag-count\">" + interpolate(message, {count : totalFlags}, true) + "</div>");
+        } else {
+            $(field).remove(); // remove the empty div created by annotator
         }
     }
     
+    /**
+     * This function changes the visual aspects of flagging an Annotation and sends changes
+     * to the database backend.
+     */
     Flagging.prototype.flagAnnotation = function(annotation, userId, flagElement, field) {
+        
+        // changes the class and title to show user's flagging action worked
         flagElement.attr("class","flag-icon-used");
-        flagElement.attr("title","You have already reported this annotation.");
+        flagElement.attr("title", gettext("You have already reported this annotation."));
+
+        // it adds the appropriate tag with the user name to make sure it is added
         if (typeof annotation.tags == 'undefined') {
             annotation.tags = ['flagged-'+userId];
         } else{
             annotation.tags.push("flagged-"+userId);
         }
+
+        // annotation gets updated and a warning is published that an annotation has been flagged
         this.annotator.plugins['Store'].annotationUpdated(annotation);
         this.annotator.publish("flaggedAnnotation",[field,annotation]);
         
+        // now that it is flagged, it sets the click function to unflag
+        flagElement.click(function(){self.unflagAnnotation(annotation,userId,flagElement,field)});
     }
     
+    /**
+     * This function changes the visual aspects of unflagging an Annotation and sends changes
+     * to the database backend.
+     */
     Flagging.prototype.unflagAnnotation = function(annotation, userId, flagElement, field) {
+        
+        // changes the class and title to show user's unflagging action worked
         flagElement.attr("class", "flag-icon");
-        flagElement.attr("title","Report annotation as inappropriate or offensive.");
+        flagElement.attr("title", gettext("Report annotation as inappropriate or offensive."));
+        
+        // it removes the tag that signifies flagging
         annotation.tags.splice(annotation.tags.indexOf('flagged-'+userId));
+        
+        // annotation gets updated without the tag and a warning is published that flagging is changed
         this.annotator.plugins['Store'].annotationUpdated(annotation);
         this.annotator.publish("flaggedAnnotation",[field,annotation]);
+        
+        // now that it is unflagged, it sets the click function to flag
+        flagElement.click(function(){self.unflagAnnotation(annotation,userId,flagElement,field)});
     }
     
     return Flagging;