@s2ui/justified-gallery/src/index.ts

A justifed gallery by s2ui.

import { computeLayout } from "./computeLayout";
import { renderGallery } from "./renderGallery";
import { JustifiedGalleryOptions } from "./types";

export default function JustifiedGallery(options: JustifiedGalleryOptions) {
  async function updateLayout() {
    const layout = await computeLayout(options);
    renderGallery(layout, options.container);
  }

  // Run layout initially
  updateLayout();

  // Debounced resize event listener
  let resizeTimeout: number | undefined;
  const onResize = () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = window.setTimeout(updateLayout, 200); // Debounce for better performance
  };

  // Attach event listener for window resize
  // window.addEventListener("resize", onResize);

  window.addEventListener("resize", updateLayout); // to get the effect

  // Return a cleanup function in case we need to remove the gallery
  return () => window.removeEventListener("resize", onResize);
}