Load OVA JS with requireJS in LMS.

openedx · Nov 4, 2014 · 0b0416d · 0b0416d
1 parent 9e98810
commit 0b0416d
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 60 deletions.
diff --git a/lms/envs/common.py b/lms/envs/common.py
@@ -1001,24 +1001,6 @@
     'js/vendor/jquery.qtip.min.js',
     'js/vendor/swfobject/swfobject.js',
     'js/vendor/jquery.ba-bbq.min.js',
-    'js/vendor/ova/annotator-full.js',
-    'js/vendor/ova/annotator-full-firebase-auth.js',
-    'js/vendor/ova/video.dev.js',
-    'js/vendor/ova/vjs.youtube.js',
-    'js/vendor/ova/rangeslider.js',
-    'js/vendor/ova/share-annotator.js',
-    'js/vendor/ova/richText-annotator.js',
-    'js/vendor/ova/reply-annotator.js',
-    'js/vendor/ova/tags-annotator.js',
-    'js/vendor/ova/flagging-annotator.js',
-    'js/vendor/ova/diacritic-annotator.js',
-    'js/vendor/ova/grouping-annotator.js',
-    'js/vendor/ova/jquery-Watch.js',
-    'js/vendor/ova/openseadragon.js',
-    'js/vendor/ova/OpenSeaDragonAnnotation.js',
-    'js/vendor/ova/ova.js',
-    'js/vendor/ova/catch/js/catch.js',
-    'js/vendor/ova/catch/js/handlebars-1.1.2.js',
     'js/vendor/URI.min.js',
 ]
 

diff --git a/lms/static/require-config.js b/lms/static/require-config.js
@@ -0,0 +1,107 @@
+;(function (require, define, _) {
+    var paths = {}, config;
+
+    // URI, tinymce, or jquery.tinymce may already have been loaded before the OVA templates and we do not want to load
+    // them a second time. Check if it is the case and use the global var in requireJS config.
+    if (window.URI) {
+        define("URI", [], function() {return window.URI;});
+    } else {
+        paths.URI = "js/vendor/URI.min";
+    }
+    if (window.tinymce) {
+        define('tinymce', [], function() {return window.tinymce;});
+    } else {
+        paths.tinymce = "js/vendor/tinymce/js/tinymce/tinymce.full.min";
+    }
+    if (window.jquery && window.jquery.tinymce) {
+        define("jquery.tinymce", [], function() {return window.jquery.tinymce;});
+    } else {
+        paths.tinymce = "js/vendor/tinymce/js/tinymce/jquery.tinymce.min";
+    }
+
+    config = {
+        // NOTE: baseUrl has been previously set in lms/templates/main.html
+        waitSeconds: 60,
+        paths: {
+            // Files only needed for OVA
+            "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',
+            // end of files only needed for OVA
+        },
+        shim: {
+            // The following are all needed for OVA
+            "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"
+                ]
+            },
+            // End of OVA
+        }
+    };
+    _.extend(config.paths, paths);
+    require.config(config);
+}).call(this, require || RequireJS.require, define || RequireJS.define, _);
diff --git a/lms/templates/imageannotation.html b/lms/templates/imageannotation.html
@@ -41,7 +41,9 @@
 </div>
 
 <script>
-
+// TODO: Fix indentation in the following block
+(function (require) {
+    var init = function() {
     function onClickHideInstructions(){
         //Reset function if there is more than one event handler
         $(this).off();
@@ -191,7 +193,12 @@
         delete osda;
         //Load the plugin Image/Text Annotation
         osda = new OpenSeadragonAnnotation($('#imageHolder'),options);
-
+
+        // TODO: Fix to avoid using global scope!
+        window.options = options;
+        window.osda = osda;
+        // END TODO
+
         var userId = ('${default_tab}'.toLowerCase() === 'instructor') ? 
             '${instructor_email}':
             '${user.email}';
@@ -214,24 +221,24 @@
 
         // 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}" != ""))
+        if ("${annotation_mode}" == "everyone" || ("${annotation_mode}" == "instructor" && "${instructor_email}" != "")) {
             Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
+            // TODO: Fix to avoid using global scope!
+            window.Catch = Catch;
+            // END TODO
+        }
 
         // 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)
             osda.annotator.destroy();
     }
 
-    // if the following is true, template is being rendered in LMS, otherwise it is in Studio
-    if (typeof Annotator !== 'undefined') {
-        startosda();
-    } else {
-        try {
-            require(["osda"], function(osda){
-                startosda();
-            });
-        } catch(error) {
-            console.log("Error: " + error.message + " - Annotator not loaded in LMS.");
-        }
+    startosda();
+    };
+    try {
+        require(["osda"], init);
+    } catch(error) {
+        console.log("Error: " + error.message + " - Annotator not loaded in LMS.");
     }
-</script>
+}).call(this, require || RequireJS.require);
+</script>
diff --git a/lms/templates/main.html b/lms/templates/main.html
@@ -70,6 +70,16 @@
     <%static:js group='main_vendor'/>
   % endif
 
+  <script>
+    window.baseUrl = "${settings.STATIC_URL}";
+    (function (require) {
+        require.config({
+            baseUrl: baseUrl
+        });
+    }).call(this, require || RequireJS.require);
+  </script>
+  <script type="text/javascript" src="${static.url("require-config.js")}"></script>
+
   <%block name="headextra"/>
 
 <%

diff --git a/lms/templates/notes.html b/lms/templates/notes.html
@@ -4,8 +4,6 @@
 ${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)}
-<script type="text/javascript" src="${static.url('js/vendor/tinymce/js/tinymce/tinymce.full.min.js', raw=True)}"></script>
- <script type="text/javascript" src="${static.url('js/vendor/tinymce/js/tinymce/jquery.tinymce.min.js', raw=True)}" ></script>
 <%inherit file="main.html" />
 <%!
     from django.core.urlresolvers import reverse
@@ -70,7 +68,9 @@ <h1>${_('My Notes')}</h1>
             <div class="annotationListContainer">${_('You do not have any notes.')}</div>
         </section>
         <script>
-
+    // TODO: Fix indentation in the following block
+    (function (require) {
+        var init = function() {
         //Grab uri of the course
         var parts = window.location.href.split("/"),
             uri = '';
@@ -199,6 +199,10 @@ <h1>${_('My Notes')}</h1>
         //Load the plugin Video/Text Annotation
         var ova = new OpenVideoAnnotation.Annotator($('#notesHolder'),options);
 
+        // TODO: Fix to avoid using global scope!
+        window.options = options;
+        window.ova = ova;
+        // END TODO
 
         //Catch
         var annotator = ova.annotator,
@@ -213,6 +217,16 @@ <h1>${_('My Notes')}</h1>
                 default_tab: "${default_tab}",
             },
             Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
+            // TODO: Fix to avoid using global scope!
+            window.Catch = Catch;
+            // END TODO
+        };
+        try {
+            require(["ova"], init);
+        } catch(error) {
+            console.log("Error: " + error.message + " - Annotator not loaded in LMS.");
+        }
+    }).call(this, require || RequireJS.require);
         </script>
     </div>
 </section>

diff --git a/lms/templates/textannotation.html b/lms/templates/textannotation.html
@@ -32,8 +32,10 @@
     </div>
 </div>
 
-
 <script>
+// TODO: Fix indentation in the following block
+(function (require) {
+    var init = function() {
     function onClickHideInstructions(){
         //Reset function if there is more than one event handler
         $(this).off();
@@ -179,6 +181,11 @@
         //Load the plugin Video/Text Annotation
         ova = new OpenVideoAnnotation.Annotator($('#textHolder'),options);
 
+        // TODO: Fix to avoid using global scope!
+        window.options = options;
+        window.ova = ova;
+        // END TODO
+
         if (typeof Annotator.Plugin["Grouping"] === 'function') 
             ova.annotator.addPlugin("Grouping");
 
@@ -202,18 +209,17 @@
                 annotation_mode: "${annotation_mode}",
             };
         Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
+        // TODO: Fix to avoid using global scope!
+        window.Catch = Catch;
+        // END TODO
     }
 
-    // if the following is true, template is being rendered in LMS, otherwise it is in Studio
-    if (typeof Annotator !== 'undefined') {
-        startova();
-    } else {
-        try {
-            require(["ova"], function(ova) {
-                startova();
-            });
-        } catch(error) {
-            console.log("Error: " + error.message + " - Annotator not loaded in LMS.");
-        }
+    startova();
+    };
+    try {
+        require(["ova"], init);
+    } catch(error) {
+        console.log("Error: " + error.message + " - Annotator not loaded in LMS.");
     }
+}).call(this, require || RequireJS.require);
 </script>
diff --git a/lms/templates/videoannotation.html b/lms/templates/videoannotation.html
@@ -36,8 +36,10 @@
 </div>
 
 <script>
-
-	function onClickHideInstructions(){
+// TODO: Fix indentation in the following block
+(function (require) {
+    var init = function() {
+    function onClickHideInstructions(){
 		//Reset function if there is more than one event handler
 		$(this).off();
 		$(this).on('click',onClickHideInstructions);
@@ -176,6 +178,11 @@
         //Load the plugin Video/Text Annotation
         ova = new OpenVideoAnnotation.Annotator($('#videoHolder'),options);
 
+        // TODO: Fix to avoid using global scope!
+        window.options = options;
+        window.ova = ova;
+        // END TODO
+
         ova.annotator.addPlugin('Tags');
         var userId = ('${default_tab}'.toLowerCase() === 'instructor') ? 
                 '${instructor_email}':
@@ -197,16 +204,17 @@
                 annotation_mode: "${annotation_mode}",
             };
         Catch = new CatchAnnotation($('#catchDIV'),catchOptions);
+        // TODO: Fix to avoid using global scope!
+        window.Catch = Catch;
+        // END TODO
     }
-    if (typeof Annotator !== 'undefined') {
-        startova();
-    } else {
-        try {
-            require(["ova"], function(ova) {
-                startova();
-            });
-        } catch(error) {
-            console.log("Error: " + error.message + " - Annotator not loaded in LMS.");
-        }
+
+    startova();
+    };
+    try {
+        require(["ova"], init);
+    } catch(error) {
+        console.log("Error: " + error.message + " - Annotator not loaded in LMS.");
     }
+}).call(this, require || RequireJS.require);
 </script>