grapper/dist/module/plugins/animateto.js

Data Visualization Microframework

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