cartflow/dist/CartFlow.mjs

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

var h=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports);var u=h((c,r)=>{(function(o,n){typeof r=="object"&&typeof r.exports=="object"?r.exports=n():typeof define=="function"&&define.amd?define(n):o.CartFlow=n()})(typeof window!="undefined"?window:c,function(){"use strict";class o{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),s=i.getBoundingClientRect(),a=this.cartElement.getBoundingClientRect(),l=window.getComputedStyle(i);Object.assign(e.style,{position:"absolute",top:`${s.top+window.scrollY}px`,left:`${s.left+window.scrollX}px`,width:`${s.width}px`,height:`${s.height}px`,border:l.border,boxShadow:l.boxShadow,filter:l.filter,opacity:.7,zIndex:1e3,pointerEvents:"none"}),document.body.appendChild(e),typeof gsap!="undefined"?gsap.to(e,{duration:this.settings.animationDuration/1e3,x:a.left-s.left+10,y:a.top-s.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:`${a.top+window.scrollY+10}px`,left:`${a.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,s;return(s=(e=this.settings).onCartShake)==null?void 0:s.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 o})});export default u();
//# sourceMappingURL=CartFlow.mjs.map