From 8a952ce0f70172d565bb915ad1151549146f9bd0 Mon Sep 17 00:00:00 2001 From: t100n Date: Thu, 13 Mar 2014 17:53:29 +0000 Subject: [PATCH 1/9] added support for different html elements besides inputs --- README.md | 2 ++ js/jquery.knob.js | 8 ++++---- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6ed8efc..7c9e942 100755 --- a/README.md +++ b/README.md @@ -23,6 +23,8 @@ Options are provided as attributes 'data-option': +If you want to use another element as a knob you must passa data-value instead of value. + ... or in the "knob()" call : $(".dial").knob({ diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 83d6327..0dc6a92 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -143,13 +143,13 @@ this.i.each(function(k) { var $this = $(this); s.i[k] = $this; - s.v[k] = s.o.parse($this.val()); + s.v[k] = s.o.parse($this.val()||$this.data('value')); // Added support for all elements, just add data-value to it $this.bind( 'change blur' , function () { var val = {}; - val[k] = $this.val(); + val[k] = $this.val()||$this.data('value'); s.val(val); } ); @@ -160,13 +160,13 @@ // input = integer this.i = this.$; - this.v = this.o.parse(this.$.val()); + this.v = this.o.parse(this.$.val()||this.$.data('value')); (this.v === '') && (this.v = this.o.min); this.$.bind( 'change blur' , function () { - s.val(s._validate(s.o.parse(s.$.val()))); + s.val(s._validate(s.o.parse(s.$.val()||s.$.data('value')))); } ); From 68f84bd8e9ae6737953ee4bd97c4d419116e3c95 Mon Sep 17 00:00:00 2001 From: t100n Date: Fri, 14 Mar 2014 10:39:59 +0000 Subject: [PATCH 2/9] keep the element a square --- js/jquery.knob.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 0dc6a92..c31233a 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -694,7 +694,8 @@ this.o.displayInput && this.i.css({ 'width' : ((this.w / 2 + 4) >> 0) + 'px' - ,'height' : ((this.w / 3) >> 0) + 'px' + ,'height' : ((this.w / 2 + 4) >> 0) + 'px' + //,'height' : ((this.w / 3) >> 0) + 'px' ,'position' : 'absolute' ,'vertical-align' : 'middle' ,'margin-top' : ((this.w / 3) >> 0) + 'px' From 783ca73452f66ffec739059b967c35c259fcf316 Mon Sep 17 00:00:00 2001 From: t100n Date: Fri, 14 Mar 2014 10:43:17 +0000 Subject: [PATCH 3/9] keep the element a square --- js/jquery.knob.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index c31233a..e577cc7 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -698,7 +698,8 @@ //,'height' : ((this.w / 3) >> 0) + 'px' ,'position' : 'absolute' ,'vertical-align' : 'middle' - ,'margin-top' : ((this.w / 3) >> 0) + 'px' + ,'margin-top' : ((this.w / 4) >> 0) + 'px' + //,'margin-top' : ((this.w / 3) >> 0) + 'px' ,'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' ,'border' : 0 ,'background' : 'none' From 78157b698d2105340301a774cd717435d7aa4ef4 Mon Sep 17 00:00:00 2001 From: t100n Date: Fri, 14 Mar 2014 10:57:29 +0000 Subject: [PATCH 4/9] better dimensioning of the input element --- js/jquery.knob.js | 301 +++++++++++++++++++++++----------------------- 1 file changed, 152 insertions(+), 149 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index e577cc7..55b5ec1 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -77,7 +77,7 @@ } s._carve().init(); s._configure() - ._draw(); + ._draw(); }; if(this.$.data('kontroled')) return; @@ -94,11 +94,11 @@ // UI cursor : (this.$.data('cursor') === true && 30) || - this.$.data('cursor') || 0, + this.$.data('cursor') || 0, thickness : ( - this.$.data('thickness') && - Math.max(Math.min(this.$.data('thickness'), 1), 0.01) - ) || 0.35, + this.$.data('thickness') && + Math.max(Math.min(this.$.data('thickness'), 1), 0.01) + ) || 0.35, lineCap : this.$.data('linecap') || 'butt', width : this.$.data('width') || 200, height : this.$.data('height') || 200, @@ -191,7 +191,7 @@ this.$div = this.$.parent(); if (typeof G_vmlCanvasManager !== 'undefined') { - G_vmlCanvasManager.initElement(this.$c[0]); + G_vmlCanvasManager.initElement(this.$c[0]); } this.c = this.$c[0].getContext ? this.$c[0].getContext('2d') : null; @@ -206,13 +206,13 @@ // hdpi support this.scale = (window.devicePixelRatio || 1) / - ( - this.c.webkitBackingStorePixelRatio || - this.c.mozBackingStorePixelRatio || - this.c.msBackingStorePixelRatio || - this.c.oBackingStorePixelRatio || - this.c.backingStorePixelRatio || 1 - ); + ( + this.c.webkitBackingStorePixelRatio || + this.c.mozBackingStorePixelRatio || + this.c.msBackingStorePixelRatio || + this.c.oBackingStorePixelRatio || + this.c.backingStorePixelRatio || 1 + ); // detects relative width / height this.relativeWidth = ((this.o.width % 1 !== 0) && @@ -255,13 +255,13 @@ this._carve = function() { if(this.relative) { var w = this.relativeWidth ? - this.$div.parent().width() * + this.$div.parent().width() * parseInt(this.o.width) / 100 : - this.$div.parent().width(), + this.$div.parent().width(), h = this.relativeHeight ? - this.$div.parent().height() * + this.$div.parent().height() * parseInt(this.o.height) / 100 : - this.$div.parent().height(); + this.$div.parent().height(); // apply relative this.w = this.h = Math.min(w, h); @@ -314,9 +314,9 @@ var touchMove = function (e) { var v = s.xy2val( - e.originalEvent.touches[s.t].pageX, - e.originalEvent.touches[s.t].pageY - ); + e.originalEvent.touches[s.t].pageX, + e.originalEvent.touches[s.t].pageY + ); if (v == s.cv) return; @@ -336,12 +336,12 @@ k.c.d .bind("touchmove.k", touchMove) .bind( - "touchend.k" - , function () { - k.c.d.unbind('touchmove.k touchend.k'); - s.val(s.cv); - } - ); + "touchend.k" + , function () { + k.c.d.unbind('touchmove.k touchend.k'); + s.val(s.cv); + } + ); return this; }; @@ -366,28 +366,28 @@ k.c.d .bind("mousemove.k", mouseMove) .bind( - // Escape key cancel current change - "keyup.k" - , function (e) { - if (e.keyCode === 27) { - k.c.d.unbind("mouseup.k mousemove.k keyup.k"); - - if ( - s.eH + // Escape key cancel current change + "keyup.k" + , function (e) { + if (e.keyCode === 27) { + k.c.d.unbind("mouseup.k mousemove.k keyup.k"); + + if ( + s.eH && (s.eH() === false) ) return; - s.cancel(); - } + s.cancel(); } - ) + } + ) .bind( - "mouseup.k" - , function (e) { - k.c.d.unbind('mousemove.k mouseup.k keyup.k'); - s.val(s.cv); - } - ); + "mouseup.k" + , function (e) { + k.c.d.unbind('mousemove.k mouseup.k keyup.k'); + s.val(s.cv); + } + ); return this; }; @@ -404,19 +404,19 @@ if (!this.o.readOnly) { this.$c .bind( - "mousedown" - , function (e) { - e.preventDefault(); - s._xy()._mouse(e); - } - ) + "mousedown" + , function (e) { + e.preventDefault(); + s._xy()._mouse(e); + } + ) .bind( - "touchstart" - , function (e) { - e.preventDefault(); - s._xy()._touch(e); - } - ); + "touchstart" + , function (e) { + e.preventDefault(); + s._xy()._touch(e); + } + ); this.listen(); } else { @@ -426,7 +426,7 @@ if(this.relative) { $(window).resize(function() { s._carve() - .init(); + .init(); s._draw(); }); } @@ -475,8 +475,8 @@ var rgb; h = h.substring(1,7) rgb = [parseInt(h.substring(0,2),16) - ,parseInt(h.substring(2,4),16) - ,parseInt(h.substring(4,6),16)]; + ,parseInt(h.substring(2,4),16) + ,parseInt(h.substring(4,6),16)]; return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")"; }; @@ -520,7 +520,7 @@ if ( triggerRelease !== false && (v != this.v) && this.rH && (this.rH(v) === false) - ) return; + ) return; this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v; this.v = this.cv; @@ -535,9 +535,9 @@ var a, ret; a = Math.atan2( - x - (this.x + this.w2) - , - (y - this.y - this.w2) - ) - this.angleOffset; + x - (this.x + this.w2) + , - (y - this.y - this.w2) + ) - this.angleOffset; if (this.o.flip) { a = this.angleArc - a - this.PI2; @@ -551,7 +551,7 @@ } ret = ~~ (0.5 + (a * (this.o.max - this.o.min) / this.angleArc)) - + this.o.min; + + this.o.min; this.o.stopper && (ret = max(min(ret, this.o.max), this.o.min)); @@ -595,62 +595,62 @@ this.$ .bind( - "keydown" - ,function (e) { - var kc = e.keyCode; + "keydown" + ,function (e) { + var kc = e.keyCode; - // numpad support - if(kc >= 96 && kc <= 105) { - kc = e.keyCode = kc - 48; - } + // numpad support + if(kc >= 96 && kc <= 105) { + kc = e.keyCode = kc - 48; + } - kval = parseInt(String.fromCharCode(kc)); + kval = parseInt(String.fromCharCode(kc)); - if (isNaN(kval)) { + if (isNaN(kval)) { - (kc !== 13) // enter + (kc !== 13) // enter && (kc !== 8) // bs && (kc !== 9) // tab && (kc !== 189) // - && (kc !== 190 || s.$.val().match(/\./)) // . only allowed once - && e.preventDefault(); + && e.preventDefault(); - // arrows - if ($.inArray(kc,[37,38,39,40]) > -1) { - e.preventDefault(); + // arrows + if ($.inArray(kc,[37,38,39,40]) > -1) { + e.preventDefault(); - var v = s.o.parse(s.$.val()) + kv[kc] * m; - s.o.stopper && (v = max(min(v, s.o.max), s.o.min)); + var v = s.o.parse(s.$.val()) + kv[kc] * m; + s.o.stopper && (v = max(min(v, s.o.max), s.o.min)); - s.change(v); - s._draw(); + s.change(v); + s._draw(); - // long time keydown speed-up - to = window.setTimeout( - function () { m *= 2; }, 30 - ); - } + // long time keydown speed-up + to = window.setTimeout( + function () { m *= 2; }, 30 + ); } } - ) + } + ) .bind( - "keyup" - ,function (e) { - if (isNaN(kval)) { - if (to) { - window.clearTimeout(to); - to = null; - m = 1; - s.val(s.$.val()); - } - } else { - // kval postcond - (s.$.val() > s.o.max && s.$.val(s.o.max)) - || (s.$.val() < s.o.min && s.$.val(s.o.min)); + "keyup" + ,function (e) { + if (isNaN(kval)) { + if (to) { + window.clearTimeout(to); + to = null; + m = 1; + s.val(s.$.val()); } - + } else { + // kval postcond + (s.$.val() > s.o.max && s.$.val(s.o.max)) + || (s.$.val() < s.o.min && s.$.val(s.o.min)); } - ); + + } + ); this.$c.bind("mousewheel DOMMouseScroll", mw); this.$.bind("mousewheel DOMMouseScroll", mw) @@ -660,8 +660,8 @@ if ( this.v < this.o.min - || this.v > this.o.max - ) this.v = this.o.min; + || this.v > this.o.max + ) this.v = this.o.min; this.$.val(this.v); this.w2 = this.w / 2; @@ -686,33 +686,36 @@ this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc; var s = max( - String(Math.abs(this.o.max)).length - , String(Math.abs(this.o.min)).length - , 2 - ) + 2; + String(Math.abs(this.o.max)).length + , String(Math.abs(this.o.min)).length + , 2 + ) + 2; this.o.displayInput && this.i.css({ - 'width' : ((this.w / 2 + 4) >> 0) + 'px' - ,'height' : ((this.w / 2 + 4) >> 0) + 'px' - //,'height' : ((this.w / 3) >> 0) + 'px' - ,'position' : 'absolute' - ,'vertical-align' : 'middle' - ,'margin-top' : ((this.w / 4) >> 0) + 'px' - //,'margin-top' : ((this.w / 3) >> 0) + 'px' - ,'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' - ,'border' : 0 - ,'background' : 'none' - ,'font' : this.o.fontWeight + ' ' + ((this.w / s) >> 0) + 'px ' + this.o.font - ,'text-align' : 'center' - ,'color' : this.o.inputColor || this.o.fgColor - ,'padding' : '0px' - ,'-webkit-appearance': 'none' - }) - || this.i.css({ - 'width' : '0px' - ,'visibility' : 'hidden' - }); + //'width' : ((this.w / 2 + 4) >> 0) + 'px' + //,'height' : ((this.w / 2 + 4) >> 0) + 'px' + 'width' : (this.w-this.lineWidth*2 - 0.1) + 'px' + ,'height' : (this.w-this.lineWidth*2 - 0.1) + 'px' + //,'height' : ((this.w / 3) >> 0) + 'px' + ,'position' : 'absolute' + ,'vertical-align' : 'middle' + ,'margin-top' : this.lineWidth + 'px' + //,'margin-top' : ((this.w / 3) >> 0) + 'px' + ,'margin-left' : '-' + (this.w-this.lineWidth) + 'px' + //,'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' + ,'border' : 0 + ,'background' : 'transparent' + ,'font' : this.o.fontWeight + ' ' + ((this.w / s) >> 0) + 'px ' + this.o.font + ,'text-align' : 'center' + ,'color' : this.o.inputColor || this.o.fgColor + ,'padding' : '0px' + ,'-webkit-appearance': 'none' + }) + || this.i.css({ + 'width' : '0px' + ,'visibility' : 'hidden' + }); }; this.change = function (v) { @@ -725,23 +728,23 @@ }; this.arc = function (v) { - var sa, ea; - v = this.angle(v); - if (this.o.flip) { - sa = this.endAngle + 0.00001; - ea = sa - v - 0.00001; - } else { - sa = this.startAngle - 0.00001; - ea = sa + v + 0.00001; - } - this.o.cursor - && (sa = ea - this.cursorExt) - && (ea = ea + this.cursorExt); - return { - s: sa, - e: ea, - d: this.o.flip && !this.o.cursor - }; + var sa, ea; + v = this.angle(v); + if (this.o.flip) { + sa = this.endAngle + 0.00001; + ea = sa - v - 0.00001; + } else { + sa = this.startAngle - 0.00001; + ea = sa + v + 0.00001; + } + this.o.cursor + && (sa = ea - this.cursorExt) + && (ea = ea + this.cursorExt); + return { + s: sa, + e: ea, + d: this.o.flip && !this.o.cursor + }; }; this.draw = function () { @@ -760,15 +763,15 @@ if (this.o.displayPrevious) { pa = this.arc(this.v); c.beginPath(); - c.strokeStyle = this.pColor; - c.arc(this.xy, this.xy, this.radius, pa.s, pa.e, pa.d); + c.strokeStyle = this.pColor; + c.arc(this.xy, this.xy, this.radius, pa.s, pa.e, pa.d); c.stroke(); r = (this.cv == this.v); } c.beginPath(); - c.strokeStyle = r ? this.o.fgColor : this.fgColor ; - c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d); + c.strokeStyle = r ? this.o.fgColor : this.fgColor ; + c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d); c.stroke(); }; From 439b22f0e949bb50f19e203f80fb0ef909c15204 Mon Sep 17 00:00:00 2001 From: t100n Date: Fri, 14 Mar 2014 11:15:44 +0000 Subject: [PATCH 5/9] added display data value --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 7c9e942..b817052 100755 --- a/README.md +++ b/README.md @@ -5,6 +5,9 @@ jQuery Knob - touch, mouse and mousewheel, keyboard events implemented. - downward compatible ; overloads an input element. +Data values: +* display - Value for the display of the element: inline, block, etc. Defaults to block. + Example ------- From 8a8ccd4042b4fcbe02e0266543cf34c407b4d99d Mon Sep 17 00:00:00 2001 From: t100n Date: Fri, 14 Mar 2014 11:17:39 +0000 Subject: [PATCH 6/9] added display data value --- js/jquery.knob.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 55b5ec1..8322176 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -108,7 +108,7 @@ inputColor: this.$.data('inputcolor'), font: this.$.data('font') || 'Arial', fontWeight: this.$.data('font-weight') || 'bold', - inline : false, + display : this.$.data('display') || 'block', step : this.$.data('step') || 1, rotation: this.$.data('rotation'), @@ -183,8 +183,9 @@ // wraps all elements in a div // add to DOM before Canvas init is triggered this.$div = $('
'); this.$.wrap(this.$div).before(this.$c); @@ -506,7 +507,7 @@ bgColor : this.$.data('bgcolor') || '#EEEEEE', angleOffset : this.$.data('angleoffset') || 0, angleArc : this.$.data('anglearc') || 360, - inline : true + display : 'block' }, this.o ); }; From f7b6d9add850eec2ae6b6bf03bab2eb64db3a8bf Mon Sep 17 00:00:00 2001 From: t100n Date: Fri, 14 Mar 2014 15:20:50 +0000 Subject: [PATCH 7/9] removed stupid width and height adjustment --- js/jquery.knob.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 8322176..73d71ea 100755 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -185,7 +185,7 @@ this.$div = $('
'); this.$.wrap(this.$div).before(this.$c); @@ -694,17 +694,12 @@ this.o.displayInput && this.i.css({ - //'width' : ((this.w / 2 + 4) >> 0) + 'px' - //,'height' : ((this.w / 2 + 4) >> 0) + 'px' - 'width' : (this.w-this.lineWidth*2 - 0.1) + 'px' - ,'height' : (this.w-this.lineWidth*2 - 0.1) + 'px' - //,'height' : ((this.w / 3) >> 0) + 'px' + 'width' : (this.w-this.lineWidth*2) + 'px' + ,'height' : (this.w-this.lineWidth*2) + 'px' ,'position' : 'absolute' ,'vertical-align' : 'middle' ,'margin-top' : this.lineWidth + 'px' - //,'margin-top' : ((this.w / 3) >> 0) + 'px' ,'margin-left' : '-' + (this.w-this.lineWidth) + 'px' - //,'margin-left' : '-' + ((this.w * 3 / 4 + 2) >> 0) + 'px' ,'border' : 0 ,'background' : 'transparent' ,'font' : this.o.fontWeight + ' ' + ((this.w / s) >> 0) + 'px ' + this.o.font From 3569fdc0b5ffb9883b984f78b29a2f55fe20dc80 Mon Sep 17 00:00:00 2001 From: t100n Date: Fri, 14 Mar 2014 15:27:22 +0000 Subject: [PATCH 8/9] updated readme --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index b817052..0cfb8c2 100755 --- a/README.md +++ b/README.md @@ -6,7 +6,12 @@ jQuery Knob - downward compatible ; overloads an input element. Data values: -* display - Value for the display of the element: inline, block, etc. Defaults to block. +* width - Width of the containing element for the Knob +* height - Height of the containing element for the Knob +* min - Minimum possible value for the Knob +* max - Maximum possible value for the Knob +* value - Current value for the Knob +* display - Value for the display of the element: inline, block, etc. Defaults to block Example ------- From 2c0efc3a372f82df71650089e20d148d4dbb8f0c Mon Sep 17 00:00:00 2001 From: t100n Date: Fri, 14 Mar 2014 15:32:51 +0000 Subject: [PATCH 9/9] updated readme --- README.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0cfb8c2..38915d6 100755 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Data values: * height - Height of the containing element for the Knob * min - Minimum possible value for the Knob * max - Maximum possible value for the Knob -* value - Current value for the Knob +* value - Current value for the Knob in elements that are not an INPUT. Example: * display - Value for the display of the element: inline, block, etc. Defaults to block Example @@ -27,13 +27,14 @@ Example Options ------- -Options are provided as attributes 'data-option': +Options are provided as attributes 'data-