/*! Copyright (c) Safe As Milk. All rights reserved. */import{animate,glide,inView,stagger}from"motion";import{ANIMATION_LOAD,ANIMATION_INTERVAL,ANIMATION_INTERVAL_STYLE}from"store-data";import{debounce}from"utils";const ALLOWED_SETTINGS_KEYS=["amount","delay","displacement","duration","interval","scale","selector"];class Animations{#boundUpdateScrollDelta;#displacement;#duration;#interval;#reducedMotionMediaQuery;#previousScrollPosition;#scrollDelta=0;static#instantiated=!1;constructor(displacement=10,duration=.5,interval=ANIMATION_INTERVAL){if(Animations.#instantiated)throw new Error("Animations instance already exists");Animations.#instantiated=!0,ANIMATION_LOAD&&(this.#reducedMotionMediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),this.#displacement=ANIMATION_INTERVAL_STYLE!=="fade_in"?displacement:0,this.#duration=duration,this.#interval=interval,this.#previousScrollPosition=window.scrollY||document.documentElement.scrollTop,this.#boundUpdateScrollDelta=this.#updateScrollDelta.bind(this),this.setup(),Animations.#revealOnPageLoad(),window.addEventListener("scroll",debounce(this.#boundUpdateScrollDelta,16)),window.addEventListener("scrollend",this.#boundUpdateScrollDelta))}setupSingle(element){if(!ANIMATION_LOAD)return;if(!element)throw new Error("Element must be provided for animation");let amount=element.dataset.animationAmount?Number(element.dataset.animationAmount):0;amount<0?amount=0:amount>=1&&(amount=.99);const settings={delay:element.dataset.animationDelay?parseFloat(element.dataset.animationDelay):0,displacement:(element.dataset.animationDisplacement?Number(element.dataset.animationDisplacement):this.#displacement)*(ANIMATION_INTERVAL_STYLE==="fade_down"?-1:1),duration:element.dataset.animationDuration?parseFloat(element.dataset.animationDuration):this.#duration,scale:element.dataset.animationScale?parseFloat(element.dataset.animationScale):1},transform=`matrix(${settings.scale}, 0, 0, ${settings.scale}, 0, ${settings.displacement})`;element.style.setProperty("opacity",0),element.style.setProperty("transform",transform),inView(element,info=>{const{target}=info,animation=animate(target,{opacity:1,transform:"matrix(1, 0, 0, 1, 0, 0)"},{autoplay:!1,delay:settings.delay,duration:this.#reducedMotionMediaQuery.matches?0:settings.duration,easing:glide()});return animation.play(),animation.finished.then(()=>{target.classList.add("js-animation-done"),target.style.removeProperty("opacity"),target.style.removeProperty("transform")}),element.animations=[{animation,transformSettings:{elements:[target],transform}}],()=>{element.dataset.animationReplay&&(animation.cancel(),target.classList.remove("js-animation-done"),target.style.setProperty("opacity",0),target.style.setProperty("transform",transform))}},{amount})}setupSequence(element){if(!ANIMATION_LOAD)return;if(!element)throw new Error("Element must be provided for animation");let amount=element.dataset.animationAmount?Number(element.dataset.animationAmount):0;amount<0?amount=0:amount>=1&&(amount=.99);const defaultSettings={delay:element.dataset.animationDelay?parseFloat(element.dataset.animationDelay):0,displacement:(element.dataset.animationDisplacement?Number(element.dataset.animationDisplacement):this.#displacement)*(ANIMATION_INTERVAL_STYLE==="fade_down"?-1:1),duration:element.dataset.animationDuration?parseFloat(element.dataset.animationDuration):this.#duration,interval:element.dataset.animationInterval?parseFloat(element.dataset.animationInterval):this.#interval,selector:element.dataset.animationSelector,scale:element.dataset.animationScale?parseFloat(element.dataset.animationScale):1},settings=element.dataset.animation?JSON.parse(element.dataset.animation).reduce((finalSettings,settingsGroup)=>{const filteredSettingsGroup=Object.keys(settingsGroup).filter(key=>ALLOWED_SETTINGS_KEYS.includes(key)).reduce((group,key)=>(group[key]=settingsGroup[key],group),{...defaultSettings});return[...finalSettings,filteredSettingsGroup]},[]):[defaultSettings],elementsTransformsSettings=[];settings.forEach(settingsGroup=>{const elements=settingsGroup.selector?Array.from(element.querySelectorAll(settingsGroup.selector)):Array.from(element.children),transform=`matrix(${settingsGroup.scale}, 0, 0, ${settingsGroup.scale}, 0, ${settingsGroup.displacement})`;elements.forEach(el=>{el.style.setProperty("opacity",0)}),elements.forEach(el=>{el.style.setProperty("transform",transform)}),elementsTransformsSettings.push({elements,transform})}),inView(element,info=>{const{target}=info,animations=[];return settings.forEach((settingsGroup,settingsIndex)=>{const elements=settingsGroup.selector?Array.from(target.querySelectorAll(settingsGroup.selector)):Array.from(target.children),elementsInViewportIndexes=elements.reduce((finalElements,el,index)=>[...finalElements,...Animations.#isElementInViewport(el)?[index]:[]],[]),elementToStaggerFrom=this.#scrollDelta<0?elementsInViewportIndexes[elementsInViewportIndexes.length-1]:elementsInViewportIndexes[0],animation=animate(elements,{opacity:1,transform:"matrix(1, 0, 0, 1, 0, 0)"},{delay:settingsGroup.interval?stagger(settingsGroup.interval,{easing:"linear",from:elementToStaggerFrom,start:settingsGroup.delay}):settingsGroup.delay,duration:this.#reducedMotionMediaQuery.matches?0:settingsGroup.duration,easing:glide()});animation.finished.then(()=>{elements.forEach(el=>{el.classList.add("js-animation-done"),el.style.removeProperty("opacity"),el.style.removeProperty("transform")})}),animations.push({animation,transformSettings:elementsTransformsSettings[settingsIndex]})}),element.animations=animations,()=>{element.dataset.animationReplay&&(element.classList.remove("js-animation-done"),animations.forEach(animation=>{animation.cancel()}),elementsTransformsSettings.forEach(({elements,transform})=>{elements.forEach(el=>{el.classList.remove("js-animation-done"),el.style.setProperty("opacity",0),el.style.setProperty("transform",transform)})}))}},{amount})}setup(rootElement=document){if(ANIMATION_LOAD){if(!rootElement)throw new Error("Element must be provided for animation");rootElement.querySelectorAll(".js-animate-single").forEach(element=>{this.setupSingle(element)}),rootElement.querySelectorAll(".js-animate-sequence").forEach(element=>{this.setupSequence(element)})}}static#revealOnPageLoad(){document.body.classList.add("js-theme-loaded"),document.body.classList.remove("js-theme-loading"),setTimeout(()=>{document.body.classList.remove("js-theme-loaded")},300)}#updateScrollDelta(){const st=window.scrollY||document.documentElement.scrollTop;st>this.#previousScrollPosition?this.#scrollDelta=1:st<this.#previousScrollPosition?this.#scrollDelta=-1:this.#scrollDelta=0,this.#previousScrollPosition=st<=0?0:st}static#isElementInViewport(element,strict=!1,options={}){const rect=element.getBoundingClientRect(),height=window.innerHeight||document.documentElement.clientHeight,width=window.innerWidth||document.documentElement.clientWidth,offset={left:0,right:0,top:0,bottom:0,...options};return strict?rect.top>=-offset.top&&rect.left>=-offset.left&&rect.bottom<=height+offset.bottom&&rect.right<=width+offset.right:rect.right>=-offset.left&&rect.bottom>=-offset.top&&rect.left<=width+offset.right&&rect.top<=height+offset.bottom}static resetAnimations(element){if(!ANIMATION_LOAD||!element||!element.animations||element.dataset.animationReplay)return;const{animations}=element;element.classList.remove("js-animation-done"),animations.forEach(({animation,transformSettings:{elements,transform}})=>{animation.cancel(),elements.forEach(el=>{el.classList.remove("js-animation-done"),el.style.setProperty("opacity",0),el.style.setProperty("transform",transform)})})}static setRevealedState(element){if(ANIMATION_LOAD&&element){if(element.classList.contains("js-animate-single"))element.style.setProperty("opacity",1),element.style.setProperty("transform","matrix(1, 0, 0, 1, 0, 0)");else if(element.classList.contains("js-animate-sequence")){let selector="";if(element.dataset.animationSelector&&(selector=element.dataset.animationSelector),element.dataset.animation){const parsedSettings=JSON.parse(element.dataset.animation);parsedSettings.selector&&(selector=parsedSettings.selector)}(selector?Array.from(element.querySelectorAll(selector)):Array.from(element.children)).forEach(el=>{el.style.setProperty("opacity",1),el.style.setProperty("transform","matrix(1, 0, 0, 1, 0, 0)")})}}}}const PageAnimations=new Animations;export default PageAnimations;export{Animations};
//# sourceMappingURL=/cdn/shop/t/100/assets/animations.js.map?v=108386889977020216841751575323