Made gcodePanel collapsible using coolfieldset

js_src/PrinterPanel.js

@@ -23,6 +23,9 @@ function PrinterPanel() {
 		formElements.each( function(index,element) {
 			self.printerSettingsNames.push(element.name);
 		});
+		
+		var gcodePanel = element.find("#gcodePanel");
+		gcodePanel.coolfieldset({collapsed:true});
 	}
 	this.printerSelectorChanged = function(e) {
 		console.log("PrinterPanel:printerSelectorChanged");

js_src/libs/jquery-coolfieldset.js

@@ -0,0 +1,57 @@
+/**
+ * jQuery Plugin for creating collapsible fieldset
+ * @requires jQuery 1.2 or later
+ *
+ * Copyright (c) 2010 Lucky <bogeyman2007@gmail.com>
+ * Licensed under the GPL license:
+ *   http://www.gnu.org/licenses/gpl.html
+ *
+ * "animation" and "speed" options are added by Mitch Kuppinger <dpneumo@gmail.com>
+ */
+
+(function($) {
+	function hideFieldsetContent(obj, options){
+		if(options.animation==true)
+			obj.find('div').slideUp(options.speed);
+		else
+			obj.find('div').hide();
+		
+		obj.removeClass("expanded");
+		obj.addClass("collapsed");
+	}
+	
+	function showFieldsetContent(obj, options){
+		if(options.animation==true)
+			obj.find('div').slideDown(options.speed);
+		else
+			obj.find('div').show();
+		
+		obj.removeClass("collapsed");
+		obj.addClass("expanded");
+	}
+	
+	$.fn.coolfieldset = function(options){
+		var setting={collapsed:false, animation:true, speed:'medium'};
+		$.extend(setting, options);
+		
+		this.each(function(){
+			var fieldset=$(this);
+			fieldset.addClass("collapsible");
+			var legend=fieldset.children('legend');
+			
+			if(setting.collapsed==true){
+				hideFieldsetContent(fieldset, setting);
+			} else {
+				showFieldsetContent(fieldset, setting);
+			}
+			
+			legend.bind('touchstart mousedown', function() {
+				if(fieldset.hasClass("collapsed")) {
+					showFieldsetContent(fieldset, setting);
+				} else {
+					hideFieldsetContent(fieldset, setting);
+				}
+			});
+		});
+	}
+})(jQuery);

www/css/settings.css

@@ -35,10 +35,34 @@ form fieldset fieldset{
 	clear: left;
 	float: left;
 }
+form fieldset.collapsed {
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+	border-width: 1px 0 0 0;
+	float:none;
+}
+form fieldset.collapsible {
+	padding: 0;
+}
+form fieldset.collapsible div{
+	margin: 8px;
+}
 form fieldset legend {
   margin-left: 10px;
   font-weight: bold;
 }
+form fieldset.collapsible legend {
+	padding-left: 10px;
+	cursor: pointer;
+}
+form fieldset.expanded legend {
+	background: transparent url(../img/buttons/expanded.gif) no-repeat center left;
+}
+form fieldset.collapsed legend {
+	background: transparent url(../img/buttons/collapsed.gif) no-repeat center left;
+}
+
 form label {
   min-width: 150px;
   display: block;

www/index.html

@@ -134,6 +134,7 @@
 <!--<script src="js/libs/imagesloaded-pkgd.min.js"></script>-->
 <!--<script src="../js_src/libs/jquery-joyride-2-1.js"></script>-->
 <script src="js/libs/jquery-joyride-2-1.min.js"></script>
+<script src="js/libs/jquery-coolfieldset.min.js"></script>
 <!--<script src="js/doodle3d-client.js"></script>-->
 <script src="js/doodle3d-client.min.js"></script>
 

www/settings.html

@@ -54,24 +54,26 @@
       <label for="printerBedHeight">Bed height:</label><input id="printerBedHeight" type="number" class="small" name="printer.bed.height">mm<br>
       <fieldset id="gcodePanel">
  		<legend>GCODE settings</legend>
- 		<div class="startgcode_left">
+ 		<div>
-       		<label for="startgcode">Start:</label><br/>
+ 			<div class="startgcode_left">
-       		<textarea id="startgcode" class="gcode" name="printer.startcode"></textarea>
+     	  		<label for="startgcode">Start:</label><br/>
-     	</div>
+      	 		<textarea id="startgcode" class="gcode" name="printer.startcode"></textarea>
-      	<div>
+     		</div>
-        	<label for="endgcode">End:</label><br/>
+     	 	<div>
-        	<textarea id="endgcode" class="gcode" name="printer.endcode"></textarea>
+     		   	<label for="endgcode">End:</label><br/>
+     		   	<textarea id="endgcode" class="gcode" name="printer.endcode"></textarea>
+     	 	</div>
+    	  	<small>
+    	  		The following texts are replaced:
+    	  		<dl>
+    	  			<dt>{printingTemp}</dt><dd>Printing temperature</dd>
+     	 			<dt>{printingBedTemp}</dt><dd>Printing bed temperature</dd>
+      				<dt>{preheatTemp}</dt><dd>Preheat temperature</dd>
+      				<dt>{preheatBedTemp}</dt><dd>Preheat bed temperature</dd>
+      				<dt>{printerType}</dt><dd>Printer type</dd>
+      			</dl>
+      		</small>
       	</div>
-      	<small>
-      		The following texts are replaced:
-      		<dl>
-      			<dt>{printingTemp}</dt><dd>Printing temperature</dd>
-      			<dt>{printingBedTemp}</dt><dd>Printing bed temperature</dd>
-      			<dt>{preheatTemp}</dt><dd>Preheat temperature</dd>
-      			<dt>{preheatBedTemp}</dt><dd>Preheat bed temperature</dd>
-      			<dt>{printerType}</dt><dd>Printer type</dd>
-      		</dl>
-      	</small>
       </fieldset>
     </fieldset>