Made gcodePanel collapsible using coolfieldset
This commit is contained in:
peteruithoven
parent
965119de33
commit
ff397700b7
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 106 B |
Binary file not shown.
|
After Width: | Height: | Size: 107 B |
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue