Integrated RequireJS with xmodule for GST.

common/lib/xmodule/xmodule/gst_module.py

@@ -22,7 +22,19 @@ log = logging.getLogger("mitx.common.lib.gst_module")
 class GraphicalSliderToolModule(XModule):
     ''' Graphical-Slider-Tool Module
     '''
-    js = {'js': [resource_string(__name__, 'js/src/graphical_slider_tool/gst.js')]}
+
+    js = {
+      'js': [
+        resource_string(__name__, 'js/src/graphical_slider_tool/gst_main.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/mod1.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/mod2.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/mod3.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/mod4.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/mod5.js'),
+
+        resource_string(__name__, 'js/src/graphical_slider_tool/gst.js')
+      ]
+    }
     js_module_name = "GraphicalSliderTool"
 
     def __init__(self, system, location, definition, descriptor, instance_state=None,

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js

-//  Graphical Slider Tool module
-
-(function() {
-    this.GraphicalSliderTool = (function() {
-        function GST(el) {
-            console.log(el);
-        // element is :
-        //<section class="xmodule_display
-        // xmodule_GraphicalSliderToolModule" data-type="GST">
-        }
-        // console.log('in GST');
-        return GST;
-
-    })();
-}).call(this);
-// this=window, after call
-// window['Graphical_Slider_Tool'] is available.
+/*
+ * We will add a function that will be called for all GraphicalSliderTool
+ * xmodule module instances. It must be available globally by design of
+ * xmodule.
+ */
+window.GraphicalSliderTool = function (el) {
+    // All the work will be performed by the GstMain module. We will get access
+    // to it, and all it's dependencies, via Require JS. Currently Require JS
+    // is namespaced and is available via a global object RequireJS.
+    RequireJS.require(['GstMain'], function (GstMain) {
+        // The GstMain module expects the DOM ID of a Graphical Slider Tool
+        // element. Since we are given a <section> element which might in
+        // theory contain multiple graphical_slider_tool <div> elements (each
+        // with a unique DOM ID), we will iterate over all children, and for
+        // each match, we will call GstMain module.
+        $(el).children('.graphical_slider_tool').each(function (index, value) {
+            GstMain($(value).attr('id'));
\ No newline at end of file
+        });
+    });
+};

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('GstMain', ['mod1', 'mod2', 'mod3', 'mod4'], function (mod1, mod2, mod3, mod4) {
+    return GstMain;
+
+    function GstMain(gstId) {
+        console.log('The DOM ID of the current GST element is ' + gstId);
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js → common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod1.js

@@ -2,7 +2,8 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define([], function () {
+define('mod1', [], function () {
+    console.log('we are in the mod1 callback');
     return {
         'module_status': 'OK'
     };

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('mod2', [], function () {
+    console.log('we are in the mod2 callback');
+    return {
+        'module_status': 'OK'
+    };
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('mod3', ['mod5'], function (mod5) {
+    console.log('we are in the mod3 callback');
+
+    console.log('mod5 status: [' + mod5.module_status + '].');
+
+    return {
+        'module_status': 'OK'
+    };
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('mod4', [], function () {
+    console.log('we are in the mod4 callback');
+    return {
+        'module_status': 'OK'
+    };
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('mod5', [], function () {
+    console.log('we are in the mod5 callback');
+    return {
+        'module_status': 'OK'
+    };
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

lms/envs/common.py

@@ -397,7 +397,7 @@ courseware_only_js += [
 ]
 
 main_vendor_js = [
-  'js/vendor/Requier.js',
+  'js/vendor/RequireJS.js',
   'js/vendor/jquery.min.js',
   'js/vendor/jquery-ui.min.js',
   'js/vendor/jquery.cookie.js',