eslink-ui-plus/components/scroll/resize-event.ts

vue3 component library, css framework

/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { ElementObj } from "./scroll-interface";

const isServer = typeof window === "undefined";

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const resizeHandler = (
  _mutationsList: MutationRecord[],
  _observer: unknown,
  element: ElementObj
) => {
  const listeners = element.resizeListners || [];
  if (listeners.length) {
    // eslint-disable-next-line @typescript-eslint/ban-types
    listeners.forEach((fn: Function) => fn());
  }
};

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export const addResizeListener = (element: ElementObj, fn: never) => {
  if (isServer) return;
  if (!element.resizeListners) {
    element.resizeListners = [];
    window.addEventListener("resize", fn);
    const mutationObserverSupported = typeof MutationObserver !== "undefined";
    if (mutationObserverSupported) {
      element.observer = new MutationObserver((mutationsList, observer) =>
        resizeHandler(mutationsList, observer, element)
      );
      const config = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true,
      };

      element.observer.observe(element as Node, config);
    }
  }
  element.resizeListners.push(fn);
};

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
// eslint-disable-next-line @typescript-eslint/ban-types
export const removeResizeListener = (element: ElementObj, fn: Function) => {
  if (!element || !element.resizeListners) return;
  element.resizeListners.splice(element.resizeListners.indexOf(fn), 1);
  if (!element.resizeListners.length) {
    element.observer.disconnect();
  }
};