Added stepping functionality

bzabos · Feb 15, 2013 · 4e1d48b · 4e1d48b
1 parent 195976e
commit 4e1d48b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -35,6 +35,7 @@ The following options are supported :
 Behaviors :
 * min : min value | default=0.
 * max : max value | default=100.
+* step : step size | defaul=1.
 * angleOffset : starting angle in degrees | default=0.
 * angleArc : arc size in degrees | default=360.
 * stopper : stop at min & max on keydown/mousewheel | default=true.

diff --git a/index.html b/index.html
@@ -159,12 +159,14 @@ <h1>jQuery Knob</h1>
             <input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#66EE66" value="35">
         </div>
         <div class="demo" >
-            <p>&#215; 5-digit values</p>
+            <p>&#215; 5-digit values, step 1000</p>
             <pre>
+data-step="1000"
 data-min="-15000"
 data-max="15000"
+data-displayPrevious=true
             </pre>
-            <input class="knob" data-min="-15000" data-max="15000" value="-11000">
+            <input class="knob" data-min="-15000" data-displayPrevious=true data-max="15000" data-step="1000" value="-11000">
         </div>
         <div style="clear:both"></div>
         <div style="text-align: center">

diff --git a/js/jquery.knob.js b/js/jquery.knob.js
@@ -100,6 +100,7 @@
                     fgColor : this.$.data('fgcolor') || '#87CEEB',
                     inputColor: this.$.data('inputcolor') || this.$.data('fgcolor') || '#87CEEB',
                     inline : false,
+                    step : this.$.data('step') || 1,
 
                     // Hooks
                     draw : null, // function () {}
@@ -140,7 +141,7 @@
                 this.$.bind(
                     'change'
                     , function () {
-                        s.val(s.$.val());
+                        s.val(s._validate(s.$.val()));
                     }
                 );
             }
@@ -220,7 +221,7 @@
                 ) return;
 
 
-                s.change(v);
+                s.change(s._validate(v));
                 s._draw();
             };
 
@@ -261,7 +262,7 @@
                     && (s.cH(v) === false)
                 ) return;
 
-                s.change(v);
+                s.change(s._validate(v));
                 s._draw();
             };
 
@@ -359,6 +360,10 @@
             this.$c[0].width = this.$c[0].width;
         };
 
+        this._validate = function(v) {
+            return (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step;
+        };
+
         // Abstract methods
         this.listen = function () {}; // on start, one time
         this.extend = function () {}; // each time configure triggered
@@ -450,11 +455,10 @@
             var s = this,
                 mw = function (e) {
                             e.preventDefault();
-
                             var ori = e.originalEvent
                                 ,deltaX = ori.detail || ori.wheelDeltaX
                                 ,deltaY = ori.detail || ori.wheelDeltaY
-                                ,v = parseInt(s.$.val()) + (deltaX>0 || deltaY>0 ? 1 : deltaX<0 || deltaY<0 ? -1 : 0);
+                                ,v = parseInt(s.$.val()) + (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0);
 
                             if (
                                 s.cH
@@ -463,7 +467,7 @@
 
                             s.val(v);
                         }
-                , kval, to, m = 1, kv = {37:-1, 38:1, 39:1, 40:-1};
+                , kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step};
 
             this.$
                 .bind(