Initial commit

This commit is contained in:
2023-10-04 17:24:40 +02:00
commit 515c7259d8
144 changed files with 118578 additions and 0 deletions

View File

@@ -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

View File

@@ -0,0 +1,777 @@
<!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"><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">
&lt;input id=&quot;demo0&quot;
type=&quot;text&quot;
value=&quot;55&quot;
name=&quot;demo0&quot;
data-bts-min=&quot;0&quot;
data-bts-max=&quot;100&quot;
data-bts-init-val=&quot;&quot;
data-bts-step=&quot;1&quot;
data-bts-decimal=&quot;0&quot;
data-bts-step-interval=&quot;100&quot;
data-bts-force-step-divisibility=&quot;round&quot;
data-bts-step-interval-delay=&quot;500&quot;
data-bts-prefix=&quot;&quot;
data-bts-postfix=&quot;&quot;
data-bts-prefix-extra-class=&quot;&quot;
data-bts-postfix-extra-class=&quot;&quot;
data-bts-booster=&quot;true&quot;
data-bts-boostat=&quot;10&quot;
data-bts-max-boosted-step=&quot;false&quot;
data-bts-mousewheel=&quot;true&quot;
data-bts-button-down-class=&quot;btn btn-default&quot;
data-bts-button-up-class=&quot;btn btn-default&quot;
/&gt;
&lt;script&gt;
$(&quot;input[name='demo0']&quot;).TouchSpin({
});
&lt;/script&gt;
</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">
&lt;input id=&quot;demo_vertical&quot; type=&quot;text&quot; value=&quot;&quot; name=&quot;demo_vertical&quot;&gt;
&lt;script&gt;
$(&quot;input[name='demo_vertical']&quot;).TouchSpin({
verticalbuttons: true
});
&lt;/script&gt;
</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">
&lt;input id=&quot;demo_vertical2&quot; type=&quot;text&quot; value=&quot;&quot; name=&quot;demo_vertical2&quot;&gt;
&lt;script&gt;
$(&quot;input[name='demo_vertical2']&quot;).TouchSpin({
verticalbuttons: true,
verticalupclass: 'glyphicon glyphicon-plus',
verticaldownclass: 'glyphicon glyphicon-minus'
});
&lt;/script&gt;
</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">
&lt;input id=&quot;demo1&quot; type=&quot;text&quot; value=&quot;55&quot; name=&quot;demo1&quot;&gt;
&lt;script&gt;
$(&quot;input[name='demo1']&quot;).TouchSpin({
min: 0,
max: 100,
step: 0.1,
decimals: 2,
boostat: 5,
maxboostedstep: 10,
postfix: '%'
});
&lt;/script&gt;
</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">
&lt;form class=&quot;form-horizontal&quot; role=&quot;form&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;demo2&quot; class=&quot;col-md-5 control-label&quot;&gt;Example:&lt;/label&gt; &lt;input id=&quot;demo2&quot; type=&quot;text&quot; value=&quot;0&quot; name=&quot;demo2&quot; class=&quot;col-md-7 form-control&quot;&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;script&gt;
$(&quot;input[name='demo2']&quot;).TouchSpin({
min: -1000000000,
max: 1000000000,
stepinterval: 50,
maxboostedstep: 10000000,
prefix: '$'
});
&lt;/script&gt;
</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">
&lt;input id=&quot;demo3&quot; type=&quot;text&quot; value=&quot;&quot; name=&quot;demo3&quot;&gt;
&lt;script&gt;
$(&quot;input[name='demo3']&quot;).TouchSpin();
&lt;/script&gt;
</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">
&lt;input id=&quot;demo3_21&quot; type=&quot;text&quot; value=&quot;&quot; name=&quot;demo3_21&quot;&gt;
&lt;script&gt;
$(&quot;input[name='demo3_21']&quot;).TouchSpin({
initval: 40
});
&lt;/script&gt;
&lt;input id=&quot;demo3_22&quot; type=&quot;text&quot; value=&quot;33&quot; name=&quot;demo3_22&quot;&gt;
&lt;script&gt;
$(&quot;input[name='demo3_22']&quot;).TouchSpin({
initval: 40
});
&lt;/script&gt;
</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">
&lt;input id=&quot;demo4&quot; type=&quot;text&quot; value=&quot;&quot; name=&quot;demo4&quot; class=&quot;input-sm&quot;&gt;
&lt;script&gt;
$(&quot;input[name='demo4']&quot;).TouchSpin({
postfix: &quot;a button&quot;,
postfix_extraclass: &quot;btn btn-default&quot;
});
&lt;/script&gt;
</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">
&lt;div class=&quot;input-group input-group-lg&quot;&gt;
&lt;input id=&quot;demo4_2&quot; type=&quot;text&quot; value=&quot;&quot; name=&quot;demo4_2&quot; class=&quot;form-control input-lg&quot;&gt;
&lt;/div&gt;
&lt;script&gt;
$(&quot;input[name='demo4_2']&quot;).TouchSpin({
postfix: &quot;a button&quot;,
postfix_extraclass: &quot;btn btn-default&quot;
});
&lt;/script&gt;
</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">
&lt;div class=&quot;input-group&quot;&gt;
&lt;input id=&quot;demo5&quot; type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;demo5&quot; value=&quot;50&quot;&gt;
&lt;div class=&quot;input-group-btn&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot;&gt;Action&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-default dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
&lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
&lt;/button&gt;
&lt;ul class=&quot;dropdown-menu pull-right&quot; role=&quot;menu&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;
&lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
$(&quot;input[name='demo5']&quot;).TouchSpin({
prefix: &quot;pre&quot;,
postfix: &quot;post&quot;
});
&lt;/script&gt;
</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">
$(&quot;input[name='demo6']&quot;).TouchSpin({
buttondown_class: &quot;btn btn-link&quot;,
buttonup_class: &quot;btn btn-link&quot;
});
</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">
$(&quot;input[name='demo7']&quot;).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">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">twitter</a>!</p>
</div>
<script>
prettyPrint();
</script>

View File

@@ -0,0 +1,45 @@
/*
* Bootstrap TouchSpin - v3.1.2
* 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;
}

View File

@@ -0,0 +1,705 @@
/*
* Bootstrap TouchSpin - v3.1.2
* 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: '',
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);
// Update postfix and prefix texts if those settings were changed.
if (newsettings.postfix) {
originalinput.parent().find('.bootstrap-touchspin-postfix').text(newsettings.postfix);
}
if (newsettings.prefix) {
originalinput.parent().find('.bootstrap-touchspin-prefix').text(newsettings.prefix);
}
}
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);

View File

@@ -0,0 +1,10 @@
/*
* Bootstrap TouchSpin - v3.1.2
* 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

View File

@@ -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;
}

View File

@@ -0,0 +1,697 @@
(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);
// Update postfix and prefix texts if those settings were changed.
if (newsettings.postfix) {
originalinput.parent().find('.bootstrap-touchspin-postfix').text(newsettings.postfix);
}
if (newsettings.prefix) {
originalinput.parent().find('.bootstrap-touchspin-prefix').text(newsettings.prefix);
}
}
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);