maz-ui/dist/plugins/aos.js

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

import { e } from "../chunks/isClient.8V3qjGdO.js";
import { n } from "../chunks/sleep.Ci7GE4BQ.js";
const DEFAULT_OPTIONS = {
  delay: 100,
  observer: {
    root: void 0,
    rootMargin: "0px",
    threshold: 0.2
  },
  animation: {
    once: !0,
    duration: 300,
    delay: 0
  }
};
class AosHandler {
  options;
  constructor(options) {
    this.options = {
      delay: options?.delay ?? DEFAULT_OPTIONS.delay,
      observer: {
        ...DEFAULT_OPTIONS.observer,
        ...options?.observer
      },
      animation: {
        ...DEFAULT_OPTIONS.animation,
        ...options?.animation
      }
    };
  }
  // eslint-disable-next-line sonarjs/cognitive-complexity
  handleIntersect(entries, observer) {
    for (const entry of entries) {
      const hasChildren = entry.target.getAttribute("data-maz-aos-children") === "true", animateElements = entry.target.getAttribute("data-maz-aos") ? [entry.target] : [];
      if (hasChildren) {
        const children = [...document.querySelectorAll("[data-maz-aos-anchor]")].map(
          (child) => child.getAttribute("data-maz-aos-anchor") === `#${entry.target.id}` ? child : void 0
        );
        for (const child of children)
          child && animateElements.push(child);
      }
      for (const element of animateElements) {
        const once = element.getAttribute("data-maz-aos-once"), useOnce = typeof once == "string" ? once === "true" : this.options.animation.once;
        if (typeof this.options.observer.threshold == "number" && entry.intersectionRatio > this.options.observer.threshold) {
          const duration = element.getAttribute("data-maz-aos-duration"), delay = element.getAttribute("data-maz-aos-delay"), animationDuration = duration ? Number.parseInt(duration) : this.options.animation.duration, animationDelay = delay ? Number.parseInt(delay) : this.options.animation.delay, totalAnimationTime = animationDuration + animationDelay;
          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(() => {
            const parentAnchor = element.getAttribute("data-maz-aos-anchor");
            if (parentAnchor) {
              const anchorElement = document.querySelector(parentAnchor);
              anchorElement && observer.unobserve(anchorElement);
            }
            observer.unobserve(element);
          }, totalAnimationTime + 100);
        } else useOnce || element.classList.remove("maz-aos-animate");
      }
    }
  }
  async handleObserver() {
    await n(this.options.delay);
    const observer = new IntersectionObserver(this.handleIntersect.bind(this), this.options.observer);
    for (const element of document.querySelectorAll("[data-maz-aos]")) {
      const anchorAttr = element.getAttribute("data-maz-aos-anchor");
      if (anchorAttr) {
        const 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 (e())
      return this.handleObserver();
    console.warn("[MazAos](runAnimations) should be executed on client side");
  }
}
let instance;
const AosPlugin = {
  install: (app, options) => {
    instance = new AosHandler(options), app.provide("mazAos", instance), app.config.globalProperties.$mazAos = instance, e() && (options?.router ? options.router.afterEach(() => {
      instance.runAnimations();
    }) : instance.runAnimations());
  }
};
function getAosInstance() {
  return instance;
}
export {
  AosHandler,
  AosPlugin,
  getAosInstance
};