From 3e46ecef646f194798dff81dc4f4176a9e69a27f Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 11 Dec 2012 10:47:46 +0200
Subject: [PATCH] GST work in progress.

---
 .../js/src/graphical_slider_tool/graph.js     | 132 ++++++++++++++----
 .../js/src/graphical_slider_tool/gst_main.js  |   4 +
 .../js/graphical_slider_tool/gst_module.js    |  15 --
 .../static/js/graphical_slider_tool/main.js   |  75 ----------
 4 files changed, 108 insertions(+), 118 deletions(-)
 delete mode 100644 common/static/js/graphical_slider_tool/gst_module.js
 delete mode 100644 common/static/js/graphical_slider_tool/main.js

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index dba0483674..c0c8addf80 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -7,7 +7,7 @@ define('Graph', ['logme'], function (logme) {
     return Graph;
 
     function Graph(gstId, config, state) {
-        var plotDiv, dataSets, functions;
+        var plotDiv, dataSeries, functions;
 
         logme(config);
 
@@ -39,37 +39,55 @@ define('Graph', ['logme'], function (logme) {
             }
 
             if (typeof config.plot['function'] === 'string') {
+
+                // If just one function string is present.
                 addFunction(config.plot['function']);
+
             } else if ($.isPlainObject(config.plot['function']) === true) {
-                addFunction(
-                    config.plot['function']['#text'],
-                    config.plot['function']['@color'],
-                    config.plot['function']['@dot'],
-                    config.plot['function']['@label'],
-                    config.plot['function']['@line'],
-                    config.plot['function']['@point_size'],
-                    config.plot['function']['@style']
-                );
+
+                // If a function is present, but it also has properties
+                // defined.
+                callAddFunction(config.plot['function']);
+
             } else if ($.isArray(config.plot['function'])) {
+
+                // If more than one function is defined.
                 for (c1 = 0; c1 < config.plot['function'].length; c1++) {
+
+                    // For each definition, we must check if it is a simple
+                    // string definition, or a complex one with properties.
                     if (typeof config.plot['function'][c1] === 'string') {
+
+                        // Simple string.
                         addFunction(config.plot['function'][c1]);
+
                     } else if ($.isPlainObject(config.plot['function'][c1])) {
-                        addFunction(
-                            config.plot['function'][c1]['#text'],
-                            config.plot['function'][c1]['@color'],
-                            config.plot['function'][c1]['@dot'],
-                            config.plot['function'][c1]['@label'],
-                            config.plot['function'][c1]['@line'],
-                            config.plot['function'][c1]['@point_size'],
-                            config.plot['function'][c1]['@style']
-                        );
+
+                        // Properties are present.
+                        callAddFunction(config.plot['function'][c1]);
+
                     }
                 }
             }
 
             return;
 
+            // This function will reduce code duplications. We have to call
+            // the function addFunction() several times passing object
+            // properties. A parameters. Rather than writing them out every
+            // time, we will have a single point of
+            function callAddFunction(obj) {
+                addFunction(
+                    obj['#text'],
+                    obj['@color'],
+                    obj['@line'],
+                    obj['@dot'],
+                    obj['@label'],
+                    obj['@style'],
+                    obj['@point_size']
+                );
+            }
+
             function addFunction(funcString, color, line, dot, label, style, point_size) {
                 var newFunctionObject, func, constNames;
 
@@ -95,7 +113,7 @@ define('Graph', ['logme'], function (logme) {
                     newFunctionObject['color'] = color;
                 }
 
-                if (typeof line === 'boolean') {
+                if ((typeof line === 'boolean') || (typeof line === 'string')) {
                     if ((line === 'true') || (line === true)) {
                         newFunctionObject['line'] = true;
                     } else {
@@ -111,6 +129,9 @@ define('Graph', ['logme'], function (logme) {
                     }
                 }
 
+                // By default, if no preference was set, or if the preference
+                // is conflicting (we must have either line or dot, none is
+                // not an option), we will show line.
                 if ((newFunctionObject['dot'] === false) && (newFunctionObject['line'] === false)) {
                     newFunctionObject['line'] = true;
                 }
@@ -131,33 +152,68 @@ define('Graph', ['logme'], function (logme) {
         }
 
         function generateData() {
-            var c0, c1, datapoints, constValues, x, y;
+            var c0, c1, functionObj, seriesObj, dataPoints, constValues, x, y;
 
             constValues = state.getAllConstantValues();
 
-            dataSets = [];
+            dataSeries = [];
 
             for (c0 = 0; c0 < functions.length; c0 += 1) {
-                datapoints = [];
+                functionObj = functions[c0];
+                logme('Functions obj:', functionObj);
 
-                for (c1 = 0; c1 < 30; c1 += 0.1) {
+                seriesObj = {};
+                dataPoints = [];
+
+                for (c1 = 0; c1 < 30; c1 += 1) {
                     x = c1;
+
                     // Push the 'x' variable to the end of the parameter array.
                     constValues.push(x);
-                    y = functions[c0].func.apply(window, constValues);
+
+                    // We call the user defined function, passing all of the
+                    // available constant values. inside this function they
+                    // will be accessible by their names.
+                    y = functionObj.func.apply(window, constValues);
+
+                    // Return the constValues array to how it was before we
+                    // added 'x' variable to the end of it.
                     constValues.pop();
 
-                    datapoints.push([x, y]);
+                    // Add the generated point to the data points set.
+                    dataPoints.push([x, y]);
+
                 }
 
-                dataSets.push(datapoints);
+                // Put the entire data points set into the series object.
+                seriesObj.data = dataPoints;
+
+                // See if user defined a specific color for this function.
+                if (functionObj.hasOwnProperty('color') === true) {
+                    seriesObj.color = functionObj.color;
+                }
+
+                // See if a user defined a label for this function.
+                if (functionObj.hasOwnProperty('label') === true) {
+                    seriesObj.label = functionObj.label;
+                }
+
+                seriesObj.lines = {
+                    'show': functionObj.line
+                };
+
+                seriesObj.points = {
+                    'show': functionObj.dot
+                };
+
+                dataSeries.push(seriesObj);
             }
         }
 
         function updatePlot() {
             $.plot(
                 plotDiv,
-                dataSets,
+                dataSeries,
                 {
                     'xaxis': {
                         'min': 0,
@@ -166,9 +222,29 @@ define('Graph', ['logme'], function (logme) {
                     'yaxis': {
                         'min': -5,
                         'max': 5
+                    },
+                    'legend': {
+
+                        // To show the legend or not. Note, even if 'show' is
+                        // 'true', the legend will only show if labels are
+                        // provided for at least one of the series that are
+                        // going to be plotted.
+                        'show': true,
+
+                        // A floating point number in the range [0, 1]. The
+                        // smaller the number, the more transparent will the
+                        // legend background become.
+                        'backgroundOpacity': 0
+
                     }
                 }
             );
+
+            MathJax.Hub.Queue([
+                'Typeset',
+                MathJax.Hub,
+                plotDiv.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
index 47881b66c6..8611fed1f2 100644
--- 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
@@ -4,6 +4,10 @@
 
 define(
     'GstMain',
+
+    // Even though it is not explicitly in this module, we have to specify
+    // 'GeneralMethods' as a dependency. It expands some of the core JS objects
+    // with additional useful methods that are used in other modules.
     ['State', 'GeneralMethods', 'Sliders', 'Inputs', 'Graph'],
     function (State, GeneralMethods, Sliders, Inputs, Graph) {
 
diff --git a/common/static/js/graphical_slider_tool/gst_module.js b/common/static/js/graphical_slider_tool/gst_module.js
deleted file mode 100644
index c4661b5e44..0000000000
--- a/common/static/js/graphical_slider_tool/gst_module.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// 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
deleted file mode 100644
index da36d9c9d6..0000000000
--- a/common/static/js/graphical_slider_tool/main.js
+++ /dev/null
@@ -1,75 +0,0 @@
-// 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)