jquery.bootstrap-touchspin.js 20 KB

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