faim/dist/components/FormDialog/highlightError.mjs

Element Plus & Element UI isomorphic UI component library, more than Element.

import elementIsVisible from "./elementIsVisible.mjs";
import "./highlightError.css";
export default (selectors = ".el-form .el-form-item.is-error", container = window) => {
  const scrollIntoView = (element) => {
    element.scrollIntoView({
      behavior: "smooth",
      block: "center"
    });
  };
  const animateCSS = (el, animationName) => new Promise((resolve) => {
    if (el) {
      for (const v of el instanceof NodeList ? Array.from(el) : [el]) {
        v.classList.add("animate__animated", animationName);
        const handleAnimationEnd = () => {
          v.classList.remove("animate__animated", animationName);
          v.removeEventListener("animationend", handleAnimationEnd);
          resolve();
        };
        v.addEventListener("animationend", handleAnimationEnd);
      }
    }
  });
  setTimeout(() => {
    const errFormItems = typeof selectors === "string" ? document.querySelectorAll(selectors) : selectors;
    if (errFormItems.item(0)) {
      if (elementIsVisible(errFormItems.item(0))) {
        animateCSS(errFormItems, "animate__headShake").catch((e) => {
          console.warn(e);
        });
      } else {
        let shake = function() {
          clearTimeout(scrollTimeout);
          scrollTimeout = window.setTimeout(() => {
            animateCSS(errFormItems, "animate__headShake").catch((e) => {
              console.warn(e);
            });
            container.removeEventListener("scroll", shake);
          }, 100);
        };
        let scrollTimeout;
        container.addEventListener("scroll", shake);
        scrollIntoView(errFormItems.item(0));
      }
    }
  }, 0);
};