Added ability to congiure a text input to be readonly. Changed the default width…

Added ability to congiure a text input to be readonly. Changed the default width and height of the graph to 300px and 300px respectively.

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

@@ -33,8 +33,8 @@ define('Graph', [], function () {
 
             // If no dimensions are specified by the user, the graph have
             // predefined dimensions.
-            width = 100;
-            height = 100;
+            width = 300;
+            height = 300;
 
             // Get the user specified dimensions, if any.
             if ($.isPlainObject(config.plot['dimensions']) === true) {

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

@@ -42,7 +42,7 @@ define('Inputs', [], function () {
         }
 
         function createInput(obj) {
-            var constName, constValue, spanEl, inputEl;
+            var constName, constValue, spanEl, inputEl, readOnly;
 
             // The name of the constant is obj['@var']. If it is not specified,
             // we will skip creating a text input for this constant.
@@ -86,12 +86,34 @@ define('Inputs', [], function () {
             // Set the current constant to the text input. It will be visible
             // to the user.
             inputEl.val(constValue);
+            
+            // Before binding a 'change' event, we will check if this text
+            // input is specified as 'read only'.
+            //
+            // By default, this setting is false - the user can change the 
+            // value in the text input.
+            readonly = false;
+            if (typeof obj['@readonly'] === 'string') {
+                if (obj['@readonly'] === 'true') {
+                    readonly = true;
+                }
+            }
+
+            if (readonly === true) {
+            
+                // In the case of a readonly config option, configure the text
+                // inputit as read-only, and NOT bind an event to it.
+                inputEl.attr('readonly', 'readonly');
 
-            // Bind a function to the 'change' event. Whenever the user changes
-            // the value of this text input, and presses 'enter' (or clicks
-            // somewhere else on the page), this event will be triggered, and
-            // our callback will be called.
-            inputEl.bind('change', inputOnChange);
+            } else { // readonly !== true
+
+                // Bind a function to the 'change' event. Whenever the user changes
+                // the value of this text input, and presses 'enter' (or clicks
+                // somewhere else on the page), this event will be triggered, and
+                // our callback will be called.
+                inputEl.bind('change', inputOnChange);
+
+            }
 
             // Lets style the input element nicely. We will use the button()
             // widget for this since there is no native widget for the text

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

@@ -12,11 +12,7 @@ define('State', [], function () {
     // This module defines and returns a factory constructor.
     return State;
 
-    /*
-     * function: State
-     *
-     *
-     */
+    // function: State
     function State(gstId, config) {
         var constants, c1, plotDiv;