deac/instiki
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
instiki/public/svg-edit/editor/jgraduate/jquery.jgraduate.min.js
Jacques Distler c3ed5b461b Preliminary SVG-edit Support 
WYSIWYG SVG editing.

Still no support for mixed
SVG/MathML content, yet.
2010-02-05 21:36:35 -06:00

1 line
12 KiB
JavaScript
Raw Blame History

;var ns={svg:"http://www.w3.org/2000/svg",xlink:"http://www.w3.org/1999/xlink"};if(!window.console){window.console=new function(){this.log=function(a){};this.dir=function(a){}}}$.jGraduate={Paint:function(b){var a=b||{};this.alpha=a.alpha||100;if(a.copy){this.type=a.copy.type;this.alpha=a.copy.alpha;switch(this.type){case"none":this.solidColor=null;this.linearGradient=null;break;case"solidColor":this.solidColor=a.copy.solidColor;this.linearGradient=null;break;case"linearGradient":this.solidColor=null;this.linearGradient=a.copy.linearGradient.cloneNode(true);break}}else{if(a.linearGradient){this.type="linearGradient";this.solidColor=null;this.linearGradient=a.linearGradient.cloneNode(true)}else{if(a.solidColor){this.type="solidColor";this.solidColor=a.solidColor}else{this.type="none";this.solidColor=null;this.linearGradient=null}}}}};jQuery.fn.jGraduateDefaults={paint:new $.jGraduate.Paint(),window:{pickerTitle:"Drag markers to pick a paint",},images:{clientPath:"images/",},};jQuery.fn.jGraduate=function(b){var a=arguments;return this.each(function(){var l=$(this),m=$.extend(true,{},jQuery.fn.jGraduateDefaults,b),H=l.attr("id"),e="#"+l.attr("id")+" ";if(!e){alert("Container element must have an id attribute to maintain unique id strings for sub-elements.");return}var c=function(){$.isFunction(l.okCallback)&&l.okCallback(l.paint);l.hide()},i=function(){$.isFunction(l.cancelCallback)&&l.cancelCallback();l.hide()};$.extend(true,l,{paint:new $.jGraduate.Paint({copy:m.paint}),okCallback:$.isFunction(a[1])&&a[1]||null,cancelCallback:$.isFunction(a[2])&&a[2]||null,});var F=l.position(),B=null;if(l.paint.type=="none"){l.paint=$.jGraduate.Paint({solidColor:"ffffff"})}l.addClass("jGraduate_Picker");l.html('<ul class="jGraduate_tabs"><li class="jGraduate_tab_color jGraduate_tab_current">Solid Color</li><li class="jGraduate_tab_lingrad">Linear Gradient</li></ul><div class="jGraduate_colPick"></div><div class="jGraduate_lgPick"></div>');var K=$(e+"> .jGraduate_colPick");var s=$(e+"> .jGraduate_lgPick");s.html('<div id="'+H+'_jGraduate_Swatch" class="jGraduate_Swatch"><h2 class="jGraduate_Title">'+m.window.pickerTitle+'</h2><div id="'+H+'_jGraduate_GradContainer" class="jGraduate_GradContainer"></div><div id="'+H+'_jGraduate_Opacity" class="jGraduate_Opacity" title="Click to set overall opacity of the gradient paint"><img id="'+H+'_jGraduate_AlphaArrows" class="jGraduate_AlphaArrows" src="'+m.images.clientPath+'rangearrows2.gif"></img></div></div><div class="jGraduate_Form"><div class="jGraduate_StopSection"><label class="jGraduate_Form_Heading">Begin Stop</label><div class="jGraduate_Form_Section"><label>x:</label><input type="text" id="'+H+'_jGraduate_x1" size="3" title="Enter starting x value between 0.0 and 1.0"/><label> y:</label><input type="text" id="'+H+'_jGraduate_y1" size="3" title="Enter starting y value between 0.0 and 1.0"/><div id="'+H+'_jGraduate_colorBoxBegin" class="colorBox"></div><label id="'+H+'_jGraduate_beginOpacity"> 100%</label></div></div><div class="jGraduate_StopSection"><label class="jGraduate_Form_Heading">End Stop</label><div class="jGraduate_Form_Section"><label>x:</label><input type="text" id="'+H+'_jGraduate_x2" size="3" title="Enter ending x value between 0.0 and 1.0"/><label> y:</label><input type="text" id="'+H+'_jGraduate_y2" size="3" title="Enter ending y value between 0.0 and 1.0"/><div id="'+H+'_jGraduate_colorBoxEnd" class="colorBox"></div><label id="'+H+'_jGraduate_endOpacity">100%</label></div></div><div class="jGraduate_OpacityField"><label class="jGraduate_OpacityLabel">A: </label><input type="text" id="'+H+'_jGraduate_OpacityInput" class="jGraduate_OpacityInput" size="3" value="100"/>%</div></div><div class="jGraduate_OkCancel"><input type="button" id="'+H+'_jGraduate_Ok" class="jGraduate_Ok" value="OK"/><input type="button" id="'+H+'_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/></div><div class="jGraduate_LightBox"></div><div id="'+H+'_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>');var N=256,E=0,D=0,j=15/2,w=N-2*E,u=N-2*D;var G=document.getElementById(H+"_jGraduate_GradContainer");var g=G.appendChild(document.createElementNS(ns.svg,"svg"));g.id=H+"_jgraduate_svg";g.setAttribute("width",N);g.setAttribute("height",N);g.setAttribute("xmlns",ns.svg);if(l.paint.type=="linearGradient"){l.paint.linearGradient.id=H+"_jgraduate_grad";l.paint.linearGradient=g.appendChild(document.importNode(l.paint.linearGradient,true))}else{var v=g.appendChild(document.createElementNS(ns.svg,"linearGradient"));v.id=H+"_jgraduate_grad";v.setAttribute("x1","0.0");v.setAttribute("y1","0.0");v.setAttribute("x2","1.0");v.setAttribute("y2","1.0");var o=v.appendChild(document.createElementNS(ns.svg,"stop"));o.setAttribute("offset","0.0");o.setAttribute("stop-color","#ff0000");var t=v.appendChild(document.createElementNS(ns.svg,"stop"));t.setAttribute("offset","1.0");t.setAttribute("stop-color","#ffff00");l.paint.linearGradient=v}var z=l.paint.alpha;$("#"+H+"_jGraduate_OpacityInput").val(z);var r=parseInt(255*(z/100))-4.5;$("#"+H+"_jGraduate_AlphaArrows").css({"margin-left":r});$("#"+H+"_jgraduate_rect").attr("fill-opacity",z/100);var q=parseFloat(l.paint.linearGradient.getAttribute("x1")||0);var Q=parseFloat(l.paint.linearGradient.getAttribute("y1")||0);var p=parseFloat(l.paint.linearGradient.getAttribute("x2")||1);var P=parseFloat(l.paint.linearGradient.getAttribute("y2")||0);var C=document.createElementNS(ns.svg,"rect");C.id=H+"_jgraduate_rect";C.setAttribute("x",E);C.setAttribute("y",D);C.setAttribute("width",u);C.setAttribute("height",u);C.setAttribute("fill","url(#"+H+"_jgraduate_grad)");C.setAttribute("fill-opacity","1.0");C=g.appendChild(C);var k=document.createElementNS(ns.svg,"image");k.id=H+"_stop1";k.setAttribute("class","stop");k.setAttributeNS(ns.xlink,"href",m.images.clientPath+"mappoint.gif");k.setAttributeNS(ns.xlink,"title","Begin Stop");k.appendChild(document.createElementNS(ns.svg,"title")).appendChild(document.createTextNode("Begin Stop"));k.setAttribute("width",18);k.setAttribute("height",18);k.setAttribute("x",E+w*q-j);k.setAttribute("y",D+u*Q-j);k.setAttribute("cursor","move");k=g.appendChild(k);var M=document.createElementNS(ns.svg,"image");M.id=H+"_stop2";M.setAttribute("class","stop");M.setAttributeNS(ns.xlink,"href",m.images.clientPath+"mappoint.gif");M.setAttributeNS(ns.xlink,"title","End Stop");M.appendChild(document.createElementNS(ns.svg,"title")).appendChild(document.createTextNode("End Stop"));M.setAttribute("width",18);M.setAttribute("height",18);M.setAttribute("x",E+w*p-j);M.setAttribute("y",D+u*P-j);M.setAttribute("cursor","move");M=g.appendChild(M);$("#"+H+"_jGraduate_Ok").bind("click",function(){l.paint.type="linearGradient";l.paint.solidColor=null;c()});$("#"+H+"_jGraduate_Cancel").bind("click",function(R){i()});var q=l.paint.linearGradient.getAttribute("x1");if(!q){q="0.0"}x1Input=$("#"+H+"_jGraduate_x1");x1Input.val(q);x1Input.change(function(){if(isNaN(parseFloat(this.value))||this.value<0||this.value>1){this.value=0}l.paint.linearGradient.setAttribute("x1",this.value);k.setAttribute("x",E+w*this.value-j)});var Q=l.paint.linearGradient.getAttribute("y1");if(!Q){Q="0.0"}y1Input=$("#"+H+"_jGraduate_y1");y1Input.val(Q);y1Input.change(function(){if(isNaN(parseFloat(this.value))||this.value<0||this.value>1){this.value=0}l.paint.linearGradient.setAttribute("y1",this.value);k.setAttribute("y",D+u*this.value-j)});var p=l.paint.linearGradient.getAttribute("x2");if(!p){p="1.0"}x2Input=$("#"+H+"_jGraduate_x2");x2Input.val(p);x2Input.change(function(){if(isNaN(parseFloat(this.value))||this.value<0||this.value>1){this.value=1}l.paint.linearGradient.setAttribute("x2",this.value);M.setAttribute("x",E+w*this.value-j)});var P=l.paint.linearGradient.getAttribute("y2");if(!P){P="0.0"}y2Input=$("#"+H+"_jGraduate_y2");y2Input.val(P);y2Input.change(function(){if(isNaN(parseFloat(this.value))||this.value<0||this.value>1){this.value=0}l.paint.linearGradient.setAttribute("y2",this.value);M.setAttribute("y",D+u*this.value-j)});var A=l.paint.linearGradient.getElementsByTagNameNS(ns.svg,"stop");var I=A.length;if(I<2){while(I<2){l.paint.linearGradient.appendChild(document.createElementNS(ns.svg,"stop"));++I}A=l.paint.linearGradient.getElementsByTagNameNS(ns.svg,"stop")}var n=function(T,V){var U=V.offset();var S=(T.pageX-U.left-parseInt(V.css("border-left-width")));if(S>255){S=255}if(S<0){S=0}var R=S-4.5;S/=255;$("#"+H+"_jGraduate_AlphaArrows").css({"margin-left":R});$("#"+H+"_jgraduate_rect").attr("fill-opacity",S);S=parseInt(S*100);$("#"+H+"_jGraduate_OpacityInput").val(S);l.paint.alpha=S};var O=false;$(".jGraduate_Opacity").mousedown(function(R){n(R,$(this));O=true;R.preventDefault()});$(".jGraduate_Opacity").mousemove(function(R){if(O){n(R,$(this));R.preventDefault()}});$(".jGraduate_Opacity").mouseup(function(R){n(R,$(this));O=false;R.preventDefault()});var L=null;var h=-1,f=-1;$(".stop, #color_picker_jGraduate_GradContainer image").mousedown(function(R){L=this;h=R.clientX;f=R.clientY;R.preventDefault()});$("#"+H+"_jgraduate_svg").mousemove(function(T){if(null!=L){var V=T.clientX-h;var S=T.clientY-f;h+=V;f+=S;var R=parseFloat(L.getAttribute("x"))+V;var X=parseFloat(L.getAttribute("y"))+S;if(R<E-j){R=E-j}if(X<D-j){X=D-j}if(R>E+w-j){R=E+w-j}if(X>D+u-j){X=D+u-j}L.setAttribute("x",R);L.setAttribute("y",X);var W=(R-E+j)/w;var U=(X-D+j)/u;if(L.id==(H+"_stop1")){x1Input.val(W);y1Input.val(U);l.paint.linearGradient.setAttribute("x1",W);l.paint.linearGradient.setAttribute("y1",U)}else{x2Input.val(W);y2Input.val(U);l.paint.linearGradient.setAttribute("x2",W);l.paint.linearGradient.setAttribute("y2",U)}T.preventDefault()}});$("#"+H+"_jgraduate_svg").mouseup(function(R){L=null});var J=A[0].getAttribute("stop-color");if(!J){J="#000"}beginColorBox=$("#"+H+"_jGraduate_colorBoxBegin");beginColorBox.css({"background-color":J});var x=A[0].getAttribute("stop-opacity");if(!x){x="1.0"}$("#"+H+"jGraduate_beginOpacity").html((x*100)+"%");var d=A[A.length-1].getAttribute("stop-color");if(!d){d="#000"}endColorBox=$("#"+H+"_jGraduate_colorBoxEnd");endColorBox.css({"background-color":d});var y=A[A.length-1].getAttribute("stop-opacity");if(!y){y="1.0"}$("#"+H+"jGraduate_endOpacity").html((y*100)+"%");$("#"+H+"_jGraduate_colorBoxBegin").click(function(){$("div.jGraduate_LightBox").show();var R=$(this);B=new $.jPicker.Color({hex:J.substr(1),a:(parseFloat(x)*100)});$("#"+H+"_jGraduate_stopPicker").css({left:100,bottom:15}).jPicker({window:{title:"Pick the start color and opacity for the gradient"},images:{clientPath:m.images.clientPath},color:{active:B,alphaSupport:true}},function(S){J="#"+this.settings.color.active.hex;x=this.settings.color.active.a/100;R.css("background",J);$("#"+H+"_jGraduate_beginOpacity").html(parseInt(x*100)+"%");A[0].setAttribute("stop-color",J);A[0].setAttribute("stop-opacity",x);$("div.jGraduate_LightBox").hide();$("#"+H+"_jGraduate_stopPicker").hide()},null,function(){$("div.jGraduate_LightBox").hide();$("#"+H+"_jGraduate_stopPicker").hide()})});$("#"+H+"_jGraduate_colorBoxEnd").click(function(){$("div.jGraduate_LightBox").show();var R=$(this);B=new $.jPicker.Color({hex:d.substr(1),a:(parseFloat(y)*100)});$("#"+H+"_jGraduate_stopPicker").css({left:100,top:15}).jPicker({window:{title:"Pick the end color and opacity for the gradient"},images:{clientPath:m.images.clientPath},color:{active:B,alphaSupport:true}},function(S){d="#"+this.settings.color.active.hex;y=this.settings.color.active.a/100;R.css("background",d);$("#"+H+"_jGraduate_endOpacity").html(parseInt(y*100)+"%");A[1].setAttribute("stop-color",d);A[1].setAttribute("stop-opacity",y);$("div.jGraduate_LightBox").hide();$("#"+H+"_jGraduate_stopPicker").hide()},null,function(){$("div.jGraduate_LightBox").hide();$("#"+H+"_jGraduate_stopPicker").hide()})});K.jPicker({window:{title:m.window.pickerTitle},images:{clientPath:m.images.clientPath},color:{active:new $.jPicker.Color({hex:l.paint.solidColor,a:l.paint.alpha}),alphaSupport:true}},function(R){l.paint.type="solidColor";l.paint.alpha=R.a;l.paint.solidColor=R.hex;l.paint.linearGradient=null;c()},null,function(){i()});$(e+" .jGraduate_tab_color").click(function(){$(e+" .jGraduate_tab_lingrad").removeClass("jGraduate_tab_current");$(e+" .jGraduate_tab_color").addClass("jGraduate_tab_current");s.hide();K.show()});$(e+" .jGraduate_tab_lingrad").click(function(){$(e+" .jGraduate_tab_color").removeClass("jGraduate_tab_current");$(e+" .jGraduate_tab_lingrad").addClass("jGraduate_tab_current");K.hide();s.show()});if(l.paint.type=="linearGradient"){s.show();K.hide();$(e+" .jGraduate_tab_color").removeClass("jGraduate_tab_current");$(e+" .jGraduate_tab_lingrad").addClass("jGraduate_tab_current")}else{K.show();s.hide();$(e+" .jGraduate_tab_color").addClass("jGraduate_tab_current");$(e+" .jGraduate_tab_lingrad").removeClass("jGraduate_tab_current")}l.show()})};
Reference in a new issue View git blame Copy permalink