Annotation Tools: Adding Annotator to CMS

2014-08-13 17:26:23 -04:00
parent 76516f52b8
commit 5c859c7128
8 changed files with 164 additions and 65 deletions
--- a/cms/envs/common.py
+++ b/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',
    },
--- a/cms/templates/base.html
+++ b/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"],
--- a/common/lib/xmodule/xmodule/imageannotation_module.py
+++ b/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


--- a/common/lib/xmodule/xmodule/textannotation_module.py
+++ b/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


--- a/common/lib/xmodule/xmodule/videoannotation_module.py
+++ b/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


--- a/lms/templates/imageannotation.html
+++ b/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>
--- a/lms/templates/textannotation.html
+++ b/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);
    }
-    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();
+        });
+    }
 </script>
--- a/lms/templates/videoannotation.html
+++ b/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>