Text Annotation Tool: Added Instructor Filter and Clear Search

2014-06-02 23:22:26 -04:00
parent 2eae8b8380
commit 8429897c82
4 changed files with 116 additions and 23 deletions
--- a/common/lib/xmodule/xmodule/textannotation_module.py
+++ b/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")
--- a/common/static/js/vendor/ova/catch/css/main.css
+++ b/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{
--- a/common/static/js/vendor/ova/catch/js/catch.js
+++ b/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,
--- a/lms/templates/textannotation.html
+++ b/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>