You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
13 lines
11 KiB
13 lines
11 KiB
/*!jQuery Knob*/
|
|
/**
|
|
* Downward compatible, touchable dial
|
|
*
|
|
* Version: 1.2.8
|
|
* Requires: jQuery v1.7+
|
|
*
|
|
* Copyright (c) 2012 Anthony Terrien
|
|
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
|
|
*
|
|
* Thanks to vor, eskimoblood, spiffistan, FabrizioC
|
|
*/
|
|
(function(d){var b={},a=Math.max,c=Math.min;b.c={};b.c.d=d(document);b.c.t=function(f){return f.originalEvent.touches.length-1};b.o=function(){var e=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 f=function(i,h){var g;for(g in h){e.o[g]=h[g]}e._carve().init();e._configure()._draw()};if(this.$.data("kontroled")){return}this.$.data("kontroled",true);this.extend();this.o=d.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),0.01))||0.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(g){return g},parse:function(g){return parseFloat(g)}},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(g){var h=d(this);e.i[g]=h;e.v[g]=e.o.parse(h.val());h.bind("change blur",function(){var i={};i[g]=h.val();e.val(i)})});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(){e.val(e._validate(e.o.parse(e.$.val())))})}(!this.o.displayInput)&&this.$.hide();this.$c=d(document.createElement("canvas")).attr({width:this.o.width,height:this.o.height});this.$div=d('<div style="'+(this.o.inline?"display:inline;":"")+"width:"+this.o.width+"px;height:"+this.o.height+'px;"></div>');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",f).parent().bind("configure",f);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 f=this.relativeWidth?this.$div.parent().width()*parseInt(this.o.width)/100:this.$div.parent().width(),g=this.relativeHeight?this.$div.parent().height()*parseInt(this.o.height)/100:this.$div.parent().height();this.w=this.h=Math.min(f,g)}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 f=true;e.g=e.c;e.clear();e.dH&&(f=e.dH());(f!==false)&&e.draw()};this._touch=function(f){var g=function(i){var h=e.xy2val(i.originalEvent.touches[e.t].pageX,i.originalEvent.touches[e.t].pageY);if(h==e.cv){return}if(e.cH&&(e.cH(h)===false)){return}e.change(e._validate(h));e._draw()};this.t=b.c.t(f);g(f);b.c.d.bind("touchmove.k",g).bind("touchend.k",function(){b.c.d.unbind("touchmove.k touchend.k");e.val(e.cv)});return this};this._mouse=function(g){var f=function(i){var h=e.xy2val(i.pageX,i.pageY);if(h==e.cv){return}if(e.cH&&(e.cH(h)===false)){return}e.change(e._validate(h));e._draw()};f(g);b.c.d.bind("mousemove.k",f).bind("keyup.k",function(h){if(h.keyCode===27){b.c.d.unbind("mouseup.k mousemove.k keyup.k");if(e.eH&&(e.eH()===false)){return}e.cancel()}}).bind("mouseup.k",function(h){b.c.d.unbind("mousemove.k mouseup.k keyup.k");e.val(e.cv)});return this};this._xy=function(){var f=this.$c.offset();this.x=f.left;this.y=f.top;return this};this._listen=function(){if(!this.o.readOnly){this.$c.bind("mousedown",function(f){f.preventDefault();e._xy()._mouse(f)}).bind("touchstart",function(f){f.preventDefault();e._xy()._touch(f)});this.listen()}else{this.$.attr("readonly","readonly")}if(this.relative){d(window).resize(function(){e._carve().init();e._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(f){return(~~(((f<0)?-0.5:0.5)+(f/this.o.step)))*this.o.step};this.listen=function(){};this.extend=function(){};this.init=function(){};this.change=function(f){};this.val=function(f){};this.xy2val=function(f,g){};this.draw=function(){};this.clear=function(){this._clear()};this.h2rgba=function(i,f){var g;i=i.substring(1,7);g=[parseInt(i.substring(0,2),16),parseInt(i.substring(2,4),16),parseInt(i.substring(4,6),16)];return"rgba("+g[0]+","+g[1]+","+g[2]+","+f+")"};this.copy=function(j,h){for(var g in j){h[g]=j[g]}}};b.Dial=function(){b.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=d.extend({bgColor:this.$.data("bgcolor")||"#EEEEEE",angleOffset:this.$.data("angleoffset")||0,angleArc:this.$.data("anglearc")||360,inline:true},this.o)};this.val=function(e,f){if(null!=e){e=this.o.parse(e);if(f!==false&&(e!=this.v)&&this.rH&&(this.rH(e)===false)){return}this.cv=this.o.stopper?a(c(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,h){var f,g;f=Math.atan2(e-(this.x+this.w2),-(h-this.y-this.w2))-this.angleOffset;if(this.o.flip){f=this.angleArc-f-this.PI2}if(this.angleArc!=this.PI2&&(f<0)&&(f>-0.5)){f=0}else{if(f<0){f+=this.PI2}}g=~~(0.5+(f*(this.o.max-this.o.min)/this.angleArc))+this.o.min;this.o.stopper&&(g=a(c(g,this.o.max),this.o.min));return g};this.listen=function(){var h=this,g,f,l=function(q){q.preventDefault();var p=q.originalEvent,n=p.detail||p.wheelDeltaX,m=p.detail||p.wheelDeltaY,o=h._validate(h.o.parse(h.$.val()))+(n>0||m>0?h.o.step:n<0||m<0?-h.o.step:0);o=a(c(o,h.o.max),h.o.min);h.val(o,false);if(h.rH){clearTimeout(g);g=setTimeout(function(){h.rH(o);g=null},100);if(!f){f=setTimeout(function(){if(g){h.rH(o)}f=null},200)}}},j,k,e=1,i={37:-h.o.step,38:h.o.step,39:h.o.step,40:-h.o.step};this.$.bind("keydown",function(o){var n=o.keyCode;if(n>=96&&n<=105){n=o.keyCode=n-48}j=parseInt(String.fromCharCode(n));if(isNaN(j)){(n!==13)&&(n!==8)&&(n!==9)&&(n!==189)&&(n!==190||h.$.val().match(/\./))&&o.preventDefault();if(d.inArray(n,[37,38,39,40])>-1){o.preventDefault();var m=h.o.parse(h.$.val())+i[n]*e;h.o.stopper&&(m=a(c(m,h.o.max),h.o.min));h.change(m);h._draw();k=window.setTimeout(function(){e*=2},30)}}}).bind("keyup",function(m){if(isNaN(j)){if(k){window.clearTimeout(k);k=null;e=1;h.val(h.$.val())}}else{(h.$.val()>h.o.max&&h.$.val(h.o.max))||(h.$.val()<h.o.min&&h.$.val(h.o.min))}});this.$c.bind("mousewheel DOMMouseScroll",l);this.$.bind("mousewheel DOMMouseScroll",l)};this.init=function(){if(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 e=a(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(f){var e,g;f=this.angle(f);if(this.o.flip){e=this.endAngle+0.00001;g=e-f-0.00001}else{e=this.startAngle-0.00001;g=e+f+0.00001}this.o.cursor&&(e=g-this.cursorExt)&&(g=g+this.cursorExt);return{s:e,e:g,d:this.o.flip&&!this.o.cursor}};this.draw=function(){var h=this.g,e=this.arc(this.cv),f,g=1;h.lineWidth=this.lineWidth;h.lineCap=this.lineCap;h.strokeStyle=this.o.bgColor;h.arc(this.xy,this.xy,this.radius,this.endAngle-0.00001,this.startAngle+0.00001,true);h.stroke();if(this.o.displayPrevious){f=this.arc(this.v);h.beginPath();h.strokeStyle=this.pColor;h.arc(this.xy,this.xy,this.radius,f.s,f.e,f.d);h.stroke();g=(this.cv==this.v)}h.beginPath();h.strokeStyle=g?this.o.fgColor:this.fgColor;h.arc(this.xy,this.xy,this.radius,e.s,e.e,e.d);h.stroke()};this.cancel=function(){this.val(this.v)}};d.fn.dial=d.fn.knob=function(e){return this.each(function(){var f=new b.Dial();f.o=e;f.$=d(this);f.run()}).parent()}})(jQuery);
|