bootstrap-spinedit.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. // Licensed to Cloudera, Inc. under one
  2. // or more contributor license agreements. See the NOTICE file
  3. // distributed with this work for additional information
  4. // regarding copyright ownership. Cloudera, Inc. licenses this file
  5. // to you under the Apache License, Version 2.0 (the
  6. // "License"); you may not use this file except in compliance
  7. // with the License. You may obtain a copy of the License at
  8. //
  9. // http://www.apache.org/licenses/LICENSE-2.0
  10. //
  11. // Unless required by applicable law or agreed to in writing, software
  12. // distributed under the License is distributed on an "AS IS" BASIS,
  13. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. // See the License for the specific language governing permissions and
  15. // limitations under the License.
  16. jQuery.fn.mousehold = function (f) {
  17. var timeout = 100;
  18. if (f && typeof f == 'function') {
  19. var intervalId = 0;
  20. var firstStep = false;
  21. var clearMousehold = undefined;
  22. return this.each(function () {
  23. $(this).mousedown(function () {
  24. firstStep = true;
  25. var ctr = 0;
  26. var t = this;
  27. intervalId = setInterval(function () {
  28. ctr++;
  29. f.call(t, ctr);
  30. firstStep = false;
  31. }, timeout);
  32. });
  33. clearMousehold = function () {
  34. clearInterval(intervalId);
  35. if (firstStep) f.call(this, 1);
  36. firstStep = false;
  37. };
  38. $(this).mouseout(clearMousehold);
  39. $(this).mouseup(clearMousehold);
  40. });
  41. }
  42. };
  43. !function ($) {
  44. var SpinEdit = function (element, options) {
  45. this.element = $(element);
  46. this.element.addClass("spinedit");
  47. this.element.addClass("noSelect");
  48. this.intervalId = undefined;
  49. var hasOptions = typeof options == 'object';
  50. this.minimum = $.fn.spinedit.defaults.minimum;
  51. if (hasOptions && typeof options.minimum == 'number') {
  52. this.setMinimum(options.minimum);
  53. }
  54. this.maximum = $.fn.spinedit.defaults.maximum;
  55. if (hasOptions && typeof options.maximum == 'number') {
  56. this.setMaximum(options.maximum);
  57. }
  58. this.numberOfDecimals = $.fn.spinedit.defaults.numberOfDecimals;
  59. if (hasOptions && typeof options.numberOfDecimals == 'number') {
  60. this.setNumberOfDecimals(options.numberOfDecimals);
  61. }
  62. var value = $.fn.spinedit.defaults.value;
  63. if (hasOptions && typeof options.value == 'number') {
  64. value = options.value;
  65. } else {
  66. if (this.element.val()) {
  67. var initialValue = parseFloat(this.element.val());
  68. if (!isNaN(initialValue)) value = initialValue.toFixed(this.numberOfDecimals);
  69. }
  70. }
  71. this.setValue(value);
  72. this.step = $.fn.spinedit.defaults.step;
  73. if (hasOptions && typeof options.step == 'number') {
  74. this.setStep(options.step);
  75. }
  76. var template = $(DRPGlobal.template);
  77. this.element.after(template);
  78. $(template).each(function (i, x) {
  79. $(x).bind('selectstart click mousedown', function () {
  80. return false;
  81. });
  82. });
  83. template.find('.fa-chevron-up').mousehold($.proxy(this.increase, this));
  84. template.find('.fa-chevron-down').mousehold($.proxy(this.decrease, this));
  85. this.element.on('keypress', $.proxy(this._keypress, this));
  86. this.element.on('blur', $.proxy(this._checkConstraints, this));
  87. };
  88. SpinEdit.prototype = {
  89. constructor: SpinEdit,
  90. setMinimum: function (value) {
  91. this.minimum = parseFloat(value);
  92. },
  93. setMaximum: function (value) {
  94. this.maximum = parseFloat(value);
  95. },
  96. setStep: function (value) {
  97. this.step = parseFloat(value);
  98. },
  99. setNumberOfDecimals: function (value) {
  100. this.numberOfDecimals = parseInt(value);
  101. },
  102. setValue: function (value) {
  103. value = parseFloat(value);
  104. if (isNaN(value))
  105. value = this.minimum;
  106. if (this.value == value)
  107. return;
  108. if (value < this.minimum)
  109. value = this.minimum;
  110. if (value > this.maximum)
  111. value = this.maximum;
  112. this.value = value;
  113. this.element.val(this.value.toFixed(this.numberOfDecimals));
  114. this.element.change();
  115. this.element.trigger({
  116. type: "valueChanged",
  117. value: parseFloat(this.value.toFixed(this.numberOfDecimals))
  118. });
  119. },
  120. increase: function () {
  121. var newValue = this.value + this.step;
  122. this.setValue(newValue);
  123. },
  124. decrease: function () {
  125. var newValue = this.value - this.step;
  126. this.setValue(newValue);
  127. },
  128. _keypress: function (event) {
  129. var key = event.keyCode || event.charCode;
  130. // Allow: -
  131. if (key == 45) {
  132. return;
  133. }
  134. // Allow decimal separator (.)
  135. if (this.numberOfDecimals > 0 && key == 46) {
  136. return;
  137. }
  138. // Ensure that it is a number and stop the keypress
  139. var a = [];
  140. for (var i = 48; i < 58; i++)
  141. a.push(i);
  142. if (!(a.indexOf(key) >= 0))
  143. event.preventDefault();
  144. },
  145. _checkConstraints: function (e) {
  146. var target = $(e.target);
  147. this.setValue(target.val());
  148. }
  149. };
  150. $.fn.spinedit = function (option) {
  151. var args = Array.apply(null, arguments);
  152. args.shift();
  153. return this.each(function () {
  154. var $this = $(this),
  155. data = $this.data('spinedit'),
  156. options = typeof option == 'object' && option;
  157. if (!data) {
  158. $this.data('spinedit', new SpinEdit(this, $.extend({}, $.fn.spinedit().defaults, options)));
  159. data = $this.data('spinedit');
  160. }
  161. if (typeof option == 'string' && typeof data[option] == 'function') {
  162. data[option].apply(data, args);
  163. }
  164. });
  165. };
  166. $.fn.spinedit.defaults = {
  167. value: 0,
  168. minimum: 0,
  169. maximum: 100,
  170. step: 1,
  171. numberOfDecimals: 0
  172. };
  173. $.fn.spinedit.Constructor = SpinEdit;
  174. var DRPGlobal = {};
  175. DRPGlobal.template =
  176. '<div class="spinedit">' +
  177. '<i class="fa fa-chevron-up"></i>' +
  178. '<i class="fa fa-chevron-down"></i>' +
  179. '</div>';
  180. }(window.jQuery);