@mollahdev/marquee/dist/app.umd.cjs

A Simple JavaScript Marquee Package

(function(n,r){typeof exports=="object"&&typeof module<"u"?module.exports=r():typeof define=="function"&&define.amd?define(r):(n=typeof globalThis<"u"?globalThis:n||self,n.app=r())})(this,function(){"use strict";var f=Object.defineProperty;var v=(n,r,c)=>r in n?f(n,r,{enumerable:!0,configurable:!0,writable:!0,value:c}):n[r]=c;var a=(n,r,c)=>(v(n,typeof r!="symbol"?r+"":r,c),c);class n{constructor(e,t){a(this,"start");a(this,"size");a(this,"visibleArea");a(this,"duplicate");a(this,"translate");a(this,"mover");a(this,"wrapper");a(this,"item");a(this,"className");this.scope=e,this.config=t,this.start=performance.now(),this.size=0,this.visibleArea=0,this.duplicate=4,this.translate=new Function("_",'return "translate(0, 0)"')}get speed(){var e;return((e=this.config)==null?void 0:e.duration)*1e3}wrapInner(e,t,i){const s=document.createElement(t),o=e.appendChild(s);for(let h in i)o.setAttribute(h,i[h]);for(;e.firstChild!==s;)s.appendChild(e.firstChild);return o}changeExistingMarkup(){this.className=`direction-${this.config.direction}`,this.item=this.wrapInner(this.scope,"div",{class:"marquee-clone"}),this.mover=this.wrapInner(this.scope,"div",{class:`marquee-mover ${this.className}`}),this.wrapper=this.wrapInner(this.scope,"div",{class:"marquee-wrapper"})}}function r(l,e,t){const i=t.value,s={vertical:["up","down"],horizontal:["left","right"]};t.value=function(){if(s[e]&&this.config){const o=s[e],{direction:h}=this.config;o.includes(h)&&i.apply(this)}}}var c=Object.defineProperty,u=Object.getOwnPropertyDescriptor,d=(l,e,t,i)=>{for(var s=i>1?void 0:i?u(e,t):e,o=l.length-1,h;o>=0;o--)(h=l[o])&&(s=(i?h(e,t,s):h(s))||s);return i&&s&&c(e,t,s),s};class p extends n{constructor(e,t){super(e,t),this.changeExistingMarkup(),this.vertical(),this.horizontal(),this.animate()}vertical(){if(!this.mover||!this.wrapper||!this.item)return;const e=this.scope.clientHeight,t=Math.ceil(e/this.mover.clientHeight);this.duplicate=t>1?t*2:3,this.wrapper.style.maxHeight=e+"px",this.wrapper.style.overflow="hidden";for(let i=1;i<this.duplicate;i++)this.mover.appendChild(this.item.cloneNode(!0));this.size=this.mover.clientHeight,this.visibleArea=this.scope.clientHeight,this.translate=new Function("value","return `translateY(${value}px)`")}horizontal(){if(!this.mover||!this.wrapper||!this.item)return;this.mover.style.display="inline-flex",this.mover.style.alignItems="center";const e=this.scope.clientWidth,t=Math.ceil(e/this.mover.clientWidth);this.duplicate=t>1?t*2:3,this.wrapper.style.maxWidth=e+"px",this.wrapper.style.overflow="hidden";for(let i=1;i<this.duplicate;i++)this.mover.appendChild(this.item.cloneNode(!0));this.size=this.mover.clientWidth,this.visibleArea=this.scope.clientWidth,this.translate=new Function("value","return `translateX(${value}px)`")}moveElement(e){if(!this.config||!this.scope||!this.mover)return;let t="0",i=e*(this.size-this.visibleArea);switch(this.config.direction){case"up":t=`-${i}`;break;case"left":t=`-${i}`;break;case"down":t=`-${this.size-this.visibleArea-i}`;break;case"right":t=`-${this.size-this.visibleArea-i}`;break}this.mover.style.transform=this.translate(t)}animate(){const e=performance.now(),t=Math.min((e-this.start)/this.speed,1);this.moveElement(t),t>=1&&(this.start=performance.now()),requestAnimationFrame(this.animate.bind(this))}}d([r],p.prototype,"vertical",1),d([r],p.prototype,"horizontal",1);class m{constructor(e,t){this.selector=e;const i={direction:"up",duration:30};typeof e=="string"&&document.querySelectorAll(e).forEach(o=>{new p(o,Object.assign(i,t))})}}return m});