graphane
Version:
Data Visualization Microframework
1 lines • 3.01 kB
JavaScript
/* graphane - 1.0.1 [module:plugin.animateto] */ var G="function";var H="object",J="string";var x=(r,l)=>typeof r===l;var T=r=>x(r,H),g=r=>x(r,J),$=r=>x(r,G);var b=r=>Array.isArray(r);var j=r=>r.replace(/-([a-z0-9])/g,(l,p)=>p.toUpperCase());var N="animate",V="path",w="d",_="transform",k="rotate",a="translate",I="inherit",L="finished",W=[k,"skewX","skewY"],Y=[a,"width","height","x","y","cx","cy","r","rx","ry","dx","dy"],P=(r,l)=>["text","tspan"].includes(r)&&["x","y"].includes(l),A=!1;if(window.matchMedia){let r=window.matchMedia("(prefers-reduced-motion: reduce)");A=r.matches,r.addEventListener("change",()=>{A=r.matches})}var Z=r=>r.replace(/([A-Z])/g,"-$1").toLowerCase();function q(r,l={duration:200},p=null,y=null){let C=this.gSVG,D=t=>{let e=T(t)?{...t}:{duration:t};return A&&(e.duration=0),e.fill="none",e},M=t=>{t=b(t)?t:[t];let e=window.getComputedStyle(this._el),n=[],i=new Set;for(let c of t){let s={};for(let f in c){let o=j(f);s[o]=u(c[f],o),!(o in e)||P(this.tagName(),o)?i.add(o):o===w?s.d=`${V}("${s.d}")`:o===_&&(s.transform=F(s.transform))}n.push(s)}return R(i,n),n},S=[],R=(t,e)=>{if(t.size){let n=new KeyframeEffect(null,e).getKeyframes();for(let i of t){let c=C(N).attributeName(i).dur(h.duration+"ms").fill("freeze");if(e.length===1)c.to(e[0][i]);else{let s=[],f=[];for(let o in n){let B=n[o];i in e[o]&&(s.push(B.computedOffset),f.push(e[o][i]))}s[0]!==0&&(s.unshift(0),f.unshift(this[i]()||I)),s[s.length-1]!==1&&(s.push(1),f.push(this[i]()||I)),c.keyTimes(s.join(";")).values(f.join(";"))}S.push(c),c.attachTo(this),c.beginElementAt(h.delay||0)}}},F=t=>{g(t)&&(t=JSON.parse("{"+t.replace(/\s*\(\s*/g,":[").replace(/\s*\)\s*/g,"],").split(/\s*,\s*|\s.*/).join(",").replace(/(\w+):/g,'"$1":').replace(/,$/,"")+"}"));let e="";for(let n in t)if(n===k){let i=O(t[n]);i.length>1&&(e+=`${a}(${u(i[1],a)},${u(i[2],a)}) `),e+=`${n}(${u(i[0],n)}) `,i.length>1&&(e+=`${a}(-${u(i[1],a)},-${u(i[2],a)}) `)}else e+=`${n}(${O(t[n]).map(i=>u(i,n)).join(",")}) `;return e},O=t=>b(t)?t:String(t).split(/\s+|,/),u=(t,e)=>W.includes(e)?t+"deg":Y.includes(e)?t+"px":t,E=t=>g(t)?t.replace(/(deg)|(px)/g,"").trim():t,U=t=>t.replace(/(path\s*\(\s*["'])|(["']\s*\)\s*$)/g,"").trim().replace(/([a-zA-Z])\s*/g,"$1").replace(/\s+/g,","),z=t=>{let e=/translate\((.*)px,(.*)px\) rotate\((.*)deg\) translate\((.*)px,(.*)px\)\s+/,n=e.exec(t);return n&&Number(n[1])===Number(n[4])*-1&&Number(n[2])===Number(n[5])*-1?t=t.replace(e,`rotate(${n[3]}, ${n[1]}, ${n[2]})`):t=E(t),t},h=D(l),m=M(r),d=this._el.animate(m,h);return d.ready.then(()=>$(p)&&p.call(this,d)),d.finished.then(()=>{let t=m[m.length-1];for(let e in t){let n=Z(e);n.startsWith("text-")?this._el.style[e]=t[e]:e!=="offset"&&e in t&&this._el.setAttribute(n,n===w?U(t[e]):n===_?z(t[e]):E(t[e]))}S.forEach(e=>{e[L](!0);let n=this._el.querySelectorAll(N),i=this._el.querySelectorAll(`${N}[${L}]`);n.length===i.length&&n.forEach(c=>c.remove())}),$(y)&&y.call(this,d)}),this}function K(r){r.extendInstance({animateTo:q})}var v=K;export{v as default};