maz-ui/dist/plugins/aos.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import{sleep}from"@maz-ui/utils/helpers/sleep";import{isClient}from"@maz-ui/utils/helpers/isClient";var DEFAULT_OPTIONS={delay:100,observer:{root:void 0,rootMargin:`0px`,threshold:.2},animation:{once:!0,duration:300,delay:0}};var AosHandler=class{options;constructor(options){this.options={delay:options?.delay??DEFAULT_OPTIONS.delay,observer:{...DEFAULT_OPTIONS.observer,...options?.observer},animation:{...DEFAULT_OPTIONS.animation,...options?.animation}}}handleIntersect(entries,observer){for(let entry of entries){let hasChildren=entry.target.getAttribute(`data-maz-aos-children`)===`true`;let animateElements=entry.target.getAttribute(`data-maz-aos`)?[entry.target]:[];if(hasChildren){let children=Array.from(document.querySelectorAll(`[data-maz-aos-anchor]`),child=>child.getAttribute(`data-maz-aos-anchor`)===`#${entry.target.id}`?child:void 0);for(let child of children)child&&animateElements.push(child)}for(let element of animateElements){let once=element.getAttribute(`data-maz-aos-once`);let useOnce=typeof once==`string`?once===`true`:this.options.animation.once;if(typeof this.options.observer.threshold==`number`&&entry.intersectionRatio>this.options.observer.threshold){let duration=element.getAttribute(`data-maz-aos-duration`);let delay=element.getAttribute(`data-maz-aos-delay`);let totalAnimationTime=(duration?Number.parseInt(duration):this.options.animation.duration)+(delay?Number.parseInt(delay):this.options.animation.delay);duration||(element.style.transitionDuration=`${this.options.animation.duration}ms`),delay||(element.style.transitionDelay=`${this.options.animation.delay}ms`),element.classList.add(`maz-aos-animate`),useOnce&&setTimeout(()=>{let parentAnchor=element.getAttribute(`data-maz-aos-anchor`);if(parentAnchor){let anchorElement=document.querySelector(parentAnchor);anchorElement&&observer.unobserve(anchorElement)}observer.unobserve(element)},totalAnimationTime+100)}else useOnce||element.classList.remove(`maz-aos-animate`)}}}async handleObserver(){await sleep(this.options.delay);let observer=new IntersectionObserver(this.handleIntersect.bind(this),this.options.observer);for(let element of document.querySelectorAll(`[data-maz-aos]`)){let anchorAttr=element.getAttribute(`data-maz-aos-anchor`);if(anchorAttr){let anchorElement=document.querySelector(anchorAttr);anchorElement?(anchorElement.setAttribute(`data-maz-aos-children`,`true`),observer.observe(anchorElement)):console.warn(`[maz-ui](aos) no element found with selector "${anchorAttr}"`)}else observer.observe(element)}}runAnimations(){if(isClient())return this.handleObserver();console.warn(`[MazAos](runAnimations) should be executed on client side`)}};var instance;var AosPlugin={install:(app,options)=>{instance=new AosHandler(options),app.provide(`mazAos`,instance),app.config.globalProperties.$mazAos=instance,isClient()&&(options?.router?options.router.afterEach(()=>{instance.runAnimations()}):instance.runAnimations())}};function getAosInstance(){return instance}export{AosHandler,AosPlugin,getAosInstance};