Annotation Tools: Adding Annotator to CMS

cms/envs/common.py

@@ -339,6 +339,18 @@ 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',
     },

cms/templates/base.html

@@ -82,6 +82,24 @@
             "URI": "js/vendor/URI.min",
             "ieshim": "js/src/ie_shim",
             "tooltip_manager": "js/src/tooltip_manager",
+            "annotator": "js/vendor/ova/annotator-full",
+            "annotator-harvardx": "js/vendor/ova/annotator-full-firebase-auth",
+            "video.dev": "js/vendor/ova/video.dev",
+            "vjs.youtube": 'js/vendor/ova/vjs.youtube',
+            "rangeslider": 'js/vendor/ova/rangeslider',
+            "share-annotator": 'js/vendor/ova/share-annotator',
+            "richText-annotator": 'js/vendor/ova/richText-annotator',
+            "reply-annotator": 'js/vendor/ova/reply-annotator',
+            "grouping-annotator": 'js/vendor/ova/grouping-annotator',
+            "tags-annotator": 'js/vendor/ova/tags-annotator',
+            "diacritic-annotator": 'js/vendor/ova/diacritic-annotator',
+            "flagging-annotator": 'js/vendor/ova/flagging-annotator',
+            "jquery-Watch": 'js/vendor/ova/jquery-Watch',
+            "openseadragon": 'js/vendor/ova/openseadragon',
+            "osda": 'js/vendor/ova/OpenSeaDragonAnnotation',
+            "ova": 'js/vendor/ova/ova',
+            "catch": 'js/vendor/ova/catch/js/catch',
+            "handlebars": 'js/vendor/ova/catch/js/handlebars-1.1.2',
 
             // externally hosted files
             "tender": [
@@ -235,7 +253,51 @@
             "coffee/src/logger": {
                 exports: "Logger",
                 deps: ["coffee/src/ajax_prefix"]
-            }
+            },
+            "video.dev": {
+                exports:"videojs"
+            },
+            "vjs.youtube": {
+                deps: ["video.dev"]
+            },
+            "rangeslider": {
+                deps: ["video.dev"]
+            },
+            "annotator": {
+                exports: "Annotator"
+            },
+            "annotator-harvardx":{
+                deps: ["annotator"]
+            },
+            "share-annotator": {
+                deps: ["annotator"]
+            },
+            "richText-annotator": {
+                deps: ["annotator", "tinymce"]
+            },
+            "reply-annotator": {
+                deps: ["annotator"]
+            },
+            "tags-annotator": {
+                deps: ["annotator"]
+            },
+            "diacritic-annotator": {
+                deps: ["annotator"]
+            },
+            "flagging-annotator": {
+                deps: ["annotator"]
+            },
+            "grouping-annotator": {
+                deps: ["annotator"]
+            },
+            "ova":{
+                exports: "ova",
+                deps: ["annotator", "annotator-harvardx", "video.dev", "vjs.youtube", "rangeslider", "share-annotator", "richText-annotator", "reply-annotator", "tags-annotator", "flagging-annotator", "grouping-annotator", "diacritic-annotator", "jquery-Watch", "catch", "handlebars", "URI"]
+            },
+            "osda":{
+                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"]
+            },
         },
         // load jquery and gettext automatically
         deps: ["jquery", "gettext"],

common/lib/xmodule/xmodule/imageannotation_module.py

@@ -130,8 +130,8 @@ class ImageAnnotationModule(AnnotatableFields, XModule):
             'annotation_mode': self.annotation_mode,
         }
         fragment = Fragment(self.system.render_template('imageannotation.html', context))
-        fragment.add_javascript_url("/static/js/vendor/tinymce/js/tinymce/tinymce.full.min.js")
-        fragment.add_javascript_url("/static/js/vendor/tinymce/js/tinymce/jquery.tinymce.min.js")
+        fragment.add_javascript_url(self.runtime.STATIC_URL + "js/vendor/tinymce/js/tinymce/tinymce.full.min.js")
+        fragment.add_javascript_url(self.runtime.STATIC_URL + "js/vendor/tinymce/js/tinymce/jquery.tinymce.min.js")
         return fragment
 
 

common/lib/xmodule/xmodule/textannotation_module.py

@@ -127,8 +127,8 @@ class TextAnnotationModule(AnnotatableFields, XModule):
             '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")
-        fragment.add_javascript_url("/static/js/vendor/tinymce/js/tinymce/jquery.tinymce.min.js")
+        fragment.add_javascript_url(self.runtime.STATIC_URL + "js/vendor/tinymce/js/tinymce/tinymce.full.min.js")
+        fragment.add_javascript_url(self.runtime.STATIC_URL + "js/vendor/tinymce/js/tinymce/jquery.tinymce.min.js")
         return fragment
 
 

common/lib/xmodule/xmodule/videoannotation_module.py

@@ -133,8 +133,8 @@ class VideoAnnotationModule(AnnotatableFields, XModule):
             'annotation_mode': self.annotation_mode,
         }
         fragment = Fragment(self.system.render_template('videoannotation.html', context))
-        fragment.add_javascript_url("/static/js/vendor/tinymce/js/tinymce/tinymce.full.min.js")
-        fragment.add_javascript_url("/static/js/vendor/tinymce/js/tinymce/jquery.tinymce.min.js")
+        fragment.add_javascript_url(self.runtime.STATIC_URL + "js/vendor/tinymce/js/tinymce/tinymce.full.min.js")
+        fragment.add_javascript_url(self.runtime.STATIC_URL + "js/vendor/tinymce/js/tinymce/jquery.tinymce.min.js")
         return fragment
 
 

lms/templates/imageannotation.html

@@ -182,8 +182,8 @@
     };
     var imgURLRoot = "${settings.STATIC_URL}" + "js/vendor/ova/catch/img/";
     
-    if (typeof Annotator != 'undefined'){
-            //remove old instances
+    var startosda = function() {
+        //remove old instances
         if (Annotator._instances.length !== 0) {
           $('#imageHolder').annotator("destroy");
         }
@@ -220,4 +220,11 @@
         if ("${annotation_mode}" == "instructor" && "${instructor_email}" == "" && !is_staff)
             osda.annotator.destroy();
     }
+    if (typeof Annotator !== 'undefined') {
+        startosda();
+    } else {
+        require(["osda"], function(osda){
+            startosda();
+        });
+    }
 </script>
\ No newline at end of file

lms/templates/textannotation.html

@@ -169,35 +169,45 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
 
     var imgURLRoot = "${settings.STATIC_URL}" + "js/vendor/ova/catch/img/";
 
-    //remove old instances
-    if (Annotator._instances.length !== 0) {
-      $('#textHolder').annotator("destroy");
+    var startova = function(){
+        //remove old instances
+        if (Annotator._instances.length !== 0) {
+          $('#textHolder').annotator("destroy");
+        }
+        delete ova;
+        //Load the plugin Video/Text Annotation
+        var ova = new OpenVideoAnnotation.Annotator($('#textHolder'),options);
+
+        if (typeof Annotator.Plugin["Grouping"] === 'function') 
+            ova.annotator.addPlugin("Grouping");
+
+        var userId = ('${default_tab}'.toLowerCase() === 'instructor') ? 
+                '${instructor_email}':
+                '${user.email}';
+
+        //Catch
+        var annotator = ova.annotator;
+        var catchOptions = {
+                media:'text',
+                externalLink:false,
+                imageUrlRoot:imgURLRoot,
+                showMediaSelector: false,
+                showPublicPrivate: true,
+                userId:userId,
+                pagination:pagination,//Number of Annotations per load in the pagination,
+                flags:is_staff,
+                default_tab: "${default_tab}",
+                instructor_email: "${instructor_email}",
+                annotation_mode: "${annotation_mode}",
+            };
+        var Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
+    }
+
+    if (typeof Annotator !== 'undefined') {
+        startova();
+    } else {
+        require(["ova"], function(ova){
+            startova();
+        });
     }
-    delete ova;
-    //Load the plugin Video/Text Annotation
-    var ova = new OpenVideoAnnotation.Annotator($('#textHolder'),options);
-
-    if (typeof Annotator.Plugin["Grouping"] === 'function') 
-        ova.annotator.addPlugin("Grouping");
-
-    var userId = ('${default_tab}'.toLowerCase() === 'instructor') ? 
-            '${instructor_email}':
-            '${user.email}';
-
-    //Catch
-    var annotator = ova.annotator;
-    var catchOptions = {
-            media:'text',
-            externalLink:false,
-            imageUrlRoot:imgURLRoot,
-            showMediaSelector: false,
-            showPublicPrivate: true,
-            userId:userId,
-            pagination:pagination,//Number of Annotations per load in the pagination,
-            flags:is_staff,
-            default_tab: "${default_tab}",
-            instructor_email: "${instructor_email}",
-            annotation_mode: "${annotation_mode}",
-        };
-    var Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
 </script>

lms/templates/videoannotation.html

@@ -165,34 +165,42 @@ ${static.css(group='style-vendor-tinymce-skin', raw=True)}
     };
 
 	var imgURLRoot = "${settings.STATIC_URL}" + "js/vendor/ova/catch/img/";
+    var startova = function() {
+    	//remove old instances
+        if (Annotator._instances.length !== 0) {
+          $('#videoHolder').annotator("destroy");
+        }
+        delete ova;
+        //Load the plugin Video/Text Annotation
+        var ova = new OpenVideoAnnotation.Annotator($('#videoHolder'),options);
 
-	//remove old instances
-    if (Annotator._instances.length !== 0) {
-      $('#videoHolder').annotator("destroy");
-    }
-    delete ova;
-    //Load the plugin Video/Text Annotation
-    var ova = new OpenVideoAnnotation.Annotator($('#videoHolder'),options);
-
-    ova.annotator.addPlugin('Tags');
-    var userId = ('${default_tab}'.toLowerCase() === 'instructor') ? 
-            '${instructor_email}':
-            '${user.email}';
+        ova.annotator.addPlugin('Tags');
+        var userId = ('${default_tab}'.toLowerCase() === 'instructor') ? 
+                '${instructor_email}':
+                '${user.email}';
 
-    //Catch
-    var annotator = ova.annotator;
-    var catchOptions = {
-            media:'video',
-            externalLink:false,
-            imageUrlRoot:imgURLRoot,
-            showMediaSelector: false,
-            showPublicPrivate: true,
-	        userId:userId,
-            pagination:pagination,//Number of Annotations per load in the pagination,
-            flags:is_staff,
-            default_tab: "${default_tab}",
-            instructor_email: "${instructor_email}",
-            annotation_mode: "${annotation_mode}",
-        };
+        //Catch
+        var annotator = ova.annotator;
+        var catchOptions = {
+                media:'video',
+                externalLink:false,
+                imageUrlRoot:imgURLRoot,
+                showMediaSelector: false,
+                showPublicPrivate: true,
+    	        userId:userId,
+                pagination:pagination,//Number of Annotations per load in the pagination,
+                flags:is_staff,
+                default_tab: "${default_tab}",
+                instructor_email: "${instructor_email}",
+                annotation_mode: "${annotation_mode}",
+            };
         var Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
+    }
+    if (typeof Annotator !== 'undefined') {
+        startova();
+    } else {
+        require(["ova"], function(ova){
+            startova();
+        });
+    }
 </script>