frogtion.min.js

!function(t,e){var i={STATUS_FRAME:{NORMAL:"NORMAL",HOVER:"HOVER",CLICKED:"CLICKED",DISABLED:"DISABLED"},ANIMATION:{SPEED_NORMAL:20}};class s{constructor(){this.frames={},this.rows=0,this.columns=0,this.totalCount=0,this.element=null,this.widthPerFrame=0,this.heightPerFrame=0}static init(){return new s}setWidthPerFrame(t){return this.widthPerFrame=t,this}setHeightPerFrame(t){return this.heightPerFrame=t,this}setRows(t){return this.rows=t,this}setColumns(t){return this.columns=t,this}setTotalCount(t){return this.totalCount=t,this}setFrames(t){return this.frames=t,this}setTitle(t){return this.title=t,this}setTooltip(t){return this.tooltip=t,this}addElement(t){return this.element=e.querySelector(t),this}addFrame(t){this.frames={...this.frames,...t}}getRow(){return this.rows}getColumn(){return this.columns}getTotalCount(){return this.totalCount}getElement(){return this.element}getFrames(){return this.frames}getFramesByName(t){return this.frames[t]}getWidthPerFrame(){return this.widthPerFrame}getHeightPerFrame(){return this.heightPerFrame}getTitle(){return this.title}getTooltip(){return this.tooltip}}class n{constructor(){this.disabled=!1,this.frogtity=null,this.interval=null,this.pointer=0,this.framesSelected={start:0,end:0},this.frameName=i.STATUS_FRAME.NORMAL,this.SPEED_DEFAULT=i.ANIMATION.SPEED_NORMAL,this.tooltip=null,this.title=null}static init(){return new n}setFrogtity(t){return this.frogtity=t,this}addFrameNormal(t){return this.addFrame({name:i.STATUS_FRAME.NORMAL,...t}),this}addFrameHover(t){return this.addFrame({name:i.STATUS_FRAME.HOVER,...t}),this}addFrameClicked(t){return this.addFrame({name:i.STATUS_FRAME.CLICKED,...t}),this}addFrameDisabled(t){return this.addFrame({name:i.STATUS_FRAME.DISABLED,...t}),this}addFrame({name:t,startFrame:e,endFrame:s,endLoopChangeTo:n=i.STATUS_FRAME.NORMAL,loop:r=!0}){return this.frogtity.addFrame({[t]:{start:e,end:s,endLoopChangeTo:n,loop:r}}),this}run(){return this.addEvents(),this.interval=setInterval(()=>this.nextFrame(),this.getSecondsToChange()),this.onRun(),this}onRun(){this.changeAnimateTo(i.STATUS_FRAME.NORMAL),this.addContainer(),this.addTooltip(),this.addTitle()}addContainer(){const t=e.createElement("div");t.classList.add("frogtity-container"),this.frogtity.getElement().appendChild(t),t.style.cssText="\n                width: 100%;\n                height: 100%;\n                position: relative;\n                display: flex;\n                flex-direction: column;\n                justify-content:flex-end;\n                align-items: center;\n                "}addTitle(){if(!this.frogtity.getTitle())return;const t=e.createElement("div");t.innerHTML=this.frogtity.getTitle(),t.classList.add("frogtity-title"),this.frogtity.getElement().children[0].appendChild(t),this.title=t,this.title.style.cssText="\n                text-shadow: -1px 0 2px black, 0 1px 2px black, 1px 0 2px black, 0 -1px 2px black;\n                color: white;\n                font: inherit;\n                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n                font-weight: 600;\n                font-size: 11px;\n                height: 100%;\n                user-select: none;\n                padding-top: 60%;"}addTooltip(){if(!this.frogtity.getTooltip())return;const t=e.createElement("div");t.innerHTML=this.frogtity.getTooltip(),t.classList.add("frogtity-tooltip"),this.frogtity.getElement().children[0].appendChild(t),this.tooltip=t,this.tooltip.style.cssText="\n                background-color: #f0efcf;\n                font: inherit;\n                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n                font-size: 10px;\n                max-width: 100px;\n                min-width: 100px;\n                color: #7a785f;\n                padding: 5px;\n                border: 1px solid #7a785f;\n                text-align: center;\n                transition: all 0.3s ease-in-out;\n                display: none;"}getSecondsToChange(){return this.frogtity.getTotalCount()/this.frogtity.getColumn()*this.SPEED_DEFAULT}nextFrame(){this.increasePointer(),this.pointerIsFinal()&&(this.framesSelected.loop||this.changeFramesTo(this.framesSelected.endLoopChangeTo),this.resetPointer()),this.setFrame(this.pointer)}increasePointer(){this.pointer++}pointerIsFinal(){return this.pointer+1>this.framesSelected.end}setFrame(t){const e=t%this.frogtity.getColumn()*this.frogtity.getWidthPerFrame(),i=Math.floor(t/this.frogtity.getColumn())*this.frogtity.getHeightPerFrame();this.frogtity.getElement().style.backgroundPosition=`-${e}px -${i}px`}addEvents(){this.frogtity.element.addEventListener("mouseover",this.onHover.bind(this)),this.frogtity.element.addEventListener("click",this.onClick.bind(this)),this.frogtity.element.addEventListener("mouseout",this.onMouseOut.bind(this))}onHover(){this.changeToFrameHover()}onClick(){this.changeToFrameClicked()}onMouseOut(){this.changeToFrameNormal()}onDisable(){this.disabled=!0,this.changeToFrameDisabled(),this.resetPointer()}onEnable(){this.disabled=!1,this.changeToFrameNormal(),this.resetPointer()}changeSpeed(t){return this.SPEED_DEFAULT=t,this}changeToFrameNormal(){this.changeFramesTo(i.STATUS_FRAME.NORMAL)}changeToFrameHover(){this.changeFramesTo(i.STATUS_FRAME.HOVER)}changeToFrameClicked(){this.changeFramesTo(i.STATUS_FRAME.CLICKED)}changeToFrameDisabled(){this.changeFramesTo(i.STATUS_FRAME.DISABLED)}changeFramesTo(t){t!==i.STATUS_FRAME.DISABLED&&this.disabled||(this.frogtity.getFrames()[t]&&this.frameName!==t&&this.changeAnimateTo(t),this.tooltip&&(t===i.STATUS_FRAME.HOVER?this.tooltip.style.display="block":this.tooltip.style.display="none"))}changeAnimateTo(t){this.framesSelected=this.frogtity.getFrames()[t],this.frameName=t,this.resetPointer()}resetPointer(){this.pointer=this.framesSelected.start}}void 0===t.CONSTS&&(t.CONSTS=i),void 0===t.Frogtity&&(t.Frogtity=s),void 0===t.Frogtion&&(t.Frogtion=n)}(window,document);