animarte
Version:
Making the digital world a little more animated place
1 lines • 8.38 kB
JavaScript
!function(i,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e=t();for(var a in e)("object"==typeof exports?exports:i)[a]=e[a]}}(self,(()=>(()=>{"use strict";var i={d:(t,e)=>{for(var a in e)i.o(e,a)&&!i.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:e[a]})},o:(i,t)=>Object.prototype.hasOwnProperty.call(i,t),r:i=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(i,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(i,"__esModule",{value:!0})}},t={};i.r(t),i.d(t,{Animarte:()=>E,animations:()=>e});const e=[{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 a(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 n(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,o,l,c,h,d,m,p,f,v,g,u,b,w,y,S,k=function(i,t,e,a,n){if("m"===a)throw new TypeError("Private method is not writable");if("a"===a&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?i!==t||!n:!t.has(i))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===a?n.call(i,e):n?n.value=e:t.set(i,e),e},z=function(i,t,e,a){if("a"===e&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?i!==t||!a:!t.has(i))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===e?a:"a"===e?a.call(i):a?a.value:t.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),u.set(this,void 0),b.set(this,void 0),w.set(this,void 0),y.set(this,void 0);const{animation:t,variant:e,parentElement:a=window.document.body,options:n={}}=i;k(this,y,new Map,"f"),this.animate({animation:t,variant:e}),this.parentElement=a,n.color&&(this.color=n.color),n.size&&(this.size=n.size),n.speed&&(this.speed=n.speed),void 0!==n.ariaLabel&&k(this,w,n.ariaLabel,"f"),this.show=void 0===n.show||n.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),o.globalSubscribe("globalColor",r),o.globalSubscribe("globalSize",r),o.globalSubscribe("globalSpeed",r)}static set globalColor(i){a(i),k(o,o,i,"f",l),o.globalNotify("globalColor")}static get globalColor(){return z(o,o,"f",l)}static set globalSize(i){n(i),k(o,o,i,"f",c),o.globalNotify("globalSize")}static get globalSize(){return z(o,o,"f",c)}static set globalSpeed(i){r(i),k(o,o,i,"f",h),o.globalNotify("globalSpeed")}static get globalSpeed(){return z(o,o,"f",h)}animate({animation:i,variant:t}){!function(i,t){if(e.every((e=>i!==e.animation&&t!==e.variant)))throw new Error("The animation and the variant passed to Animarte was not recognized.")}(i,t),k(this,m,i,"f"),k(this,p,t,"f"),this.notify("animate")}get animation(){return z(this,m,"f")}get variant(){return z(this,p,"f")}set parentElement(i){k(this,u,i,"f"),this.notify("parentElement")}get parentElement(){return z(this,u,"f")}set color(i){a(i),k(this,f,i,"f"),this.notify("color")}get color(){return z(this,f,"f")}set size(i){n(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,b,i,"f"),this.notify("show")}get show(){return z(this,b,"f")}static globalSubscribe(i,t){z(o,o,"f",d).has(i)?z(o,o,"f",d).set(i,[...z(o,o,"f",d).get(i),t]):z(o,o,"f",d).set(i,[t])}static globalUnsubscribe(i,t){z(o,o,"f",d).has(i)&&(z(o,o,"f",d).get(i).length>1?z(o,o,"f",d).set(i,[...z(o,o,"f",d).get(i).filter((i=>i!==t))]):z(o,o,"f",d).delete(i))}static globalNotify(i,t){z(o,o,"f",d).has(i)&&z(o,o,"f",d).get(i).forEach((i=>{i(t)}))}subscribe(i,t){z(this,y,"f").has(i)?z(this,y,"f").set(i,[...z(this,y,"f").get(i),t]):z(this,y,"f").set(i,[t])}unsubscribe(i,t){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!==t))]):z(this,y,"f").delete(i))}notify(i,t){z(this,y,"f").has(i)&&z(this,y,"f").get(i).forEach((i=>{i(t)}))}_setCSSVariables(i){i.style.setProperty("--animarte-size",this.size??o.globalSize),i.style.setProperty("--animarte-speed",this.speed??o.globalSpeed),i.style.setProperty("--animarte-color",this.color??o.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:t}=e.find((({animation:i,variant:t})=>i===z(this,m,"f")&&t===z(this,p,"f")))??{},a=Array.from(Array(t).keys()).map((()=>`<div class="animarte-${z(this,m,"f")}__element"></div>`));return i.innerHTML=a.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")}`)}}return o=E,m=new WeakMap,p=new WeakMap,f=new WeakMap,v=new WeakMap,g=new WeakMap,u=new WeakMap,b=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,u,"f").appendChild(i)},l={value:"#d2d2d8"},c={value:"4em"},h={value:"2.5s"},d={value:new Map},t})()));