From 5990fa2ef5e382465f2d042efbe5a44eba5a4762 Mon Sep 17 00:00:00 2001 From: Valera Rozuvan Date: Fri, 7 Dec 2012 17:25:24 +0200 Subject: [PATCH] Integrated RequireJS with xmodule for GST. --- common/lib/xmodule/xmodule/gst_module.py | 14 ++++++- .../js/src/graphical_slider_tool/gst.js | 37 ++++++++++--------- .../js/src/graphical_slider_tool/gst_main.js | 17 +++++++++ .../{module.js => mod1.js} | 3 +- .../js/src/graphical_slider_tool/mod2.js | 16 ++++++++ .../js/src/graphical_slider_tool/mod3.js | 19 ++++++++++ .../js/src/graphical_slider_tool/mod4.js | 16 ++++++++ .../js/src/graphical_slider_tool/mod5.js | 16 ++++++++ 8 files changed, 119 insertions(+), 19 deletions(-) create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js rename common/lib/xmodule/xmodule/js/src/graphical_slider_tool/{module.js => mod1.js} (88%) create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py index 60c03dec10..f89cb0f990 100644 --- a/common/lib/xmodule/xmodule/gst_module.py +++ b/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, diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js index 03778ea437..1434d05f70 100644 --- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js +++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js @@ -1,17 +1,20 @@ -// Graphical Slider Tool module - -(function() { - this.GraphicalSliderTool = (function() { - function GST(el) { - console.log(el); - // element is : - //
- } - // console.log('in GST'); - return GST; - - })(); -}).call(this); -// this=window, after call -// window['Graphical_Slider_Tool'] is available. \ No newline at end of file +/* + * 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
element which might in + // theory contain multiple graphical_slider_tool
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')); + }); + }); +}; diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js new file mode 100644 index 0000000000..66f98eddf7 --- /dev/null +++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js @@ -0,0 +1,17 @@ +// 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) diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod1.js similarity index 88% rename from common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js rename to common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod1.js index c4661b5e44..44674b96d3 100644 --- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js +++ b/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' }; diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js new file mode 100644 index 0000000000..9c26bb1dfe --- /dev/null +++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js @@ -0,0 +1,16 @@ +// 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) diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js new file mode 100644 index 0000000000..21961f3611 --- /dev/null +++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js @@ -0,0 +1,19 @@ +// 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) diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js new file mode 100644 index 0000000000..0edf809155 --- /dev/null +++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js @@ -0,0 +1,16 @@ +// 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) diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js new file mode 100644 index 0000000000..5e843ac468 --- /dev/null +++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js @@ -0,0 +1,16 @@ +// 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)