diff --git a/bower.json b/bower.json index 1eeb316..1c99ff0 100755 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { - "name": "jquery-knob", - "version": "1.2.13", + "name": "edlogics-jquery-knob", + "version": "1.13.0", "main": "js/jquery.knob.js", "description": "Nice, downward compatible, touchable, jQuery dial.", "license": "MIT", diff --git a/dist/jquery.knob.min.js b/dist/jquery.knob.min.js index 72d6ed2..794ac5c 100755 --- a/dist/jquery.knob.min.js +++ b/dist/jquery.knob.min.js @@ -1 +1 @@ -(function(e){if(typeof define==="function"&&define.amd){define(["jquery"],e)}else{e(jQuery)}})(function(e){"use strict";var t={},n=Math.max,r=Math.min;t.c={};t.c.d=e(document);t.c.t=function(e){return e.originalEvent.touches.length-1};t.o=function(){var n=this;this.o=null;this.$=null;this.i=null;this.g=null;this.v=null;this.cv=null;this.x=0;this.y=0;this.w=0;this.h=0;this.$c=null;this.c=null;this.t=0;this.isInit=false;this.fgColor=null;this.pColor=null;this.dH=null;this.cH=null;this.eH=null;this.rH=null;this.scale=1;this.relative=false;this.relativeWidth=false;this.relativeHeight=false;this.$div=null;this.run=function(){var t=function(e,t){var r;for(r in t){n.o[r]=t[r]}n._carve().init();n._configure()._draw()};if(this.$.data("kontroled"))return;this.$.data("kontroled",true);this.extend();this.o=e.extend({min:this.$.data("min")!==undefined?this.$.data("min"):0,max:this.$.data("max")!==undefined?this.$.data("max"):100,stopper:true,readOnly:this.$.data("readonly")||this.$.attr("readonly")==="readonly",cursor:this.$.data("cursor")===true&&30||this.$.data("cursor")||0,thickness:this.$.data("thickness")&&Math.max(Math.min(this.$.data("thickness"),1),.01)||.35,lineCap:this.$.data("linecap")||"butt",width:this.$.data("width")||200,height:this.$.data("height")||200,displayInput:this.$.data("displayinput")==null||this.$.data("displayinput"),displayPrevious:this.$.data("displayprevious"),fgColor:this.$.data("fgcolor")||"#87CEEB",inputColor:this.$.data("inputcolor"),font:this.$.data("font")||"Arial",fontWeight:this.$.data("font-weight")||"bold",inline:false,step:this.$.data("step")||1,rotation:this.$.data("rotation"),draw:null,change:null,cancel:null,release:null,format:function(e){return e},parse:function(e){return parseFloat(e)}},this.o);this.o.flip=this.o.rotation==="anticlockwise"||this.o.rotation==="acw";if(!this.o.inputColor){this.o.inputColor=this.o.fgColor}if(this.$.is("fieldset")){this.v={};this.i=this.$.find("input");this.i.each(function(t){var r=e(this);n.i[t]=r;n.v[t]=n.o.parse(r.val());r.bind("change blur",function(){var e={};e[t]=r.val();n.val(n._validate(e))})});this.$.find("legend").remove()}else{this.i=this.$;this.v=this.o.parse(this.$.val());this.v===""&&(this.v=this.o.min);this.$.bind("change blur",function(){n.val(n._validate(n.o.parse(n.$.val())))})}!this.o.displayInput&&this.$.hide();this.$c=e(document.createElement("canvas")).attr({width:this.o.width,height:this.o.height});this.$div=e('
');this.$.wrap(this.$div).before(this.$c);this.$div=this.$.parent();if(typeof G_vmlCanvasManager!=="undefined"){G_vmlCanvasManager.initElement(this.$c[0])}this.c=this.$c[0].getContext?this.$c[0].getContext("2d"):null;if(!this.c){throw{name:"CanvasNotSupportedException",message:"Canvas not supported. Please use excanvas on IE8.0.",toString:function(){return this.name+": "+this.message}}}this.scale=(window.devicePixelRatio||1)/(this.c.webkitBackingStorePixelRatio||this.c.mozBackingStorePixelRatio||this.c.msBackingStorePixelRatio||this.c.oBackingStorePixelRatio||this.c.backingStorePixelRatio||1);this.relativeWidth=this.o.width%1!==0&&this.o.width.indexOf("%");this.relativeHeight=this.o.height%1!==0&&this.o.height.indexOf("%");this.relative=this.relativeWidth||this.relativeHeight;this._carve();if(this.v instanceof Object){this.cv={};this.copy(this.v,this.cv)}else{this.cv=this.v}this.$.bind("configure",t).parent().bind("configure",t);this._listen()._configure()._xy().init();this.isInit=true;this.$.val(this.o.format(this.v));this._draw();return this};this._carve=function(){if(this.relative){var e=this.relativeWidth?this.$div.parent().width()*parseInt(this.o.width)/100:this.$div.parent().width(),t=this.relativeHeight?this.$div.parent().height()*parseInt(this.o.height)/100:this.$div.parent().height();this.w=this.h=Math.min(e,t)}else{this.w=this.o.width;this.h=this.o.height}this.$div.css({width:this.w+"px",height:this.h+"px"});this.$c.attr({width:this.w,height:this.h});if(this.scale!==1){this.$c[0].width=this.$c[0].width*this.scale;this.$c[0].height=this.$c[0].height*this.scale;this.$c.width(this.w);this.$c.height(this.h)}return this};this._draw=function(){var e=true;n.g=n.c;n.clear();n.dH&&(e=n.dH());e!==false&&n.draw()};this._touch=function(e){var r=function(e){var t=n.xy2val(e.originalEvent.touches[n.t].pageX,e.originalEvent.touches[n.t].pageY);if(t==n.cv)return;if(n.cH&&n.cH(t)===false)return;n.change(n._validate(t));n._draw()};this.t=t.c.t(e);r(e);t.c.d.bind("touchmove.k",r).bind("touchend.k",function(){t.c.d.unbind("touchmove.k touchend.k");n.val(n.cv)});return this};this._mouse=function(e){var r=function(e){var t=n.xy2val(e.pageX,e.pageY);if(t==n.cv)return;if(n.cH&&n.cH(t)===false)return;n.change(n._validate(t));n._draw()};r(e);t.c.d.bind("mousemove.k",r).bind("keyup.k",function(e){if(e.keyCode===27){t.c.d.unbind("mouseup.k mousemove.k keyup.k");if(n.eH&&n.eH()===false)return;n.cancel()}}).bind("mouseup.k",function(e){t.c.d.unbind("mousemove.k mouseup.k keyup.k");n.val(n.cv)});return this};this._xy=function(){var e=this.$c.offset();this.x=e.left;this.y=e.top;return this};this._listen=function(){if(!this.o.readOnly){this.$c.bind("mousedown",function(e){e.preventDefault();n._xy()._mouse(e)}).bind("touchstart",function(e){e.preventDefault();n._xy()._touch(e)});this.listen()}else{this.$.attr("readonly","readonly")}if(this.relative){e(window).resize(function(){n._carve().init();n._draw()})}return this};this._configure=function(){if(this.o.draw)this.dH=this.o.draw;if(this.o.change)this.cH=this.o.change;if(this.o.cancel)this.eH=this.o.cancel;if(this.o.release)this.rH=this.o.release;if(this.o.displayPrevious){this.pColor=this.h2rgba(this.o.fgColor,"0.4");this.fgColor=this.h2rgba(this.o.fgColor,"0.6")}else{this.fgColor=this.o.fgColor}return this};this._clear=function(){this.$c[0].width=this.$c[0].width};this._validate=function(e){var t=~~((e<0?-.5:.5)+e/this.o.step)*this.o.step;return Math.round(t*100)/100};this.listen=function(){};this.extend=function(){};this.init=function(){};this.change=function(e){};this.val=function(e){};this.xy2val=function(e,t){};this.draw=function(){};this.clear=function(){this._clear()};this.h2rgba=function(e,t){var n;e=e.substring(1,7);n=[parseInt(e.substring(0,2),16),parseInt(e.substring(2,4),16),parseInt(e.substring(4,6),16)];return"rgba("+n[0]+","+n[1]+","+n[2]+","+t+")"};this.copy=function(e,t){for(var n in e){t[n]=e[n]}}};t.Dial=function(){t.o.call(this);this.startAngle=null;this.xy=null;this.radius=null;this.lineWidth=null;this.cursorExt=null;this.w2=null;this.PI2=2*Math.PI;this.extend=function(){this.o=e.extend({bgColor:this.$.data("bgcolor")||"#EEEEEE",angleOffset:this.$.data("angleoffset")||0,angleArc:this.$.data("anglearc")||360,inline:true},this.o)};this.val=function(e,t){if(null!=e){e=this.o.parse(e);if(t!==false&&e!=this.v&&this.rH&&this.rH(e)===false){return}this.cv=this.o.stopper?n(r(e,this.o.max),this.o.min):e;this.v=this.cv;this.$.val(this.o.format(this.v));this._draw()}else{return this.v}};this.xy2val=function(e,t){var i,s;i=Math.atan2(e-(this.x+this.w2),-(t-this.y-this.w2))-this.angleOffset;if(this.o.flip){i=this.angleArc-i-this.PI2}if(this.angleArc!=this.PI2&&i<0&&i>-.5){i=0}else if(i<0){i+=this.PI2}s=i*(this.o.max-this.o.min)/this.angleArc+this.o.min;this.o.stopper&&(s=n(r(s,this.o.max),this.o.min));return s};this.listen=function(){var t=this,i,s,o=function(e){e.preventDefault();var o=e.originalEvent,u=o.detail||o.wheelDeltaX,a=o.detail||o.wheelDeltaY,f=t._validate(t.o.parse(t.$.val()))+(u>0||a>0?t.o.step:u<0||a<0?-t.o.step:0);f=n(r(f,t.o.max),t.o.min);t.val(f,false);if(t.rH){clearTimeout(i);i=setTimeout(function(){t.rH(f);i=null},100);if(!s){s=setTimeout(function(){if(i)t.rH(f);s=null},200)}}},u,a,f=1,l={37:-t.o.step,38:t.o.step,39:t.o.step,40:-t.o.step};this.$.bind("keydown",function(i){var s=i.keyCode;if(s>=96&&s<=105){s=i.keyCode=s-48}u=parseInt(String.fromCharCode(s));if(isNaN(u)){s!==13&&s!==8&&s!==9&&s!==189&&(s!==190||t.$.val().match(/\./))&&i.preventDefault();if(e.inArray(s,[37,38,39,40])>-1){i.preventDefault();var o=t.o.parse(t.$.val())+l[s]*f;t.o.stopper&&(o=n(r(o,t.o.max),t.o.min));t.change(t._validate(o));t._draw();a=window.setTimeout(function(){f*=2},30)}}}).bind("keyup",function(e){if(isNaN(u)){if(a){window.clearTimeout(a);a=null;f=1;t.val(t.$.val())}}else{t.$.val()>t.o.max&&t.$.val(t.o.max)||t.$.val()this.o.max){this.v=this.o.min}this.$.val(this.v);this.w2=this.w/2;this.cursorExt=this.o.cursor/100;this.xy=this.w2*this.scale;this.lineWidth=this.xy*this.o.thickness;this.lineCap=this.o.lineCap;this.radius=this.xy-this.lineWidth/2;this.o.angleOffset&&(this.o.angleOffset=isNaN(this.o.angleOffset)?0:this.o.angleOffset);this.o.angleArc&&(this.o.angleArc=isNaN(this.o.angleArc)?this.PI2:this.o.angleArc);this.angleOffset=this.o.angleOffset*Math.PI/180;this.angleArc=this.o.angleArc*Math.PI/180;this.startAngle=1.5*Math.PI+this.angleOffset;this.endAngle=1.5*Math.PI+this.angleOffset+this.angleArc;var e=n(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/3>>0)+"px",position:"absolute","vertical-align":"middle","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/e>>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(e){this.cv=e;this.$.val(this.o.format(e))};this.angle=function(e){return(e-this.o.min)*this.angleArc/(this.o.max-this.o.min)};this.arc=function(e){var t,n;e=this.angle(e);if(this.o.flip){t=this.endAngle+1e-5;n=t-e-1e-5}else{t=this.startAngle-1e-5;n=t+e+1e-5}this.o.cursor&&(t=n-this.cursorExt)&&(n=n+this.cursorExt);return{s:t,e:n,d:this.o.flip&&!this.o.cursor}};this.draw=function(){var e=this.g,t=this.arc(this.cv),n,r=1;e.lineWidth=this.lineWidth;e.lineCap=this.lineCap;if(this.o.bgColor!=="none"){e.beginPath();e.strokeStyle=this.o.bgColor;e.arc(this.xy,this.xy,this.radius,this.endAngle-1e-5,this.startAngle+1e-5,true);e.stroke()}if(this.o.displayPrevious){n=this.arc(this.v);e.beginPath();e.strokeStyle=this.pColor;e.arc(this.xy,this.xy,this.radius,n.s,n.e,n.d);e.stroke();r=this.cv==this.v}e.beginPath();e.strokeStyle=r?this.o.fgColor:this.fgColor;e.arc(this.xy,this.xy,this.radius,t.s,t.e,t.d);e.stroke()};this.cancel=function(){this.val(this.v)}};e.fn.dial=e.fn.knob=function(n){return this.each(function(){var r=new t.Dial;r.o=n;r.$=e(this);r.run()}).parent()}}) \ No newline at end of file +!function (t) { "object" == typeof exports ? module.exports = t(require("jquery")) : "function" == typeof define && define.amd ? define(["jquery"], t) : t(jQuery) }(function (t) { "use strict"; var i = {}, s = Math.max, h = Math.min; i.c = {}, i.c.d = t(document), i.c.t = function (t) { return t.originalEvent.touches.length - 1 }, i.o = function () { var s = this; this.o = null, this.$ = null, this.i = null, this.g = null, this.v = null, this.cv = null, this.x = 0, this.y = 0, this.w = 0, this.h = 0, this.$c = null, this.c = null, this.t = 0, this.isInit = !1, this.fgColor = null, this.pColor = null, this.dH = null, this.cH = null, this.eH = null, this.rH = null, this.scale = 1, this.relative = !1, this.relativeWidth = !1, this.relativeHeight = !1, this.$div = null, this.run = function () { var i = function (t, i) { var h; for (h in i) s.o[h] = i[h]; s._carve().init(), s._configure()._draw() }; if (!this.$.data("kontroled")) { if (this.$.data("kontroled", !0), this.extend(), this.o = t.extend({ min: void 0 !== this.$.data("min") ? this.$.data("min") : 0, max: void 0 !== this.$.data("max") ? this.$.data("max") : 100, stopper: !0, readOnly: this.$.data("readonly") || "readonly" === this.$.attr("readonly"), cursor: this.$.data("cursor") === !0 && 30 || this.$.data("cursor") || 0, thickness: this.$.data("thickness") && Math.max(Math.min(this.$.data("thickness"), 1), .01) || .35, lineCap: this.$.data("linecap") || "butt", width: this.$.data("width") || 200, height: this.$.data("height") || 200, displayInput: null == this.$.data("displayinput") || this.$.data("displayinput"), displayPrevious: this.$.data("displayprevious"), fgColor: this.$.data("fgcolor") || "#87CEEB", inputColor: this.$.data("inputcolor"), font: this.$.data("font") || "Arial", fontWeight: this.$.data("font-weight") || "bold", inline: !1, step: this.$.data("step") || 1, rotation: this.$.data("rotation"), draw: null, change: null, cancel: null, release: null, format: function (t) { return t }, parse: function (t) { return parseFloat(t) } }, this.o), this.o.flip = "anticlockwise" === this.o.rotation || "acw" === this.o.rotation, this.o.inputColor || (this.o.inputColor = this.o.fgColor), this.$.is("fieldset") ? (this.v = {}, this.i = this.$.find("input"), this.i.each(function (i) { var h = t(this); s.i[i] = h, s.v[i] = s.o.parse(h.val()), h.bind("change blur", function () { var t = {}; t[i] = h.val(), s.val(s._validate(t)) }) }), this.$.find("legend").remove()) : (this.i = this.$, this.v = this.o.parse(this.$.val()), "" === this.v && (this.v = this.o.min), this.$.bind("change blur", function () { s.val(s._validate(s.o.parse(s.$.val()))) })), !this.o.displayInput && this.$.hide(), this.$c = t(document.createElement("canvas")).attr({ width: this.o.width, height: this.o.height }), this.$div = t('
'), this.$.wrap(this.$div).before(this.$c), this.$div = this.$.parent(), "undefined" != typeof G_vmlCanvasManager && G_vmlCanvasManager.initElement(this.$c[0]), this.c = this.$c[0].getContext ? this.$c[0].getContext("2d") : null, !this.c) throw { name: "CanvasNotSupportedException", message: "Canvas not supported. Please use excanvas on IE8.0.", toString: function () { return this.name + ": " + this.message } }; return this.scale = (window.devicePixelRatio || 1) / (this.c.webkitBackingStorePixelRatio || this.c.mozBackingStorePixelRatio || this.c.msBackingStorePixelRatio || this.c.oBackingStorePixelRatio || this.c.backingStorePixelRatio || 1), this.relativeWidth = this.o.width % 1 !== 0 && this.o.width.indexOf("%"), this.relativeHeight = this.o.height % 1 !== 0 && this.o.height.indexOf("%"), this.relative = this.relativeWidth || this.relativeHeight, this._carve(), this.v instanceof Object ? (this.cv = {}, this.copy(this.v, this.cv)) : this.cv = this.v, this.$.bind("configure", i).parent().bind("configure", i), this._listen()._configure()._xy().init(), this.isInit = !0, this.$.val(this.o.format(this.v)), this._draw(), this } }, this._carve = function () { if (this.relative) { var t = this.relativeWidth ? this.$div.parent().width() * parseInt(this.o.width) / 100 : this.$div.parent().width(), i = this.relativeHeight ? this.$div.parent().height() * parseInt(this.o.height) / 100 : this.$div.parent().height(); this.w = this.h = Math.min(t, i) } else this.w = this.o.width, this.h = this.o.height; return this.$div.css({ width: this.w + "px", height: this.h + "px" }), this.$c.attr({ width: this.w, height: this.h }), 1 !== this.scale && (this.$c[0].width = this.$c[0].width * this.scale, this.$c[0].height = this.$c[0].height * this.scale, this.$c.width(this.w), this.$c.height(this.h)), this }, this._draw = function () { var t = !0; s.g = s.c, s.clear(), s.dH && (t = s.dH()), t !== !1 && s.draw() }, this._touch = function (t) { var h = function (t) { var i = s.xy2val(t.originalEvent.touches[s.t].pageX, t.originalEvent.touches[s.t].pageY); i != s.cv && (s.cH && s.cH(i) === !1 || (s.change(s._validate(i)), s._draw())) }; return this.t = i.c.t(t), h(t), i.c.d.bind("touchmove.k", h).bind("touchend.k", function () { i.c.d.unbind("touchmove.k touchend.k"), s.val(s.cv) }), this }, this._mouse = function (t) { var h = function (t) { var i = s.xy2val(t.pageX, t.pageY); i != s.cv && (s.cH && s.cH(i) === !1 || (s.change(s._validate(i)), s._draw())) }; return h(t), i.c.d.bind("mousemove.k", h).bind("keyup.k", function (t) { if (27 === t.keyCode) { if (i.c.d.unbind("mouseup.k mousemove.k keyup.k"), s.eH && s.eH() === !1) return; s.cancel() } }).bind("mouseup.k", function (t) { i.c.d.unbind("mousemove.k mouseup.k keyup.k"), s.val(s.cv) }), this }, this._xy = function () { var t = this.$c.offset(); return this.x = t.left, this.y = t.top, this }, this._listen = function () { return this.o.readOnly ? this.$.attr("readonly", "readonly") : (this.$c.bind("mousedown", function (t) { t.preventDefault(), s._xy()._mouse(t) }).bind("touchstart", function (t) { t.preventDefault(), s._xy()._touch(t) }), this.listen()), this.relative && t(window).resize(function () { s._carve().init(), s._draw() }), this }, this._configure = function () { return this.o.draw && (this.dH = this.o.draw), this.o.change && (this.cH = this.o.change), this.o.cancel && (this.eH = this.o.cancel), this.o.release && (this.rH = this.o.release), this.o.displayPrevious ? (this.pColor = this.h2rgba(this.o.fgColor, "0.4"), this.fgColor = this.h2rgba(this.o.fgColor, "0.6")) : this.fgColor = this.o.fgColor, this }, this._clear = function () { this.$c[0].width = this.$c[0].width }, this._validate = function (t) { var i = ~~((0 > t ? -.5 : .5) + t / this.o.step) * this.o.step; return Math.round(100 * i) / 100 }, this.listen = function () { }, this.extend = function () { }, this.init = function () { }, this.change = function (t) { }, this.val = function (t) { }, this.xy2val = function (t, i) { }, this.draw = function () { }, this.clear = function () { this._clear() }, this.h2rgba = function (t, i) { var s; return t = t.substring(1, 7), s = [parseInt(t.substring(0, 2), 16), parseInt(t.substring(2, 4), 16), parseInt(t.substring(4, 6), 16)], "rgba(" + s[0] + "," + s[1] + "," + s[2] + "," + i + ")" }, this.copy = function (t, i) { for (var s in t) i[s] = t[s] } }, i.Dial = function () { i.o.call(this), this.startAngle = null, this.xy = null, this.radius = null, this.lineWidth = null, this.cursorExt = null, this.w2 = null, this.PI2 = 2 * Math.PI, this.extend = function () { this.o = t.extend({ bgColor: this.$.data("bgcolor") || "#EEEEEE", angleOffset: this.$.data("angleoffset") || 0, angleArc: this.$.data("anglearc") || 360, inline: !0 }, this.o) }, this.val = function (t, i) { return null == t ? this.v : (t = this.o.parse(t), void (i !== !1 && t != this.v && this.rH && this.rH(t) === !1 || (this.cv = this.o.stopper ? s(h(t, this.o.max), this.o.min) : t, this.v = this.cv, this.$.val(this.o.format(this.v)), this._draw()))) }, this.xy2val = function (t, i) { var e, n; return e = Math.atan2(t - (this.x + this.w2), -(i - this.y - this.w2)) - this.angleOffset, this.o.flip && (e = this.angleArc - e - this.PI2), this.angleArc != this.PI2 && 0 > e && e > -.5 ? e = 0 : 0 > e && (e += this.PI2), n = e * (this.o.max - this.o.min) / this.angleArc + this.o.min, this.o.stopper && (n = s(h(n, this.o.max), this.o.min)), n }, this.listen = function () { var i, e, n, a, o = this, r = function (t) { t.preventDefault(); var n = t.originalEvent, a = n.detail || n.wheelDeltaX, r = n.detail || n.wheelDeltaY, l = o._validate(o.o.parse(o.$.val())) + (a > 0 || r > 0 ? o.o.step : 0 > a || 0 > r ? -o.o.step : 0); l = s(h(l, o.o.max), o.o.min), o.val(l, !1), o.rH && (clearTimeout(i), i = setTimeout(function () { o.rH(l), i = null }, 100), e || (e = setTimeout(function () { i && o.rH(l), e = null }, 200))) }, l = 1, c = { 37: -o.o.step, 38: o.o.step, 39: o.o.step, 40: -o.o.step }; this.$.bind("keydown", function (i) { var e = i.keyCode; if (e >= 96 && 105 >= e && (e = i.keyCode = e - 48), n = parseInt(String.fromCharCode(e)), isNaN(n) && (13 !== e && 8 !== e && 9 !== e && 189 !== e && (190 !== e || o.$.val().match(/\./)) && i.preventDefault(), t.inArray(e, [37, 38, 39, 40]) > -1)) { i.preventDefault(); var r = o.o.parse(o.$.val()) + c[e] * l; o.o.stopper && (r = s(h(r, o.o.max), o.o.min)), o.change(o._validate(r)), o._draw(), a = window.setTimeout(function () { l *= 2 }, 30) } }).bind("keyup", function (t) { isNaN(n) ? a && (window.clearTimeout(a), a = null, l = 1, o.val(o.$.val())) : o.$.val() > o.o.max && o.$.val(o.o.max) || o.$.val() < o.o.min && o.$.val(o.o.min) }), this.$c.bind("mousewheel DOMMouseScroll", r), this.$.bind("mousewheel DOMMouseScroll", r) }, this.init = function () { (this.v < this.o.min || this.v > this.o.max) && (this.v = this.o.min), this.$.val(this.v), this.w2 = this.w / 2, this.cursorExt = this.o.cursor / 100, this.xy = this.w2 * this.scale, this.lineWidth = this.xy * this.o.thickness, this.lineCap = this.o.lineCap, this.radius = this.xy - this.lineWidth / 2, this.o.angleOffset && (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset), this.o.angleArc && (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc), this.angleOffset = this.o.angleOffset * Math.PI / 180, this.angleArc = this.o.angleArc * Math.PI / 180, this.startAngle = 1.5 * Math.PI + this.angleOffset, this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc; var t = s(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 / 3 >> 0) + "px", position: "absolute", "vertical-align": "middle", "margin-top": (this.w / 3 >> 0) + "px", "margin-left": "-" + (3 * this.w / 4 + 2 >> 0) + "px", border: 0, background: "none", font: this.o.fontWeight + " " + (this.w / t >> 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 (t) { this.cv = t, this.$.val(this.o.format(t)) }, this.angle = function (t) { return (t - this.o.min) * this.angleArc / (this.o.max - this.o.min) }, this.arc = function (t) { var i, s; return t = this.angle(t), this.o.flip ? (i = this.endAngle + 1e-5, s = i - t - 1e-5) : (i = this.startAngle - 1e-5, s = i + t + 1e-5), this.o.cursor && (i = s - this.cursorExt) && (s += this.cursorExt), { s: i, e: s, d: this.o.flip && !this.o.cursor } }, this.draw = function () { var t, i = this.g, s = this.arc(this.cv), h = 1; i.lineWidth = this.lineWidth, i.lineCap = this.lineCap, "none" !== this.o.bgColor && (i.beginPath(), i.strokeStyle = this.o.bgColor, i.arc(this.xy, this.xy, this.radius, this.endAngle - 1e-5, this.startAngle + 1e-5, !0), i.stroke()), this.o.displayPrevious && (t = this.arc(this.v), i.beginPath(), i.strokeStyle = this.pColor, i.arc(this.xy, this.xy, this.radius, t.s, t.e, t.d), i.stroke(), h = this.cv == this.v), i.beginPath(), i.strokeStyle = h ? this.o.fgColor : this.fgColor, i.arc(this.xy, this.xy, this.radius, s.s, s.e, s.d), i.stroke() }, this.cancel = function () { this.val(this.v) } }, t.fn.dial = t.fn.knob = function (s) { return this.each(function () { var h = new i.Dial; h.o = s, h.$ = t(this), h.run() }).parent() } }); \ No newline at end of file diff --git a/js/jquery.knob.js b/js/jquery.knob.js index 792313c..b7fa6dd 100644 --- a/js/jquery.knob.js +++ b/js/jquery.knob.js @@ -114,6 +114,8 @@ displayInput: this.$.data('displayinput') == null || this.$.data('displayinput'), displayPrevious: this.$.data('displayprevious'), fgColor: this.$.data('fgcolor') || '#87CEEB', + fgGradientStart: this.$.data('fggradientstart') || this.$.data('fgcolor') || '#87CEEB', + fgGradientEnd: this.$.data('fggradientend') || this.$.data('fgcolor') || '#87CEEB', inputColor: this.$.data('inputcolor'), font: this.$.data('font') || 'Arial', fontWeight: this.$.data('font-weight') || 'bold', @@ -779,9 +781,19 @@ c.stroke(); r = this.cv == this.v; } + var perc = (isNaN(this.v) ? 100 : this.v) / 100; + var gwidth = perc === 100 ? this.w : (this.w * perc); + var grad = c.createLinearGradient(0, this.h, gwidth, this.h); + grad.addColorStop(0, this.o.fgGradientStart); + grad.addColorStop(1, this.o.fgGradientEnd); c.beginPath(); - c.strokeStyle = r ? this.o.fgColor : this.fgColor ; + + if (this.o.fgGradientStart === this.o.fgGradientEnd) + c.strokeStyle = r ? this.o.fgColor : this.fgColor ; + else + c.strokeStyle = grad; + c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d); c.stroke(); }; diff --git a/package.json b/package.json index fbb4245..bffa77d 100644 --- a/package.json +++ b/package.json @@ -8,17 +8,17 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/aterrien/jQuery-Knob.git" + "url": "git+https://github.com/banjahman/jQuery-Knob.git" }, "keywords": [ "jquery", "knob", "dial" ], - "author": "Anthony Terrien", + "author": "Ben Quirk", "license": "MIT", "bugs": { - "url": "https://github.com/aterrien/jQuery-Knob/issues" + "url": "https://github.com/banjahman/jQuery-Knob/issues" }, - "homepage": "https://github.com/aterrien/jQuery-Knob#readme" + "homepage": "https://github.com/banjahman/jQuery-Knob#readme" }