Text Annotation Tool: Added Instructor Filter and Clear Search

common/lib/xmodule/xmodule/textannotation_module.py

@@ -65,6 +65,24 @@ class AnnotatableFields(object):
         scope=Scope.settings,
         default='',
     )
+    default_tab = String(
+        display_name=_("Default Annotations Tab"),
+        help=_("Select which tab will be the default in the annotations table: myNotes, Instructor, or Public."),
+        scope=Scope.settings,
+        default="myNotes",
+    )
+    instructor_username = String(
+        display_name=_("Username for 'Instructor' Annotations"),
+        help=_("Username that will be attached to all annotations that will be found in 'Instructor' tab."),
+        scope=Scope.settings,
+        default="",
+    )
+    annotation_mode = String(
+        display_name=_("Mode for Annotation Tool"),
+        help=_("Type in number corresponding to following modes: 1 = only instructor can annotate , 2 = Everyone can annotate"),
+        scope=Scope.settings,
+        default="2",
+    )
 
 
 class TextAnnotationModule(AnnotatableFields, XModule):
@@ -101,6 +119,9 @@ class TextAnnotationModule(AnnotatableFields, XModule):
             'annotation_storage': self.annotation_storage_url,
             'token': retrieve_token(self.user_email, self.annotation_token_secret),
             'diacritic_marks': self.diacritics,
+            'default_tab': self.default_tab,
+            'instructor_username': self.instructor_username,
+            'annotation_mode': self.annotation_mode,
         }
         fragment = Fragment(self.system.render_template('textannotation.html', context))
         fragment.add_javascript_url("/static/js/vendor/tinymce/js/tinymce/tinymce.full.min.js")

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

@@ -379,14 +379,14 @@
     display:inline-block;
     color:#302f2f;
     font-family:arial;
-    font-size:15px;
+    font-size:14px;
     font-weight:bold;
     padding:6px 24px;
     text-decoration:none;
     
     margin: 0px 0px 10px 0px;
     cursor:pointer;
-    width:140px;
+    width:115px;
     text-align:center;
 }
 
@@ -468,7 +468,7 @@
 #mainCatch .searchbox input{
     margin: 0;
     padding: 0;
-    width: 60%;
+    width: 50%;
     margin-left: 10px;
     display: inline;
     float: left;
@@ -493,19 +493,28 @@
     cursor:pointer;
 }
 
+#mainCatch .searchbox .clear-search-icon{
+    font-size: 12px;
+    text-decoration: underline;
+    float: right;
+    margin-top: 10px;
+    padding-right: 3px;
+    cursor:pointer;
+}
+
 #mainCatch .searchbox .search-icon:hover{
     opacity:0.5;
     box-shadow: 2px 4px 5px #888888;
 }
 
 #mainCatch .selectors{
-    width:40%;
+    width:45%;
     position:relative;
     float:left;
 }
 
 #mainCatch .searchbox{
-    width:60%;
+    width:52%;
     position:relative;
     float:right;
 }
@@ -515,6 +524,7 @@
     position:relative;
     padding-right:5px;
     margin-top:8px;
+    font-size:14px;
 }
 
 #mainCatch .replies .replyItem .deleteReply{

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

@@ -76,6 +76,17 @@ annotationList:
         '<div class="moreButtonCatch">More</div>'+
     '</div>',
     
+//Main->PublicPrivateInstructor
+annotationPublicPrivateInstructor:
+    '<div class="selectors"><div class="PublicPrivate myNotes active">My Notes<span class="action">myNotes</span></div>'+ 
+    '<div class="PublicPrivate instructor"> Instructor<span class="action">instructor</span></div>'+
+    '<div class="PublicPrivate public"> Public<span class="action">public</span></div></div>'+
+    '<div class="searchbox"><div class="searchinst">Search</div><select class="dropdown-list">'+
+    '<option>Users</option>'+
+    '<option>Tags</option>'+
+    '<option>Annotation Text</option>'+
+    '</select><input type="text" name="search"/><div class="search-icon" alt="Run search."></div><div class="clear-search-icon" alt="Clear search.">Clear</div></div>',
+    
 //Main->PublicPrivate
 annotationPublicPrivate:
     '<div class="selectors"><div class="PublicPrivate myNotes active">My Notes<span class="action">myNotes</span></div>'+ 
@@ -84,7 +95,7 @@ annotationPublicPrivate:
     '<option>Users</option>'+
     '<option>Tags</option>'+
     '<option>Annotation Text</option>'+
-    '</select><input type="text" name="search"/><div class="search-icon" alt="Run search."></div></div>',
+    '</select><input type="text" name="search"/><div class="search-icon" alt="Run search."></div><div class="clear-search-icon" alt="Clear search.">Clear</div></div>',
     
 //Main->MediaSelector
 annotationMediaSelector:
@@ -290,14 +301,14 @@ CatchAnnotation = function (element, options) {
     
     //Reset element an create a new element div
     element.html('<div id="mainCatch" class="annotationListContainer"></div>');
-    
+    this.current_tab = this.options.default_tab;
     //INIT
     var self = this;
     $( document ).ready(function() {
         self.init();
         self.refreshCatch(true);
-    var moreBut = self.element.find('.annotationListButtons .moreButtonCatch');
-    moreBut.hide(); 
+        var moreBut = self.element.find('.annotationListButtons .moreButtonCatch');
+        moreBut.hide(); 
     });
     
     return this;
@@ -310,6 +321,7 @@ CatchAnnotation.prototype = {
         this.TEMPLATENAMES = [
             "annotationList", //Main
             "annotationPublicPrivate", //Main->PublicPrivate
+            "annotationPublicPrivateInstructor", //Main->PublicPrivateInstructor
             "annotationMediaSelector", //Main->MediaSelector
             "annotationItem", //Main->ContainerRow
             "annotationReply",//Main->ContainerRow->Reply
@@ -317,8 +329,8 @@ CatchAnnotation.prototype = {
             "annotationDetail",//Main->ContainerRow->DetailRow
         ];
         //annotator
-        var wrapper = $('.annotator-wrapper').parent()[0],
-            annotator = $.data(wrapper, 'annotator');
+        var wrapper = $('.annotator-wrapper').parent()[0];
+        var annotator = $.data(wrapper, 'annotator');
         this.annotator = annotator;
         
         //Subscribe to annotator
@@ -336,6 +348,10 @@ CatchAnnotation.prototype = {
         this.HTMLTEMPLATES = CatchSources.HTMLTEMPLATES(this.options.imageUrlRoot);
         this.TEMPLATES = {};
         this._compileTemplates();
+        if(this.options.default_tab.toLowerCase() == 'instructor'){
+            this.options.userId = this.options.instructor_username;
+            this._refresh('','');
+        }
     },
 //    
 //     GLOBAL UTILITIES
@@ -380,10 +396,18 @@ CatchAnnotation.prototype = {
         
         if (newInstance){
             var videoFormat = (mediaType === "video") ? true:false;
+            var publicprivatetemplate = '';
+            if (self.options.showPublicPrivate) {
+                if(self.options.instructor_username != ''){
+                    publicprivatetemplate = self.TEMPLATES.annotationPublicPrivateInstructor();
+                } else{
+                    publicprivatetemplate = self.TEMPLATES.annotationPublicPrivate();
+                }
+            }
             el.html(self.TEMPLATES.annotationList({ 
                 annotationItems: annotationItems, 
                 videoFormat: videoFormat,
-                PublicPrivate: self.options.showPublicPrivate?self.TEMPLATES.annotationPublicPrivate():'',
+                PublicPrivate: publicprivatetemplate,
                 MediaSelector: self.options.showMediaSelector?self.TEMPLATES.annotationMediaSelector():'',
             }));
         }else{
@@ -402,10 +426,21 @@ CatchAnnotation.prototype = {
         //Set PublicPrivate
         var PublicPrivateButtons = el.find('.annotationListButtons .PublicPrivate').removeClass('active'); //reset
         for (var index=0;index<PublicPrivateButtons.length;index++) {
-            var span = $(PublicPrivateButtons[index]).find('span'),
-                isUser = (typeof self.options.userId!='undefined' && self.options.userId!='' && self.options.userId!=null);
-            if (isUser && span.html()=="myNotes") $(PublicPrivateButtons[index]).addClass('active');
-            else if (!isUser && span.html()=="public") $(PublicPrivateButtons[index]).addClass('active');
+            var span = $(PublicPrivateButtons[index]).find('span');
+            if (span.html().toLowerCase()==self.current_tab.toLowerCase()) {
+                switch (self.current_tab.toLowerCase()){
+                    case 'public':
+                        self.options.userId = '';
+                        break;
+                    case 'instructor':
+                        self.options.userId = this.options.instructor_username;
+                        break;
+                    default:
+                        self.options.userId = this.annotator.plugins.Permissions.user.id;
+                        break;
+                }
+                $(PublicPrivateButtons[index]).addClass('active');
+            }
         }
         
         //reset all old events
@@ -423,6 +458,7 @@ CatchAnnotation.prototype = {
             onControlRepliesClick = this.__bind(this._onControlRepliesClick, this),
             onMoreButtonClick = this.__bind(this._onMoreButtonClick, this),
             onSearchButtonClick = this.__bind(this._onSearchButtonClick, this),
+            onClearSearchButtonClick = this.__bind(this._onClearSearchButtonClick, this),
             onDeleteReplyButtonClick = this.__bind(this._onDeleteReplyButtonClick, this),
             onZoomToImageBoundsButtonClick = this.__bind(this._onZoomToImageBoundsButtonClick, this);
     
@@ -463,6 +499,9 @@ CatchAnnotation.prototype = {
         
         //Search Button
         el.on("click",".searchbox .search-icon", onSearchButtonClick);
+
+        //Clear Search Button
+        el.on("click",".searchbox .clear-search-icon", onClearSearchButtonClick);
         
         //Delete Reply Button
         el.on("click", ".replies .replyItem .deleteReply", onDeleteReplyButtonClick);
@@ -471,16 +510,16 @@ CatchAnnotation.prototype = {
     changeMedia: function(media) {
         var media = media || 'text';
         this.options.media = media;
-    this._refresh();
+        this._refresh();
         this.refreshCatch(true);
-    this.checkTotAnnotations();
+        this.checkTotAnnotations();
     },
     changeUserId: function(userId) {
         var userId = userId || '';
         this.options.userId = userId;
         this._refresh();
         this.refreshCatch(true);
-    this.checkTotAnnotations();
+        this.checkTotAnnotations();
     },
     loadAnnotations: function() {
         var annotator = this.annotator,
@@ -1011,8 +1050,18 @@ CatchAnnotation.prototype = {
             userId = '';
     
         //Get userI
-         userId = (action.html()=="myNotes")? this.annotator.plugins.Permissions.user.id : '';
-        
+        switch (action.html()){
+            case 'public':
+                userId = '';
+                break;
+            case 'instructor':
+                userId = this.options.instructor_username;
+                break;
+            default:
+                userId = this.annotator.plugins.Permissions.user.id;
+                break;
+        }
+        this.current_tab = action.html();
         //Change userid and refresh
         this.changeUserId(userId);
     },
@@ -1069,6 +1118,9 @@ CatchAnnotation.prototype = {
         this._refresh(searchtype,searchInput);
         
     },
+    _onClearSearchButtonClick: function(evt){
+        this._refresh("","");    
+    },
     _clearAnnotator: function(){
         var annotator = this.annotator,
             store = annotator.plugins.Store,

lms/templates/textannotation.html

@@ -177,6 +177,13 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
     //Load the plugin Video/Text Annotation
     var ova = new OpenVideoAnnotation.Annotator($('#textHolder'),options);
 
+    var userId = '${user.email}';
+    if('${default_tab}'.toLowerCase() == 'instructor'){
+        userId = '${instructor_username}';
+    }
+
+    console.log("${user.is_staff}");
+
     //Catch
     var annotator = ova.annotator,
         catchOptions = {
@@ -185,9 +192,12 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
             imageUrlRoot:imgURLRoot,
             showMediaSelector: false,
             showPublicPrivate: true,
-            userId:'${user.email}',
+            userId:userId,
             pagination:pagination,//Number of Annotations per load in the pagination,
-            flags:is_staff
+            flags:is_staff,
+            default_tab: "${default_tab}",
+            instructor_username: "${instructor_username}",
+            annotation_mode: "${annotation_mode}",
         },
         Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
 </script>