My Marlin configs for Fabrikator Mini and CTC i3 Pro B
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

jstepper.js 6.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. /*!
  2. * jQuery "stepper" Plugin
  3. * version 0.0.1
  4. * @requires jQuery v1.3.2 or later
  5. * @requires jCanvas
  6. *
  7. * Authored 2011-06-11 Scott Lahteine (thinkyhead.com)
  8. *
  9. * A very simple numerical stepper.
  10. * TODO: place arrows based on div size, make 50/50 width
  11. *
  12. * Usage example:
  13. *
  14. * $('#mydiv').jstepper({
  15. * min: 1,
  16. * max: 4,
  17. * val: 1,
  18. * arrowWidth: 15,
  19. * arrowHeight: '22px',
  20. * color: '#FFF',
  21. * acolor: '#F70',
  22. * hcolor: '#FF0',
  23. * id: 'select-me',
  24. * stepperClass: 'inner',
  25. * textStyle: {width:'1.5em',fontSize:'20px',textAlign:'center'},
  26. * onChange: function(v) { },
  27. * });
  28. *
  29. */
  30. ;(function($) {
  31. var un = 'undefined';
  32. $.jstepperArrows = [
  33. { name:'prev', poly:[[1.0,0],[0,0.5],[1.0,1.0]] },
  34. { name:'next', poly:[[0,0],[1.0,0.5],[0,1.0]] }
  35. ];
  36. $.fn.jstepper = function(args) {
  37. return this.each(function() {
  38. var defaults = {
  39. min: 1,
  40. max: null,
  41. val: null,
  42. active: true,
  43. placeholder: null,
  44. arrowWidth: 0,
  45. arrowHeight: 0,
  46. color: '#FFF',
  47. hcolor: '#FF0',
  48. acolor: '#F80',
  49. id: '',
  50. stepperClass: '',
  51. textStyle: '',
  52. onChange: (function(v){ if (typeof console.log !== 'undefined') console.log("val="+v); })
  53. };
  54. args = $.extend(defaults, args || {});
  55. var min = args.min * 1,
  56. max = (args.max !== null) ? args.max * 1 : min,
  57. span = max - min + 1,
  58. val = (args.val !== null) ? args.val * 1 : min,
  59. active = !args.disabled,
  60. placeholder = args.placeholder,
  61. arrowWidth = 1 * args.arrowWidth.toString().replace(/px/,''),
  62. arrowHeight = 1 * args.arrowHeight.toString().replace(/px/,''),
  63. color = args.color,
  64. hcolor = args.hcolor,
  65. acolor = args.acolor,
  66. $prev = $('<a href="#prev" style="cursor:w-resize;"><canvas/></a>'),
  67. $marq = $('<div class="number"/>').css({float:'left',textAlign:'center'}),
  68. $next = $('<a href="#next" style="cursor:e-resize;"><canvas/></a>'),
  69. arrow = [ $prev.find('canvas')[0], $next.find('canvas')[0] ],
  70. $stepper = $('<span class="jstepper"/>').append($prev).append($marq).append($next).append('<div style="clear:both;"/>'),
  71. onChange = args.onChange;
  72. if (args.id) $stepper[0].id = args.id;
  73. if (args.stepperClass) $stepper.addClass(args.stepperClass);
  74. if (args.textStyle) $marq.css(args.textStyle);
  75. // replace a span, but embed elsewhere
  76. if (this.tagName == 'SPAN') {
  77. var previd = this.id;
  78. $(this).replaceWith($stepper);
  79. if (previd) $stepper.attr('id',previd);
  80. }
  81. else {
  82. $(this).append($stepper);
  83. }
  84. // hook to call functions on this object
  85. $stepper[0].ui = {
  86. refresh: function() {
  87. this.updateNumber();
  88. this._drawArrow(0, 1);
  89. this._drawArrow(1, 1);
  90. return this;
  91. },
  92. _drawArrow: function(i,state) {
  93. var $elm = $(arrow[i]),
  94. desc = $.jstepperArrows[i],
  95. fillStyle = (state == 2) ? hcolor : (state == 3) ? acolor : color,
  96. draw = { fillStyle: fillStyle },
  97. w = $elm.width(), h = $elm.height();
  98. if (w <= 0) w = $elm.attr('width');
  99. if (h <= 0) h = $elm.attr('height');
  100. $.each(desc.poly,function(i,v){
  101. ++i;
  102. draw['x'+i] = v[0] * w;
  103. draw['y'+i] = v[1] * h;
  104. });
  105. $elm.restoreCanvas().clearCanvas().drawLine(draw);
  106. },
  107. updateNumber: function() {
  108. $marq.html((active || placeholder === null) ? val.toString() : placeholder);
  109. return this;
  110. },
  111. _doclick: function(i) {
  112. this.add(i ? 1 : -1);
  113. this._drawArrow(i, 3);
  114. var self = this;
  115. setTimeout(function(){ self._drawArrow(i, 2); }, 50);
  116. },
  117. add: function(x) {
  118. val = (((val - min) + x + span) % span) + min;
  119. this.updateNumber();
  120. this.didChange(val);
  121. return this;
  122. },
  123. min: function(v) {
  124. if (typeof v === un) return min;
  125. this.setRange(v,max);
  126. return this;
  127. },
  128. max: function(v) {
  129. if (typeof v === un) return max;
  130. this.setRange(min,v);
  131. return this;
  132. },
  133. val: function(v) {
  134. if (typeof v === un) return val;
  135. val = (((v - min) + span) % span) + min;
  136. this.updateNumber();
  137. return this;
  138. },
  139. setRange: function(lo, hi, ini) {
  140. if (lo > hi) hi = (lo += hi -= lo) - hi;
  141. min = lo; max = hi; span = hi - lo + 1;
  142. if (typeof ini !== un) val = ini;
  143. if (val < min) val = min;
  144. if (val > max) val = max;
  145. this.updateNumber();
  146. return this;
  147. },
  148. active: function(a) {
  149. if (typeof a === un) return active;
  150. (active = a) ? $marq.removeClass('inactive') : $marq.addClass('inactive');
  151. this.updateNumber();
  152. return this;
  153. },
  154. disable: function() { this.active(false); return this; },
  155. enable: function() { this.active(true); return this; },
  156. clearPlaceholder: function() {
  157. this.setPlaceholder(null);
  158. return this;
  159. },
  160. setPlaceholder: function(p) {
  161. placeholder = p;
  162. if (!active) this.updateNumber();
  163. return this;
  164. },
  165. didChange: onChange
  166. };
  167. // set hover and click for each arrow
  168. $.each($.jstepperArrows, function(i,desc) {
  169. var $elm = $(arrow[i]),
  170. w = arrowWidth ? arrowWidth : $elm.width() ? $elm.width() : 15,
  171. h = arrowHeight ? arrowHeight : $elm.height() ? $elm.height() : 24;
  172. $elm[0]._index = i;
  173. $elm
  174. .css({float:'left'})
  175. .attr({width:w,height:h,'class':desc.name})
  176. .hover(
  177. function(e) { $stepper[0].ui._drawArrow(e.target._index, 2); },
  178. function(e) { $stepper[0].ui._drawArrow(e.target._index, 1); }
  179. )
  180. .click(function(e){
  181. $stepper[0].ui._doclick(e.target._index);
  182. return false;
  183. });
  184. });
  185. // init the visuals first time
  186. $stepper[0].ui.refresh();
  187. }); // this.each
  188. }; // $.fn.jstepper
  189. })( jQuery );