vue-sparkles
Version:
A Vue component making things a little sparklier
1 lines • 5.57 kB
JavaScript
var VueSparkles=function(e,t){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(t),s={name:"SparkleInstance",props:{size:Number,appliedStyle:Object,color:String,createdAt:Number,appliedKey:String,path:String},mounted:function(){var e=this;window.setTimeout((function(){e.$destroy(),e.$el.parentNode.removeChild(e.$el)}),600)}};function r(e,t,a,n,s,r,i,o,l,d){"boolean"!=typeof i&&(l=o,o=i,i=!1);const c="function"==typeof a?a.options:a;let p;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,s&&(c.functional=!0)),n&&(c._scopeId=n),r?(p=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},c._ssrRegister=p):t&&(p=i?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,o(e))}),p)if(c.functional){const e=c.render;c.render=function(t,a){return p.call(a),e(t,a)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,p):[p]}return a}const i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function o(e){return(e,t)=>function(e,t){const a=i?t.media||"default":e,n=d[a]||(d[a]={ids:new Set,styles:[]});if(!n.ids.has(e)){n.ids.add(e);let a=t.source;if(t.map&&(a+="\n/*# sourceURL="+t.map.sources[0]+" */",a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),n.element||(n.element=document.createElement("style"),n.element.type="text/css",t.media&&n.element.setAttribute("media",t.media),void 0===l&&(l=document.head||document.getElementsByTagName("head")[0]),l.appendChild(n.element)),"styleSheet"in n.element)n.styles.push(a),n.element.styleSheet.cssText=n.styles.filter(Boolean).join("\n");else{const e=n.ids.size-1,t=document.createTextNode(a),s=n.element.childNodes;s[e]&&n.element.removeChild(s[e]),s.length?n.element.insertBefore(t,s[e]):n.element.appendChild(t)}}}(e,t)}let l;const d={};var c=r({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",{key:this.appliedKey,staticClass:"sparkleWrapper",style:this.appliedStyle,attrs:{createdAt:this.createdAt}},[t("svg",{staticClass:"sparkle",attrs:{width:this.size,height:this.size,viewBox:"0 0 160 160",fill:"none"}},[t("path",{attrs:{d:this.path,fill:this.color}})])])},staticRenderFns:[]},(function(e){e&&e("data-v-44b36eaa_0",{source:".sparkleWrapper[data-v-44b36eaa]{position:absolute;pointer-events:none;z-index:2;animation:growAndShrink-data-v-44b36eaa .6s ease-in-out forwards}.sparkleWrapper>svg.sparkle[data-v-44b36eaa]{animation:spin-data-v-44b36eaa .6s linear forwards}@keyframes growAndShrink-data-v-44b36eaa{0%{transform:scale(0)}50%{transform:scale(1)}100%{transform:scale(0)}}@keyframes spin-data-v-44b36eaa{from{transform:rotate(0)}to{transform:rotate(180deg)}}",map:void 0,media:void 0})}),s,"data-v-44b36eaa",!1,void 0,!1,o,void 0,void 0),p=r({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",{ref:"wrapper",staticClass:"vue-sparkles",attrs:{id:"sparkleWrapper"}},[t("div",{staticClass:"sparkleChildWrapper"},[this._t("default")],2)])},staticRenderFns:[]},(function(e){e&&e("data-v-08cca665_0",{source:"#sparkleWrapper[data-v-08cca665]{position:relative;display:inline-block}.sparkleChildWrapper[data-v-08cca665]{position:relative;z-index:2;font-weight:700}",map:void 0,media:void 0})}),{name:"VueSparkles",data:function(){return{instances:[]}},props:{path:[String,Array],color:[String,Array]},methods:{generateSparkle:function(){return{id:String(this.random(1e4,99999)),createdAt:Date.now(),color:this.color,size:this.random(10,20),style:{top:this.random(0,100)+"%",left:this.random(0,100)+"%",zIndex:this.random(1,3)}}},random:function(e,t){return 0===e&&1===t?Math.round(Math.random()):Math.floor(Math.random()*(t-e))+e},addSparkle:function(){var e="M80 0C80 0 84.2846 41.2925 101.496 58.504C118.707 75.7154 160 80 160 80C160 80 118.707 84.2846 101.496 101.496C84.2846 118.707 80 160 80 160C80 160 75.7154 118.707 58.504 101.496C41.2925 84.2846 0 80 0 80C0 80 41.2925 75.7154 58.504 58.504C75.7154 41.2925 80 0 80 0Z";this.customPath&&this.multiplePaths?e=this.path[this.random(0,this.path.length-1)]:this.customPath&&(e=this.path);var t="hsl(50deg, 100%, 50%)";this.customColor&&this.multipleColors?t="hsl("+this.random(parseInt(this.color[0].h),parseInt(this.color[1].h))+"deg, "+this.random(parseInt(this.color[0].s),parseInt(this.color[1].s))+"%, "+this.random(parseInt(this.color[0].l),parseInt(this.color[1].l))+"%)":this.customColor&&(t=this.color);var a=this.$refs.wrapper,s=this.generateSparkle(),r=new(n.default.extend(c))({propsData:{color:t,size:s.size,appliedStyle:s.style,key:s.appliedKey,createdAt:s.createdAt,path:e}});r.$mount(),a.appendChild(r.$el),this.instances.push(r)},tick:function(){this.addSparkle(),window.setTimeout(this.tick,this.random(50,500))}},mounted:function(){this.tick()},computed:{customPath:function(){return null!=this.path},multiplePaths:function(){return Array.isArray(this.path)},customColor:function(){return null!=this.color},multipleColors:function(){return Array.isArray(this.color)}}},"data-v-08cca665",!1,void 0,!1,o,void 0,void 0),h=function(e){h.installed||(h.installed=!0,e.component("VueSparkles",p))},u={install:h},m=null;return"undefined"!=typeof window?m=window.Vue:"undefined"!=typeof global&&(m=global.Vue),m&&m.use(u),p.install=h,e.default=p,e}({},Vue);