From 0913e9ef69c6f12f5d87195c54d683de040bc82c Mon Sep 17 00:00:00 2001
From: valera-rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 5 Dec 2012 17:16:57 +0200
Subject: [PATCH] Work on GST.

---
 .../js/src/graphical_slider_tool/module.js    | 15 ++++
 .../js/graphical_slider_tool/gst_module.js    | 15 ++++
 .../static/js/graphical_slider_tool/main.js   | 76 ++++++++++++++++++-
 lms/envs/common.py                            |  1 +
 lms/templates/graphical_slider_tool.html      | 26 ++-----
 5 files changed, 114 insertions(+), 19 deletions(-)
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js
 create mode 100644 common/static/js/graphical_slider_tool/gst_module.js

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js
new file mode 100644
index 0000000000..c4661b5e44
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js
@@ -0,0 +1,15 @@
+// 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([], function () {
+    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/static/js/graphical_slider_tool/gst_module.js b/common/static/js/graphical_slider_tool/gst_module.js
new file mode 100644
index 0000000000..c4661b5e44
--- /dev/null
+++ b/common/static/js/graphical_slider_tool/gst_module.js
@@ -0,0 +1,15 @@
+// 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([], function () {
+    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/static/js/graphical_slider_tool/main.js b/common/static/js/graphical_slider_tool/main.js
index bb624d5888..da36d9c9d6 100644
--- a/common/static/js/graphical_slider_tool/main.js
+++ b/common/static/js/graphical_slider_tool/main.js
@@ -1 +1,75 @@
-alert('Hello, world!');
+// 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) {
+
+// For documentation please check:
+//     http://requirejs.org/docs/api.html
+requirejs.config({
+    // Because require.js is included as a simple <script> tag (and is
+    // forcefully namespaced) it does not get it's configuration from a
+    // predefined 'data-main' attribute. Therefore, from the start, it assumes
+    // that the 'baseUrl' is the same directory that require.js itself is
+    // contained in - i.e. in '/static/js/vendor'. So, we must specify a
+    // correct 'baseUrl'.
+    //
+    // Require JS initially searches this directory for all of the specified
+    // dependencies. If the dependency is
+    //
+    //     'sylvester'
+    //
+    // then it will try to get it from
+    //
+    //     baseUrl + '/' + 'sylvester' + '.js'
+    //
+    // If the dependency is
+    //
+    //     'vendor_libs/sylvester'
+    //
+    // then it will try to get it from
+    //
+    //     baseUrl + '/' + 'vendor_libs/sylvester' + '.js'
+    //
+    // This means two things. One - you can use sub-folders to separate your
+    // code. Two - don't include the '.js' suffix when specifying a dependency.
+    //
+    // For documentation please check:
+    //     http://requirejs.org/docs/api.html#config-baseUrl
+    'baseUrl': '/static/js/graphical_slider_tool',
+
+    // If you need to load from another path, you can specify it here on a
+    // per-module basis. For example you can specify CDN sources here, or
+    // absolute paths that lie outside of the 'baseUrl' directory.
+    //
+    // For documentation please check:
+    //     http://requirejs.org/docs/api.html#config-paths
+    'paths': {
+
+    },
+
+    // Since all of the modules that we require are not aware of our custom
+    // RequireJS solution, that means all of them will be working in the
+    // "old mode". I.e. they will populate the global namespace with their
+    // module object.
+    //
+    // For each module that we will use, we will specify what is exports into
+    // the global namespace, and, if necessary, other modules that it depends.
+    // on. Module dependencies  (downloading them, inserting into the document,
+    // etc.) are handled by RequireJS.
+    //
+    // For documentation please check:
+    //     http://requirejs.org/docs/api.html#config-shim
+    'shim': {
+
+    }
+}); // End-of: requirejs.config({
+
+// Start the main app logic.
+requirejs(['gst_module'], function (GstModule) {
+    console.log(GstModule);
+}); // End-of: requirejs(['gst_module'], function (GstModule)
+
+// 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/lms/envs/common.py b/lms/envs/common.py
index 0364a8b6f8..6790e5b714 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -430,6 +430,7 @@ courseware_only_js += [
 main_vendor_js = [
   'js/vendor/RequireJS.js',
   'js/vendor/json2.js',
+  'js/vendor/RequireJS.js',
   'js/vendor/jquery.min.js',
   'js/vendor/jquery-ui.min.js',
   'js/vendor/jquery.cookie.js',
diff --git a/lms/templates/graphical_slider_tool.html b/lms/templates/graphical_slider_tool.html
index 97fca83ff4..d6cffc67e2 100644
--- a/lms/templates/graphical_slider_tool.html
+++ b/lms/templates/graphical_slider_tool.html
@@ -1,22 +1,12 @@
 <div align="center" id="${element_id}" class="${element_class}">
+    <!-- xidden field to read configuration json from -->
+    <div class="${element_class}" id="${element_id}_json" style="hidden"
+    data-json="${configuration_json}"></div>
 
-<!-- xidden field to read configuration json from -->
-<div class="${element_class}" id="${element_id}_json" style="hidden"
-data-json="${configuration_json}"></div>
-
-<!-- xidden field to read configuration json from -->
-<div class="${element_class}" id="${element_id}_plot_code" style="hidden"
-data-plot="${plot_code}"></div>
-
-<!-- main xml with marked places for sliders, number and plots -->
-${gst_html}
+    <!-- xidden field to read configuration json from -->
+    <div class="${element_class}" id="${element_id}_plot_code" style="hidden"
+    data-plot="${plot_code}"></div>
 
+    <!-- main xml with marked places for sliders, number and plots -->
+    ${gst_html}
 </div>
-
-
-<script type="text/javascript" src="/static/js/graphical_slider_tool/main.js">
-    // wil be invoked for every GST section
-    // $(document).ready(function() {
-    //     console.log('Another GST applet is loaded')
-    // });
-</script>