Skip to content

Commit 9801830

Browse files
ncouncou
authoredAug 22, 2016
Add files via upload
1 parent f406f59 commit 9801830

File tree

4 files changed

+384
-0
lines changed

4 files changed

+384
-0
lines changed
 

‎README.md

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# jquery.stepper.js
2+
> Lightweight input stepper for real world usage. [Check it out on JSFiddle](http://codepen.io/anon/pen/ZONpxW?editors=0010)
3+
4+
## Features
5+
- Works on input type="text"
6+
- Only supports positive integers (0 - Infinity)
7+
- Set initial values in the markup or Javascript
8+
- Optionally configure min/max values with attributes
9+
- Supports keyboard interaction (increase/decrease by 10 by holding shift)
10+
- Enables number pad on mobile browsers
11+
12+
## Install
13+
Download and include the javascript file.
14+
```html
15+
<script src="jquery.stepper.js"></script>
16+
<link href="style.css" media="all" rel="stylesheet" />
17+
```
18+
19+
## Basic usage
20+
Check out `index.html` for all examples.
21+
22+
```html
23+
<div class="stepper" id="stepper_1">
24+
<div class="stepper-progress"></div>
25+
<input type="text" class="stepper-number">
26+
</div>
27+
```
28+
29+
Call the input stepper plugin on the desired selector
30+
31+
```javascript
32+
$(function () {
33+
// Document ready
34+
$('#stepper_1').stepper();
35+
});
36+
```
37+
38+
## Advanced usage
39+
40+
```html
41+
<div class="stepper" id="stepper_2">
42+
<div class="stepper-progress"></div>
43+
<input type="text" class="stepper-number" min="10" max="90">
44+
</div>
45+
```
46+
47+
Call the input stepper plugin on the desired selector
48+
49+
```javascript
50+
$('#stepper_3').stepper({
51+
selectorProgressBar: '.stepper-progress',
52+
selectorInputNumber: '.stepper-number',
53+
classNameChanging: 'is-changing',
54+
decimals: 2,
55+
unit: 'px',
56+
initialValue: 50,
57+
min: -200,
58+
max: 200,
59+
stepSize: 5
60+
});
61+
62+
```
63+
64+
## Default settings
65+
The input stepper can be called with a number of options. The defaults of each option are listed below
66+
67+
```javascript
68+
$('.input-stepper').inputStepper({
69+
70+
// Values in the markup always overwrite this settings
71+
// min and max value can be overridden with the attribute on the input text
72+
initialValue: null,
73+
min: 0,
74+
max: 100
75+
76+
// The selector for the input
77+
selectorInputNumber: '.stepper-number',
78+
79+
// The selector for the progress bar
80+
selectorProgressBar: '.stepper-progress',
81+
82+
// The class used when you have the focus+moving the cursor on the input text field
83+
classNameChanging: 'is-changing',
84+
85+
// Number of decimals to display
86+
decimals: 2,
87+
88+
// unit to concatenate with the value result
89+
unit: 'px',
90+
91+
// Step used to increaste the progress bar.
92+
// Increase this value if you have a big range. Reduce the value (ex : .25) if you have a small range
93+
stepSize: 1
94+
});
95+
```

‎index.html

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>input stepper examples</title>
6+
7+
<link href="style.css" media="all" rel="stylesheet" />
8+
</head>
9+
<body>
10+
11+
<h1>jquery.stepper.js</h1>
12+
13+
<div style="width:150px">
14+
<div class="stepper" id="stepper_1">
15+
<div class="stepper-progress"></div>
16+
<input type="text" class="stepper-number" min="10" max="90">
17+
</div>
18+
19+
<br>
20+
21+
<div class="stepper" id="stepper_2">
22+
<div class="stepper-progress"></div>
23+
<input type="text" class="stepper-number">
24+
</div>
25+
26+
<br>
27+
28+
<div class="stepper" id="stepper_3">
29+
<div class="stepper-progress"></div>
30+
<input type="text" class="stepper-number">
31+
</div>
32+
33+
</div>
34+
35+
<hr>
36+
37+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
38+
<script src="jquery.stepper.js"></script>
39+
<script>
40+
$(function () {
41+
// Document ready
42+
43+
$('#stepper_1').stepper();
44+
$('#stepper_2').stepper();
45+
46+
$('#stepper_3').stepper({
47+
selectorProgressBar: '.stepper-progress',
48+
selectorInputNumber: '.stepper-number',
49+
classNameChanging: 'is-changing',
50+
decimals: 2,
51+
unit: 'px',
52+
initialValue: 50,
53+
min: -200,
54+
max: 200,
55+
stepSize: 5
56+
});
57+
58+
});
59+
</script>
60+
</body>
61+
62+
</html>

‎jquery.stepper.js

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
// jquery.stepper.js
2+
// ------------------------------------------------------
3+
// Author: NCOU
4+
;(function (root, $, undefined) {
5+
6+
var pluginName = "stepper";
7+
var defaults = {
8+
selectorProgressBar: '.stepper-progress',
9+
selectorInputNumber: '.stepper-number',
10+
classNameChanging: 'is-changing',
11+
decimals: 0,
12+
unit: '%',
13+
initialValue: null,
14+
min: 0,
15+
max: 100,
16+
stepSize: 1
17+
};
18+
19+
// The actual plugin constructor
20+
function Plugin( element, options ) {
21+
this.element = element;
22+
23+
this.options = $.extend( {}, defaults, options) ;
24+
25+
this._defaults = defaults;
26+
this._name = pluginName;
27+
28+
return this.init();
29+
}
30+
31+
Plugin.prototype = {
32+
33+
init: function () {
34+
35+
// local variable
36+
this.curDown = !0;
37+
this.mouseDownX = 0;
38+
this.mouseDownValue = 0;
39+
40+
// Cache elements
41+
this.$el = $(this.element);
42+
this.$input = this.$el.find(this.options.selectorInputNumber);
43+
this.$progress = this.$el.find(this.options.selectorProgressBar);
44+
45+
this.min = this.$input.attr('min') || this.options.min;
46+
this.max = this.$input.attr('max') || this.options.max;
47+
48+
this.initialValue = this.getValue() || this.options.initialValue || this.max;
49+
50+
this.setValue(this.initialValue);
51+
52+
// Bind events
53+
this.$input.on('blur', this.onBlur.bind(this) );
54+
this.$input.on('change keyup paste input', this.onChange.bind(this) );
55+
this.$el.on('mousedown', this.onMouseDown.bind(this) );
56+
$(document).on('mouseup', this.onMouseUp.bind(this) );
57+
$(document).on('mousemove', this.onMouseMove.bind(this) );
58+
59+
return this;
60+
},
61+
62+
onMouseDown: function (e) {
63+
64+
this.mouseDownX = e.clientX;
65+
this.mouseDownValue = this.getValue();
66+
67+
this._changeStart();
68+
69+
return this;
70+
},
71+
72+
onMouseUp: function (e) {
73+
74+
this._changeEnd();
75+
76+
return this;
77+
},
78+
79+
onMouseMove: function (e) {
80+
81+
if (this.curDown === !1) {
82+
var t = e.clientX - this.mouseDownX;
83+
this.setValue(this.mouseDownValue + t * this.options.stepSize);
84+
}
85+
86+
return this;
87+
},
88+
89+
onChange: function (e) {
90+
var r = this._valueToPercent(this.getValue()) / 100;
91+
this.$progress.css("transform", "scaleX(" + r + ")");
92+
93+
return this;
94+
},
95+
96+
onBlur: function (e) {
97+
98+
this._changeEnd();
99+
this.setValue(this.getValue());
100+
101+
return this;
102+
},
103+
104+
getValue: function () {
105+
return parseFloat(this.$input.val()) || 0;
106+
},
107+
108+
setValue: function (amount) {
109+
var value;
110+
111+
value = Math.max(Math.min(amount, this.max), this.min);
112+
value = this._roundValue(value);
113+
114+
var n = value;
115+
n = n.toFixed(this.options.decimals);
116+
117+
n += this.options.unit;
118+
this.$input.val(n);
119+
120+
var r = this._valueToPercent(value) / 100;
121+
this.$progress.css("transform", "scaleX(" + r + ")")
122+
123+
return this;
124+
},
125+
126+
_percentToValue: function (v) {
127+
return this.min + v / 100 * (this.max - this.min);
128+
},
129+
130+
_valueToPercent: function (v) {
131+
var t = (v - this.min) / (this.max - this.min) * 100;
132+
return Math.max(Math.min(t, 100), 0);
133+
},
134+
135+
_roundValue: function (v) {
136+
var nbrDecimals = 2;
137+
138+
var t = Math.pow(10, nbrDecimals);
139+
return Math.round(v * t) / t
140+
},
141+
142+
_changeStart: function() {
143+
this.curDown = !1;
144+
this.$el.addClass("is-changing");
145+
},
146+
147+
_changeEnd: function() {
148+
this.curDown = !0;
149+
this.$el.removeClass("is-changing");
150+
},
151+
152+
153+
154+
155+
};
156+
157+
// A really lightweight plugin wrapper around the constructor,
158+
// preventing against multiple instantiations
159+
$.fn[pluginName] = function ( options ) {
160+
return this.each(function () {
161+
if ( ! $.data(this, "plugin-" + pluginName)) {
162+
$.data(this, "plugin-" + pluginName,
163+
new Plugin( this, options ));
164+
}
165+
});
166+
};
167+
168+
})(window, jQuery);

‎style.css

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
* {
2+
-moz-box-sizing: border-box;
3+
box-sizing: border-box;
4+
}
5+
6+
div {
7+
display: block;
8+
}
9+
10+
.stepper {
11+
position: relative;
12+
width: 100%;
13+
height: 30px;
14+
background: #4e4e4e;
15+
border: 1px solid #292929;
16+
cursor: col-resize;
17+
}
18+
19+
.stepper .stepper-number:focus {
20+
outline: 1px solid #1baee1;
21+
//cursor: text
22+
}
23+
24+
.stepper-progress {
25+
position: absolute;
26+
bottom: 0;
27+
left: 0;
28+
width: 100%;
29+
height: 2px;
30+
background-color: rgba(255, 255, 255, 0.2);
31+
-webkit-transform-origin: 0 0;
32+
-ms-transform-origin: 0 0;
33+
transform-origin: 0 0;
34+
-webkit-transition: background-color 0.1s linear;
35+
transition: background-color 0.1s linear;
36+
}
37+
38+
.stepper-number {
39+
position: relative;
40+
width: 100%;
41+
height: 28px;
42+
line-height: 28px;
43+
padding: 0 6px;
44+
color: #fff;
45+
background: transparent;
46+
border: 0;
47+
outline: 0;
48+
outline-offset: 0;
49+
cursor: col-resize;
50+
z-index: 2;
51+
}
52+
53+
.stepper.is-changing .stepper-progress {
54+
background-color: #1baee1;
55+
}
56+
57+
.stepper.is-scrubbing {
58+
background: rgba(255, 255, 255, 0.8)
59+
}

0 commit comments

Comments
 (0)
Please sign in to comment.