bootstrap-touchspin.js 22 KB

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