animarte
Version:
Making the digital world a little more animated place
1 lines • 7.98 kB
JavaScript
var i={d:(a,t)=>{for(var n in t)i.o(t,n)&&!i.o(a,n)&&Object.defineProperty(a,n,{enumerable:!0,get:t[n]})},o:(i,a)=>Object.prototype.hasOwnProperty.call(i,a)},a={};i.d(a,{Y:()=>E,W:()=>t});const t=[{animation:"ellipsis",variant:"agitated",children:3},{animation:"ellipsis",variant:"blinking-1",children:3},{animation:"ellipsis",variant:"blinking-2",children:3},{animation:"ellipsis",variant:"blinking-3",children:3},{animation:"ellipsis",variant:"blinking-4",children:3},{animation:"ellipsis",variant:"blinking-5",children:3},{animation:"ellipsis",variant:"jumping-1",children:3},{animation:"ellipsis",variant:"jumping-2",children:3},{animation:"ellipsis",variant:"one-for-all-1",children:4},{animation:"ellipsis",variant:"one-for-all-2",children:3},{animation:"ellipsis",variant:"orbiting",children:3},{animation:"ellipsis",variant:"pendulum-1",children:3},{animation:"ellipsis",variant:"pendulum-2",children:3},{animation:"ellipsis",variant:"queue",children:3},{animation:"ellipsis",variant:"dancing-1",children:3},{animation:"ellipsis",variant:"dancing-2",children:3},{animation:"ellipsis",variant:"dancing-3",children:3},{animation:"blocks",variant:"rolling",children:3},{animation:"circles",variant:"breathing",children:3},{animation:"windlows",variant:"asymmetrical-circles",children:6},{animation:"semicircle",variant:"growing",children:1},{animation:"paper-plane",variant:"flying-1",children:5},{animation:"blocks",variant:"dancing-1",children:4},{animation:"circles",variant:"pulsing-1",children:5},{animation:"spinner",variant:"classic-1",children:8},{animation:"clock",variant:"crazy-1",children:4},{animation:"graph",variant:"bar-1",children:4},{animation:"lines",variant:"agitated-1",children:1},{animation:"semicircle",variant:"spinning-1",children:1},{animation:"semicircle",variant:"growing-2",children:1},{animation:"ellipsis",variant:"stretching-1",children:3},{animation:"circles",variant:"pulsing-2",children:5},{animation:"lines",variant:"stretching-1",children:5},{animation:"circles",variant:"agitated-1",children:3},{animation:"semicircle",variant:"spinning-2",children:2},{animation:"semicircle",variant:"spinning-3",children:2},{animation:"ellipsis",variant:"growing-1",children:3},{animation:"ellipsis",variant:"growing-2",children:3},{animation:"windlows",variant:"crazy-1",children:10},{animation:"windlows",variant:"crazy-2",children:10},{animation:"windlows",variant:"crazy-3",children:6},{animation:"circles",variant:"rotating-1",children:3},{animation:"circles",variant:"rotating-2",children:3},{animation:"circles",variant:"rotating-3",children:2},{animation:"circles",variant:"rotating-4",children:2},{animation:"blocks",variant:"dancing-2",children:4},{animation:"settings",variant:"gear-1",children:9},{animation:"semicircle",variant:"spinning-4",children:3},{animation:"semicircle",variant:"spinning-5",children:2},{animation:"ellipsis",variant:"dancing-4",children:3}];function n(i){if(!CSS.supports(`color: ${i}`))throw new Error("\n The actual browser does not support value passed to Animarte as a valid \n color value.\n ")}function e(i){if(!CSS.supports(`width: ${i}`))throw new Error("\n The actual browser does not support the value passed to Animarte as a \n valid size value.\n ")}function r(i){if(!CSS.supports(`animation-duration: ${i}`))throw new Error("\n The actual browser does not support value passed to Animarte as a valid \n speed value.\n ")}var s,l,o,c,h,d,m,p,f,v,g,b,u,w,y,S,k=function(i,a,t,n,e){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!e)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof a?i!==a||!e:!a.has(i))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?e.call(i,t):e?e.value=t:a.set(i,t),t},z=function(i,a,t,n){if("a"===t&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof a?i!==a||!n:!a.has(i))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?n:"a"===t?n.call(i):n?n.value:a.get(i)};class E{constructor(i){s.add(this),m.set(this,void 0),p.set(this,void 0),f.set(this,void 0),v.set(this,void 0),g.set(this,void 0),b.set(this,void 0),u.set(this,void 0),w.set(this,void 0),y.set(this,void 0);const{animation:a,variant:t,parentElement:n=window.document.body,options:e={}}=i;k(this,y,new Map,"f"),this.animate({animation:a,variant:t}),this.parentElement=n,e.color&&(this.color=e.color),e.size&&(this.size=e.size),e.speed&&(this.speed=e.speed),void 0!==e.ariaLabel&&k(this,w,e.ariaLabel,"f"),this.show=void 0===e.show||e.show,z(this,s,"m",S).call(this);const r=this._setCSSVariables.bind(this,this.parentElement.querySelector(".animarte"));this.subscribe("color",r),this.subscribe("size",r),this.subscribe("speed",r),l.globalSubscribe("globalColor",r),l.globalSubscribe("globalSize",r),l.globalSubscribe("globalSpeed",r)}static set globalColor(i){n(i),k(l,l,i,"f",o),l.globalNotify("globalColor")}static get globalColor(){return z(l,l,"f",o)}static set globalSize(i){e(i),k(l,l,i,"f",c),l.globalNotify("globalSize")}static get globalSize(){return z(l,l,"f",c)}static set globalSpeed(i){r(i),k(l,l,i,"f",h),l.globalNotify("globalSpeed")}static get globalSpeed(){return z(l,l,"f",h)}animate({animation:i,variant:a}){!function(i,a){if(t.every((t=>i!==t.animation&&a!==t.variant)))throw new Error("The animation and the variant passed to Animarte was not recognized.")}(i,a),k(this,m,i,"f"),k(this,p,a,"f"),this.notify("animate")}get animation(){return z(this,m,"f")}get variant(){return z(this,p,"f")}set parentElement(i){k(this,b,i,"f"),this.notify("parentElement")}get parentElement(){return z(this,b,"f")}set color(i){n(i),k(this,f,i,"f"),this.notify("color")}get color(){return z(this,f,"f")}set size(i){e(i),k(this,v,i,"f"),this.notify("size")}get size(){return z(this,v,"f")}set speed(i){r(i),k(this,g,i,"f"),this.notify("speed")}get speed(){return z(this,g,"f")}set show(i){k(this,u,i,"f"),this.notify("show")}get show(){return z(this,u,"f")}static globalSubscribe(i,a){z(l,l,"f",d).has(i)?z(l,l,"f",d).set(i,[...z(l,l,"f",d).get(i),a]):z(l,l,"f",d).set(i,[a])}static globalUnsubscribe(i,a){z(l,l,"f",d).has(i)&&(z(l,l,"f",d).get(i).length>1?z(l,l,"f",d).set(i,[...z(l,l,"f",d).get(i).filter((i=>i!==a))]):z(l,l,"f",d).delete(i))}static globalNotify(i,a){z(l,l,"f",d).has(i)&&z(l,l,"f",d).get(i).forEach((i=>{i(a)}))}subscribe(i,a){z(this,y,"f").has(i)?z(this,y,"f").set(i,[...z(this,y,"f").get(i),a]):z(this,y,"f").set(i,[a])}unsubscribe(i,a){z(this,y,"f").has(i)&&(z(this,y,"f").get(i).length>1?z(this,y,"f").set(i,[...z(this,y,"f").get(i).filter((i=>i!==a))]):z(this,y,"f").delete(i))}notify(i,a){z(this,y,"f").has(i)&&z(this,y,"f").get(i).forEach((i=>{i(a)}))}_setCSSVariables(i){i.style.setProperty("--animarte-size",this.size??l.globalSize),i.style.setProperty("--animarte-speed",this.speed??l.globalSpeed),i.style.setProperty("--animarte-color",this.color??l.globalColor)}_createHTML(){const i=document.createElement("div");i.setAttribute("role","img"),z(this,w,"f")?i.setAttribute("aria-label",z(this,w,"f")):i.setAttribute("aria-hidden","true");const{children:a}=t.find((({animation:i,variant:a})=>i===z(this,m,"f")&&a===z(this,p,"f")))??{},n=Array.from(Array(a).keys()).map((()=>`<div class="animarte-${z(this,m,"f")}__element"></div>`));return i.innerHTML=n.join(""),i}_styleHTML(i){i.classList.add("animarte"),i.classList.add(`animarte-${z(this,m,"f")}`),i.classList.add(`animarte-${z(this,m,"f")}--${z(this,p,"f")}`)}}l=E,m=new WeakMap,p=new WeakMap,f=new WeakMap,v=new WeakMap,g=new WeakMap,b=new WeakMap,u=new WeakMap,w=new WeakMap,y=new WeakMap,s=new WeakSet,S=function(){const i=this._createHTML();this._setCSSVariables(i),this._styleHTML(i),z(this,b,"f").appendChild(i)},o={value:"#d2d2d8"},c={value:"4em"},h={value:"2.5s"},d={value:new Map};var M=a.Y,C=a.W;export{M as Animarte,C as animations};