spinner.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. /*
  2. * Fuel UX Spinner
  3. * https://github.com/ExactTarget/fuelux
  4. *
  5. * Copyright (c) 2012 ExactTarget
  6. * Licensed under the MIT license.
  7. */
  8. // SPINNER CONSTRUCTOR AND PROTOTYPE
  9. var Spinner = function (element, options) {
  10. this.$element = $(element);
  11. this.options = $.extend({}, $.fn.spinner.defaults, options);
  12. this.$input = this.$element.find('.spinner-input');
  13. this.$element.on('keyup', this.$input, $.proxy(this.change, this));
  14. if (this.options.hold) {
  15. this.$element.on('mousedown', '.spinner-up', $.proxy(function() { this.startSpin(true); } , this));
  16. this.$element.on('mouseup', '.spinner-up, .spinner-down', $.proxy(this.stopSpin, this));
  17. this.$element.on('mouseout', '.spinner-up, .spinner-down', $.proxy(this.stopSpin, this));
  18. this.$element.on('mousedown', '.spinner-down', $.proxy(function() {this.startSpin(false);} , this));
  19. } else {
  20. this.$element.on('click', '.spinner-up', $.proxy(function() { this.step(true); } , this));
  21. this.$element.on('click', '.spinner-down', $.proxy(function() { this.step(false); }, this));
  22. }
  23. this.switches = {
  24. count: 1,
  25. enabled: true
  26. };
  27. if (this.options.speed === 'medium') {
  28. this.switches.speed = 300;
  29. } else if (this.options.speed === 'fast') {
  30. this.switches.speed = 100;
  31. } else {
  32. this.switches.speed = 500;
  33. }
  34. this.lastValue = null;
  35. this.render();
  36. if (this.options.disabled) {
  37. this.disable();
  38. }
  39. };
  40. Spinner.prototype = {
  41. constructor: Spinner,
  42. render: function () {
  43. var inputValue = this.$input.val();
  44. if (inputValue) {
  45. this.value(inputValue);
  46. } else {
  47. this.$input.val(this.options.value);
  48. }
  49. this.$input.attr('maxlength', (this.options.max + '').split('').length);
  50. },
  51. change: function () {
  52. var newVal = this.$input.val();
  53. if(newVal/1){
  54. this.options.value = newVal/1;
  55. }else{
  56. newVal = newVal.replace(/[^0-9]/g,'') || '';
  57. this.$input.val(newVal);
  58. this.options.value = newVal/1;
  59. }
  60. this.triggerChangedEvent();
  61. },
  62. stopSpin: function () {
  63. if(this.switches.timeout!==undefined){
  64. clearTimeout(this.switches.timeout);
  65. this.switches.count = 1;
  66. this.triggerChangedEvent();
  67. }
  68. },
  69. triggerChangedEvent: function () {
  70. var currentValue = this.value();
  71. if (currentValue === this.lastValue) return;
  72. this.lastValue = currentValue;
  73. // Primary changed event
  74. this.$element.trigger('changed', currentValue);
  75. // Undocumented, kept for backward compatibility
  76. this.$element.trigger('change');
  77. },
  78. startSpin: function (type) {
  79. if (!this.options.disabled) {
  80. var divisor = this.switches.count;
  81. if (divisor === 1) {
  82. this.step(type);
  83. divisor = 1;
  84. } else if (divisor < 3){
  85. divisor = 1.5;
  86. } else if (divisor < 8){
  87. divisor = 2.5;
  88. } else {
  89. divisor = 4;
  90. }
  91. this.switches.timeout = setTimeout($.proxy(function() {this.iterator(type);} ,this),this.switches.speed/divisor);
  92. this.switches.count++;
  93. }
  94. },
  95. iterator: function (type) {
  96. this.step(type);
  97. this.startSpin(type);
  98. },
  99. step: function (dir) {
  100. var curValue = this.options.value;
  101. var limValue = dir ? this.options.max : this.options.min;
  102. var digits, multiple;
  103. if ((dir ? curValue < limValue : curValue > limValue)) {
  104. var newVal = curValue + (dir ? 1 : -1) * this.options.step;
  105. if(this.options.step % 1 !== 0){
  106. digits = (this.options.step + '').split('.')[1].length;
  107. multiple = Math.pow(10, digits);
  108. newVal = Math.round(newVal * multiple) / multiple;
  109. }
  110. if (dir ? newVal > limValue : newVal < limValue) {
  111. this.value(limValue);
  112. } else {
  113. this.value(newVal);
  114. }
  115. } else if (this.options.cycle) {
  116. var cycleVal = dir ? this.options.min : this.options.max;
  117. this.value(cycleVal);
  118. }
  119. },
  120. value: function (value) {
  121. if (!isNaN(parseFloat(value)) && isFinite(value)) {
  122. value = parseFloat(value);
  123. this.options.value = value;
  124. this.$input.val(value);
  125. return this;
  126. } else {
  127. return this.options.value;
  128. }
  129. },
  130. disable: function () {
  131. this.options.disabled = true;
  132. this.$input.attr('disabled','');
  133. this.$element.find('button').addClass('disabled');
  134. },
  135. enable: function () {
  136. this.options.disabled = false;
  137. this.$input.removeAttr("disabled");
  138. this.$element.find('button').removeClass('disabled');
  139. }
  140. };
  141. // SPINNER PLUGIN DEFINITION
  142. $.fn.spinner = function (option) {
  143. var args = Array.prototype.slice.call( arguments, 1 );
  144. var methodReturn;
  145. var $set = this.each(function () {
  146. var $this = $( this );
  147. var data = $this.data( 'spinner' );
  148. var options = typeof option === 'object' && option;
  149. if( !data ) $this.data('spinner', (data = new Spinner( this, options ) ) );
  150. if( typeof option === 'string' ) methodReturn = data[ option ].apply( data, args );
  151. });
  152. return ( methodReturn === undefined ) ? $set : methodReturn;
  153. };
  154. $.fn.spinner.defaults = {
  155. value: 1,
  156. min: 1,
  157. max: 999,
  158. step: 1,
  159. hold: true,
  160. speed: 'medium',
  161. disabled: false
  162. };
  163. $.fn.spinner.Constructor = Spinner;
  164. $.fn.spinner.noConflict = function () {
  165. $.fn.spinner = old;
  166. return this;
  167. };
  168. // SPINNER DATA-API
  169. $(function () {
  170. $('body').on('mousedown.spinner.data-api', '.spinner', function () {
  171. var $this = $(this);
  172. if ($this.data('spinner')) return;
  173. $this.spinner($this.data());
  174. });
  175. });