Skip to content

Commit 354ab5e

Browse files
aterrienaterrien
committed
Fix IE8 aterrien#150 aterrien#153 @zitrusblau, input blur, more consistent release hook
1 parent 921c78a commit 354ab5e

File tree

4 files changed

+83
-78
lines changed

4 files changed

+83
-78
lines changed

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "aterrien/jQuery-Knob",
3-
"version": "1.2.3",
3+
"version": "1.2.4",
44
"main": "js/jquery.knob.js",
55
"description": "Nice, downward compatible, touchable, jQuery dial.",
66
"license": "MIT",

‎index.html

+4-11
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>jQuery Knob demo</title>
5-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
5+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
66
<script src="js/jquery.knob.js"></script>
77
<script>
88
$(function($) {
@@ -297,16 +297,9 @@ <h1>jQuery Knob</h1>
297297
</div>
298298
</div>
299299
<div style="clear:both"></div>
300-
<div id="big" class="demo" style="height:800px;width:100%">
301-
<p>&#215; Big !</p>
302-
<pre>
303-
data-width="700"
304-
</pre>
305-
<input class="knob" data-min="-100" data-max="100" data-width="700" data-height="700" data-thickness=".3" data-cursor=true>
306-
</div>
307-
<div style="clear:both"></div>
308-
<div style="padding:30px; margin-top:30px;">
309-
<p style="font-size:20px;">jQuery Knob is &copy; 2012 Anthony Terrien and dual licensed under the MIT or GPL licenses.</p>
300+
<div style="margin-top:30px;text-align:center">
301+
<img src="https://raw.github.com/aterrien/jQuery-Knob/master/secretplan.jpg">
302+
<p style="font-size:20px;">jQuery Knob is &copy; 2012 Anthony Terrien - MIT License</p>
310303
</div>
311304
</body>
312305
</html>

‎js/jquery.knob.js

+77-65
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@
66
* Requires: jQuery v1.7+
77
*
88
* Copyright (c) 2012 Anthony Terrien
9-
* Under MIT and GPL licenses:
10-
* http://www.opensource.org/licenses/mit-license.php
11-
* http://www.gnu.org/licenses/gpl.html
9+
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
1210
*
1311
* Thanks to vor, eskimoblood, spiffistan, FabrizioC
1412
*/
@@ -141,7 +139,7 @@
141139
s.v[k] = $this.val();
142140

143141
$this.bind(
144-
'change keyup'
142+
'change blur'
145143
, function () {
146144
var val = {};
147145
val[k] = $this.val();
@@ -159,7 +157,7 @@
159157
(this.v == '') && (this.v = this.o.min);
160158

161159
this.$.bind(
162-
'change keyup'
160+
'change blur'
163161
, function () {
164162
s.val(s._validate(s.$.val()));
165163
}
@@ -170,11 +168,27 @@
170168
(!this.o.displayInput) && this.$.hide();
171169

172170
// adds needed DOM elements (canvas, div)
173-
this.$c = $(document.createElement('canvas'));
171+
this.$c = $(document.createElement('canvas')).attr({
172+
width: this.o.width,
173+
height: this.o.height
174+
});
175+
176+
// wraps all elements in a div
177+
// add to DOM before Canvas init is triggered
178+
this.$div = $('<div style="'
179+
+ (this.o.inline ? 'display:inline;' : '')
180+
+ 'width:' + this.o.width + 'px;height:' + this.o.height + 'px;'
181+
+ '"></div>');
182+
183+
this.$.wrap(this.$div).before(this.$c);
184+
this.$div = this.$.parent();
185+
174186
if (typeof G_vmlCanvasManager !== 'undefined') {
175187
G_vmlCanvasManager.initElement(this.$c[0]);
176188
}
189+
177190
this.c = this.$c[0].getContext ? this.$c[0].getContext('2d') : null;
191+
178192
if (!this.c) {
179193
this.o.error && this.o.error();
180194
return;
@@ -195,17 +209,8 @@
195209
&& this.o.width.indexOf('%'));
196210
this.relativeHeight = ((this.o.height % 1 !== 0)
197211
&& this.o.height.indexOf('%'));
198-
199212
this.relative = (this.relativeWidth || this.relativeHeight);
200213

201-
// wraps all elements in a div
202-
this.$div = $('<div style="'
203-
+ (this.o.inline ? 'display:inline;' : '')
204-
+ '"></div>');
205-
206-
this.$.wrap(this.$div).before(this.$c);
207-
this.$div = this.$.parent();
208-
209214
// computes size and carves the component
210215
this._carve();
211216

@@ -302,6 +307,14 @@
302307
e.originalEvent.touches[s.t].pageX,
303308
e.originalEvent.touches[s.t].pageY
304309
);
310+
311+
if (v == s.cv) return;
312+
313+
if (
314+
s.cH
315+
&& (s.cH(v) === false)
316+
) return;
317+
305318
s.change(s._validate(v));
306319
s._draw();
307320
};
@@ -319,12 +332,6 @@
319332
"touchend.k"
320333
, function () {
321334
k.c.d.unbind('touchmove.k touchend.k');
322-
323-
if (
324-
s.rH
325-
&& (s.rH(s.cv) === false)
326-
) return;
327-
328335
s.val(s.cv);
329336
}
330337
);
@@ -336,6 +343,14 @@
336343

337344
var mouseMove = function (e) {
338345
var v = s.xy2val(e.pageX, e.pageY);
346+
347+
if (v == s.cv) return;
348+
349+
if (
350+
s.cH
351+
&& (s.cH(v) === false)
352+
) return;
353+
339354
s.change(s._validate(v));
340355
s._draw();
341356
};
@@ -366,12 +381,6 @@
366381
"mouseup.k"
367382
, function (e) {
368383
k.c.d.unbind('mousemove.k mouseup.k keyup.k');
369-
370-
if (
371-
s.rH
372-
&& (s.rH(s.cv) === false)
373-
) return;
374-
375384
s.val(s.cv);
376385
}
377386
);
@@ -498,10 +507,18 @@
498507
);
499508
};
500509

501-
this.val = function (v) {
510+
this.val = function (v, triggerRelease) {
502511
if (null != v) {
512+
513+
if (
514+
triggerRelease !== false
515+
&& (v != this.v)
516+
&& this.rH
517+
&& (this.rH(v) === false)
518+
) return;
519+
503520
this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v;
504-
this.v = this.cv;
521+
this.v = this.cv;
505522
this.$.val(this.v);
506523
this._draw();
507524
} else {
@@ -537,35 +554,35 @@
537554
// bind MouseWheel
538555
var s = this, mwTimerStop, mwTimerRelease,
539556
mw = function (e) {
540-
e.preventDefault();
541-
542-
var ori = e.originalEvent
543-
,deltaX = ori.detail || ori.wheelDeltaX
544-
,deltaY = ori.detail || ori.wheelDeltaY
545-
,v = s._validate(s.$.val())
546-
+ (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0);
547-
548-
v = max(min(v, s.o.max), s.o.min);
549-
550-
s.val(v);
551-
552-
if(s.rH) {
553-
// Handle mousewheel stop
554-
clearTimeout(mwTimerStop);
555-
mwTimerStop = setTimeout(function() {
556-
s.rH(v);
557-
mwTimerStop = null;
558-
}, 100);
559-
560-
// Handle mousewheel releases
561-
if(!mwTimerRelease) {
562-
mwTimerRelease = setTimeout(function() {
563-
if(mwTimerStop) s.rH(v);
564-
mwTimerRelease = null;
565-
}, 200);
566-
}
567-
}
557+
e.preventDefault();
558+
559+
var ori = e.originalEvent
560+
,deltaX = ori.detail || ori.wheelDeltaX
561+
,deltaY = ori.detail || ori.wheelDeltaY
562+
,v = s._validate(s.$.val())
563+
+ (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0);
564+
565+
v = max(min(v, s.o.max), s.o.min);
566+
567+
s.val(v, false);
568+
569+
if(s.rH) {
570+
// Handle mousewheel stop
571+
clearTimeout(mwTimerStop);
572+
mwTimerStop = setTimeout(function() {
573+
s.rH(v);
574+
mwTimerStop = null;
575+
}, 100);
576+
577+
// Handle mousewheel releases
578+
if(!mwTimerRelease) {
579+
mwTimerRelease = setTimeout(function() {
580+
if(mwTimerStop) s.rH(v);
581+
mwTimerRelease = null;
582+
}, 200);
568583
}
584+
}
585+
}
569586
, kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step};
570587

571588
this.$
@@ -603,8 +620,7 @@
603620

604621
// long time keydown speed-up
605622
to = window.setTimeout(
606-
function () { m*=2; }
607-
,30
623+
function () { m *= 2; }, 30
608624
);
609625
}
610626
}
@@ -691,12 +707,8 @@
691707
};
692708

693709
this.change = function (v) {
694-
if (v == this.cv) return;
695710
this.cv = v;
696-
if (
697-
this.cH
698-
&& (this.cH(v) === false)
699-
) return;
711+
this.$.val(v);
700712
};
701713

702714
this.angle = function (v) {
@@ -761,4 +773,4 @@
761773
).parent();
762774
};
763775

764-
})(jQuery);
776+
})(jQuery);

‎knob.jquery.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"ui",
1010
"input"
1111
],
12-
"version": "1.2.3",
12+
"version": "1.2.4",
1313
"author": {
1414
"name": "Anthony Terrien",
1515
"url": "https://github.com/aterrien"

0 commit comments

Comments
 (0)