cartflow/dist/CartFlow.js

A lightweight JavaScript library for creating smooth 'Add to Cart' animations with customizable options, sound effects, and cart shake effects.

(function(a,s){typeof module=="object"&&typeof module.exports=="object"?module.exports=s():typeof define=="function"&&define.amd?define(s):a.CartFlow=s()})(typeof window!="undefined"?window:exports,function(){"use strict";class a{constructor(i={}){if(this.DEFAULTS={cartSelector:".shopping-cart",buttonSelector:".add-to-cart",itemSelector:".item",imageSelector:"img",animationDuration:1e3,easing:"ease-in-out",shakeEffect:!0,soundEffect:null,onComplete:null,onCartShake:null},this.settings={...this.DEFAULTS,...i},this.cartElement=document.querySelector(this.settings.cartSelector),!this.cartElement)throw new Error(`Cart element not found: ${this.settings.cartSelector}`);this.animationQueue=[],this.isAnimating=!1,this.initEventListeners()}initEventListeners(){document.body.addEventListener("click",i=>{let t=i.target.closest(this.settings.buttonSelector);t&&this._handleButtonClick(t)})}_handleButtonClick(i){let t=i.closest(this.settings.itemSelector);if(!t)return;let e=t.querySelector(this.settings.imageSelector);e&&(this.settings.soundEffect&&(typeof this.settings.soundEffect=="string"||this.settings.soundEffect instanceof HTMLAudioElement?this._playSound(this.settings.soundEffect):console.warn("Invalid soundEffect type. Must be a string or an HTMLAudioElement.")),this.animationQueue.push(()=>this._animateImageToCart(e,t)),this.isAnimating||this._processQueue())}_playSound(i){try{let t=typeof i=="string"?new Audio(i):i;t==null||t.play().catch(e=>console.error("Failed to play sound:",e))}catch(t){console.error("Error playing sound:",t)}}_processQueue(){this.animationQueue.length>0&&this.animationQueue.shift()()}_animateImageToCart(i,t){this.isAnimating=!0;let e=i.cloneNode(!0),n=i.getBoundingClientRect(),o=this.cartElement.getBoundingClientRect(),r=window.getComputedStyle(i);Object.assign(e.style,{position:"absolute",top:`${n.top+window.scrollY}px`,left:`${n.left+window.scrollX}px`,width:`${n.width}px`,height:`${n.height}px`,border:r.border,boxShadow:r.boxShadow,filter:r.filter,opacity:.7,zIndex:1e3,pointerEvents:"none"}),document.body.appendChild(e),typeof gsap!="undefined"?gsap.to(e,{duration:this.settings.animationDuration/1e3,x:o.left-n.left+10,y:o.top-n.top+10,width:50,height:50,opacity:0,ease:this.settings.easing,onComplete:()=>{e.remove(),this._finalizeAnimation(t)}}):(Object.assign(e.style,{transition:`all ${this.settings.animationDuration}ms ${this.settings.easing}`}),requestAnimationFrame(()=>{Object.assign(e.style,{top:`${o.top+window.scrollY+10}px`,left:`${o.left+window.scrollX+10}px`,width:"50px",height:"50px",opacity:0})}),setTimeout(()=>{e.remove(),this._finalizeAnimation(t)},this.settings.animationDuration))}_finalizeAnimation(i){var t,e;(e=(t=this.settings).onComplete)==null||e.call(t,i),this.settings.shakeEffect&&this._shakeCart(),this.isAnimating=!1,this._processQueue()}_shakeCart(){var i,t;if(typeof gsap!="undefined")gsap.fromTo(this.cartElement,{x:0},{x:-10,duration:.1,repeat:3,yoyo:!0,onComplete:()=>{var e,n;return(n=(e=this.settings).onCartShake)==null?void 0:n.call(e,this.cartElement)}});else{let e=[{transform:"translateX(0)"},{transform:"translateX(-10px)"},{transform:"translateX(10px)"},{transform:"translateX(0)"}];this.cartElement.animate(e,{duration:300,iterations:1}),(t=(i=this.settings).onCartShake)==null||t.call(i,this.cartElement)}}}return a});
//# sourceMappingURL=CartFlow.js.map