jquery.bootstrap-touchspin.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675
  1. (function($) {
  2. 'use strict';
  3. var _currentSpinnerId = 0;
  4. function _scopedEventName(name, id) {
  5. return name + '.touchspin_' + id;
  6. }
  7. function _scopeEventNames(names, id) {
  8. return $.map(names, function(name) {
  9. return _scopedEventName(name, id);
  10. });
  11. }
  12. $.fn.TouchSpin = function(options) {
  13. if (options === 'destroy') {
  14. this.each(function() {
  15. var originalinput = $(this),
  16. originalinput_data = originalinput.data();
  17. $(document).off(_scopeEventNames([
  18. 'mouseup',
  19. 'touchend',
  20. 'touchcancel',
  21. 'mousemove',
  22. 'touchmove',
  23. 'scroll',
  24. 'scrollstart'], originalinput_data.spinnerid).join(' '));
  25. });
  26. return;
  27. }
  28. var defaults = {
  29. min: 0,
  30. max: 100,
  31. initval: '',
  32. step: 1,
  33. decimals: 0,
  34. stepinterval: 100,
  35. forcestepdivisibility: 'round', // none | floor | round | ceil
  36. stepintervaldelay: 500,
  37. verticalbuttons: false,
  38. verticalupclass: 'glyphicon glyphicon-chevron-up',
  39. verticaldownclass: 'glyphicon glyphicon-chevron-down',
  40. prefix: '',
  41. postfix: '',
  42. prefix_extraclass: '',
  43. postfix_extraclass: '',
  44. booster: true,
  45. boostat: 10,
  46. maxboostedstep: false,
  47. mousewheel: true,
  48. buttondown_class: 'btn btn-default',
  49. buttonup_class: 'btn btn-default'
  50. };
  51. var attributeMap = {
  52. min: 'min',
  53. max: 'max',
  54. initval: 'init-val',
  55. step: 'step',
  56. decimals: 'decimals',
  57. stepinterval: 'step-interval',
  58. verticalbuttons: 'vertical-buttons',
  59. verticalupclass: 'vertical-up-class',
  60. verticaldownclass: 'vertical-down-class',
  61. forcestepdivisibility: 'force-step-divisibility',
  62. stepintervaldelay: 'step-interval-delay',
  63. prefix: 'prefix',
  64. postfix: 'postfix',
  65. prefix_extraclass: 'prefix-extra-class',
  66. postfix_extraclass: 'postfix-extra-class',
  67. booster: 'booster',
  68. boostat: 'boostat',
  69. maxboostedstep: 'max-boosted-step',
  70. mousewheel: 'mouse-wheel',
  71. buttondown_class: 'button-down-class',
  72. buttonup_class: 'button-up-class'
  73. };
  74. return this.each(function() {
  75. var settings,
  76. originalinput = $(this),
  77. originalinput_data = originalinput.data(),
  78. container,
  79. elements,
  80. value,
  81. downSpinTimer,
  82. upSpinTimer,
  83. downDelayTimeout,
  84. upDelayTimeout,
  85. spincount = 0,
  86. spinning = false;
  87. init();
  88. function init() {
  89. if (originalinput.data('alreadyinitialized')) {
  90. return;
  91. }
  92. originalinput.data('alreadyinitialized', true);
  93. _currentSpinnerId += 1;
  94. originalinput.data('spinnerid', _currentSpinnerId);
  95. if (!originalinput.is('input')) {
  96. console.log('Must be an input.');
  97. return;
  98. }
  99. _initSettings();
  100. _setInitval();
  101. _checkValue();
  102. _buildHtml();
  103. _initElements();
  104. _hideEmptyPrefixPostfix();
  105. _bindEvents();
  106. _bindEventsInterface();
  107. elements.input.css('display', 'block');
  108. }
  109. function _setInitval() {
  110. if (settings.initval !== '' && originalinput.val() === '') {
  111. originalinput.val(settings.initval);
  112. }
  113. }
  114. function changeSettings(newsettings) {
  115. _updateSettings(newsettings);
  116. _checkValue();
  117. var value = elements.input.val();
  118. if (value !== '') {
  119. value = Number(elements.input.val());
  120. elements.input.val(value.toFixed(settings.decimals));
  121. }
  122. }
  123. function _initSettings() {
  124. settings = $.extend({}, defaults, originalinput_data, _parseAttributes(), options);
  125. }
  126. function _parseAttributes() {
  127. var data = {};
  128. $.each(attributeMap, function(key, value) {
  129. var attrName = 'bts-' + value + '';
  130. if (originalinput.is('[data-' + attrName + ']')) {
  131. data[key] = originalinput.data(attrName);
  132. }
  133. });
  134. return data;
  135. }
  136. function _updateSettings(newsettings) {
  137. settings = $.extend({}, settings, newsettings);
  138. }
  139. function _buildHtml() {
  140. var initval = originalinput.val(),
  141. parentelement = originalinput.parent();
  142. if (initval !== '') {
  143. initval = Number(initval).toFixed(settings.decimals);
  144. }
  145. originalinput.data('initvalue', initval).val(initval);
  146. originalinput.addClass('form-control');
  147. if (parentelement.hasClass('input-group')) {
  148. _advanceInputGroup(parentelement);
  149. }
  150. else {
  151. _buildInputGroup();
  152. }
  153. }
  154. function _advanceInputGroup(parentelement) {
  155. parentelement.addClass('bootstrap-touchspin');
  156. var prev = originalinput.prev(),
  157. next = originalinput.next();
  158. var downhtml,
  159. uphtml,
  160. prefixhtml = '<span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span>',
  161. postfixhtml = '<span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span>';
  162. if (prev.hasClass('input-group-btn')) {
  163. downhtml = '<button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">-</button>';
  164. prev.append(downhtml);
  165. }
  166. else {
  167. downhtml = '<span class="input-group-btn"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">-</button></span>';
  168. $(downhtml).insertBefore(originalinput);
  169. }
  170. if (next.hasClass('input-group-btn')) {
  171. uphtml = '<button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">+</button>';
  172. next.prepend(uphtml);
  173. }
  174. else {
  175. uphtml = '<span class="input-group-btn"><button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">+</button></span>';
  176. $(uphtml).insertAfter(originalinput);
  177. }
  178. $(prefixhtml).insertBefore(originalinput);
  179. $(postfixhtml).insertAfter(originalinput);
  180. container = parentelement;
  181. }
  182. function _buildInputGroup() {
  183. var html;
  184. if (settings.verticalbuttons) {
  185. html = '<div class="input-group bootstrap-touchspin"><span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span><span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span><span class="input-group-btn-vertical"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-up" type="button"><i class="' + settings.verticalupclass + '"></i></button><button class="' + settings.buttonup_class + ' bootstrap-touchspin-down" type="button"><i class="' + settings.verticaldownclass + '"></i></button></span></div>';
  186. }
  187. else {
  188. html = '<div class="input-group bootstrap-touchspin"><span class="input-group-btn"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">-</button></span><span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span><span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span><span class="input-group-btn"><button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">+</button></span></div>';
  189. }
  190. container = $(html).insertBefore(originalinput);
  191. $('.bootstrap-touchspin-prefix', container).after(originalinput);
  192. if (originalinput.hasClass('input-sm')) {
  193. container.addClass('input-group-sm');
  194. }
  195. else if (originalinput.hasClass('input-lg')) {
  196. container.addClass('input-group-lg');
  197. }
  198. }
  199. function _initElements() {
  200. elements = {
  201. down: $('.bootstrap-touchspin-down', container),
  202. up: $('.bootstrap-touchspin-up', container),
  203. input: $('input', container),
  204. prefix: $('.bootstrap-touchspin-prefix', container).addClass(settings.prefix_extraclass),
  205. postfix: $('.bootstrap-touchspin-postfix', container).addClass(settings.postfix_extraclass)
  206. };
  207. }
  208. function _hideEmptyPrefixPostfix() {
  209. if (settings.prefix === '') {
  210. elements.prefix.hide();
  211. }
  212. if (settings.postfix === '') {
  213. elements.postfix.hide();
  214. }
  215. }
  216. function _bindEvents() {
  217. originalinput.on('keydown', function(ev) {
  218. var code = ev.keyCode || ev.which;
  219. if (code === 38) {
  220. if (spinning !== 'up') {
  221. upOnce();
  222. startUpSpin();
  223. }
  224. ev.preventDefault();
  225. }
  226. else if (code === 40) {
  227. if (spinning !== 'down') {
  228. downOnce();
  229. startDownSpin();
  230. }
  231. ev.preventDefault();
  232. }
  233. });
  234. originalinput.on('keyup', function(ev) {
  235. var code = ev.keyCode || ev.which;
  236. if (code === 38) {
  237. stopSpin();
  238. }
  239. else if (code === 40) {
  240. stopSpin();
  241. }
  242. });
  243. originalinput.on('blur', function() {
  244. _checkValue();
  245. });
  246. elements.down.on('keydown', function(ev) {
  247. var code = ev.keyCode || ev.which;
  248. if (code === 32 || code === 13) {
  249. if (spinning !== 'down') {
  250. downOnce();
  251. startDownSpin();
  252. }
  253. ev.preventDefault();
  254. }
  255. });
  256. elements.down.on('keyup', function(ev) {
  257. var code = ev.keyCode || ev.which;
  258. if (code === 32 || code === 13) {
  259. stopSpin();
  260. }
  261. });
  262. elements.up.on('keydown', function(ev) {
  263. var code = ev.keyCode || ev.which;
  264. if (code === 32 || code === 13) {
  265. if (spinning !== 'up') {
  266. upOnce();
  267. startUpSpin();
  268. }
  269. ev.preventDefault();
  270. }
  271. });
  272. elements.up.on('keyup', function(ev) {
  273. var code = ev.keyCode || ev.which;
  274. if (code === 32 || code === 13) {
  275. stopSpin();
  276. }
  277. });
  278. elements.down.on('mousedown.touchspin', function(ev) {
  279. elements.down.off('touchstart.touchspin'); // android 4 workaround
  280. if (originalinput.is(':disabled')) {
  281. return;
  282. }
  283. downOnce();
  284. startDownSpin();
  285. ev.preventDefault();
  286. ev.stopPropagation();
  287. });
  288. elements.down.on('touchstart.touchspin', function(ev) {
  289. elements.down.off('mousedown.touchspin'); // android 4 workaround
  290. if (originalinput.is(':disabled')) {
  291. return;
  292. }
  293. downOnce();
  294. startDownSpin();
  295. ev.preventDefault();
  296. ev.stopPropagation();
  297. });
  298. elements.up.on('mousedown.touchspin', function(ev) {
  299. elements.up.off('touchstart.touchspin'); // android 4 workaround
  300. if (originalinput.is(':disabled')) {
  301. return;
  302. }
  303. upOnce();
  304. startUpSpin();
  305. ev.preventDefault();
  306. ev.stopPropagation();
  307. });
  308. elements.up.on('touchstart.touchspin', function(ev) {
  309. elements.up.off('mousedown.touchspin'); // android 4 workaround
  310. if (originalinput.is(':disabled')) {
  311. return;
  312. }
  313. upOnce();
  314. startUpSpin();
  315. ev.preventDefault();
  316. ev.stopPropagation();
  317. });
  318. elements.up.on('mouseout touchleave touchend touchcancel', function(ev) {
  319. if (!spinning) {
  320. return;
  321. }
  322. ev.stopPropagation();
  323. stopSpin();
  324. });
  325. elements.down.on('mouseout touchleave touchend touchcancel', function(ev) {
  326. if (!spinning) {
  327. return;
  328. }
  329. ev.stopPropagation();
  330. stopSpin();
  331. });
  332. elements.down.on('mousemove touchmove', function(ev) {
  333. if (!spinning) {
  334. return;
  335. }
  336. ev.stopPropagation();
  337. ev.preventDefault();
  338. });
  339. elements.up.on('mousemove touchmove', function(ev) {
  340. if (!spinning) {
  341. return;
  342. }
  343. ev.stopPropagation();
  344. ev.preventDefault();
  345. });
  346. $(document).on(_scopeEventNames(['mouseup', 'touchend', 'touchcancel'], _currentSpinnerId).join(' '), function(ev) {
  347. if (!spinning) {
  348. return;
  349. }
  350. ev.preventDefault();
  351. stopSpin();
  352. });
  353. $(document).on(_scopeEventNames(['mousemove', 'touchmove', 'scroll', 'scrollstart'], _currentSpinnerId).join(' '), function(ev) {
  354. if (!spinning) {
  355. return;
  356. }
  357. ev.preventDefault();
  358. stopSpin();
  359. });
  360. originalinput.on('mousewheel DOMMouseScroll', function(ev) {
  361. if (!settings.mousewheel || !originalinput.is(':focus')) {
  362. return;
  363. }
  364. var delta = ev.originalEvent.wheelDelta || -ev.originalEvent.deltaY || -ev.originalEvent.detail;
  365. ev.stopPropagation();
  366. ev.preventDefault();
  367. if (delta < 0) {
  368. downOnce();
  369. }
  370. else {
  371. upOnce();
  372. }
  373. });
  374. }
  375. function _bindEventsInterface() {
  376. originalinput.on('touchspin.uponce', function() {
  377. stopSpin();
  378. upOnce();
  379. });
  380. originalinput.on('touchspin.downonce', function() {
  381. stopSpin();
  382. downOnce();
  383. });
  384. originalinput.on('touchspin.startupspin', function() {
  385. startUpSpin();
  386. });
  387. originalinput.on('touchspin.startdownspin', function() {
  388. startDownSpin();
  389. });
  390. originalinput.on('touchspin.stopspin', function() {
  391. stopSpin();
  392. });
  393. originalinput.on('touchspin.updatesettings', function(e, newsettings) {
  394. changeSettings(newsettings);
  395. });
  396. }
  397. function _forcestepdivisibility(value) {
  398. switch (settings.forcestepdivisibility) {
  399. case 'round':
  400. return (Math.round(value / settings.step) * settings.step).toFixed(settings.decimals);
  401. case 'floor':
  402. return (Math.floor(value / settings.step) * settings.step).toFixed(settings.decimals);
  403. case 'ceil':
  404. return (Math.ceil(value / settings.step) * settings.step).toFixed(settings.decimals);
  405. default:
  406. return value;
  407. }
  408. }
  409. function _checkValue() {
  410. var val, parsedval, returnval;
  411. val = originalinput.val();
  412. if (val === '') {
  413. return;
  414. }
  415. if (settings.decimals > 0 && val === '.') {
  416. return;
  417. }
  418. parsedval = parseFloat(val);
  419. if (isNaN(parsedval)) {
  420. parsedval = 0;
  421. }
  422. returnval = parsedval;
  423. if (parsedval.toString() !== val) {
  424. returnval = parsedval;
  425. }
  426. if (parsedval < settings.min) {
  427. returnval = settings.min;
  428. }
  429. if (parsedval > settings.max) {
  430. returnval = settings.max;
  431. }
  432. returnval = _forcestepdivisibility(returnval);
  433. if (Number(val).toString() !== returnval.toString()) {
  434. originalinput.val(returnval);
  435. originalinput.trigger('change');
  436. }
  437. }
  438. function _getBoostedStep() {
  439. if (!settings.booster) {
  440. return settings.step;
  441. }
  442. else {
  443. var boosted = Math.pow(2, Math.floor(spincount / settings.boostat)) * settings.step;
  444. if (settings.maxboostedstep) {
  445. if (boosted > settings.maxboostedstep) {
  446. boosted = settings.maxboostedstep;
  447. value = Math.round((value / boosted)) * boosted;
  448. }
  449. }
  450. return Math.max(settings.step, boosted);
  451. }
  452. }
  453. function upOnce() {
  454. _checkValue();
  455. value = parseFloat(elements.input.val());
  456. if (isNaN(value)) {
  457. value = 0;
  458. }
  459. var initvalue = value,
  460. boostedstep = _getBoostedStep();
  461. value = value + boostedstep;
  462. if (value > settings.max) {
  463. value = settings.max;
  464. originalinput.trigger('touchspin.on.max');
  465. stopSpin();
  466. }
  467. elements.input.val(Number(value).toFixed(settings.decimals));
  468. if (initvalue !== value) {
  469. originalinput.trigger('change');
  470. }
  471. }
  472. function downOnce() {
  473. _checkValue();
  474. value = parseFloat(elements.input.val());
  475. if (isNaN(value)) {
  476. value = 0;
  477. }
  478. var initvalue = value,
  479. boostedstep = _getBoostedStep();
  480. value = value - boostedstep;
  481. if (value < settings.min) {
  482. value = settings.min;
  483. originalinput.trigger('touchspin.on.min');
  484. stopSpin();
  485. }
  486. elements.input.val(value.toFixed(settings.decimals));
  487. if (initvalue !== value) {
  488. originalinput.trigger('change');
  489. }
  490. }
  491. function startDownSpin() {
  492. stopSpin();
  493. spincount = 0;
  494. spinning = 'down';
  495. originalinput.trigger('touchspin.on.startspin');
  496. originalinput.trigger('touchspin.on.startdownspin');
  497. downDelayTimeout = setTimeout(function() {
  498. downSpinTimer = setInterval(function() {
  499. spincount++;
  500. downOnce();
  501. }, settings.stepinterval);
  502. }, settings.stepintervaldelay);
  503. }
  504. function startUpSpin() {
  505. stopSpin();
  506. spincount = 0;
  507. spinning = 'up';
  508. originalinput.trigger('touchspin.on.startspin');
  509. originalinput.trigger('touchspin.on.startupspin');
  510. upDelayTimeout = setTimeout(function() {
  511. upSpinTimer = setInterval(function() {
  512. spincount++;
  513. upOnce();
  514. }, settings.stepinterval);
  515. }, settings.stepintervaldelay);
  516. }
  517. function stopSpin() {
  518. clearTimeout(downDelayTimeout);
  519. clearTimeout(upDelayTimeout);
  520. clearInterval(downSpinTimer);
  521. clearInterval(upSpinTimer);
  522. switch (spinning) {
  523. case 'up':
  524. originalinput.trigger('touchspin.on.stopupspin');
  525. originalinput.trigger('touchspin.on.stopspin');
  526. break;
  527. case 'down':
  528. originalinput.trigger('touchspin.on.stopdownspin');
  529. originalinput.trigger('touchspin.on.stopspin');
  530. break;
  531. }
  532. spincount = 0;
  533. spinning = false;
  534. }
  535. });
  536. };
  537. })(jQuery);