From 720f494c410cc9b6ef9f037b6d07d562d94b487e Mon Sep 17 00:00:00 2001 From: Hayko Koryun Date: Mon, 27 Oct 2014 15:19:03 +0400 Subject: [PATCH 1/5] added update event listener bound a listener for an `update` event which calls the `val` method with the second param as `false` so as not to trigger the release handler. this is useful when we create a knob that we update periodically as well expect the user to interact with at the same time e.g. an audio scrubber which shows the track progress which you can change as well. --- js/jquery.knob.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 5294ffa..c8c4c6b 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -176,7 +176,13 @@ s.val(s._validate(s.o.parse(s.$.val()))); } ); - + + this.$.bind( + 'update', + function () { + s.val(s._validate(s.o.parse(s.$.val())), false); + } + ); } !this.o.displayInput && this.$.hide(); From 2590a68751224239ab6890d15923a3e765066740 Mon Sep 17 00:00:00 2001 From: Hayko Koryun Date: Mon, 27 Oct 2014 16:15:30 +0400 Subject: [PATCH 2/5] added scrubbing flag added a `scrubbing` flag which prevents the `val` function from overwriting the `cv` variable when the user is scrubbing, this stops a flickering issue when the user is scrubbing but the `val` get's updated in the processes temporarily when the `cv` value gets overwritten. --- js/jquery.knob.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index c8c4c6b..b1b74bd 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -79,6 +79,7 @@ this.relativeWidth = false; this.relativeHeight = false; this.$div = null; // component div + this.scrubbing = false; // the user is currently scrubbing the dial this.run = function () { var cf = function (e, conf) { @@ -339,7 +340,9 @@ // First touch touchMove(e); - + // scrubbing has started + s.scrubbing = true; + // Touch events listeners k.c.d .bind("touchmove.k", touchMove) @@ -347,6 +350,8 @@ "touchend.k", function () { k.c.d.unbind('touchmove.k touchend.k'); + // scrubbing has ended + s.scrubbing = false; s.val(s.cv); } ); @@ -368,6 +373,8 @@ // First click mouseMove(e); + // scrubbing has started + s.scrubbing = true; // Mouse events listeners k.c.d @@ -383,12 +390,17 @@ return; s.cancel(); + + // scrubbing has ended + s.scrubbing = false; } } ) .bind( "mouseup.k", function (e) { + // scrubbing has ended + s.scrubbing = false; k.c.d.unbind('mousemove.k mouseup.k keyup.k'); s.val(s.cv); } From 4aba5d2ae5740364e3892b942a97a47bebb5add1 Mon Sep 17 00:00:00 2001 From: Hayko Koryun Date: Wed, 29 Oct 2014 13:41:31 +0400 Subject: [PATCH 3/5] trigger change on mousewheel added triggering of change handler when using mouse wheel to change values --- js/jquery.knob.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index b1b74bd..e8aae47 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -598,6 +598,9 @@ v = max(min(v, s.o.max), s.o.min); + // trigger change handler + if (s.cH && (s.cH(v) === false)) return; + s.val(v, false); if (s.rH) { From 5ce9ff5c6269c925fd351c05a3e7284d58cedb1d Mon Sep 17 00:00:00 2001 From: Hayko Koryun Date: Thu, 13 Nov 2014 16:45:24 +0400 Subject: [PATCH 4/5] forgot to add the crucial part for the scrubbing flag to work --- js/jquery.knob.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index e8aae47..465b658 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -541,9 +541,17 @@ && v != this.v && this.rH && this.rH(v) === false) { return; } + + if(!this.scrubbing) + { + this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v; + this.v = this.cv; + } + else if(triggerRelease === false) + { + this.v = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v; + } - this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v; - this.v = this.cv; this.$.val(this.o.format(this.v)); this._draw(); } else { From ce92c15dbb61c7e51d4a0bb2a518257324fe07f1 Mon Sep 17 00:00:00 2001 From: Hayko Koryun Date: Sat, 15 Nov 2014 00:04:19 +0400 Subject: [PATCH 5/5] added bounds checking to make stacking knobs work without interfering with each other --- js/jquery.knob.js | 82 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 81 insertions(+), 1 deletion(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 465b658..886a03f 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -334,6 +334,12 @@ s.change(s._validate(v)); s._draw(); }; + + if(!s.bounds(e)) + { + s._propagate(e); + return; + } // get touches index this.t = k.c.t(e); @@ -370,7 +376,12 @@ s.change(s._validate(v)); s._draw(); }; - + + if(!s.bounds(e)) + { + s._propagate(e); + return; + } // First click mouseMove(e); // scrubbing has started @@ -476,6 +487,31 @@ var val = (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step; return Math.round(val * 100) / 100; }; + + // propagate event to element underneath + this._propagate = function(e) + { + s.$div.css("pointer-events", "none"); + if(e.type == "mousedown") + { + var ne = jQuery.Event( e.type, { which:1, pageX: e.pageX, pageY: e.pageY } ); + var nt = document.elementFromPoint(e.pageX, e.pageY); + } + else + { + var point = + { + x:e.originalEvent.touches[0].pageX, + y:e.originalEvent.touches[0].pageY + } + + var ne = jQuery.Event( e.type, { originalEvent:e.originalEvent, which:1, pageX: point.x, pageY: point.y } ); + var nt = document.elementFromPoint(point.x, point.y); + } + + $(nt).trigger(ne); + s.$div.css("pointer-events", "auto"); + } // Abstract methods this.listen = function () {}; // on start, one time @@ -814,6 +850,50 @@ c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d); c.stroke(); }; + + + // checks it the event was within the bounds of the knob + this.bounds = function(e) + { + if(e.type == "mousedown") + { + var x = e.pageX; + var y = e.pageY; + + var r = this.xy; + + var ox = x - this.x - r; + var oy = y - this.y - r; + } + if(e.type == "touchstart") + { + if(e.originalEvent) + { + var touch = e.originalEvent.touches[0]; + } + else + { + var touch = e; + } + + var x = touch.pageX; + var y = touch.pageY; + + var r = this.xy / 2; + + var ox = x - this.x - r; + var oy = y - this.y - r; + } + + if(Math.sqrt((ox*ox) + (oy*oy)) < r) + { + return true; + } + else + { + return false; + } + } this.cancel = function () { this.val(this.v);