Browse Source

HUE-318. SubmitOnChange doesn't work with checkboxes in IE.

  Add handling for padding arrays to HueChart.
  Add checkboxes to submit form on change jframegallery.
  Add Toggle show/hide elements to splitview vertical jframegallery.
Marcus McLaughlin 15 years ago
parent
commit
8fafa5d4ff

+ 3 - 3
apps/jframegallery/src/jframegallery/templates/gallery/splitview.(vertical).html

@@ -25,15 +25,15 @@ limitations under the License.
 			<div class="top_col jframe_padded">
 				this is the top column<br/>
 				<a data-splitview-resize="{'top':0}">hide the top</a><br/>
-				<a data-splitview-toggle="{'side': 'bottom', 'hideSplitter': true}">toggle the bottom (hide splitter)</a>
+				<a data-splitview-toggle="{'side': 'bottom', 'hideSplitter': true}" class="ccs-inline">Toggle -- <span class="toggle-shown">Hide Bottom</span><span class="toggle-hidden">Show Bottom</span></a>
 			</div>
 			<div class="splitter_col" style="background: #88f; padding: 4px">
 				<h4>this is the splitter handle</h4>
 			</div>
-			<div class="bottom_col jframe_padded" style="height:100px">
+			<div class="bottom_col jframe_padded" style="height:200px">
 				and this is the bottom,<br/>
 				you can resize us by dragging the middle bar around.<br/>
-				<a data-splitview-toggle="{'side': 'top', 'hideSplitter': true}">toggle the top</a>
+				<a data-splitview-toggle="{'side': 'top', 'hideSplitter': true}" class="ccs-inline">Toggle -- <span class="toggle-shown">Hide Top</span><span class="toggle-hidden">Show Top</span></a>
 			</div>
 		</div>
 	</body>

+ 2 - 0
apps/jframegallery/src/jframegallery/templates/gallery/submit.form.on.change.html

@@ -41,6 +41,8 @@ limitations under the License.
 				<option value="option 3">option 3</option>
 			</select>
 			<input type="submit" class="ccs-hidden" name="submit"/>
+                        <input type="checkbox" name="check1">
+                        <input type="checkbox" name="check2">
 		</form>
 		
 		<hr/>

+ 8 - 3
desktop/core/static/js/Source/BehaviorFilters/Behavior.SubmitOnChange.js

@@ -19,7 +19,7 @@
 
 description: Makes any form with the data-filter SubmitOnChange submit itself whenever any input is changed.
 provides: [Behavior.SubmitOnChange]
-requires: [Widgets/Behavior]
+requires: [Widgets/Behavior, Core/Browser]
 script: Behavior.SubmitOnChange.js
 
 ...
@@ -30,9 +30,14 @@ script: Behavior.SubmitOnChange.js
 var setupInput = function(input, form, cleanupElement){
 	var events = {
 		change: function(e){
-			if (e) form.fireEvent('submit', e);
+                        if (e) form.fireEvent('submit', e);
 			else form.fireEvent('submit');
 		},
+                click: function(event) {
+                        if ((input.get('type') == 'checkbox') && Browser.Engine.name == "trident") {
+                                form.fireEvent('submit', event);
+                        }
+                }, 
 		keydown: function(e) {
 			if (e.key == 'enter' && document.id(e.target).get('tag') != 'textarea') form.fireEvent('submit', e);
 		}
@@ -69,4 +74,4 @@ Behavior.addGlobalFilters({
 
 });
 
-})();
+})();

+ 11 - 3
desktop/core/static/js/Source/CCS/HueChart.js

@@ -66,10 +66,12 @@ HueChart = new Class({
                 /*
                 onSetupChart: function that runs when the protovis rendering information is being set up, but before the protovis object is rendered, takes the protovis objects as an argument
                 */
-                  bottomPadding: 0, // the padding between the bottom of the element, and the bottom of the graph,
+                padding:[0], //the array of padding values.  Accepts between 1 and 4 values, in CSS TRBL format.  Also allows named padding values below.
+                  //If there are named values, they will supercede the result from the padding array.  
+                  /*bottomPadding: 0, // the padding between the bottom of the element, and the bottom of the graph,
                   topPadding: 0, // the padding between the top of the element, and the left of the graph,
                   leftPadding: 0, // the padding between the left of the element, and the left of the graph,
-                  rightPadding: 0, // the padding between the right of the element, and the right of the graph,
+                  rightPadding: 0, // the padding between the right of the element, and the right of the graph,*/
                   url: "noUrl" //the url of the page. this will be used as a key in the colorManager
         },
 
@@ -80,7 +82,12 @@ HueChart = new Class({
                 //Width and height will potentially change often, make them instance variables.
                 this.width = this.options.width;
                 this.height = this.options.height;
-                
+                //Process padding array with named values -- interpreted in same way CSS side-oriented values are.
+                this.options.padding = $splat(this.options.padding[0]);
+                this.options.topPadding = $pick(this.options.topPadding, this.options.padding[0]);
+                this.options.rightPadding = $pick(this.options.rightPadding, this.options.padding[1], this.options.padding[0]);
+                this.options.bottomPadding = $pick(this.options.bottomPadding, this.options.padding[2], this.options.padding[0]);
+                this.options.leftPadding = $pick(this.options.leftPadding, this.options.padding[3], this.options.padding[1], this.options.padding[0]);
                 var table = document.id(this.options.dataTable);
                 if (table) {
                         this.data = new HueChart.Data(HueChart.buildData(table));
@@ -91,6 +98,7 @@ HueChart = new Class({
 
                 //Setup color manager
                 this.colorManager = colorManager;
+                console.log(this.options.url);
                 this.colorManager.define(this.options.url, this.options.colorArray);
         },