vue-marquee-text-component/docs/js/app.5c388335.js

[CSS GPU Animation] Marquee Text for vuejs

(function(e){function t(t){for(var s,r,o=t[0],i=t[1],u=t[2],d=0,b=[];d<o.length;d++)r=o[d],Object.prototype.hasOwnProperty.call(n,r)&&n[r]&&b.push(n[r][0]),n[r]=0;for(s in i)Object.prototype.hasOwnProperty.call(i,s)&&(e[s]=i[s]);l&&l(t);while(b.length)b.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,t=0;t<c.length;t++){for(var a=c[t],s=!0,o=1;o<a.length;o++){var i=a[o];0!==n[i]&&(s=!1)}s&&(c.splice(t--,1),e=r(r.s=a[0]))}return e}var s={},n={app:0},c=[];function r(t){if(s[t])return s[t].exports;var a=s[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,r),a.l=!0,a.exports}r.m=e,r.c=s,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)r.d(a,s,function(t){return e[t]}.bind(null,s));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/vue-marquee-text-component/";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],i=o.push.bind(o);o.push=t,o=o.slice();for(var u=0;u<o.length;u++)t(o[u]);var l=i;c.push([0,"chunk-vendors"]),a()})({0:function(e,t,a){e.exports=a("56d7")},"0e19":function(e,t,a){var s=a("e701");s.__esModule&&(s=s.default),"string"===typeof s&&(s=[[e.i,s,""]]),s.locals&&(e.exports=s.locals);var n=a("499e").default;n("37d9498a",s,!0,{sourceMap:!1,shadowMode:!1})},1950:function(e,t,a){var s=a("24fb");t=s(!1),t.push([e.i,".marquee-text-wrap{overflow:hidden}.marquee-text-content{width:100000px}.marquee-text-text{-webkit-animation-name:marquee-text-animation;animation-name:marquee-text-animation;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;float:left}.marquee-text-paused .marquee-text-text{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes marquee-text-animation{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes marquee-text-animation{0%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}",""]),t.locals={wrap:"marquee-text-wrap",content:"marquee-text-content",text:"marquee-text-text",animation:"marquee-text-animation",paused:"marquee-text-paused"},e.exports=t},"56d7":function(e,t,a){"use strict";a.r(t);a("e623"),a("e379"),a("5dc8"),a("37e1");var s=a("7a23"),n={id:"app"},c=Object(s["d"])('<div class="bg-light py-5"><header class="container"><ul class="nav float-right"><li><a class="btn btn-primary btn-sm" href="https://github.com/EvodiaAut/vue-marquee-text-component" target="_blank"> Github </a></li></ul><h1>vue-marquee-text-component</h1><p class="lead"> [<a href="https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/" target="_blank">CSS GPU Animation</a>] Marquee Text for vuejs </p><div class="d-flex flex-wrap"><a href="https://www.npmjs.com/package/vue-marquee-text-component" target="_blank"><img class="m-1" src="https://img.shields.io/npm/v/vue-marquee-text-component.svg?style=for-the-badge" alt="vue-marquee-text-component npm"></a><a href="https://github.com/EvodiaAut/vue-marquee-text-component/blob/master/LICENSE.md" target="_blank"><img class="m-1" src="https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge" alt="vue-marquee-text-component license"></a><a href="https://www.npmjs.com/package/vue-marquee-text-component" target="_blank"><img class="m-1" src="https://img.shields.io/npm/dt/vue-marquee-text-component.svg?style=for-the-badge" alt="vue-marquee-text-component npm"></a></div></header></div>',1),r={class:"container",role:"main"},o=Object(s["d"])('<section class="my-4"><h2 class="mb-3"> Props </h2><div class="table-responsive"><table class="table table-sm"><thead><tr><th scope="col"> Name </th><th scope="col"> Description </th><th scope="col"> Config </th></tr></thead><tbody><tr><th scope="row"> duration </th><td>Animation Duration</td><td><code>{ type: Number, default: 15 }</code></td></tr><tr><th scope="row"> repeat </th><td>Number of repeat the Slot <b>(It&#39;s important for to short content)</b></td><td><code>{ type: Number, default: 2 }</code></td></tr><tr><th scope="row"> paused </th><td>The property specifies whether the animation is running or paused</td><td><code>{ type: Boolean, default: false }</code></td></tr><tr><th scope="row"> reverse </th><td>The animation plays backwards each cycle</td><td><code>{ type: Boolean, default: false }</code></td></tr></tbody></table></div></section>',1),i={class:"my-4"},u={class:"mb-3"},l=Object(s["e"])(" Demo "),d=Object(s["c"])("small",null,"with test data",-1),b=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,38%",-1),p=Object(s["e"])(" ATX "),m=Object(s["c"])("span",{class:"badge badge-danger ml-2"},"0,16%",-1),f=Object(s["e"])(" DAX "),g=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,04%",-1),j=Object(s["e"])(" TecDax "),O=Object(s["c"])("span",{class:"badge badge-danger ml-2"},"0,19%",-1),h=Object(s["e"])(" MDAX "),v=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,03%",-1),y=Object(s["e"])(" ESTX50 "),w=Object(s["c"])("span",{class:"badge badge-info ml-2"},"0,00%",-1),x=Object(s["e"])(" NIKKEI "),q=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,03%",-1),k=Object(s["e"])(" EUR/CHF "),_=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,38%",-1),T=Object(s["e"])(" ATX "),M=Object(s["c"])("span",{class:"badge badge-danger ml-2"},"0,16%",-1),P=Object(s["e"])(" DAX "),X=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,04%",-1),E=Object(s["e"])(" TecDax "),A=Object(s["c"])("span",{class:"badge badge-danger ml-2"},"0,19%",-1),D=Object(s["e"])(" MDAX "),S=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,03%",-1),N=Object(s["e"])(" ESTX50 "),I=Object(s["c"])("span",{class:"badge badge-info ml-2"},"0,00%",-1),C=Object(s["e"])(" NIKKEI "),K=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,03%",-1),R=Object(s["e"])(" EUR/CHF "),B=Object(s["e"])(" Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. "),U={class:"my-4"},$=Object(s["c"])("h4",{class:"mb-3"}," Listening to Events: Example - Stop on mouse hover ",-1),F=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,38%",-1),H=Object(s["e"])(" ATX "),L=Object(s["c"])("span",{class:"badge badge-danger ml-2"},"0,16%",-1),G=Object(s["e"])(" DAX "),J=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,04%",-1),z=Object(s["e"])(" TecDax "),Q=Object(s["c"])("span",{class:"badge badge-danger ml-2"},"0,19%",-1),V=Object(s["e"])(" MDAX "),W=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,03%",-1),Y=Object(s["e"])(" ESTX50 "),Z=Object(s["c"])("span",{class:"badge badge-info ml-2"},"0,00%",-1),ee=Object(s["e"])(" NIKKEI "),te=Object(s["c"])("span",{class:"badge badge-success ml-2"},"0,03%",-1),ae=Object(s["e"])(" EUR/CHF "),se={class:"my-4"},ne=Object(s["c"])("h4",{class:"mb-3"}," To small content ",-1),ce=Object(s["c"])("p",{class:"font-weight-bold mb-0"},[Object(s["e"])(" use prop "),Object(s["c"])("code",null,'{ :repeat="NUMBER" }'),Object(s["e"])(" when you know the content is not wider than parent ")],-1),re=Object(s["c"])("p",{class:"font-italic"}," Default we clone default slot two times ",-1),oe=Object(s["c"])("span",{class:"badge badge-success"},"START",-1),ie=Object(s["e"])(" Short text =( "),ue=Object(s["c"])("span",{class:"badge badge-danger"},"END",-1),le=Object(s["e"])(" after add prop "),de=Object(s["c"])("code",{class:"font-weight-bold"},'{ :repeat="10" }',-1),be=Object(s["c"])("span",{class:"badge badge-success"},"START",-1),pe=Object(s["e"])(" Short text =( "),me=Object(s["c"])("span",{class:"badge badge-danger"},"END",-1);function fe(e,t,a,fe,ge,je){var Oe=Object(s["l"])("MarqueeText");return Object(s["j"])(),Object(s["b"])("div",n,[c,Object(s["c"])("main",r,[o,Object(s["c"])("section",i,[Object(s["c"])("h3",u,[l,d,Object(s["c"])("button",{class:Object(s["i"])([{active:e.isPaused},"btn btn-sm btn-outline-primary ml-2"]),type:"button",onClick:t[0]||(t[0]=function(t){return e.isPaused=!e.isPaused})}," Pause ",2)]),Object(s["f"])(Oe,{duration:45,repeat:3,paused:e.isPaused,class:"py-2 bg-dark text-white"},{default:Object(s["m"])((function(){return[b,p,m,f,g,j,O,h,v,y,w,x,q,k]})),_:1},8,["paused"]),Object(s["f"])(Oe,{duration:3,repeat:3,paused:e.isPaused,class:"py-2 bg-dark text-white mt-2"},{default:Object(s["m"])((function(){return[_,T,M,P,X,E,A,D,S,N,I,C,K,R]})),_:1},8,["paused"]),Object(s["f"])(Oe,{duration:20,paused:e.isPaused,reverse:"",class:"py-2 mt-2 bg-light"},{default:Object(s["m"])((function(){return[B]})),_:1},8,["paused"])]),Object(s["c"])("section",U,[$,Object(s["f"])(Oe,{repeat:3,paused:e.isPaused,class:"py-2 bg-dark text-white mt-2",onMouseenter:t[1]||(t[1]=function(t){return e.isPaused=!e.isPaused}),onMouseleave:t[2]||(t[2]=function(t){return e.isPaused=!1})},{default:Object(s["m"])((function(){return[F,H,L,G,J,z,Q,V,W,Y,Z,ee,te,ae]})),_:1},8,["paused"])]),Object(s["c"])("section",se,[ne,ce,re,Object(s["f"])(Oe,{duration:1},{default:Object(s["m"])((function(){return[oe,ie,ue]})),_:1}),le,de,Object(s["f"])(Oe,{duration:1,repeat:10},{default:Object(s["m"])((function(){return[be,pe,me]})),_:1})])])])}a("a9e3"),a("38cf"),a("cb29");var ge={name:"MarqueeText",props:{duration:{type:Number,default:15},repeat:{type:Number,default:2,validator:function(e){return e>0}},paused:{type:Boolean,default:!1},reverse:{type:Boolean,default:!1}},render:function(e){var t=e.$slots,a=e.$style,n=e.$props,c=n.duration,r=n.repeat,o=n.paused,i=n.reverse;return Object(s["h"])("div",{class:[a.wrap]},[Object(s["h"])("div",{class:[o?a.paused:void 0,a.content]},Array(r).fill(Object(s["h"])("div",{class:a.text,style:{animationDuration:"".concat(c,"s"),animationDirection:i?"reverse":void 0}},t.default())))])}},je=a("c45f"),Oe=a("6b0d"),he=a.n(Oe);const ve={};ve["$style"]=je["default"];const ye=he()(ge,[["__cssModules",ve]]);var we=ye,xe=Object(s["g"])({name:"App",components:{MarqueeText:we},setup:function(){return{isPaused:Object(s["k"])(!1)}}});a("c722");const qe=he()(xe,[["render",fe]]);var ke=qe,_e=Object(s["a"])(ke);_e.mount("#app")},c45f:function(e,t,a){"use strict";var s=a("e7b3"),n=a.n(s);a.d(t,"default",(function(){return n.a}))},c722:function(e,t,a){"use strict";a("0e19")},e701:function(e,t,a){var s=a("24fb"),n=a("983d");t=s(!1),t.i(n),t.push([e.i,"table code{white-space:nowrap}",""]),e.exports=t},e7b3:function(e,t,a){var s=a("1950");s.__esModule&&(s=s.default),"string"===typeof s&&(s=[[e.i,s,""]]),s.locals&&(e.exports=s.locals);var n=a("499e").default;n("63324679",s,!0,{sourceMap:!1,shadowMode:!1})}});
//# sourceMappingURL=app.5c388335.js.map