@eli5/vue-glitched/dist/index.js

Vue glitched text component

module.exports=function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="https://github.com/eli5-amsterdam/glitched-text#readme/",e(e.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";function i(t){n(2)}Object.defineProperty(e,"__esModule",{value:!0});var r=n(4),o=n(6),a=n(3),s=i,l=a(r.a,o.a,!1,s,null,null);e.default=l.exports},function(t,e){},function(t,e){t.exports=function(t,e,n,i,r,o){var a,s=t=t||{},l=typeof t.default;"object"!==l&&"function"!==l||(a=t,s=t.default);var d="function"==typeof s?s.options:s;e&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0),n&&(d.functional=!0),r&&(d._scopeId=r);var c;if(o?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=c):i&&(c=i),c){var u=d.functional,f=u?d.render:d.beforeCreate;u?(d._injectStyles=c,d.render=function(t,e){return c.call(e),f(t,e)}):d.beforeCreate=f?[].concat(f,c):[c]}return{esModule:a,exports:s,options:d}}},function(t,e,n){"use strict";var i=n(5);n.n(i);e.a={name:"glitched-text",props:{text:{type:[Number,String],default:null},color:{type:[Number,String],default:null},fontSize:{type:Number,default:24}},computed:{glitchStyles:function(){return this.color&&this.fontSize?{color:""+this.color,fontSize:this.fontSize+"px"}:this.color?{color:""+this.color}:this.fontSize?{fontSize:this.fontSize+"px"}:void 0}}}},function(t,e){!function(t,e){"use strict";function n(t,n){var i=null,r=null,o=null;if("string"==typeof t&&(i=e.getElementById(t.split("#")[1])),!i)return void console.error("Grained: cannot find the element with id "+t);r=i.id,"absolute"!==i.style.position&&(i.style.position="relative"),i.style.overflow="hidden";var a=["","-moz-","-o-animation-","-webkit-","-ms-"],s={animate:!0,patternWidth:100,patternHeight:100,grainOpacity:.1,grainDensity:1,grainWidth:1,grainHeight:1,grainChaos:.5,grainSpeed:20};Object.keys(n).forEach(function(t){s[t]=n[t]});for(var l=function(){var t=e.createElement("canvas"),n=t.getContext("2d");t.width=s.patternWidth,t.height=s.patternHeight;for(var i=0;i<s.patternWidth;i+=s.grainDensity)for(var r=0;r<s.patternHeight;r+=s.grainDensity){var o=256*Math.random()|0;n.fillStyle="rgba("+[o,o,o,s.grainOpacity].join()+")",n.fillRect(i,r,s.grainWidth,s.grainHeight)}return t.toDataURL("image/png")}(),d="",c=["0%:-10%,10%","10%:-25%,0%","20%:-30%,10%","30%:-30%,30%","40%::-20%,20%","50%:-15%,10%","60%:-20%,20%","70%:-5%,20%","80%:-25%,5%","90%:-30%,25%","100%:-10%,10%"],u=a.length;u--;){d+="@"+a[u]+"keyframes grained{";for(var f=0;f<c.length;f++){var p=c[f].split(":");d+=p[0]+"{",d+=a[u]+"transform:translate("+p[1]+");",d+="}"}d+="}"}var h=e.getElementById("grained-animation");h&&h.parentElement.removeChild(h);var g=e.createElement("style");g.type="text/css",g.id="grained-animation",g.innerHTML=d,e.body.appendChild(g);var m=e.getElementById("grained-animation-"+r);m&&m.parentElement.removeChild(m),g=e.createElement("style"),g.type="text/css",g.id="grained-animation-"+r,e.body.appendChild(g);var v="background-image: url("+l+");";if(v+='position: absolute;content: "";height: 300%;width: 300%;left: -100%;top: -100%;',u=a.length,s.animate)for(;u--;)v+=a[u]+"animation-name:grained;",v+=a[u]+"animation-iteration-count: infinite;",v+=a[u]+"animation-duration: "+s.grainChaos+"s;",v+=a[u]+"animation-timing-function: steps("+s.grainSpeed+", end);";o="#"+r+"::before",function(t,e,n,i){var r="";r=e.length?e+"{"+n+"}":n,"insertRule"in t?t.insertRule(r,i):"addRule"in t&&t.addRule(e,n,i)}(g.sheet,o,v)}t.grained=n}(window,document)},function(t,e,n){"use strict";var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"glitch-wrapper",style:{height:t.fontSize+"px"}},[n("div",{staticClass:"glitch",style:[t.glitchStyles],attrs:{"data-text":t.text},domProps:{innerHTML:t._s(t.text)}})])},r=[],o={render:i,staticRenderFns:r};e.a=o}]);