Merge pull request aterrien#143 from amuino/consistent_change_events

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

Author: aterrien

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);