Annotation Tools: Adding comments and adding CSS groups

cms/envs/common.py

@@ -339,18 +339,6 @@ PIPELINE_CSS = {
             'css/vendor/jquery.qtip.min.css',
             'js/vendor/markitup/skins/simple/style.css',
             'js/vendor/markitup/sets/wiki/style.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',
-            'css/vendor/ova/richText-annotator.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'
         ],
         'output_filename': 'css/cms-style-vendor.css',
     },
@@ -386,6 +374,23 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/cms-style-xmodule.css',
     },
+    'style-xmodule-annotations': {
+        'source_filenames': [
+            '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',
+            'css/vendor/ova/richText-annotator.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'
+        ],
+        'output_filename': 'css/cms-style-xmodule-annotations.css',
+    },
 }
 
 # test_order: Determines the position of this chunk of javascript on

cms/templates/base.html

@@ -82,6 +82,8 @@
             "URI": "js/vendor/URI.min",
             "ieshim": "js/src/ie_shim",
             "tooltip_manager": "js/src/tooltip_manager",
+            
+            // Files needed for Annotations feature
             "annotator": "js/vendor/ova/annotator-full",
             "annotator-harvardx": "js/vendor/ova/annotator-full-firebase-auth",
             "video.dev": "js/vendor/ova/video.dev",
@@ -100,6 +102,7 @@
             "ova": 'js/vendor/ova/ova',
             "catch": 'js/vendor/ova/catch/js/catch',
             "handlebars": 'js/vendor/ova/catch/js/handlebars-1.1.2',
+            // end of Annotation tool files
 
             // externally hosted files
             "tender": [
@@ -254,6 +257,8 @@
                 exports: "Logger",
                 deps: ["coffee/src/ajax_prefix"]
             },
+
+            // the following are all needed for annotation tools
             "video.dev": {
                 exports:"videojs"
             },
@@ -298,6 +303,7 @@
                 exports: "osda",
                 deps: ["annotator", "annotator-harvardx", "video.dev", "vjs.youtube", "rangeslider", "share-annotator", "richText-annotator", "reply-annotator", "tags-annotator", "flagging-annotator", "grouping-annotator", "diacritic-annotator", "openseadragon", "jquery-Watch", "catch", "handlebars", "URI"]
             },
+            // end of annotation tool files
         },
         // load jquery and gettext automatically
         deps: ["jquery", "gettext"],

lms/envs/common.py

@@ -943,18 +943,6 @@ 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/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',
-            'css/vendor/ova/richText-annotator.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'
         ],
         'output_filename': 'css/lms-style-vendor.css',
     },
@@ -1004,6 +992,23 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/lms-style-course.css',
     },
+    'style-xmodule-annotations': {
+        'source_filenames': [
+            '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',
+            'css/vendor/ova/richText-annotator.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'
+        ],
+        'output_filename': 'css/lms-style-xmodule-annotations.css',
+    },
 }
 
 

lms/templates/imageannotation.html

@@ -31,6 +31,7 @@
                 <%namespace name='static' file='/static_content.html'/>
                 ${static.css(group='style-vendor-tinymce-content', raw=True)}
                 ${static.css(group='style-vendor-tinymce-skin', raw=True)}
+                ${static.css(group='style-xmodule-annotations', raw=True)}
             </div> 
             <div id="catchDIV">
                 <div class="annotationListContainer">${_('Note: only instructors may annotate.')}</div>
@@ -181,7 +182,7 @@
 
     };
     var imgURLRoot = "${settings.STATIC_URL}" + "js/vendor/ova/catch/img/";
-    
+    var osda, annotator, catchOptions, Catch;
     var startosda = function() {
         //remove old instances
         if (Annotator._instances.length !== 0) {
@@ -189,15 +190,15 @@
         }
         delete osda;
         //Load the plugin Image/Text Annotation
-        var osda = new OpenSeadragonAnnotation($('#imageHolder'),options);
+        osda = new OpenSeadragonAnnotation($('#imageHolder'),options);
         
         var userId = ('${default_tab}'.toLowerCase() === 'instructor') ? 
             '${instructor_email}':
             '${user.email}';
 
         //Catch
-        var annotator = osda.annotator;
-        var catchOptions = {
+        annotator = osda.annotator;
+        catchOptions = {
             media:'image',
             externalLink:false,
             imageUrlRoot:imgURLRoot,
@@ -214,7 +215,7 @@
         // if annotations are opened to everyone (2) or if they want to create no annotations (1 with no instructor)
         // then the table at the bottom of the source should be displayed
         if ("${annotation_mode}" == "everyone" || ("${annotation_mode}" == "instructor" && "${instructor_email}" != ""))
-            var Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
+            Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
 
         // if it is in instructor mode only (1), the annotator should be destroyed for all except the instructor
         if ("${annotation_mode}" == "instructor" && "${instructor_email}" == "" && !is_staff)

lms/templates/textannotation.html

@@ -2,6 +2,7 @@
 <%namespace name='static' file='/static_content.html'/>
 ${static.css(group='style-vendor-tinymce-content', raw=True)}
 ${static.css(group='style-vendor-tinymce-skin', raw=True)}
+${static.css(group='style-xmodule-annotations', raw=True)}
 
 <div class="annotatable-wrapper">
     <div class="annotatable-header">
@@ -168,7 +169,7 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
     };
 
     var imgURLRoot = "${settings.STATIC_URL}" + "js/vendor/ova/catch/img/";
-
+    var ova, Catch, annotator, catchOptions;
     var startova = function(){
         //remove old instances
         if (Annotator._instances.length !== 0) {
@@ -176,7 +177,7 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
         }
         delete ova;
         //Load the plugin Video/Text Annotation
-        var ova = new OpenVideoAnnotation.Annotator($('#textHolder'),options);
+        ova = new OpenVideoAnnotation.Annotator($('#textHolder'),options);
 
         if (typeof Annotator.Plugin["Grouping"] === 'function') 
             ova.annotator.addPlugin("Grouping");
@@ -186,8 +187,8 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
                 '${user.email}';
 
         //Catch
-        var annotator = ova.annotator;
-        var catchOptions = {
+        annotator = ova.annotator;
+        catchOptions = {
                 media:'text',
                 externalLink:false,
                 imageUrlRoot:imgURLRoot,
@@ -200,7 +201,7 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
                 instructor_email: "${instructor_email}",
                 annotation_mode: "${annotation_mode}",
             };
-        var Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
+        Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
     }
 
     if (typeof Annotator !== 'undefined') {

lms/templates/videoannotation.html

@@ -2,6 +2,7 @@
 <%namespace name='static' file='/static_content.html'/>
 ${static.css(group='style-vendor-tinymce-content', raw=True)}
 ${static.css(group='style-vendor-tinymce-skin', raw=True)}
+${static.css(group='style-xmodule-annotations', raw=True)}
 
 <div class="annotatable-wrapper">
 	<div class="annotatable-header">
@@ -165,6 +166,7 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
     };
 
 	var imgURLRoot = "${settings.STATIC_URL}" + "js/vendor/ova/catch/img/";
+    var ova, Catch, annotator, catchOptions;
     var startova = function() {
     	//remove old instances
         if (Annotator._instances.length !== 0) {
@@ -172,7 +174,7 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
         }
         delete ova;
         //Load the plugin Video/Text Annotation
-        var ova = new OpenVideoAnnotation.Annotator($('#videoHolder'),options);
+        ova = new OpenVideoAnnotation.Annotator($('#videoHolder'),options);
 
         ova.annotator.addPlugin('Tags');
         var userId = ('${default_tab}'.toLowerCase() === 'instructor') ? 
@@ -180,8 +182,8 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
                 '${user.email}';
 
         //Catch
-        var annotator = ova.annotator;
-        var catchOptions = {
+        annotator = ova.annotator;
+        catchOptions = {
                 media:'video',
                 externalLink:false,
                 imageUrlRoot:imgURLRoot,
@@ -194,7 +196,7 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
                 instructor_email: "${instructor_email}",
                 annotation_mode: "${annotation_mode}",
             };
-        var Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
+        Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
     }
     if (typeof Annotator !== 'undefined') {
         startova();