Make change event always fire as the user interacts with the knob

That is, when using:
- touch
- wheel
- typing (by binding to the "input" event)

Previously, typing did not update the knob until focus was lost (and
no change event was fired), and
using the keyboard arrows did not fire any change events.

Also move event triggering to val() and change() so it works always
in the same way and less duplication exists.

Similar to aterrien#130 but fixes an issue with `diplayPrevious`

Author: amuino

index.html

@@ -60,7 +60,8 @@
 
                             return false;
                         }
-                    }
+                    },
+                    change: function (val) { console.log("Change: " + val) }
                 });
 
                 // Example of infinite knob, iPod click wheel
@@ -309,4 +310,4 @@ <h1>jQuery Knob</h1>
             <p style="font-size:20px;">jQuery Knob is &copy; 2012 Anthony Terrien and dual licensed under the MIT or GPL licenses.</p>
         </div>
     </body>
-</html>
+</html>

js/jquery.knob.js

@@ -141,7 +141,7 @@
                     s.v[k] = $this.val();
 
                     $this.bind(
-                        'change'
+                        'change keyup'
                         , function () {
                             var val = {};
                             val[k] = $this.val();
@@ -159,7 +159,7 @@
                 (this.v == '') && (this.v = this.o.min);
 
                 this.$.bind(
-                    'change'
+                    'change keyup'
                     , function () {
                         s.val(s._validate(s.$.val()));
                     }
@@ -302,15 +302,6 @@
                             e.originalEvent.touches[s.t].pageX,
                             e.originalEvent.touches[s.t].pageY
                             );
-
-                if (v == s.cv) return;
-
-                if (
-                    s.cH
-                    && (s.cH(v) === false)
-                ) return;
-
-
                 s.change(s._validate(v));
                 s._draw();
             };
@@ -345,13 +336,6 @@
 
             var mouseMove = function (e) {
                 var v = s.xy2val(e.pageX, e.pageY);
-                if (v == s.cv) return;
-
-                if (
-                    s.cH
-                    && (s.cH(v) === false)
-                ) return;
-
                 s.change(s._validate(v));
                 s._draw();
             };
@@ -516,8 +500,13 @@
 
         this.val = function (v) {
             if (null != v) {
-                this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v;
-                this.v = this.cv;
+                var newValue = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v;
+                if (
+                    newValue != this.cv // avoid double callback for same value
+                    && this.cH
+                    && (this.cH(this.cv) === false)
+                ) return;
+                this.v = this.cv = newValue;
                 this.$.val(this.v);
                 this._draw();
             } else {
@@ -558,12 +547,6 @@
                                 ,deltaX = ori.detail || ori.wheelDeltaX
                                 ,deltaY = ori.detail || ori.wheelDeltaY
                                 ,v = parseInt(s.$.val()) + (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0);
-
-                            if (
-                                s.cH
-                                && (s.cH(v) === false)
-                            ) return;
-
                             s.val(v);
                         }
                 , kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step};
@@ -691,8 +674,12 @@
         };
 
         this.change = function (v) {
+            if (v == this.cv) return;
             this.cv = v;
-            this.$.val(v);
+            if (
+                this.cH
+                && (this.cH(v) === false)
+            ) return;
         };
 
         this.angle = function (v) {
@@ -757,4 +744,4 @@
         ).parent();
     };
 
-})(jQuery);
+})(jQuery);