- Added jQuery Touchspin back after it was accidentally removed
This commit is contained in:
Dave
parent
d71df63f97
commit
884f7eb482
|
|
@ -51,7 +51,8 @@ module.exports = function(grunt) {
|
|||
'./public/vendor/jquery-form/jquery.form.js',
|
||||
'./public/vendor/humane-js/humane.js',
|
||||
'./public/vendor/RRSSB/js/rrssb.js',
|
||||
'./public/vendor/curioussolutions-datetimepicker/dist/DateTimePicker.js',
|
||||
'./public/vendor/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js',
|
||||
'./public/vendor/curioussolutions-datetimepicker/dist/DateTimePicker.js',
|
||||
'./public/assets/javascript/app.js'
|
||||
],
|
||||
dest: './public/assets/javascript/backend.js',
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@
|
|||
"RRSSB": "~1.6.0",
|
||||
"jquery-backstretch": "~2.0.4",
|
||||
"fontawesome": "~4.2.0",
|
||||
"simplemde": "~1.8.1"
|
||||
"simplemde": "~1.8.1",
|
||||
"bootstrap-touchspin": "~3.0.1"
|
||||
},
|
||||
"resolutions": {
|
||||
"jquery": ">=1.5"
|
||||
|
|
|
|||
|
|
@ -5212,6 +5212,684 @@ function log() {
|
|||
window.rrssbInit = rrssbInit;
|
||||
|
||||
})(window, jQuery);
|
||||
;(function($) {
|
||||
'use strict';
|
||||
|
||||
var _currentSpinnerId = 0;
|
||||
|
||||
function _scopedEventName(name, id) {
|
||||
return name + '.touchspin_' + id;
|
||||
}
|
||||
|
||||
function _scopeEventNames(names, id) {
|
||||
return $.map(names, function(name) {
|
||||
return _scopedEventName(name, id);
|
||||
});
|
||||
}
|
||||
|
||||
$.fn.TouchSpin = function(options) {
|
||||
|
||||
if (options === 'destroy') {
|
||||
this.each(function() {
|
||||
var originalinput = $(this),
|
||||
originalinput_data = originalinput.data();
|
||||
$(document).off(_scopeEventNames([
|
||||
'mouseup',
|
||||
'touchend',
|
||||
'touchcancel',
|
||||
'mousemove',
|
||||
'touchmove',
|
||||
'scroll',
|
||||
'scrollstart'], originalinput_data.spinnerid).join(' '));
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
min: 0,
|
||||
max: 100,
|
||||
initval: '',
|
||||
step: 1,
|
||||
decimals: 0,
|
||||
stepinterval: 100,
|
||||
forcestepdivisibility: 'round', // none | floor | round | ceil
|
||||
stepintervaldelay: 500,
|
||||
verticalbuttons: false,
|
||||
verticalupclass: 'glyphicon glyphicon-chevron-up',
|
||||
verticaldownclass: 'glyphicon glyphicon-chevron-down',
|
||||
prefix: '',
|
||||
postfix: '',
|
||||
prefix_extraclass: '',
|
||||
postfix_extraclass: '',
|
||||
booster: true,
|
||||
boostat: 10,
|
||||
maxboostedstep: false,
|
||||
mousewheel: true,
|
||||
buttondown_class: 'btn btn-default',
|
||||
buttonup_class: 'btn btn-default',
|
||||
buttondown_txt: '-',
|
||||
buttonup_txt: '+'
|
||||
};
|
||||
|
||||
var attributeMap = {
|
||||
min: 'min',
|
||||
max: 'max',
|
||||
initval: 'init-val',
|
||||
step: 'step',
|
||||
decimals: 'decimals',
|
||||
stepinterval: 'step-interval',
|
||||
verticalbuttons: 'vertical-buttons',
|
||||
verticalupclass: 'vertical-up-class',
|
||||
verticaldownclass: 'vertical-down-class',
|
||||
forcestepdivisibility: 'force-step-divisibility',
|
||||
stepintervaldelay: 'step-interval-delay',
|
||||
prefix: 'prefix',
|
||||
postfix: 'postfix',
|
||||
prefix_extraclass: 'prefix-extra-class',
|
||||
postfix_extraclass: 'postfix-extra-class',
|
||||
booster: 'booster',
|
||||
boostat: 'boostat',
|
||||
maxboostedstep: 'max-boosted-step',
|
||||
mousewheel: 'mouse-wheel',
|
||||
buttondown_class: 'button-down-class',
|
||||
buttonup_class: 'button-up-class',
|
||||
buttondown_txt: 'button-down-txt',
|
||||
buttonup_txt: 'button-up-txt'
|
||||
};
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var settings,
|
||||
originalinput = $(this),
|
||||
originalinput_data = originalinput.data(),
|
||||
container,
|
||||
elements,
|
||||
value,
|
||||
downSpinTimer,
|
||||
upSpinTimer,
|
||||
downDelayTimeout,
|
||||
upDelayTimeout,
|
||||
spincount = 0,
|
||||
spinning = false;
|
||||
|
||||
init();
|
||||
|
||||
|
||||
function init() {
|
||||
if (originalinput.data('alreadyinitialized')) {
|
||||
return;
|
||||
}
|
||||
|
||||
originalinput.data('alreadyinitialized', true);
|
||||
_currentSpinnerId += 1;
|
||||
originalinput.data('spinnerid', _currentSpinnerId);
|
||||
|
||||
|
||||
if (!originalinput.is('input')) {
|
||||
console.log('Must be an input.');
|
||||
return;
|
||||
}
|
||||
|
||||
_initSettings();
|
||||
_setInitval();
|
||||
_checkValue();
|
||||
_buildHtml();
|
||||
_initElements();
|
||||
_hideEmptyPrefixPostfix();
|
||||
_bindEvents();
|
||||
_bindEventsInterface();
|
||||
elements.input.css('display', 'block');
|
||||
}
|
||||
|
||||
function _setInitval() {
|
||||
if (settings.initval !== '' && originalinput.val() === '') {
|
||||
originalinput.val(settings.initval);
|
||||
}
|
||||
}
|
||||
|
||||
function changeSettings(newsettings) {
|
||||
_updateSettings(newsettings);
|
||||
_checkValue();
|
||||
|
||||
var value = elements.input.val();
|
||||
|
||||
if (value !== '') {
|
||||
value = Number(elements.input.val());
|
||||
elements.input.val(value.toFixed(settings.decimals));
|
||||
}
|
||||
}
|
||||
|
||||
function _initSettings() {
|
||||
settings = $.extend({}, defaults, originalinput_data, _parseAttributes(), options);
|
||||
}
|
||||
|
||||
function _parseAttributes() {
|
||||
var data = {};
|
||||
$.each(attributeMap, function(key, value) {
|
||||
var attrName = 'bts-' + value + '';
|
||||
if (originalinput.is('[data-' + attrName + ']')) {
|
||||
data[key] = originalinput.data(attrName);
|
||||
}
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
function _updateSettings(newsettings) {
|
||||
settings = $.extend({}, settings, newsettings);
|
||||
}
|
||||
|
||||
function _buildHtml() {
|
||||
var initval = originalinput.val(),
|
||||
parentelement = originalinput.parent();
|
||||
|
||||
if (initval !== '') {
|
||||
initval = Number(initval).toFixed(settings.decimals);
|
||||
}
|
||||
|
||||
originalinput.data('initvalue', initval).val(initval);
|
||||
originalinput.addClass('form-control');
|
||||
|
||||
if (parentelement.hasClass('input-group')) {
|
||||
_advanceInputGroup(parentelement);
|
||||
}
|
||||
else {
|
||||
_buildInputGroup();
|
||||
}
|
||||
}
|
||||
|
||||
function _advanceInputGroup(parentelement) {
|
||||
parentelement.addClass('bootstrap-touchspin');
|
||||
|
||||
var prev = originalinput.prev(),
|
||||
next = originalinput.next();
|
||||
|
||||
var downhtml,
|
||||
uphtml,
|
||||
prefixhtml = '<span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span>',
|
||||
postfixhtml = '<span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span>';
|
||||
|
||||
if (prev.hasClass('input-group-btn')) {
|
||||
downhtml = '<button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button>';
|
||||
prev.append(downhtml);
|
||||
}
|
||||
else {
|
||||
downhtml = '<span class="input-group-btn"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button></span>';
|
||||
$(downhtml).insertBefore(originalinput);
|
||||
}
|
||||
|
||||
if (next.hasClass('input-group-btn')) {
|
||||
uphtml = '<button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button>';
|
||||
next.prepend(uphtml);
|
||||
}
|
||||
else {
|
||||
uphtml = '<span class="input-group-btn"><button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button></span>';
|
||||
$(uphtml).insertAfter(originalinput);
|
||||
}
|
||||
|
||||
$(prefixhtml).insertBefore(originalinput);
|
||||
$(postfixhtml).insertAfter(originalinput);
|
||||
|
||||
container = parentelement;
|
||||
}
|
||||
|
||||
function _buildInputGroup() {
|
||||
var html;
|
||||
|
||||
if (settings.verticalbuttons) {
|
||||
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>';
|
||||
}
|
||||
else {
|
||||
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>';
|
||||
}
|
||||
|
||||
container = $(html).insertBefore(originalinput);
|
||||
|
||||
$('.bootstrap-touchspin-prefix', container).after(originalinput);
|
||||
|
||||
if (originalinput.hasClass('input-sm')) {
|
||||
container.addClass('input-group-sm');
|
||||
}
|
||||
else if (originalinput.hasClass('input-lg')) {
|
||||
container.addClass('input-group-lg');
|
||||
}
|
||||
}
|
||||
|
||||
function _initElements() {
|
||||
elements = {
|
||||
down: $('.bootstrap-touchspin-down', container),
|
||||
up: $('.bootstrap-touchspin-up', container),
|
||||
input: $('input', container),
|
||||
prefix: $('.bootstrap-touchspin-prefix', container).addClass(settings.prefix_extraclass),
|
||||
postfix: $('.bootstrap-touchspin-postfix', container).addClass(settings.postfix_extraclass)
|
||||
};
|
||||
}
|
||||
|
||||
function _hideEmptyPrefixPostfix() {
|
||||
if (settings.prefix === '') {
|
||||
elements.prefix.hide();
|
||||
}
|
||||
|
||||
if (settings.postfix === '') {
|
||||
elements.postfix.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function _bindEvents() {
|
||||
originalinput.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 38) {
|
||||
if (spinning !== 'up') {
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
else if (code === 40) {
|
||||
if (spinning !== 'down') {
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
originalinput.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 38) {
|
||||
stopSpin();
|
||||
}
|
||||
else if (code === 40) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
originalinput.on('blur', function() {
|
||||
_checkValue();
|
||||
});
|
||||
|
||||
elements.down.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
if (spinning !== 'down') {
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
elements.down.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
elements.up.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
if (spinning !== 'up') {
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
elements.up.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
elements.down.on('mousedown.touchspin', function(ev) {
|
||||
elements.down.off('touchstart.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.down.on('touchstart.touchspin', function(ev) {
|
||||
elements.down.off('mousedown.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('mousedown.touchspin', function(ev) {
|
||||
elements.up.off('touchstart.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('touchstart.touchspin', function(ev) {
|
||||
elements.up.off('mousedown.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('mouseout touchleave touchend touchcancel', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
elements.down.on('mouseout touchleave touchend touchcancel', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
elements.down.on('mousemove touchmove', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
elements.up.on('mousemove touchmove', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
$(document).on(_scopeEventNames(['mouseup', 'touchend', 'touchcancel'], _currentSpinnerId).join(' '), function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
$(document).on(_scopeEventNames(['mousemove', 'touchmove', 'scroll', 'scrollstart'], _currentSpinnerId).join(' '), function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
originalinput.on('mousewheel DOMMouseScroll', function(ev) {
|
||||
if (!settings.mousewheel || !originalinput.is(':focus')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var delta = ev.originalEvent.wheelDelta || -ev.originalEvent.deltaY || -ev.originalEvent.detail;
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
|
||||
if (delta < 0) {
|
||||
downOnce();
|
||||
}
|
||||
else {
|
||||
upOnce();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _bindEventsInterface() {
|
||||
originalinput.on('touchspin.uponce', function() {
|
||||
stopSpin();
|
||||
upOnce();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.downonce', function() {
|
||||
stopSpin();
|
||||
downOnce();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.startupspin', function() {
|
||||
startUpSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.startdownspin', function() {
|
||||
startDownSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.stopspin', function() {
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.updatesettings', function(e, newsettings) {
|
||||
changeSettings(newsettings);
|
||||
});
|
||||
}
|
||||
|
||||
function _forcestepdivisibility(value) {
|
||||
switch (settings.forcestepdivisibility) {
|
||||
case 'round':
|
||||
return (Math.round(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
case 'floor':
|
||||
return (Math.floor(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
case 'ceil':
|
||||
return (Math.ceil(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
default:
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function _checkValue() {
|
||||
var val, parsedval, returnval;
|
||||
|
||||
val = originalinput.val();
|
||||
|
||||
if (val === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (settings.decimals > 0 && val === '.') {
|
||||
return;
|
||||
}
|
||||
|
||||
parsedval = parseFloat(val);
|
||||
|
||||
if (isNaN(parsedval)) {
|
||||
parsedval = 0;
|
||||
}
|
||||
|
||||
returnval = parsedval;
|
||||
|
||||
if (parsedval.toString() !== val) {
|
||||
returnval = parsedval;
|
||||
}
|
||||
|
||||
if (parsedval < settings.min) {
|
||||
returnval = settings.min;
|
||||
}
|
||||
|
||||
if (parsedval > settings.max) {
|
||||
returnval = settings.max;
|
||||
}
|
||||
|
||||
returnval = _forcestepdivisibility(returnval);
|
||||
|
||||
if (Number(val).toString() !== returnval.toString()) {
|
||||
originalinput.val(returnval);
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function _getBoostedStep() {
|
||||
if (!settings.booster) {
|
||||
return settings.step;
|
||||
}
|
||||
else {
|
||||
var boosted = Math.pow(2, Math.floor(spincount / settings.boostat)) * settings.step;
|
||||
|
||||
if (settings.maxboostedstep) {
|
||||
if (boosted > settings.maxboostedstep) {
|
||||
boosted = settings.maxboostedstep;
|
||||
value = Math.round((value / boosted)) * boosted;
|
||||
}
|
||||
}
|
||||
|
||||
return Math.max(settings.step, boosted);
|
||||
}
|
||||
}
|
||||
|
||||
function upOnce() {
|
||||
_checkValue();
|
||||
|
||||
value = parseFloat(elements.input.val());
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
var initvalue = value,
|
||||
boostedstep = _getBoostedStep();
|
||||
|
||||
value = value + boostedstep;
|
||||
|
||||
if (value > settings.max) {
|
||||
value = settings.max;
|
||||
originalinput.trigger('touchspin.on.max');
|
||||
stopSpin();
|
||||
}
|
||||
|
||||
elements.input.val(Number(value).toFixed(settings.decimals));
|
||||
|
||||
if (initvalue !== value) {
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function downOnce() {
|
||||
_checkValue();
|
||||
|
||||
value = parseFloat(elements.input.val());
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
var initvalue = value,
|
||||
boostedstep = _getBoostedStep();
|
||||
|
||||
value = value - boostedstep;
|
||||
|
||||
if (value < settings.min) {
|
||||
value = settings.min;
|
||||
originalinput.trigger('touchspin.on.min');
|
||||
stopSpin();
|
||||
}
|
||||
|
||||
elements.input.val(value.toFixed(settings.decimals));
|
||||
|
||||
if (initvalue !== value) {
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function startDownSpin() {
|
||||
stopSpin();
|
||||
|
||||
spincount = 0;
|
||||
spinning = 'down';
|
||||
|
||||
originalinput.trigger('touchspin.on.startspin');
|
||||
originalinput.trigger('touchspin.on.startdownspin');
|
||||
|
||||
downDelayTimeout = setTimeout(function() {
|
||||
downSpinTimer = setInterval(function() {
|
||||
spincount++;
|
||||
downOnce();
|
||||
}, settings.stepinterval);
|
||||
}, settings.stepintervaldelay);
|
||||
}
|
||||
|
||||
function startUpSpin() {
|
||||
stopSpin();
|
||||
|
||||
spincount = 0;
|
||||
spinning = 'up';
|
||||
|
||||
originalinput.trigger('touchspin.on.startspin');
|
||||
originalinput.trigger('touchspin.on.startupspin');
|
||||
|
||||
upDelayTimeout = setTimeout(function() {
|
||||
upSpinTimer = setInterval(function() {
|
||||
spincount++;
|
||||
upOnce();
|
||||
}, settings.stepinterval);
|
||||
}, settings.stepintervaldelay);
|
||||
}
|
||||
|
||||
function stopSpin() {
|
||||
clearTimeout(downDelayTimeout);
|
||||
clearTimeout(upDelayTimeout);
|
||||
clearInterval(downSpinTimer);
|
||||
clearInterval(upSpinTimer);
|
||||
|
||||
switch (spinning) {
|
||||
case 'up':
|
||||
originalinput.trigger('touchspin.on.stopupspin');
|
||||
originalinput.trigger('touchspin.on.stopspin');
|
||||
break;
|
||||
case 'down':
|
||||
originalinput.trigger('touchspin.on.stopdownspin');
|
||||
originalinput.trigger('touchspin.on.stopspin');
|
||||
break;
|
||||
}
|
||||
|
||||
spincount = 0;
|
||||
spinning = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
;$.DateTimePicker = $.DateTimePicker || {
|
||||
|
||||
name: "DateTimePicker",
|
||||
|
|
@ -7791,7 +8469,7 @@ $.cf = {
|
|||
|
||||
window.Attendize = {
|
||||
DateFormat: 'dd-MM-yyyy',
|
||||
DateTimeFormat: 'dd-MM-yyyy hh:mm:ss',
|
||||
DateTimeFormat: 'dd-MM-yyyy hh:mm',
|
||||
GenericErrorMessage: 'Whoops!, An unknown error has occurred.'
|
||||
+ 'Please try again or contact support if the problem persists. '
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -34,6 +34,7 @@
|
|||
@import (inline) "../../vendor/RRSSB/css/rrssb.css";
|
||||
@import (inline) "../../vendor/humane-js/themes/flatty.css";
|
||||
@import (inline) "../../vendor/curioussolutions-datetimepicker/dist/DateTimePicker.min.css";
|
||||
@import (inline) "../../vendor/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css";
|
||||
|
||||
|
||||
@import "custom.less";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"name": "bootstrap-touchspin",
|
||||
"version": "3.0.3",
|
||||
"homepage": "http://www.virtuosoft.eu/code/bootstrap-touchspin/",
|
||||
"authors": [
|
||||
{
|
||||
"name": "István Ujj-Mészáros",
|
||||
"url": "https://github.com/istvan-ujjmeszaros"
|
||||
}
|
||||
],
|
||||
"description": "Bootstrap TouchSpin is a mobile and touch friendly input spinner component for Bootstrap 3.",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.9.0",
|
||||
"bootstrap": ">=3.0.0"
|
||||
},
|
||||
"license": "Apache License, Version 2.0",
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"plugin",
|
||||
"bootstrap",
|
||||
"ui"
|
||||
],
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"_release": "3.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "3.0.3",
|
||||
"commit": "81fc55dd525f08a6af6f3a8465026ae1e672bdae"
|
||||
},
|
||||
"_source": "git://github.com/istvan-ujjmeszaros/bootstrap-touchspin.git",
|
||||
"_target": "~3.0.1",
|
||||
"_originalSource": "bootstrap-touchspin"
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
# Contributing
|
||||
|
||||
Before sending a pull request remember to follow [jQuery Core Style Guide](http://contribute.jquery.org/style-guide/js/).
|
||||
|
||||
1. Fork it!
|
||||
2. Create your feature branch: `git checkout -b my-new-feature`
|
||||
3. Make your changes on the `src` folder, never on the `dist` folder.
|
||||
4. Commit your changes: `git commit -m 'Add some feature'`
|
||||
5. Push to the branch: `git push origin my-new-feature`
|
||||
6. Submit a pull request :D
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
module.exports = function (grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
|
||||
// Import package manifest
|
||||
pkg: grunt.file.readJSON("bootstrap-touchspin.jquery.json"),
|
||||
|
||||
// Banner definitions
|
||||
meta: {
|
||||
banner: "/*\n" +
|
||||
" * <%= pkg.title || pkg.name %> - v<%= pkg.version %>\n" +
|
||||
" * <%= pkg.description %>\n" +
|
||||
" * <%= pkg.homepage %>\n" +
|
||||
" *\n" +
|
||||
" * Made by <%= pkg.author.name %>\n" +
|
||||
" * Under <%= pkg.licenses[0].type %> License\n" +
|
||||
" */\n"
|
||||
},
|
||||
|
||||
// Concat definitions
|
||||
concat: {
|
||||
js: {
|
||||
src: ["src/jquery.bootstrap-touchspin.js"],
|
||||
dest: "dist/jquery.bootstrap-touchspin.js"
|
||||
},
|
||||
css: {
|
||||
src: ["src/jquery.bootstrap-touchspin.css"],
|
||||
dest: "dist/jquery.bootstrap-touchspin.css"
|
||||
},
|
||||
options: {
|
||||
banner: "<%= meta.banner %>"
|
||||
}
|
||||
},
|
||||
|
||||
// Lint definitions
|
||||
jshint: {
|
||||
files: ["src/jquery.bootstrap-touchspin.js"],
|
||||
options: {
|
||||
jshintrc: ".jshintrc"
|
||||
}
|
||||
},
|
||||
|
||||
// Minify definitions
|
||||
uglify: {
|
||||
js: {
|
||||
src: ["dist/jquery.bootstrap-touchspin.js"],
|
||||
dest: "dist/jquery.bootstrap-touchspin.min.js"
|
||||
},
|
||||
options: {
|
||||
banner: "<%= meta.banner %>"
|
||||
}
|
||||
},
|
||||
|
||||
cssmin: {
|
||||
css: {
|
||||
src: ["dist/jquery.bootstrap-touchspin.css"],
|
||||
dest: "dist/jquery.bootstrap-touchspin.min.css"
|
||||
},
|
||||
options: {
|
||||
banner: "<%= meta.banner %>"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks("grunt-contrib-concat");
|
||||
grunt.loadNpmTasks("grunt-contrib-jshint");
|
||||
grunt.loadNpmTasks("grunt-contrib-uglify");
|
||||
grunt.loadNpmTasks("grunt-contrib-cssmin");
|
||||
|
||||
grunt.registerTask("default", ["jshint", "concat", "uglify", "cssmin"]);
|
||||
grunt.registerTask("travis", ["jshint"]);
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
Bootstrap TouchSpin
|
||||
v1.0.0
|
||||
|
||||
A mobile and touch friendly input spinner component for Bootstrap 3.
|
||||
|
||||
https://github.com/istvan-meszaros/bootstrap-touchspin
|
||||
http://www.virtuosoft.eu/code/bootstrap-touchspin/
|
||||
|
||||
Copyright 2013 István Ujj-Mészáros
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
# Bootstrap TouchSpin [](https://travis-ci.org/istvan-ujjmeszaros/bootstrap-touchspin)
|
||||
|
||||
##### Bootstrap TouchSpin is a mobile and touch friendly input spinner component for Bootstrap 3.
|
||||
|
||||
- [Website](http://www.virtuosoft.eu/code/bootstrap-touchspin/)
|
||||
|
||||
Please report issues and feel free to make feature suggestions as well.
|
||||
|
||||
## License
|
||||
|
||||
Apache License, Version 2.0
|
||||
|
||||
[](http://githalytics.com/istvan-ujjmeszaros/bootstrap-touchspin)
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "bootstrap-touchspin",
|
||||
"title": "Bootstrap TouchSpin",
|
||||
"description": "A mobile and touch friendly input spinner component for Bootstrap 3.",
|
||||
"keywords": [
|
||||
"input",
|
||||
"bootstrap",
|
||||
"number",
|
||||
"range",
|
||||
"spinbutton",
|
||||
"spinner"
|
||||
],
|
||||
"version": "3.0.1",
|
||||
"author": {
|
||||
"name": "István Ujj-Mészáros",
|
||||
"url": "https://github.com/istvan-ujjmeszaros"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "Apache License v2.0",
|
||||
"url": "http://www.apache.org/licenses/LICENSE-2.0"
|
||||
}
|
||||
],
|
||||
"homepage": "http://www.virtuosoft.eu/code/bootstrap-touchspin/",
|
||||
"demo": "http://www.virtuosoft.eu/code/bootstrap-touchspin/",
|
||||
"docs": "http://www.virtuosoft.eu/code/bootstrap-touchspin/",
|
||||
"download": "https://github.com/istvan-ujjmeszaros/bootstrap-touchspin/archive/master.zip",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"name": "bootstrap-touchspin",
|
||||
"version": "3.0.1",
|
||||
"homepage": "http://www.virtuosoft.eu/code/bootstrap-touchspin/",
|
||||
"authors": [
|
||||
{
|
||||
"name": "István Ujj-Mészáros",
|
||||
"url": "https://github.com/istvan-ujjmeszaros"
|
||||
}
|
||||
],
|
||||
"description": "Bootstrap TouchSpin is a mobile and touch friendly input spinner component for Bootstrap 3.",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.9.0",
|
||||
"bootstrap": ">=3.0.0"
|
||||
},
|
||||
"license": "Apache License, Version 2.0",
|
||||
"keywords": [
|
||||
"jquery",
|
||||
"plugin",
|
||||
"bootstrap",
|
||||
"ui"
|
||||
],
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,383 @@
|
|||
body {
|
||||
font-family: Arial, Ubuntu, Helvetica, sans-serif;
|
||||
color: #333;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: Arial, Ubuntu, Helvetica, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
color: #d64513;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Century Gothic", Arial, Ubuntu, Helvetica, sans-serif;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h1 small {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Century Gothic", Arial, Ubuntu, Helvetica, sans-serif;
|
||||
font-size: 26px;
|
||||
margin: 30px 0 20px;
|
||||
}
|
||||
|
||||
h2 small {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 25px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 small {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 small {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.dl-horizontal dt {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.dl-horizontal dd {
|
||||
margin-left: 220px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 5px 0px 5px;
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
font-family: "Century Gothic", Arial, sans-serif;
|
||||
background: #000 url(img/bg-menu.png) repeat-x left top; /*#377fa0;*/
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 1px #000;
|
||||
/*background-image: linear-gradient(to top, rgb(62, 86, 112) 0%, rgb(69, 94, 122) 100%)*/;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav > .dropdown > a .caret,
|
||||
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
|
||||
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.navbar > .container .navbar-brand {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.navbar .nav > li > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand,
|
||||
.navbar-default .navbar-brand:hover,
|
||||
.navbar-default .navbar-brand:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .nav > .active {
|
||||
}
|
||||
|
||||
.navbar .nav > .active > a,
|
||||
.navbar .nav > .active > a:hover,
|
||||
.navbar .nav > .active > a:focus,
|
||||
.navbar .nav li.dropdown.active > .dropdown-toggle,
|
||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
|
||||
background: url(img/bg-menu-selected.png) no-repeat center bottom; /*#a5360f;*/
|
||||
background: #BC451B;
|
||||
color: #fff;
|
||||
/*height: 65px;*/
|
||||
}
|
||||
|
||||
.navbar .nav > li > a:focus,
|
||||
.navbar .nav > li > a:hover,
|
||||
.navbar .nav li.dropdown.open > .dropdown-toggle {
|
||||
background: rgba(188, 69, 27, 0.6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a,
|
||||
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
|
||||
background: #d64513;
|
||||
}
|
||||
|
||||
.nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
padding: 10px 20px;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.navbar .addthis_toolbox {
|
||||
margin-top: 9px;
|
||||
float: right;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navbar .followus {
|
||||
display: none;
|
||||
float: right;
|
||||
color: white;
|
||||
margin-top: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-radius: 10px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #4d4d4d;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.panel-heading a {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
|
||||
.abstract {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
border: none;
|
||||
background: #d64513;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
|
||||
background: #a5360f;
|
||||
}
|
||||
|
||||
.socialbuttons,
|
||||
.addthis_toolbox {
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.row-fluid .socialbuttons {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.navbar .socialbuttons {
|
||||
float: right;
|
||||
height: 20px;
|
||||
width: 220px;
|
||||
white-space: nowrap;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.navbar .btn-navbar {
|
||||
background: #474747;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navbar .btn-navbar {
|
||||
background: #a5360f;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar .btn-navbar:hover, .navbar .btn-navbar:focus, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
|
||||
background: #474747;
|
||||
}
|
||||
|
||||
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
/* woodpaul on board */
|
||||
.hero-unit {
|
||||
text-align: center;
|
||||
margin: 0 0 50px;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 0px rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.hero-unit h1 small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-unit .btn {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.socialbuttons {
|
||||
text-align: center;
|
||||
margin: 0 0 -15px;
|
||||
}
|
||||
|
||||
.socialbuttons iframe {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.socialbuttons .addthis_toolbox {
|
||||
width: 420px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.socialbuttons .share-github {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.socialbuttons .addthis_button_facebook_like {
|
||||
margin: 0 30px 0 0;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: transparent;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
.controls-row {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
/* table */
|
||||
.table thead th {
|
||||
font-family: "Century Gothic", Arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
background-color: #bc451b;
|
||||
color: #fff;
|
||||
vertical-align: middle!important;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-collapse {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.navbar .followus {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body {
|
||||
padding-top: 110px;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
background: #000 url(img/bg-menu.png) repeat-x left top; /*#377fa0;*/
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle,
|
||||
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
|
||||
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
|
||||
background: #d64513;
|
||||
color: #fff;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar-fixed-top > .container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar > .container .navbar-brand {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navbar .socialbuttons {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
top: 0;
|
||||
width: 200px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.navbar .addthis_toolbox {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
|
|
@ -0,0 +1,778 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap TouchSpin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="A mobile and touch friendly input spinner component for Bootstrap 3.">
|
||||
<meta name="author" content="István Ujj-Mészáros">
|
||||
|
||||
<meta itemprop="name" content="Bootstrap Touchspin">
|
||||
<meta itemprop="description" content="A mobile and touch friendly input spinner component for Bootstrap 3.">
|
||||
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css" rel="stylesheet" type="text/css" media="all">
|
||||
<link href="../src/jquery.bootstrap-touchspin.css" rel="stylesheet" type="text/css" media="all">
|
||||
<link href="demo.css" rel="stylesheet" type="text/css" media="all">
|
||||
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
|
||||
<script src="../src/jquery.bootstrap-touchspin.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="hero-unit">
|
||||
|
||||
<h1>Bootstrap TouchSpin</h1>
|
||||
|
||||
<a id="link-ghp" class="btn btn-primary" href="https://github.com/istvan-ujjmeszaros/bootstrap-touchspin"
|
||||
target="_blank"><span class="glyphicon glyphicon-link"></span> Github project page</a>
|
||||
<a id="link-ghdl" href="https://github.com/istvan-ujjmeszaros/bootstrap-touchspin/archive/master.zip"
|
||||
class="btn btn-primary" title="download"><span class="glyphicon glyphicon-download"></span> Download</a>
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
A mobile and touch friendly input spinner component for Bootstrap 3.<br>
|
||||
It supports the mousewheel and the up/down keys.
|
||||
</p>
|
||||
|
||||
<h2>Examples</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo0">Example using data attributes:</label> <input
|
||||
id="demo0"
|
||||
type="text"
|
||||
value="40"
|
||||
name="demo0"
|
||||
data-bts-min="0"
|
||||
data-bts-max="100"
|
||||
data-bts-init-val=""
|
||||
data-bts-step="1"
|
||||
data-bts-decimal="0"
|
||||
data-bts-step-interval="100"
|
||||
data-bts-force-step-divisibility="round"
|
||||
data-bts-step-interval-delay="500"
|
||||
data-bts-prefix=""
|
||||
data-bts-postfix=""
|
||||
data-bts-prefix-extra-class=""
|
||||
data-bts-postfix-extra-class=""
|
||||
data-bts-booster="true"
|
||||
data-bts-boostat="10"
|
||||
data-bts-max-boosted-step="false"
|
||||
data-bts-mousewheel="true"
|
||||
data-bts-button-down-class="btn btn-default"
|
||||
data-bts-button-up-class="btn btn-default"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo0"
|
||||
type="text"
|
||||
value="55"
|
||||
name="demo0"
|
||||
data-bts-min="0"
|
||||
data-bts-max="100"
|
||||
data-bts-init-val=""
|
||||
data-bts-step="1"
|
||||
data-bts-decimal="0"
|
||||
data-bts-step-interval="100"
|
||||
data-bts-force-step-divisibility="round"
|
||||
data-bts-step-interval-delay="500"
|
||||
data-bts-prefix=""
|
||||
data-bts-postfix=""
|
||||
data-bts-prefix-extra-class=""
|
||||
data-bts-postfix-extra-class=""
|
||||
data-bts-booster="true"
|
||||
data-bts-boostat="10"
|
||||
data-bts-max-boosted-step="false"
|
||||
data-bts-mousewheel="true"
|
||||
data-bts-button-down-class="btn btn-default"
|
||||
data-bts-button-up-class="btn btn-default"
|
||||
/>
|
||||
<script>
|
||||
$("input[name='demo0']").TouchSpin({
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo0']").TouchSpin({
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo_vertical">Vertical button alignment:</label> <input id="demo3" type="text" value="" name="demo_vertical">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo_vertical" type="text" value="" name="demo_vertical">
|
||||
<script>
|
||||
$("input[name='demo_vertical']").TouchSpin({
|
||||
verticalbuttons: true
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo_vertical']").TouchSpin({
|
||||
verticalbuttons: true
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo_vertical2">Vertical buttons with custom icons:</label> <input id="demo3" type="text" value="" name="demo_vertical2">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo_vertical2" type="text" value="" name="demo_vertical2">
|
||||
<script>
|
||||
$("input[name='demo_vertical2']").TouchSpin({
|
||||
verticalbuttons: true,
|
||||
verticalupclass: 'glyphicon glyphicon-plus',
|
||||
verticaldownclass: 'glyphicon glyphicon-minus'
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo_vertical2']").TouchSpin({
|
||||
verticalbuttons: true,
|
||||
verticalupclass: 'glyphicon glyphicon-plus',
|
||||
verticaldownclass: 'glyphicon glyphicon-minus'
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo1">Example with postfix (large):</label> <input id="demo1" type="text" value="55" name="demo1">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo1" type="text" value="55" name="demo1">
|
||||
<script>
|
||||
$("input[name='demo1']").TouchSpin({
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 0.1,
|
||||
decimals: 2,
|
||||
boostat: 5,
|
||||
maxboostedstep: 10,
|
||||
postfix: '%'
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo1']").TouchSpin({
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 0.1,
|
||||
decimals: 2,
|
||||
boostat: 5,
|
||||
maxboostedstep: 10,
|
||||
postfix: '%'
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group">
|
||||
<label for="demo2" class="col-md-5 control-label">With prefix</label> <input id="demo2" type="text"
|
||||
value="0" name="demo2"
|
||||
class="col-md-7 form-control">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group">
|
||||
<label for="demo2" class="col-md-5 control-label">Example:</label> <input id="demo2" type="text" value="0" name="demo2" class="col-md-7 form-control">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
$("input[name='demo2']").TouchSpin({
|
||||
min: -1000000000,
|
||||
max: 1000000000,
|
||||
stepinterval: 50,
|
||||
maxboostedstep: 10000000,
|
||||
prefix: '$'
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
<script>
|
||||
$("input[name='demo2']").TouchSpin({
|
||||
min: -1000000000,
|
||||
max: 1000000000,
|
||||
stepinterval: 50,
|
||||
maxboostedstep: 10000000,
|
||||
prefix: '$'
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo3">Init with empty value:</label> <input id="demo3" type="text" value="" name="demo3">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo3" type="text" value="" name="demo3">
|
||||
<script>
|
||||
$("input[name='demo3']").TouchSpin();
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo3']").TouchSpin();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<p>
|
||||
The <code>initval</code> setting is only applied when no explicit value is set on the input with the
|
||||
<code>value</code> attribute.
|
||||
</p>
|
||||
|
||||
<div class="col-md-5">
|
||||
<label for="demo3_21">Value attribute is not set
|
||||
<small>(applying settings.initval)</small>
|
||||
:</label> <input id="demo3_21" type="text" value="" name="demo3_21">
|
||||
<label for="demo3_22">Value is set explicitly to 33
|
||||
<small>(skipping settings.initval)</small>
|
||||
:</label> <input id="demo3_22" type="text" value="33" name="demo3_22">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo3_21" type="text" value="" name="demo3_21">
|
||||
<script>
|
||||
$("input[name='demo3_21']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
</script>
|
||||
<input id="demo3_22" type="text" value="33" name="demo3_22">
|
||||
<script>
|
||||
$("input[name='demo3_22']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo3_21']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
$("input[name='demo3_22']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Size of the whole controller can be set with applying <code>input-sm</code> or <code>input-lg</code> class on the
|
||||
input, or by applying the plugin on an input inside an <code>input-group</code> with the proper size class(<code>input-group-sm</code>
|
||||
or <code>input-group-lg</code>).
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo4">Button postfix (small):</label> <input id="demo4" type="text" value="" name="demo4"
|
||||
class="input-sm">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo4" type="text" value="" name="demo4" class="input-sm">
|
||||
<script>
|
||||
$("input[name='demo4']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo4']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo4">Button postfix (large):</label>
|
||||
|
||||
<div class="input-group input-group-lg">
|
||||
<input id="demo4_2" type="text" value="" name="demo4_2" class="form-control input-lg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<div class="input-group input-group-lg">
|
||||
<input id="demo4_2" type="text" value="" name="demo4_2" class="form-control input-lg">
|
||||
</div>
|
||||
<script>
|
||||
$("input[name='demo4_2']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo4_2']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
|
||||
<label for="demo5">Button group:</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input id="demo5" type="text" class="form-control" name="demo5" value="50">
|
||||
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<div class="input-group">
|
||||
<input id="demo5" type="text" class="form-control" name="demo5" value="50">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$("input[name='demo5']").TouchSpin({
|
||||
prefix: "pre",
|
||||
postfix: "post"
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo5']").TouchSpin({
|
||||
prefix: "pre",
|
||||
postfix: "post"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo6">Change button class:</label> <input id="demo6" type="text" value="50" name="demo6">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
$("input[name='demo6']").TouchSpin({
|
||||
buttondown_class: "btn btn-link",
|
||||
buttonup_class: "btn btn-link"
|
||||
});
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo6']").TouchSpin({
|
||||
buttondown_class: "btn btn-link",
|
||||
buttonup_class: "btn btn-link"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo7">Blank/Non-Number replaced:</label> <input id="demo7" type="text" value="50" name="demo7">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
$("input[name='demo7']").TouchSpin({
|
||||
replacementval: 10
|
||||
});
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo7']").TouchSpin({
|
||||
replacementval: 10
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Event demo</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input id="demo7" type="text" value="50" name="demo7">
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<pre id="demo7textarea" style="height:200px;overflow:auto;"></pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var i = $("input[name='demo7']"),
|
||||
demoarea = $("#demo7textarea"),
|
||||
text = "";
|
||||
|
||||
function writeLine(line) {
|
||||
text += line + "\n";
|
||||
demoarea.text(text);
|
||||
demoarea.scrollTop(
|
||||
demoarea[0].scrollHeight - demoarea.height()
|
||||
);
|
||||
}
|
||||
|
||||
i.TouchSpin({});
|
||||
i.on("touchspin.on.startspin", function () {
|
||||
writeLine("touchspin.on.startspin");
|
||||
});
|
||||
i.on("touchspin.on.startupspin", function () {
|
||||
writeLine("touchspin.on.startupspin");
|
||||
});
|
||||
i.on("touchspin.on.startdownspin", function () {
|
||||
writeLine("touchspin.on.startdownspin");
|
||||
});
|
||||
i.on("touchspin.on.stopspin", function () {
|
||||
writeLine("touchspin.on.stopspin");
|
||||
});
|
||||
i.on("touchspin.on.stopupspin", function () {
|
||||
writeLine("touchspin.on.stopupspin");
|
||||
});
|
||||
i.on("touchspin.on.stopdownspin", function () {
|
||||
writeLine("touchspin.on.stopdownspin");
|
||||
});
|
||||
i.on("touchspin.on.min", function () {
|
||||
writeLine("touchspin.on.min");
|
||||
});
|
||||
i.on("touchspin.on.max", function () {
|
||||
writeLine("touchspin.on.max");
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Settings</h2>
|
||||
<table class="table table-striped table-bordered docs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>initval</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Applied when no explicit value is set on the input with the <code>value</code> attribute. Empty string means
|
||||
that the value remains empty on initialization.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>replacementval</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Applied when user leaves the field empty/blank or enters non-number. Empty string means that the value will not be replaced.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>min</code></td>
|
||||
<td><code>0</code></td>
|
||||
<td>Minimum value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>max</code></td>
|
||||
<td><code>100</code></td>
|
||||
<td>Maximum value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>step</code></td>
|
||||
<td><code>1</code></td>
|
||||
<td>Incremental/decremental step on up/down change.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>forcestepdivisibility</code></td>
|
||||
<td><code>'round'</code></td>
|
||||
<td>How to force the value to be divisible by step value: <code>'none'</code> | <code>'round'</code> | <code>'floor'</code>
|
||||
| <code>'ceil'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>decimals</code></td>
|
||||
<td><code>0</code></td>
|
||||
<td>Number of decimal points.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>stepinterval</code></td>
|
||||
<td><code>100</code></td>
|
||||
<td>Refresh rate of the spinner in milliseconds.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>stepintervaldelay</code></td>
|
||||
<td><code>500</code></td>
|
||||
<td>Time in milliseconds before the spinner starts to spin.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>verticalbuttons</code></td>
|
||||
<td><code>false</code></td>
|
||||
<td>Enables the traditional up/down buttons.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>verticalupclass</code></td>
|
||||
<td><code>'glyphicon glyphicon-chevron-up'</code></td>
|
||||
<td>Class of the up button with vertical buttons mode enabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>verticaldownclass</code></td>
|
||||
<td><code>'glyphicon glyphicon-chevron-down'</code></td>
|
||||
<td>Class of the down button with vertical buttons mode enabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>prefix</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Text before the input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>postfix</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Text after the input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>prefix_extraclass</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Extra class(es) for prefix.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>postfix_extraclass</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Extra class(es) for postfix.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>booster</code></td>
|
||||
<td><code>true</code></td>
|
||||
<td>If enabled, the the spinner is continually becoming faster as holding the button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>boostat</code></td>
|
||||
<td><code>10</code></td>
|
||||
<td>Boost at every nth step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>maxboostedstep</code></td>
|
||||
<td><code>false</code></td>
|
||||
<td>Maximum step when boosted.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>mousewheel</code></td>
|
||||
<td><code>true</code></td>
|
||||
<td>Enables the mouse wheel to change the value of the input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttondown_class</code></td>
|
||||
<td><code>'btn btn-default'</code></td>
|
||||
<td>Class(es) of down button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttonup_class</code></td>
|
||||
<td><code>'btn btn-default'</code></td>
|
||||
<td>Class(es) of up button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttondown_txt</code></td>
|
||||
<td><code>'-'</code></td>
|
||||
<td>Content inside the down button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttonup_txt</code></td>
|
||||
<td><code>'+'</code></td>
|
||||
<td>Content inside the up button.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Events</h2>
|
||||
|
||||
<h3>Triggered events</h3>
|
||||
|
||||
<p>The following events are triggered on the original input by the plugin and can be listened on.</p>
|
||||
|
||||
<table class="table table-striped table-bordered docs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>change</code></td>
|
||||
<td>Triggered when the value is changed with one of the buttons (but not triggered when the spinner hits the
|
||||
limit set by <code>settings.min</code> or <code>settings.max</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.startspin</code></td>
|
||||
<td>Triggered when the spinner starts spinning upwards or downwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.startupspin</code></td>
|
||||
<td>Triggered when the spinner starts spinning upwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.startdownspin</code></td>
|
||||
<td>Triggered when the spinner starts spinning downwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.stopspin</code></td>
|
||||
<td>Triggered when the spinner stops spinning.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.stopupspin</code></td>
|
||||
<td>Triggered when the spinner stops upspinning.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.stopdownspin</code></td>
|
||||
<td>Triggered when the spinner stops downspinning.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.min</code></td>
|
||||
<td>Triggered when the spinner hits the limit set by <code>settings.min</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.max</code></td>
|
||||
<td>Triggered when the spinner hits the limit set by <code>settings.max</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Callable events</h3>
|
||||
|
||||
<p>The following events can be triggered on the original input.</p>
|
||||
|
||||
<p>
|
||||
Example usages:<br>
|
||||
<code class="prettyprint">$("input").trigger("touchspin.uponce");</code><br>
|
||||
<code class="prettyprint">$("input").trigger("touchspin.updatesettings", {max: 1000});</code>
|
||||
</p>
|
||||
|
||||
<table class="table table-striped table-bordered docs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>touchspin.updatesettings</code></td>
|
||||
<td><code>function(newoptions)</code>: Update any setting of an already initialized TouchSpin instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.uponce</code></td>
|
||||
<td>Increase the value by one step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.downonce</code></td>
|
||||
<td>Decrease the value by one step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.startupspin</code></td>
|
||||
<td>Starts the spinner upwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.startdownspin</code></td>
|
||||
<td>Starts the spinner downwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.stopspin</code></td>
|
||||
<td>Stops the spinner.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Download</h2>
|
||||
|
||||
<p><a id="link-ghd" href="https://github.com/istvan-ujjmeszaros/bootstrap-touchspin" target="_blank">Download</a> from
|
||||
github. Please report issues and suggestions to github's issue tracker or contact me on <a id="link-gp"
|
||||
href="https://plus.google.com/101242556570448529330/posts"
|
||||
target="_blank">g+</a> or
|
||||
<a id="link-tw" href="https://twitter.com/styu007" target="_blank">twitter</a>!</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
/*
|
||||
* Bootstrap TouchSpin - v3.0.1
|
||||
* A mobile and touch friendly input spinner component for Bootstrap 3.
|
||||
* http://www.virtuosoft.eu/code/bootstrap-touchspin/
|
||||
*
|
||||
* Made by István Ujj-Mészáros
|
||||
* Under Apache License v2.0 License
|
||||
*/
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical > .btn {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 8px 10px;
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
|
||||
margin-top: -2px;
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical i {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 5px;
|
||||
font-size: 9px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,686 @@
|
|||
/*
|
||||
* Bootstrap TouchSpin - v3.0.1
|
||||
* A mobile and touch friendly input spinner component for Bootstrap 3.
|
||||
* http://www.virtuosoft.eu/code/bootstrap-touchspin/
|
||||
*
|
||||
* Made by István Ujj-Mészáros
|
||||
* Under Apache License v2.0 License
|
||||
*/
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
var _currentSpinnerId = 0;
|
||||
|
||||
function _scopedEventName(name, id) {
|
||||
return name + '.touchspin_' + id;
|
||||
}
|
||||
|
||||
function _scopeEventNames(names, id) {
|
||||
return $.map(names, function(name) {
|
||||
return _scopedEventName(name, id);
|
||||
});
|
||||
}
|
||||
|
||||
$.fn.TouchSpin = function(options) {
|
||||
|
||||
if (options === 'destroy') {
|
||||
this.each(function() {
|
||||
var originalinput = $(this),
|
||||
originalinput_data = originalinput.data();
|
||||
$(document).off(_scopeEventNames([
|
||||
'mouseup',
|
||||
'touchend',
|
||||
'touchcancel',
|
||||
'mousemove',
|
||||
'touchmove',
|
||||
'scroll',
|
||||
'scrollstart'], originalinput_data.spinnerid).join(' '));
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
min: 0,
|
||||
max: 100,
|
||||
initval: '',
|
||||
step: 1,
|
||||
decimals: 0,
|
||||
stepinterval: 100,
|
||||
forcestepdivisibility: 'round', // none | floor | round | ceil
|
||||
stepintervaldelay: 500,
|
||||
verticalbuttons: false,
|
||||
verticalupclass: 'glyphicon glyphicon-chevron-up',
|
||||
verticaldownclass: 'glyphicon glyphicon-chevron-down',
|
||||
prefix: '',
|
||||
postfix: '',
|
||||
prefix_extraclass: '',
|
||||
postfix_extraclass: '',
|
||||
booster: true,
|
||||
boostat: 10,
|
||||
maxboostedstep: false,
|
||||
mousewheel: true,
|
||||
buttondown_class: 'btn btn-default',
|
||||
buttonup_class: 'btn btn-default',
|
||||
buttondown_txt: '-',
|
||||
buttonup_txt: '+'
|
||||
};
|
||||
|
||||
var attributeMap = {
|
||||
min: 'min',
|
||||
max: 'max',
|
||||
initval: 'init-val',
|
||||
step: 'step',
|
||||
decimals: 'decimals',
|
||||
stepinterval: 'step-interval',
|
||||
verticalbuttons: 'vertical-buttons',
|
||||
verticalupclass: 'vertical-up-class',
|
||||
verticaldownclass: 'vertical-down-class',
|
||||
forcestepdivisibility: 'force-step-divisibility',
|
||||
stepintervaldelay: 'step-interval-delay',
|
||||
prefix: 'prefix',
|
||||
postfix: 'postfix',
|
||||
prefix_extraclass: 'prefix-extra-class',
|
||||
postfix_extraclass: 'postfix-extra-class',
|
||||
booster: 'booster',
|
||||
boostat: 'boostat',
|
||||
maxboostedstep: 'max-boosted-step',
|
||||
mousewheel: 'mouse-wheel',
|
||||
buttondown_class: 'button-down-class',
|
||||
buttonup_class: 'button-up-class',
|
||||
buttondown_txt: 'button-down-txt',
|
||||
buttonup_txt: 'button-up-txt'
|
||||
};
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var settings,
|
||||
originalinput = $(this),
|
||||
originalinput_data = originalinput.data(),
|
||||
container,
|
||||
elements,
|
||||
value,
|
||||
downSpinTimer,
|
||||
upSpinTimer,
|
||||
downDelayTimeout,
|
||||
upDelayTimeout,
|
||||
spincount = 0,
|
||||
spinning = false;
|
||||
|
||||
init();
|
||||
|
||||
|
||||
function init() {
|
||||
if (originalinput.data('alreadyinitialized')) {
|
||||
return;
|
||||
}
|
||||
|
||||
originalinput.data('alreadyinitialized', true);
|
||||
_currentSpinnerId += 1;
|
||||
originalinput.data('spinnerid', _currentSpinnerId);
|
||||
|
||||
|
||||
if (!originalinput.is('input')) {
|
||||
console.log('Must be an input.');
|
||||
return;
|
||||
}
|
||||
|
||||
_initSettings();
|
||||
_setInitval();
|
||||
_checkValue();
|
||||
_buildHtml();
|
||||
_initElements();
|
||||
_hideEmptyPrefixPostfix();
|
||||
_bindEvents();
|
||||
_bindEventsInterface();
|
||||
elements.input.css('display', 'block');
|
||||
}
|
||||
|
||||
function _setInitval() {
|
||||
if (settings.initval !== '' && originalinput.val() === '') {
|
||||
originalinput.val(settings.initval);
|
||||
}
|
||||
}
|
||||
|
||||
function changeSettings(newsettings) {
|
||||
_updateSettings(newsettings);
|
||||
_checkValue();
|
||||
|
||||
var value = elements.input.val();
|
||||
|
||||
if (value !== '') {
|
||||
value = Number(elements.input.val());
|
||||
elements.input.val(value.toFixed(settings.decimals));
|
||||
}
|
||||
}
|
||||
|
||||
function _initSettings() {
|
||||
settings = $.extend({}, defaults, originalinput_data, _parseAttributes(), options);
|
||||
}
|
||||
|
||||
function _parseAttributes() {
|
||||
var data = {};
|
||||
$.each(attributeMap, function(key, value) {
|
||||
var attrName = 'bts-' + value + '';
|
||||
if (originalinput.is('[data-' + attrName + ']')) {
|
||||
data[key] = originalinput.data(attrName);
|
||||
}
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
function _updateSettings(newsettings) {
|
||||
settings = $.extend({}, settings, newsettings);
|
||||
}
|
||||
|
||||
function _buildHtml() {
|
||||
var initval = originalinput.val(),
|
||||
parentelement = originalinput.parent();
|
||||
|
||||
if (initval !== '') {
|
||||
initval = Number(initval).toFixed(settings.decimals);
|
||||
}
|
||||
|
||||
originalinput.data('initvalue', initval).val(initval);
|
||||
originalinput.addClass('form-control');
|
||||
|
||||
if (parentelement.hasClass('input-group')) {
|
||||
_advanceInputGroup(parentelement);
|
||||
}
|
||||
else {
|
||||
_buildInputGroup();
|
||||
}
|
||||
}
|
||||
|
||||
function _advanceInputGroup(parentelement) {
|
||||
parentelement.addClass('bootstrap-touchspin');
|
||||
|
||||
var prev = originalinput.prev(),
|
||||
next = originalinput.next();
|
||||
|
||||
var downhtml,
|
||||
uphtml,
|
||||
prefixhtml = '<span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span>',
|
||||
postfixhtml = '<span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span>';
|
||||
|
||||
if (prev.hasClass('input-group-btn')) {
|
||||
downhtml = '<button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button>';
|
||||
prev.append(downhtml);
|
||||
}
|
||||
else {
|
||||
downhtml = '<span class="input-group-btn"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button></span>';
|
||||
$(downhtml).insertBefore(originalinput);
|
||||
}
|
||||
|
||||
if (next.hasClass('input-group-btn')) {
|
||||
uphtml = '<button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button>';
|
||||
next.prepend(uphtml);
|
||||
}
|
||||
else {
|
||||
uphtml = '<span class="input-group-btn"><button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button></span>';
|
||||
$(uphtml).insertAfter(originalinput);
|
||||
}
|
||||
|
||||
$(prefixhtml).insertBefore(originalinput);
|
||||
$(postfixhtml).insertAfter(originalinput);
|
||||
|
||||
container = parentelement;
|
||||
}
|
||||
|
||||
function _buildInputGroup() {
|
||||
var html;
|
||||
|
||||
if (settings.verticalbuttons) {
|
||||
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>';
|
||||
}
|
||||
else {
|
||||
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>';
|
||||
}
|
||||
|
||||
container = $(html).insertBefore(originalinput);
|
||||
|
||||
$('.bootstrap-touchspin-prefix', container).after(originalinput);
|
||||
|
||||
if (originalinput.hasClass('input-sm')) {
|
||||
container.addClass('input-group-sm');
|
||||
}
|
||||
else if (originalinput.hasClass('input-lg')) {
|
||||
container.addClass('input-group-lg');
|
||||
}
|
||||
}
|
||||
|
||||
function _initElements() {
|
||||
elements = {
|
||||
down: $('.bootstrap-touchspin-down', container),
|
||||
up: $('.bootstrap-touchspin-up', container),
|
||||
input: $('input', container),
|
||||
prefix: $('.bootstrap-touchspin-prefix', container).addClass(settings.prefix_extraclass),
|
||||
postfix: $('.bootstrap-touchspin-postfix', container).addClass(settings.postfix_extraclass)
|
||||
};
|
||||
}
|
||||
|
||||
function _hideEmptyPrefixPostfix() {
|
||||
if (settings.prefix === '') {
|
||||
elements.prefix.hide();
|
||||
}
|
||||
|
||||
if (settings.postfix === '') {
|
||||
elements.postfix.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function _bindEvents() {
|
||||
originalinput.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 38) {
|
||||
if (spinning !== 'up') {
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
else if (code === 40) {
|
||||
if (spinning !== 'down') {
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
originalinput.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 38) {
|
||||
stopSpin();
|
||||
}
|
||||
else if (code === 40) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
originalinput.on('blur', function() {
|
||||
_checkValue();
|
||||
});
|
||||
|
||||
elements.down.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
if (spinning !== 'down') {
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
elements.down.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
elements.up.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
if (spinning !== 'up') {
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
elements.up.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
elements.down.on('mousedown.touchspin', function(ev) {
|
||||
elements.down.off('touchstart.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.down.on('touchstart.touchspin', function(ev) {
|
||||
elements.down.off('mousedown.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('mousedown.touchspin', function(ev) {
|
||||
elements.up.off('touchstart.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('touchstart.touchspin', function(ev) {
|
||||
elements.up.off('mousedown.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('mouseout touchleave touchend touchcancel', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
elements.down.on('mouseout touchleave touchend touchcancel', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
elements.down.on('mousemove touchmove', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
elements.up.on('mousemove touchmove', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
$(document).on(_scopeEventNames(['mouseup', 'touchend', 'touchcancel'], _currentSpinnerId).join(' '), function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
$(document).on(_scopeEventNames(['mousemove', 'touchmove', 'scroll', 'scrollstart'], _currentSpinnerId).join(' '), function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
originalinput.on('mousewheel DOMMouseScroll', function(ev) {
|
||||
if (!settings.mousewheel || !originalinput.is(':focus')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var delta = ev.originalEvent.wheelDelta || -ev.originalEvent.deltaY || -ev.originalEvent.detail;
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
|
||||
if (delta < 0) {
|
||||
downOnce();
|
||||
}
|
||||
else {
|
||||
upOnce();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _bindEventsInterface() {
|
||||
originalinput.on('touchspin.uponce', function() {
|
||||
stopSpin();
|
||||
upOnce();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.downonce', function() {
|
||||
stopSpin();
|
||||
downOnce();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.startupspin', function() {
|
||||
startUpSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.startdownspin', function() {
|
||||
startDownSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.stopspin', function() {
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.updatesettings', function(e, newsettings) {
|
||||
changeSettings(newsettings);
|
||||
});
|
||||
}
|
||||
|
||||
function _forcestepdivisibility(value) {
|
||||
switch (settings.forcestepdivisibility) {
|
||||
case 'round':
|
||||
return (Math.round(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
case 'floor':
|
||||
return (Math.floor(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
case 'ceil':
|
||||
return (Math.ceil(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
default:
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function _checkValue() {
|
||||
var val, parsedval, returnval;
|
||||
|
||||
val = originalinput.val();
|
||||
|
||||
if (val === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (settings.decimals > 0 && val === '.') {
|
||||
return;
|
||||
}
|
||||
|
||||
parsedval = parseFloat(val);
|
||||
|
||||
if (isNaN(parsedval)) {
|
||||
parsedval = 0;
|
||||
}
|
||||
|
||||
returnval = parsedval;
|
||||
|
||||
if (parsedval.toString() !== val) {
|
||||
returnval = parsedval;
|
||||
}
|
||||
|
||||
if (parsedval < settings.min) {
|
||||
returnval = settings.min;
|
||||
}
|
||||
|
||||
if (parsedval > settings.max) {
|
||||
returnval = settings.max;
|
||||
}
|
||||
|
||||
returnval = _forcestepdivisibility(returnval);
|
||||
|
||||
if (Number(val).toString() !== returnval.toString()) {
|
||||
originalinput.val(returnval);
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function _getBoostedStep() {
|
||||
if (!settings.booster) {
|
||||
return settings.step;
|
||||
}
|
||||
else {
|
||||
var boosted = Math.pow(2, Math.floor(spincount / settings.boostat)) * settings.step;
|
||||
|
||||
if (settings.maxboostedstep) {
|
||||
if (boosted > settings.maxboostedstep) {
|
||||
boosted = settings.maxboostedstep;
|
||||
value = Math.round((value / boosted)) * boosted;
|
||||
}
|
||||
}
|
||||
|
||||
return Math.max(settings.step, boosted);
|
||||
}
|
||||
}
|
||||
|
||||
function upOnce() {
|
||||
_checkValue();
|
||||
|
||||
value = parseFloat(elements.input.val());
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
var initvalue = value,
|
||||
boostedstep = _getBoostedStep();
|
||||
|
||||
value = value + boostedstep;
|
||||
|
||||
if (value > settings.max) {
|
||||
value = settings.max;
|
||||
originalinput.trigger('touchspin.on.max');
|
||||
stopSpin();
|
||||
}
|
||||
|
||||
elements.input.val(Number(value).toFixed(settings.decimals));
|
||||
|
||||
if (initvalue !== value) {
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function downOnce() {
|
||||
_checkValue();
|
||||
|
||||
value = parseFloat(elements.input.val());
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
var initvalue = value,
|
||||
boostedstep = _getBoostedStep();
|
||||
|
||||
value = value - boostedstep;
|
||||
|
||||
if (value < settings.min) {
|
||||
value = settings.min;
|
||||
originalinput.trigger('touchspin.on.min');
|
||||
stopSpin();
|
||||
}
|
||||
|
||||
elements.input.val(value.toFixed(settings.decimals));
|
||||
|
||||
if (initvalue !== value) {
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function startDownSpin() {
|
||||
stopSpin();
|
||||
|
||||
spincount = 0;
|
||||
spinning = 'down';
|
||||
|
||||
originalinput.trigger('touchspin.on.startspin');
|
||||
originalinput.trigger('touchspin.on.startdownspin');
|
||||
|
||||
downDelayTimeout = setTimeout(function() {
|
||||
downSpinTimer = setInterval(function() {
|
||||
spincount++;
|
||||
downOnce();
|
||||
}, settings.stepinterval);
|
||||
}, settings.stepintervaldelay);
|
||||
}
|
||||
|
||||
function startUpSpin() {
|
||||
stopSpin();
|
||||
|
||||
spincount = 0;
|
||||
spinning = 'up';
|
||||
|
||||
originalinput.trigger('touchspin.on.startspin');
|
||||
originalinput.trigger('touchspin.on.startupspin');
|
||||
|
||||
upDelayTimeout = setTimeout(function() {
|
||||
upSpinTimer = setInterval(function() {
|
||||
spincount++;
|
||||
upOnce();
|
||||
}, settings.stepinterval);
|
||||
}, settings.stepintervaldelay);
|
||||
}
|
||||
|
||||
function stopSpin() {
|
||||
clearTimeout(downDelayTimeout);
|
||||
clearTimeout(upDelayTimeout);
|
||||
clearInterval(downSpinTimer);
|
||||
clearInterval(upSpinTimer);
|
||||
|
||||
switch (spinning) {
|
||||
case 'up':
|
||||
originalinput.trigger('touchspin.on.stopupspin');
|
||||
originalinput.trigger('touchspin.on.stopspin');
|
||||
break;
|
||||
case 'down':
|
||||
originalinput.trigger('touchspin.on.stopdownspin');
|
||||
originalinput.trigger('touchspin.on.stopspin');
|
||||
break;
|
||||
}
|
||||
|
||||
spincount = 0;
|
||||
spinning = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
* Bootstrap TouchSpin - v3.0.1
|
||||
* A mobile and touch friendly input spinner component for Bootstrap 3.
|
||||
* http://www.virtuosoft.eu/code/bootstrap-touchspin/
|
||||
*
|
||||
* Made by István Ujj-Mészáros
|
||||
* Under Apache License v2.0 License
|
||||
*/
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical{position:relative;white-space:nowrap;width:1%;vertical-align:middle;display:table-cell}.bootstrap-touchspin .input-group-btn-vertical>.btn{display:block;float:none;width:100%;max-width:100%;padding:8px 10px;margin-left:-1px;position:relative}.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up{border-radius:0;border-top-right-radius:4px}.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down{margin-top:-2px;border-radius:0;border-bottom-right-radius:4px}.bootstrap-touchspin .input-group-btn-vertical i{position:absolute;top:3px;left:5px;font-size:9px;font-weight:400}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,52 @@
|
|||
{
|
||||
"name": "bootstrap-touchspin",
|
||||
"title": "Bootstrap Touchspin",
|
||||
"description": "A mobile and touch friendly input spinner component for Bootstrap 3.",
|
||||
"author": {
|
||||
"name": "István Ujj-Mészáros",
|
||||
"url": "https://github.com/istvan-ujjmeszaros"
|
||||
},
|
||||
"contributors": [
|
||||
{
|
||||
"name": "István Ujj-Mészáros",
|
||||
"url": "https://github.com/istvan-ujjmeszaros"
|
||||
},
|
||||
{
|
||||
"name": "Stefan Bauer",
|
||||
"url": "https://github.com/sba"
|
||||
},
|
||||
{
|
||||
"name": "Duy Anh Nguyen",
|
||||
"url": "https://github.com/aduyng"
|
||||
},
|
||||
{
|
||||
"name": "Emanuele Rampichini",
|
||||
"url": "https://github.com/lele85"
|
||||
},
|
||||
{
|
||||
"name": "Eliak",
|
||||
"url": "https://github.com/Eliak"
|
||||
},
|
||||
{
|
||||
"name": "amid2887",
|
||||
"url": "https://github.com/amid2887"
|
||||
}
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://github.com/istvan-ujjmeszaros/bootstrap-touchspin.git"
|
||||
},
|
||||
"homepage": "http://www.virtuosoft.eu/code/bootstrap-touchspin/",
|
||||
"version": "3.0.1",
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-cli": "~0.1.13",
|
||||
"grunt-contrib-jshint": "~0.8.0",
|
||||
"grunt-contrib-concat": "~0.3.0",
|
||||
"grunt-contrib-uglify": "~0.3.2",
|
||||
"grunt-contrib-cssmin": "~0.9.0"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "grunt travis --verbose"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
|
||||
.bootstrap-touchspin .input-group-btn-vertical {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical > .btn {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 8px 10px;
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
|
||||
border-radius: 0;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
|
||||
margin-top: -2px;
|
||||
border-radius: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.bootstrap-touchspin .input-group-btn-vertical i {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 5px;
|
||||
font-size: 9px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,689 @@
|
|||
(function($) {
|
||||
'use strict';
|
||||
|
||||
var _currentSpinnerId = 0;
|
||||
|
||||
function _scopedEventName(name, id) {
|
||||
return name + '.touchspin_' + id;
|
||||
}
|
||||
|
||||
function _scopeEventNames(names, id) {
|
||||
return $.map(names, function(name) {
|
||||
return _scopedEventName(name, id);
|
||||
});
|
||||
}
|
||||
|
||||
$.fn.TouchSpin = function(options) {
|
||||
|
||||
if (options === 'destroy') {
|
||||
this.each(function() {
|
||||
var originalinput = $(this),
|
||||
originalinput_data = originalinput.data();
|
||||
$(document).off(_scopeEventNames([
|
||||
'mouseup',
|
||||
'touchend',
|
||||
'touchcancel',
|
||||
'mousemove',
|
||||
'touchmove',
|
||||
'scroll',
|
||||
'scrollstart'], originalinput_data.spinnerid).join(' '));
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
var defaults = {
|
||||
min: 0,
|
||||
max: 100,
|
||||
initval: '',
|
||||
replacementval: '',
|
||||
step: 1,
|
||||
decimals: 0,
|
||||
stepinterval: 100,
|
||||
forcestepdivisibility: 'round', // none | floor | round | ceil
|
||||
stepintervaldelay: 500,
|
||||
verticalbuttons: false,
|
||||
verticalupclass: 'glyphicon glyphicon-chevron-up',
|
||||
verticaldownclass: 'glyphicon glyphicon-chevron-down',
|
||||
prefix: '',
|
||||
postfix: '',
|
||||
prefix_extraclass: '',
|
||||
postfix_extraclass: '',
|
||||
booster: true,
|
||||
boostat: 10,
|
||||
maxboostedstep: false,
|
||||
mousewheel: true,
|
||||
buttondown_class: 'btn btn-default',
|
||||
buttonup_class: 'btn btn-default',
|
||||
buttondown_txt: '-',
|
||||
buttonup_txt: '+'
|
||||
};
|
||||
|
||||
var attributeMap = {
|
||||
min: 'min',
|
||||
max: 'max',
|
||||
initval: 'init-val',
|
||||
replacementval: 'replacement-val',
|
||||
step: 'step',
|
||||
decimals: 'decimals',
|
||||
stepinterval: 'step-interval',
|
||||
verticalbuttons: 'vertical-buttons',
|
||||
verticalupclass: 'vertical-up-class',
|
||||
verticaldownclass: 'vertical-down-class',
|
||||
forcestepdivisibility: 'force-step-divisibility',
|
||||
stepintervaldelay: 'step-interval-delay',
|
||||
prefix: 'prefix',
|
||||
postfix: 'postfix',
|
||||
prefix_extraclass: 'prefix-extra-class',
|
||||
postfix_extraclass: 'postfix-extra-class',
|
||||
booster: 'booster',
|
||||
boostat: 'boostat',
|
||||
maxboostedstep: 'max-boosted-step',
|
||||
mousewheel: 'mouse-wheel',
|
||||
buttondown_class: 'button-down-class',
|
||||
buttonup_class: 'button-up-class',
|
||||
buttondown_txt: 'button-down-txt',
|
||||
buttonup_txt: 'button-up-txt'
|
||||
};
|
||||
|
||||
return this.each(function() {
|
||||
|
||||
var settings,
|
||||
originalinput = $(this),
|
||||
originalinput_data = originalinput.data(),
|
||||
container,
|
||||
elements,
|
||||
value,
|
||||
downSpinTimer,
|
||||
upSpinTimer,
|
||||
downDelayTimeout,
|
||||
upDelayTimeout,
|
||||
spincount = 0,
|
||||
spinning = false;
|
||||
|
||||
init();
|
||||
|
||||
|
||||
function init() {
|
||||
if (originalinput.data('alreadyinitialized')) {
|
||||
return;
|
||||
}
|
||||
|
||||
originalinput.data('alreadyinitialized', true);
|
||||
_currentSpinnerId += 1;
|
||||
originalinput.data('spinnerid', _currentSpinnerId);
|
||||
|
||||
|
||||
if (!originalinput.is('input')) {
|
||||
console.log('Must be an input.');
|
||||
return;
|
||||
}
|
||||
|
||||
_initSettings();
|
||||
_setInitval();
|
||||
_checkValue();
|
||||
_buildHtml();
|
||||
_initElements();
|
||||
_hideEmptyPrefixPostfix();
|
||||
_bindEvents();
|
||||
_bindEventsInterface();
|
||||
elements.input.css('display', 'block');
|
||||
}
|
||||
|
||||
function _setInitval() {
|
||||
if (settings.initval !== '' && originalinput.val() === '') {
|
||||
originalinput.val(settings.initval);
|
||||
}
|
||||
}
|
||||
|
||||
function changeSettings(newsettings) {
|
||||
_updateSettings(newsettings);
|
||||
_checkValue();
|
||||
|
||||
var value = elements.input.val();
|
||||
|
||||
if (value !== '') {
|
||||
value = Number(elements.input.val());
|
||||
elements.input.val(value.toFixed(settings.decimals));
|
||||
}
|
||||
}
|
||||
|
||||
function _initSettings() {
|
||||
settings = $.extend({}, defaults, originalinput_data, _parseAttributes(), options);
|
||||
}
|
||||
|
||||
function _parseAttributes() {
|
||||
var data = {};
|
||||
$.each(attributeMap, function(key, value) {
|
||||
var attrName = 'bts-' + value + '';
|
||||
if (originalinput.is('[data-' + attrName + ']')) {
|
||||
data[key] = originalinput.data(attrName);
|
||||
}
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
function _updateSettings(newsettings) {
|
||||
settings = $.extend({}, settings, newsettings);
|
||||
}
|
||||
|
||||
function _buildHtml() {
|
||||
var initval = originalinput.val(),
|
||||
parentelement = originalinput.parent();
|
||||
|
||||
if (initval !== '') {
|
||||
initval = Number(initval).toFixed(settings.decimals);
|
||||
}
|
||||
|
||||
originalinput.data('initvalue', initval).val(initval);
|
||||
originalinput.addClass('form-control');
|
||||
|
||||
if (parentelement.hasClass('input-group')) {
|
||||
_advanceInputGroup(parentelement);
|
||||
}
|
||||
else {
|
||||
_buildInputGroup();
|
||||
}
|
||||
}
|
||||
|
||||
function _advanceInputGroup(parentelement) {
|
||||
parentelement.addClass('bootstrap-touchspin');
|
||||
|
||||
var prev = originalinput.prev(),
|
||||
next = originalinput.next();
|
||||
|
||||
var downhtml,
|
||||
uphtml,
|
||||
prefixhtml = '<span class="input-group-addon bootstrap-touchspin-prefix">' + settings.prefix + '</span>',
|
||||
postfixhtml = '<span class="input-group-addon bootstrap-touchspin-postfix">' + settings.postfix + '</span>';
|
||||
|
||||
if (prev.hasClass('input-group-btn')) {
|
||||
downhtml = '<button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button>';
|
||||
prev.append(downhtml);
|
||||
}
|
||||
else {
|
||||
downhtml = '<span class="input-group-btn"><button class="' + settings.buttondown_class + ' bootstrap-touchspin-down" type="button">' + settings.buttondown_txt + '</button></span>';
|
||||
$(downhtml).insertBefore(originalinput);
|
||||
}
|
||||
|
||||
if (next.hasClass('input-group-btn')) {
|
||||
uphtml = '<button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button>';
|
||||
next.prepend(uphtml);
|
||||
}
|
||||
else {
|
||||
uphtml = '<span class="input-group-btn"><button class="' + settings.buttonup_class + ' bootstrap-touchspin-up" type="button">' + settings.buttonup_txt + '</button></span>';
|
||||
$(uphtml).insertAfter(originalinput);
|
||||
}
|
||||
|
||||
$(prefixhtml).insertBefore(originalinput);
|
||||
$(postfixhtml).insertAfter(originalinput);
|
||||
|
||||
container = parentelement;
|
||||
}
|
||||
|
||||
function _buildInputGroup() {
|
||||
var html;
|
||||
|
||||
if (settings.verticalbuttons) {
|
||||
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>';
|
||||
}
|
||||
else {
|
||||
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>';
|
||||
}
|
||||
|
||||
container = $(html).insertBefore(originalinput);
|
||||
|
||||
$('.bootstrap-touchspin-prefix', container).after(originalinput);
|
||||
|
||||
if (originalinput.hasClass('input-sm')) {
|
||||
container.addClass('input-group-sm');
|
||||
}
|
||||
else if (originalinput.hasClass('input-lg')) {
|
||||
container.addClass('input-group-lg');
|
||||
}
|
||||
}
|
||||
|
||||
function _initElements() {
|
||||
elements = {
|
||||
down: $('.bootstrap-touchspin-down', container),
|
||||
up: $('.bootstrap-touchspin-up', container),
|
||||
input: $('input', container),
|
||||
prefix: $('.bootstrap-touchspin-prefix', container).addClass(settings.prefix_extraclass),
|
||||
postfix: $('.bootstrap-touchspin-postfix', container).addClass(settings.postfix_extraclass)
|
||||
};
|
||||
}
|
||||
|
||||
function _hideEmptyPrefixPostfix() {
|
||||
if (settings.prefix === '') {
|
||||
elements.prefix.hide();
|
||||
}
|
||||
|
||||
if (settings.postfix === '') {
|
||||
elements.postfix.hide();
|
||||
}
|
||||
}
|
||||
|
||||
function _bindEvents() {
|
||||
originalinput.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 38) {
|
||||
if (spinning !== 'up') {
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
else if (code === 40) {
|
||||
if (spinning !== 'down') {
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
originalinput.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 38) {
|
||||
stopSpin();
|
||||
}
|
||||
else if (code === 40) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
originalinput.on('blur', function() {
|
||||
_checkValue();
|
||||
});
|
||||
|
||||
elements.down.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
if (spinning !== 'down') {
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
elements.down.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
elements.up.on('keydown', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
if (spinning !== 'up') {
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
}
|
||||
ev.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
elements.up.on('keyup', function(ev) {
|
||||
var code = ev.keyCode || ev.which;
|
||||
|
||||
if (code === 32 || code === 13) {
|
||||
stopSpin();
|
||||
}
|
||||
});
|
||||
|
||||
elements.down.on('mousedown.touchspin', function(ev) {
|
||||
elements.down.off('touchstart.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.down.on('touchstart.touchspin', function(ev) {
|
||||
elements.down.off('mousedown.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
downOnce();
|
||||
startDownSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('mousedown.touchspin', function(ev) {
|
||||
elements.up.off('touchstart.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('touchstart.touchspin', function(ev) {
|
||||
elements.up.off('mousedown.touchspin'); // android 4 workaround
|
||||
|
||||
if (originalinput.is(':disabled')) {
|
||||
return;
|
||||
}
|
||||
|
||||
upOnce();
|
||||
startUpSpin();
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
});
|
||||
|
||||
elements.up.on('mouseout touchleave touchend touchcancel', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
elements.down.on('mouseout touchleave touchend touchcancel', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
elements.down.on('mousemove touchmove', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
elements.up.on('mousemove touchmove', function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
$(document).on(_scopeEventNames(['mouseup', 'touchend', 'touchcancel'], _currentSpinnerId).join(' '), function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
$(document).on(_scopeEventNames(['mousemove', 'touchmove', 'scroll', 'scrollstart'], _currentSpinnerId).join(' '), function(ev) {
|
||||
if (!spinning) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
originalinput.on('mousewheel DOMMouseScroll', function(ev) {
|
||||
if (!settings.mousewheel || !originalinput.is(':focus')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var delta = ev.originalEvent.wheelDelta || -ev.originalEvent.deltaY || -ev.originalEvent.detail;
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
|
||||
if (delta < 0) {
|
||||
downOnce();
|
||||
}
|
||||
else {
|
||||
upOnce();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _bindEventsInterface() {
|
||||
originalinput.on('touchspin.uponce', function() {
|
||||
stopSpin();
|
||||
upOnce();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.downonce', function() {
|
||||
stopSpin();
|
||||
downOnce();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.startupspin', function() {
|
||||
startUpSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.startdownspin', function() {
|
||||
startDownSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.stopspin', function() {
|
||||
stopSpin();
|
||||
});
|
||||
|
||||
originalinput.on('touchspin.updatesettings', function(e, newsettings) {
|
||||
changeSettings(newsettings);
|
||||
});
|
||||
}
|
||||
|
||||
function _forcestepdivisibility(value) {
|
||||
switch (settings.forcestepdivisibility) {
|
||||
case 'round':
|
||||
return (Math.round(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
case 'floor':
|
||||
return (Math.floor(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
case 'ceil':
|
||||
return (Math.ceil(value / settings.step) * settings.step).toFixed(settings.decimals);
|
||||
default:
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function _checkValue() {
|
||||
var val, parsedval, returnval;
|
||||
|
||||
val = originalinput.val();
|
||||
|
||||
if (val === '') {
|
||||
if (settings.replacementval !== '') {
|
||||
originalinput.val(settings.replacementval);
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (settings.decimals > 0 && val === '.') {
|
||||
return;
|
||||
}
|
||||
|
||||
parsedval = parseFloat(val);
|
||||
|
||||
if (isNaN(parsedval)) {
|
||||
if (settings.replacementval !== '') {
|
||||
parsedval = settings.replacementval;
|
||||
}
|
||||
else {
|
||||
parsedval = 0;
|
||||
}
|
||||
}
|
||||
|
||||
returnval = parsedval;
|
||||
|
||||
if (parsedval.toString() !== val) {
|
||||
returnval = parsedval;
|
||||
}
|
||||
|
||||
if (parsedval < settings.min) {
|
||||
returnval = settings.min;
|
||||
}
|
||||
|
||||
if (parsedval > settings.max) {
|
||||
returnval = settings.max;
|
||||
}
|
||||
|
||||
returnval = _forcestepdivisibility(returnval);
|
||||
|
||||
if (Number(val).toString() !== returnval.toString()) {
|
||||
originalinput.val(returnval);
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function _getBoostedStep() {
|
||||
if (!settings.booster) {
|
||||
return settings.step;
|
||||
}
|
||||
else {
|
||||
var boosted = Math.pow(2, Math.floor(spincount / settings.boostat)) * settings.step;
|
||||
|
||||
if (settings.maxboostedstep) {
|
||||
if (boosted > settings.maxboostedstep) {
|
||||
boosted = settings.maxboostedstep;
|
||||
value = Math.round((value / boosted)) * boosted;
|
||||
}
|
||||
}
|
||||
|
||||
return Math.max(settings.step, boosted);
|
||||
}
|
||||
}
|
||||
|
||||
function upOnce() {
|
||||
_checkValue();
|
||||
|
||||
value = parseFloat(elements.input.val());
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
var initvalue = value,
|
||||
boostedstep = _getBoostedStep();
|
||||
|
||||
value = value + boostedstep;
|
||||
|
||||
if (value > settings.max) {
|
||||
value = settings.max;
|
||||
originalinput.trigger('touchspin.on.max');
|
||||
stopSpin();
|
||||
}
|
||||
|
||||
elements.input.val(Number(value).toFixed(settings.decimals));
|
||||
|
||||
if (initvalue !== value) {
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function downOnce() {
|
||||
_checkValue();
|
||||
|
||||
value = parseFloat(elements.input.val());
|
||||
if (isNaN(value)) {
|
||||
value = 0;
|
||||
}
|
||||
|
||||
var initvalue = value,
|
||||
boostedstep = _getBoostedStep();
|
||||
|
||||
value = value - boostedstep;
|
||||
|
||||
if (value < settings.min) {
|
||||
value = settings.min;
|
||||
originalinput.trigger('touchspin.on.min');
|
||||
stopSpin();
|
||||
}
|
||||
|
||||
elements.input.val(value.toFixed(settings.decimals));
|
||||
|
||||
if (initvalue !== value) {
|
||||
originalinput.trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
function startDownSpin() {
|
||||
stopSpin();
|
||||
|
||||
spincount = 0;
|
||||
spinning = 'down';
|
||||
|
||||
originalinput.trigger('touchspin.on.startspin');
|
||||
originalinput.trigger('touchspin.on.startdownspin');
|
||||
|
||||
downDelayTimeout = setTimeout(function() {
|
||||
downSpinTimer = setInterval(function() {
|
||||
spincount++;
|
||||
downOnce();
|
||||
}, settings.stepinterval);
|
||||
}, settings.stepintervaldelay);
|
||||
}
|
||||
|
||||
function startUpSpin() {
|
||||
stopSpin();
|
||||
|
||||
spincount = 0;
|
||||
spinning = 'up';
|
||||
|
||||
originalinput.trigger('touchspin.on.startspin');
|
||||
originalinput.trigger('touchspin.on.startupspin');
|
||||
|
||||
upDelayTimeout = setTimeout(function() {
|
||||
upSpinTimer = setInterval(function() {
|
||||
spincount++;
|
||||
upOnce();
|
||||
}, settings.stepinterval);
|
||||
}, settings.stepintervaldelay);
|
||||
}
|
||||
|
||||
function stopSpin() {
|
||||
clearTimeout(downDelayTimeout);
|
||||
clearTimeout(upDelayTimeout);
|
||||
clearInterval(downSpinTimer);
|
||||
clearInterval(upSpinTimer);
|
||||
|
||||
switch (spinning) {
|
||||
case 'up':
|
||||
originalinput.trigger('touchspin.on.stopupspin');
|
||||
originalinput.trigger('touchspin.on.stopspin');
|
||||
break;
|
||||
case 'down':
|
||||
originalinput.trigger('touchspin.on.stopdownspin');
|
||||
originalinput.trigger('touchspin.on.stopspin');
|
||||
break;
|
||||
}
|
||||
|
||||
spincount = 0;
|
||||
spinning = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue