An in-place browser-based configurator utility
- A web form with fields for configuration values - Reads and parses standard config files - Modifies configurations dynamically in-place
This commit is contained in:
Scott Lahteine
220
Marlin/configurator/js/jstepper.js
Normal file
220
Marlin/configurator/js/jstepper.js
Normal file
@ -0,0 +1,220 @@
|
||||
/*!
|
||||
* jQuery "stepper" Plugin
|
||||
* version 0.0.1
|
||||
* @requires jQuery v1.3.2 or later
|
||||
* @requires jCanvas
|
||||
*
|
||||
* Authored 2011-06-11 Scott Lahteine (thinkyhead.com)
|
||||
*
|
||||
* A very simple numerical stepper.
|
||||
* TODO: place arrows based on div size, make 50/50 width
|
||||
*
|
||||
* Usage example:
|
||||
*
|
||||
* $('#mydiv').jstepper({
|
||||
* min: 1,
|
||||
* max: 4,
|
||||
* val: 1,
|
||||
* arrowWidth: 15,
|
||||
* arrowHeight: '22px',
|
||||
* color: '#FFF',
|
||||
* acolor: '#F70',
|
||||
* hcolor: '#FF0',
|
||||
* id: 'select-me',
|
||||
* stepperClass: 'inner',
|
||||
* textStyle: {width:'1.5em',fontSize:'20px',textAlign:'center'},
|
||||
* onChange: function(v) { },
|
||||
* });
|
||||
*
|
||||
*/
|
||||
;(function($) {
|
||||
var un = 'undefined';
|
||||
|
||||
$.jstepperArrows = [
|
||||
{ name:'prev', poly:[[1.0,0],[0,0.5],[1.0,1.0]] },
|
||||
{ name:'next', poly:[[0,0],[1.0,0.5],[0,1.0]] }
|
||||
];
|
||||
|
||||
$.fn.jstepper = function(args) {
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var defaults = {
|
||||
min: 1,
|
||||
max: null,
|
||||
val: null,
|
||||
active: true,
|
||||
placeholder: null,
|
||||
arrowWidth: 0,
|
||||
arrowHeight: 0,
|
||||
color: '#FFF',
|
||||
hcolor: '#FF0',
|
||||
acolor: '#F80',
|
||||
id: '',
|
||||
stepperClass: '',
|
||||
textStyle: '',
|
||||
onChange: (function(v){ if (typeof console.log !== 'undefined') console.log("val="+v); })
|
||||
};
|
||||
|
||||
args = $.extend(defaults, args || {});
|
||||
|
||||
var min = args.min * 1,
|
||||
max = (args.max !== null) ? args.max * 1 : min,
|
||||
span = max - min + 1,
|
||||
val = (args.val !== null) ? args.val * 1 : min,
|
||||
active = !args.disabled,
|
||||
placeholder = args.placeholder,
|
||||
arrowWidth = 1 * args.arrowWidth.toString().replace(/px/,''),
|
||||
arrowHeight = 1 * args.arrowHeight.toString().replace(/px/,''),
|
||||
color = args.color,
|
||||
hcolor = args.hcolor,
|
||||
acolor = args.acolor,
|
||||
$prev = $('<a href="#prev" style="cursor:w-resize;"><canvas/></a>'),
|
||||
$marq = $('<div class="number"/>').css({float:'left',textAlign:'center'}),
|
||||
$next = $('<a href="#next" style="cursor:e-resize;"><canvas/></a>'),
|
||||
arrow = [ $prev.find('canvas')[0], $next.find('canvas')[0] ],
|
||||
$stepper = $('<span class="jstepper"/>').append($prev).append($marq).append($next).append('<div style="clear:both;"/>'),
|
||||
onChange = args.onChange;
|
||||
|
||||
if (args.id) $stepper[0].id = args.id;
|
||||
if (args.stepperClass) $stepper.addClass(args.stepperClass);
|
||||
if (args.textStyle) $marq.css(args.textStyle);
|
||||
|
||||
// replace a span, but embed elsewhere
|
||||
if (this.tagName == 'SPAN') {
|
||||
var previd = this.id;
|
||||
$(this).replaceWith($stepper);
|
||||
if (previd) $stepper.attr('id',previd);
|
||||
}
|
||||
else {
|
||||
$(this).append($stepper);
|
||||
}
|
||||
|
||||
// hook to call functions on this object
|
||||
$stepper[0].ui = {
|
||||
|
||||
refresh: function() {
|
||||
this.updateNumber();
|
||||
this._drawArrow(0, 1);
|
||||
this._drawArrow(1, 1);
|
||||
return this;
|
||||
},
|
||||
|
||||
_drawArrow: function(i,state) {
|
||||
var $elm = $(arrow[i]),
|
||||
desc = $.jstepperArrows[i],
|
||||
fillStyle = (state == 2) ? hcolor : (state == 3) ? acolor : color,
|
||||
draw = { fillStyle: fillStyle },
|
||||
w = $elm.width(), h = $elm.height();
|
||||
|
||||
if (w <= 0) w = $elm.attr('width');
|
||||
if (h <= 0) h = $elm.attr('height');
|
||||
|
||||
$.each(desc.poly,function(i,v){
|
||||
++i;
|
||||
draw['x'+i] = v[0] * w;
|
||||
draw['y'+i] = v[1] * h;
|
||||
});
|
||||
$elm.restoreCanvas().clearCanvas().drawLine(draw);
|
||||
},
|
||||
|
||||
updateNumber: function() {
|
||||
$marq.html((active || placeholder === null) ? val.toString() : placeholder);
|
||||
return this;
|
||||
},
|
||||
|
||||
_doclick: function(i) {
|
||||
this.add(i ? 1 : -1);
|
||||
this._drawArrow(i, 3);
|
||||
var self = this;
|
||||
setTimeout(function(){ self._drawArrow(i, 2); }, 50);
|
||||
},
|
||||
|
||||
add: function(x) {
|
||||
val = (((val - min) + x + span) % span) + min;
|
||||
this.updateNumber();
|
||||
this.didChange(val);
|
||||
return this;
|
||||
},
|
||||
|
||||
min: function(v) {
|
||||
if (typeof v === un) return min;
|
||||
this.setRange(v,max);
|
||||
return this;
|
||||
},
|
||||
|
||||
max: function(v) {
|
||||
if (typeof v === un) return max;
|
||||
this.setRange(min,v);
|
||||
return this;
|
||||
},
|
||||
|
||||
val: function(v) {
|
||||
if (typeof v === un) return val;
|
||||
val = (((v - min) + span) % span) + min;
|
||||
this.updateNumber();
|
||||
return this;
|
||||
},
|
||||
|
||||
setRange: function(lo, hi, ini) {
|
||||
if (lo > hi) hi = (lo += hi -= lo) - hi;
|
||||
min = lo; max = hi; span = hi - lo + 1;
|
||||
if (typeof ini !== un) val = ini;
|
||||
if (val < min) val = min;
|
||||
if (val > max) val = max;
|
||||
this.updateNumber();
|
||||
return this;
|
||||
},
|
||||
|
||||
active: function(a) {
|
||||
if (typeof a === un) return active;
|
||||
(active = a) ? $marq.removeClass('inactive') : $marq.addClass('inactive');
|
||||
this.updateNumber();
|
||||
return this;
|
||||
},
|
||||
|
||||
disable: function() { this.active(false); return this; },
|
||||
enable: function() { this.active(true); return this; },
|
||||
|
||||
clearPlaceholder: function() {
|
||||
this.setPlaceholder(null);
|
||||
return this;
|
||||
},
|
||||
setPlaceholder: function(p) {
|
||||
placeholder = p;
|
||||
if (!active) this.updateNumber();
|
||||
return this;
|
||||
},
|
||||
|
||||
didChange: onChange
|
||||
|
||||
};
|
||||
|
||||
// set hover and click for each arrow
|
||||
$.each($.jstepperArrows, function(i,desc) {
|
||||
var $elm = $(arrow[i]),
|
||||
w = arrowWidth ? arrowWidth : $elm.width() ? $elm.width() : 15,
|
||||
h = arrowHeight ? arrowHeight : $elm.height() ? $elm.height() : 24;
|
||||
$elm[0]._index = i;
|
||||
$elm
|
||||
.css({float:'left'})
|
||||
.attr({width:w,height:h,'class':desc.name})
|
||||
.hover(
|
||||
function(e) { $stepper[0].ui._drawArrow(e.target._index, 2); },
|
||||
function(e) { $stepper[0].ui._drawArrow(e.target._index, 1); }
|
||||
)
|
||||
.click(function(e){
|
||||
$stepper[0].ui._doclick(e.target._index);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
// init the visuals first time
|
||||
$stepper[0].ui.refresh();
|
||||
|
||||
}); // this.each
|
||||
|
||||
}; // $.fn.jstepper
|
||||
|
||||
})( jQuery );
|
||||
|
||||
Reference in New Issue
Block a user