elements.spinner.js 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. /**
  2. <b>Spinner</b>. A wrapper for FuelUX spinner element.
  3. It's just a wrapper so you still need to include FuelUX spinner script first.
  4. */
  5. (function($ , undefined) {
  6. //a wrapper for fuelux spinner
  7. function Ace_Spinner(element , options) {
  8. var max = options.max
  9. max = (''+max).length
  10. var width = parseInt(Math.max((max * 20 + 40) , 90))
  11. var $element = $(element);
  12. $element.addClass('spinbox-input form-control').wrap('<div class="ace-spinner middle">')
  13. var $parent_div = $element.closest('.ace-spinner').spinbox(options).wrapInner("<div class='input-group'></div>")
  14. var $spinner = $parent_div.data('fu.spinbox');
  15. if(options.on_sides)
  16. {
  17. $element
  18. .before('<div class="spinbox-buttons input-group-btn">\
  19. <button type="button" class="btn spinbox-down btn-xs '+options.btn_down_class+'">\
  20. <i class="'+ ace.vars['icon'] + options.icon_down+'"></i>\
  21. </button>\
  22. </div>')
  23. .after('<div class="spinbox-buttons input-group-btn">\
  24. <button type="button" class="btn spinbox-up btn-xs '+options.btn_up_class+'">\
  25. <i class="'+ ace.vars['icon'] + options.icon_up+'"></i>\
  26. </button>\
  27. </div>');
  28. $parent_div.addClass('touch-spinner')
  29. $parent_div.css('width' , width+'px')
  30. }
  31. else {
  32. $element
  33. .after('<div class="spinbox-buttons input-group-btn">\
  34. <button type="button" class="btn spinbox-up btn-xs '+options.btn_up_class+'">\
  35. <i class="'+ ace.vars['icon'] + options.icon_up+'"></i>\
  36. </button>\
  37. <button type="button" class="btn spinbox-down btn-xs '+options.btn_down_class+'">\
  38. <i class="'+ ace.vars['icon'] + options.icon_down+'"></i>\
  39. </button>\
  40. </div>')
  41. if(ace.vars['touch'] || options.touch_spinner) {
  42. $parent_div.addClass('touch-spinner')
  43. $parent_div.css('width' , width+'px')
  44. }
  45. else {
  46. $element.next().addClass('btn-group-vertical');
  47. $parent_div.css('width' , width+'px')
  48. }
  49. }
  50. $parent_div.on('changed', function(){
  51. $element.trigger('change')//trigger the input's change event
  52. });
  53. this._call = function(name, arg) {
  54. $spinner[name](arg);
  55. }
  56. }
  57. $.fn.ace_spinner = function(option, value) {
  58. var retval;
  59. var $set = this.each(function() {
  60. var $this = $(this);
  61. var data = $this.data('ace_spinner');
  62. var options = typeof option === 'object' && option;
  63. if (!data) {
  64. options = $.extend({}, $.fn.ace_spinner.defaults, option);
  65. $this.data('ace_spinner', (data = new Ace_Spinner(this, options)));
  66. }
  67. if (typeof option === 'string') retval = data._call(option, value);
  68. });
  69. return (retval === undefined) ? $set : retval;
  70. }
  71. $.fn.ace_spinner.defaults = {
  72. 'icon_up' : 'fa fa-chevron-up',
  73. 'icon_down': 'fa fa-chevron-down',
  74. 'on_sides': false,
  75. 'btn_up_class': '',
  76. 'btn_down_class' : '',
  77. 'max' : 999,
  78. 'touch_spinner': false
  79. }
  80. })(window.jQuery);