2 lines
10 KiB
JavaScript
2 lines
10 KiB
JavaScript
// SVG Plugin for KUTE.js | dnp_theme | MIT License
|
|
(function(q){if("function"===typeof define&&define.amd)define(["./kute.js"],function(d){q(d);return d});else if("object"==typeof module&&"function"==typeof require){var l=require("./kute.js");module.exports=q(l)}else if("undefined"!==typeof window.KUTE)window.KUTE.svg=window.KUTE.svg||q(l);else throw Error("SVG Plugin require KUTE.js.");})(function(q){var l=window.KUTE,d=l.svg={},m,n=l.dom,r=l.pp,v=(m=document.querySelector("path")||document.querySelector("svg"))&&m.ownerSVGElement&&m.ownerSVGElement.namespaceURI||"http://www.w3.org/2000/svg";q=["strokeWidth","strokeOpacity","fillOpacity","stopOpacity"];var w=["fill","stroke","stopColor"],x=/(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi,p=l.Interpolate.number,y=l.Interpolate.color,z=function(a,b,c,e){var f=[],k;for(k=0;k<c;k++)f.push(a[k]===b[k]?b[k]:p(a[k],b[k],e));return f},A=function(a,b,c,e,f,k){var g=[],d;for(d=0;d<c;d++)g.push(z(a[d],b[d],e,k));return g.join(f)};if(!m||m.ownerSVGElement){d.gPt=function(a){var b={},c="object"===typeof a?a:/^\.|^\#/.test(a)?document.querySelector(a):null;c&&/path|glyph/.test(c.tagName)?(b.e=d.fPt(c),b.o=c.getAttribute("d")):!c&&/[a-z][^a-z]*/ig.test(a)&&(b.e=d.cP(a.trim()),b.o=a);return b};d.pCr=function(a){this._mpr=a._ops.morphPrecision||15;this._midx=a._ops.morphIndex;this._smi=a._ops.showMorphInfo;this._rv1=a._ops.reverseFirstPath;this._rv2=a._ops.reverseSecondPath;var b=d.gOp(a._vS.path.o),c=d.gOp(a._vE.path.o);this._isp=!/[CSQTA]/i.test(b)&&!/[CSQTA]/i.test(c);b=d._pCr(b,c,a._el.parentNode);a._vS.path.d=b[0];a._vE.path.d=b[1]};d._pCr=function(a,b,c){var e,f,k,g,h=[],l,t;this._sp=!1;if(this._isp)if(a=d.pTA(a),b=d.pTA(b),a.length!==b.length){f=Math.max(a.length,b.length);f===b.length?(e=a,a=b):e=b;g=d.cP("M"+e.join("L")+"z");l=g.getTotalLength()/f;for(var m=0;m<f;m++)t=g.getPointAtLength(l*m),t=d.gCP(l,t,e),h.push([t[0],t[1]]);f===b.length?(b=a,e=h):(e=a,b=h)}else e=a;else a=d.cP(a),b=d.cP(b),f=d.gSegs(a,b,this._mpr),e=f[0],b=f[1],f=b.length;this._rv1&&e.reverse();this._rv2&&b.reverse();this._smi&&(k=d.gBi(e,b));this._midx&&(b=b.splice(this._midx,f-this._midx).concat(b));this._smi&&(d.shP(e,b,c),console.log("KUTE.js Path Morph Log\nThe morph used "+f+" points to draw both paths based on "+(this._isp?"the polygon with the most points.\n":(25===this._mpr?"the default":"your")+" morphPrecision value of "+this._mpr+".\n")+(this._midx?"You've configured the morphIndex to "+this._midx+" while the recommended is "+k+".\n":"You may also consider a morphIndex for the second path. Currently the best index seems to be "+k+".\n")+(this._rv1||this._rv2?"You've chosen that the first path to have "+(this._rv1?"REVERSED draw direction, ":"UNCHANGED draw direction, ")+"while second path is to be "+(this._rv2?"REVERSED.\n":"UNCHANGED.\n"):"If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.")));return[e,b]};d.gSegs=function(a,b,c){for(var e=[],f=[],k=a.getTotalLength(),g=b.getTotalLength(),d=0,k=Math.max(k,g)/c*c;(d+=c)<k;)e.push([a.getPointAtLength(d).x,a.getPointAtLength(d).y]),f.push([b.getPointAtLength(d).x,b.getPointAtLength(d).y]);return[e,f]};d.gCP=function(a,b,c){var e,f,k=[],g=c.length;for(h=0;h<g;h++)e=Math.abs(c[h][0]-b.x),f=Math.abs(c[h][1]-b.y),k.push(Math.sqrt(e*e+f*f));e=k.indexOf(Math.min.apply(null,k));f=c[e-1]?e-1:g-1;g=c[e+1]?e+1:0;return Math.abs(c[f][0]-b.x)<a&&Math.abs(c[f][1]-b.y)<a?c[f]:Math.abs(c[g][0]-b.x)<a&&Math.abs(c[g][1]-b.y)<a?c[g]:Math.abs(c[e][0]-b.x)<a&&Math.abs(c[e][1]-b.y)<a?c[e]:[b.x,b.y]};d.shP=function(a,b,c){if(!this._sp){for(var e,f=arguments,k,g,d,h=0;2>h;h++){g=f[h];d=g.length;k=0===h?{f:"DeepPink",o:"HotPink"}:{f:"Lime",o:"LimeGreen"};for(var l=0;l<d;l++)e=document.createElementNS(v,"circle"),e.setAttribute("cx",g[l][0]),e.setAttribute("cy",g[l][1]),e.setAttribute("r",0===l?20:10),e.setAttribute("fill",0===l?k.f:k.o),this._isp?c.appendChild(e):this._isp||0!==l||c.appendChild(e)}this._sp=!0}};d.gBi=function(a,b){var c=d.clone(a),e=d.clone(b),f=[],k,g=b.length,h;for(k=0;k<g;k++)h=e.splice(k,g-k),e=h.concat(e),h=Math.abs(c[k][0]-e[k][0]),e=Math.abs(c[k][1]-e[k][1]),f.push(Math.sqrt(h*h+e*e)),e=d.clone(b);return f.indexOf(Math.min.apply(null,f))};d.gOp=function(a){return a.split(/z/i).shift()+"z"};d.cP=function(a){var b=document.createElementNS(v,"path");a="object"===typeof a?a.getAttribute("d"):a;b.setAttribute("d",a);return b};d.fPt=function(a){if("glyph"===a.tagName){var b=d.cP(a);a.parentNode.appendChild(b);return b}return a};d.clone=function(a){var b;if(a instanceof Array){b=[];for(var c=0,e=a.length;c<e;c++)b[c]=d.clone(a[c]);return b}return a};d.pTA=function(a){a=a.match(x);for(var b=a.length,c,e,f=0,k=0,g=0;g<b;g++)a[g]=a[g],c=a[g][0],e=new RegExp(c+"[^\\d|\\-]*","i"),a[g]=a[g].replace(/(^|[^,])\s*-/g,"$1,-").replace(/(\s+\,|\s|\,)/g,",").replace(e,"").split(","),a[g][0]=parseFloat(a[g][0]),a[g][1]=parseFloat(a[g][1]),0===g?(f+=a[g][0],k+=a[g][1]):(f=a[g-1][0],k=a[g-1][1],/l/i.test(c)?(a[g][0]="l"===c?a[g][0]+f:a[g][0],a[g][1]="l"===c?a[g][1]+k:a[g][1]):/h/i.test(c)?(a[g][0]="h"===c?a[g][0]+f:a[g][0],a[g][1]=k):/v/i.test(c)&&(a[g][0]=f,a[g][1]="v"===c?a[g][0]+k:a[g][0]));return a};l.svq=function(a){a._vE.path&&d.pCr(a);a._vE.svgTransform&&d.sT(a)};l.pp.path=function(a,b,c){"path"in n||(n.path=function(a,b,c,g,d){a.setAttribute("d",1===d?g.o:"M"+A(c.d,g.d,g.d.length,2,"L",d)+"Z")});return d.gPt(b)};l.prS.path=function(a,b,c){return a.getAttribute("d")};d.gDr=function(a,b){var c=/path|glyph/.test(a.tagName)?a.getTotalLength():d.gL(a),e,f;if(b instanceof Object)return b;"string"===typeof b?(b=b.split(/\,|\s/),e=/%/.test(b[0])?d.pc(b[0].trim(),c):parseFloat(b[0]),f=/%/.test(b[1])?d.pc(b[1].trim(),c):parseFloat(b[1])):"undefined"===typeof b&&(e=parseFloat(l.gCS(a,"stroke-dashoffset")),f=l.gCS(a,"stroke-dasharray").split(/\,/),e=0-e,f=parseFloat(f[0])+e||c);return{s:e,e:f,l:c}};d.pc=function(a,b){return parseFloat(a)/100*b};r.draw=function(a,b,c){"draw"in n||(n.draw=function(a,b,c,d,h){b=c.l;var l=p(c.s,d.s,h);c=p(c.e,d.e,h);d=0-l;a.style.strokeDashoffset=d+"px";a.style.strokeDasharray=1>c+d?"0px, "+b+"px":c+d+"px, "+b+"px"});return d.gDr(c,b)};l.prS.draw=function(a,b,c){return d.gDr(a)};d.gL=function(a){if(/rect/.test(a.tagName))return d.gRL(a);if(/circle/.test(a.tagName))return d.gCL(a);if(/ellipse/.test(a.tagName))return d.gEL(a);if(/polygon|polyline/.test(a.tagName))return d.gPL(a);if(/line/.test(a.tagName))return d.gLL(a)};d.gRL=function(a){var b=a.getAttribute("width");a=a.getAttribute("height");return 2*b+2*a};d.gPL=function(a){a=a.getAttribute("points").split(" ");var b=0;if(1<a.length){var c=function(a){a=a.split(",");if(2==a.length&&!isNaN(a[0])&&!isNaN(a[1]))return[parseFloat(a[0]),parseFloat(a[1])]},e=function(a,b){return void 0!=a&&void 0!=b?Math.sqrt(Math.pow(b[0]-a[0],2)+Math.pow(b[1]-a[1],2)):0};if(2<a.length)for(var f=0;f<a.length-1;f++)b+=e(c(a[f]),c(a[f+1]));b+=e(c(a[0]),c(a[a.length-1]))}return b};d.gLL=function(a){var b=a.getAttribute("x1"),c=a.getAttribute("x2"),e=a.getAttribute("y1");a=a.getAttribute("y2");return Math.sqrt(Math.pow(c-b,2)+Math.pow(a-e,2))};d.gCL=function(a){a=a.getAttribute("r");return 2*Math.PI*a};d.gEL=function(a){var b=a.getAttribute("rx");a=a.getAttribute("ry");b*=2;a*=2;return 2*Math.sqrt(.5*(b*b+a*a))*Math.PI/2};for(var h=0,u=w.length;h<u;h++)m=w[h],r[m]=function(a,b){a in n||(n[a]=function(a,b,f,d,g,h){a.style[b]=y(f,d,g,h.keepHex)});return l.truC(b)},l.prS[m]=function(a,b,c){return l.gCS(a,b)||"rgba(0,0,0,0)"};h=0;for(u=q.length;h<u;h++)m=q[h],r[m]="strokeWidth"===m?function(a,b){a in n||(n[a]=function(a,b,f,d,g){a.style[b]="number"!==typeof d?unit(f.value,d.value,d.unit,g):p(f,d,g)});return/px|%|em|vh|vw/.test(b)?r.box(a,b):parseFloat(b)}:function(a,b){a in n||(n[a]=function(a,b,d,h,g){a.style[b]=p(d,h,g)});return parseFloat(b)},l.prS[m]=function(a,b,c){return l.gCS(a,b)||0};r.svgTransform=function(a,b,c){"svgTransform"in n||(n.svgTransform=function(a,b,c,d,f){b="";for(var e in d)b+=e+"(","translate"===e?b+=c[e][1]===d[e][1]&&0===d[e][1]?p(c[e][0],d[e][0],f):p(c[e][0],d[e][0],f)+" "+p(c[e][1],d[e][1],f):"rotate"===e?(b+=p(c[e][0],d[e][0],f)+" ",b+=d[e][1]+","+d[e][2]):b+=p(c[e],d[e],f),b+=") ";a.setAttribute("transform",b.trim())});a={};c=c.getBBox();var d=c.x+c.width/2,f=c.y+c.height/2,k;for(h in b)"rotate"===h?(k=b[h]instanceof Array?b[h]:/\s/.test(b[h])?[1*b[h].split(" ")[0],1*b[h].split(" ")[1].split(",")[0],1*b[h].split(" ")[1].split(",")[1]]:[1*b[h],d,f],a[h]=k):"translate"===h?(k=b[h]instanceof Array?b[h]:/\,|\s/.test(b[h])?b[h].split(/\,|\s/):[1*b[h],0],a[h]=[1*k[0]||0,1*k[1]||0]):"scale"===h?a[h]=1*b[h]||1:/skew/.test(h)&&(a[h]=1*b[h]||0);"scale"in a&&("translate"in a||(a.translate=[0,0]),a.translate[0]+=(1-a.scale)*c.width/2,a.translate[1]+=(1-a.scale)*c.height/2,"rotate"in a&&(a.rotate[1]-="skewX"in a?Math.tan(a.skewX)*c.height:0,a.rotate[2]-="skewY"in a?Math.tan(a.skewY)*c.width:0),a.translate[0]+="skewX"in a?Math.tan(a.skewX)*c.height*2:0,a.translate[1]+="skewY"in a?Math.tan(a.skewY)*c.width*2:0);return a};l.prS.svgTransform=function(a,b,c){b={};var e;a=d.pT(a.getAttribute("transform"));for(e in c)b[e]=e in a?a[e]:"scale"===e?1:0;return b};d.sT=function(a){var b=a._el.getBBox(),c=d.pT(a._el.getAttribute("transform")),e,f,h=b.x+b.width/2,b=b.y+b.height/2;for(f in c)"translate"===f?(e=c[f]instanceof Array?c[f]:/\,|\s/.test(c[f])?c[f].split(/\,|\s/):[1*c[f],0],a._vS.svgTransform[f]=[1*e[0]||0,1*e[1]||0]):"scale"===f?a._vS.svgTransform[f]=1*c[f]||1:"rotate"===f?(e=c[f]instanceof Array?c[f]:/\s/.test(c[f])?[1*c[f].split(" ")[0],1*c[f].split(" ")[1].split(",")[0],1*c[f].split(" ")[1].split(",")[1]]:[1*c[f],h,b],a._vS.svgTransform[f]=e):/skew/.test(f)&&(a._vS.svgTransform[f]=1*c[f]||0);for(f in a._vS.svgTransform)f in a._vE.svgTransform||(a._vE.svgTransform[f]=a._vS.svgTransform[f]),f==="rotate"in a._vS.svgTransform&&"rotate"in a._vE.svgTransform&&(a._vE.svgTransform.rotate[1]=a._vS.svgTransform.rotate[1]=h,a._vE.svgTransform.rotate[2]=a._vS.svgTransform.rotate[2]=b)};d.pT=function(a){a=a&&/\)/.test(a)?a.split(")"):"none";var b,c={},d;if(a instanceof Array)for(b=0;b<a.length;b++)d=a[b].split("("),""!==d[0]&&(c[d[0].replace(/\s/,"")]=d[1]);return c};return d}}); |