vue-blotter/dist/vue-blotter.min.js

A Blotter.js Vue component

var VueBlotter=function(t){"use strict";var e=function(t,e,i,n,o,r,s,a,l,d){"boolean"!=typeof s&&(l=a,a=s,s=!1);var u,p="function"==typeof i?i.options:i;if(t&&t.render&&(p.render=t.render,p.staticRenderFns=t.staticRenderFns,p._compiled=!0,o&&(p.functional=!0)),n&&(p._scopeId=n),r?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},p._ssrRegister=u):e&&(u=s?function(){e.call(this,d(this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),u)if(p.functional){var f=p.render;p.render=function(t,e){return u.call(e),f(t,e)}}else{var c=p.beforeCreate;p.beforeCreate=c?[].concat(c,u):[u]}return i}({},void 0,{name:"VueBlotter",props:{autoplay:{type:Boolean,default:!0},checkInViewport:{type:Boolean,default:!0},text:{type:String,default:"Blotter"},family:{type:String,default:"serif"},size:{type:Number,default:120},fill:{type:String,default:"#171717"},textStyle:{type:String,default:"normal"},weight:{type:Number,default:400},padding:{type:Number,default:0},paddingTop:{type:Number,default:0},paddingRight:{type:Number,default:0},paddingBottom:{type:Number,default:0},paddingLeft:{type:Number,default:0},materialType:{type:String,required:!0},uniforms:{type:Object,default:function(){}}},data:function(){return{blotter:{},scope:{},intersecting:null}},mounted:function(){this.initBlotter(),this.checkInViewport&&this.checkIntersection()},beforeDestroy:function(){this.blotter.stop()},watch:{intersecting:function(t){t?this.scope.play():this.scope.pause()}},methods:{initBlotter:function(){if(!this.materialType)throw new Error("Material type prop is required. Refer to https://github.com/arapl3y/vue-blotter#configuration-options");var t=this.setBlotterText({text:this.text,family:this.family,size:this.size,fill:this.fill,textStyle:this.textStyle,weight:this.weight,padding:this.padding,paddingTop:this.paddingTop,paddingRight:this.paddingRight,paddingBottom:this.paddingBottom,paddingLeft:this.paddingLeft}),e=this.setBlotterMaterial(this.materialType);this.uniforms&&0!==Object.keys(this.uniforms).length&&this.setBlotterUniforms(e,this.uniforms),this.blotter=this.renderBlotter(e,t),this.setBlotterScope(this.blotter,t,this.$el)},setBlotterText:function(t){var e=t.text,i=t.textStyle,n=function(t,e){var i={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&-1===e.indexOf(n)&&(i[n]=t[n]);return i}(t,["text","textStyle"]);return new Blotter.Text(e,Object.assign({},{style:i},n))},setBlotterMaterial:function(t){return new Blotter[t]},setBlotterUniforms:function(t,e){for(var i in e)t.uniforms[i].value=e[i]},renderBlotter:function(t,e){return new Blotter(t,{autoplay:this.autoplay,texts:e})},setBlotterScope:function(t,e,i){this.scope=t.forText(e),this.scope.appendTo(i)},pause:function(t){t.pause()},play:function(t){t.play()},checkIntersection:function(){var t=this;new IntersectionObserver(function(e){e.forEach(function(e){e.isIntersecting?t.intersecting=!0:t.intersecting=!1})},{threshold:.3}).observe(this.$el)}},render:function(){return this.$scopedSlots.default({blotterScope:this.scope,intersecting:this.intersecting})}},void 0,void 0,void 0,void 0,void 0);function i(t){i.installed||(i.installed=!0,t.component("VueBlotter",e))}var n={install:i},o=null;return"undefined"!=typeof window?o=window.Vue:"undefined"!=typeof global&&(o=global.Vue),o&&o.use(n),e.install=i,t.default=e,t}({});