bootstrap.touchspin.js 19 KB

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