From ff397700b7556620669d93a6bad36fb2e83ec88f Mon Sep 17 00:00:00 2001
From: peteruithoven <peter@peteruithoven.nl>
Date: Wed, 4 Dec 2013 13:42:37 +0100
Subject: [PATCH] Made gcodePanel collapsible using coolfieldset

---
 js_src/PrinterPanel.js             |   3 ++
 js_src/libs/jquery-coolfieldset.js |  57 +++++++++++++++++++++++++++++
 www/css/settings.css               |  24 ++++++++++++
 www/img/buttons/collapsed.gif      | Bin 0 -> 106 bytes
 www/img/buttons/expanded.gif       | Bin 0 -> 107 bytes
 www/index.html                     |   1 +
 www/settings.html                  |  36 +++++++++---------
 7 files changed, 104 insertions(+), 17 deletions(-)
 create mode 100644 js_src/libs/jquery-coolfieldset.js
 create mode 100644 www/img/buttons/collapsed.gif
 create mode 100644 www/img/buttons/expanded.gif

diff --git a/js_src/PrinterPanel.js b/js_src/PrinterPanel.js
index 0e50997..00663cc 100644
--- a/js_src/PrinterPanel.js
+++ b/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");
diff --git a/js_src/libs/jquery-coolfieldset.js b/js_src/libs/jquery-coolfieldset.js
new file mode 100644
index 0000000..d0976a5
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/www/css/settings.css b/www/css/settings.css
index cf5d48a..8e80f71 100644
--- a/www/css/settings.css
+++ b/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;
diff --git a/www/img/buttons/collapsed.gif b/www/img/buttons/collapsed.gif
new file mode 100644
index 0000000000000000000000000000000000000000..108ff044e9623718c005b653b5046a4d947f1f1b
GIT binary patch
literal 106
zcmZ?wbhEHb<Y3@n*v!EI1PTfY_wV0-|Ni~_`Sa`R>-X>9@8IC@|NnoG90pMQ$->A0
n)T#rL0hz(TA}+w`qRo_ggPUoi1BVQoYM<)!#+zojf(+IGAN(2z

literal 0
HcmV?d00001

diff --git a/www/img/buttons/expanded.gif b/www/img/buttons/expanded.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f520c08d400427536999d6de056be910c955b501
GIT binary patch
literal 107
zcmZ?wbhEHb<Y3@n*v!KK1n=L!cW`h>NJv<}etmy`e?dWkfPldM{rm6VzptR6aQ^)H
z|NsAk)PaHGPZmZ71|9|-5D#Pq1B=9jlbW16!aW-qCvmF<9G)6*FfkxVa6<tLgEat?
CSs~g0

literal 0
HcmV?d00001

diff --git a/www/index.html b/www/index.html
index f0fc3dd..5474772 100644
--- a/www/index.html
+++ b/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>
 
diff --git a/www/settings.html b/www/settings.html
index a4323c7..666c10e 100644
--- a/www/settings.html
+++ b/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">
-       		<label for="startgcode">Start:</label><br/>
-       		<textarea id="startgcode" class="gcode" name="printer.startcode"></textarea>
-     	</div>
-      	<div>
-        	<label for="endgcode">End:</label><br/>
-        	<textarea id="endgcode" class="gcode" name="printer.endcode"></textarea>
+ 		<div>
+ 			<div class="startgcode_left">
+     	  		<label for="startgcode">Start:</label><br/>
+      	 		<textarea id="startgcode" class="gcode" name="printer.startcode"></textarea>
+     		</div>
+     	 	<div>
+     		   	<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>