@eclipsefdn/revealjs-solstice/plugin/fit-text-plugin.js

A flexible Reveal.js template with Eclipse Design System

export const FitTextPlugin = {
  id: "fit-text-plugin",
  init: (deck) => {
    const fitText = (element) => {
      const slides = element.closest(".slides");
      const slide = element.closest("section");
      if (!slides || !slide) return;

      const children = Array.from(slide.children)
        .flatMap((child) =>
          child.classList.contains("slide-content")
            ? Array.from(child.children)
            : [child]
        )
        .filter((child) => child !== element)
        .filter((child) => !child.classList.contains("column"));

      const otherHeight = children.reduce((total, child) => {
        const style = getComputedStyle(child);
        return (
          total +
          child.scrollHeight +
          parseFloat(style.marginTop || 0) +
          parseFloat(style.marginBottom || 0)
        );
      }, 0);

      let fontSize = parseFloat(getComputedStyle(element).fontSize);
      while (
        element.scrollHeight > slides.clientHeight - otherHeight &&
        fontSize > 8
      ) {
        element.style.fontSize = `${--fontSize}px`;
      }
    };

    const processSlides = (slides) => {
      slides.forEach((slide) =>
        slide.querySelectorAll(".solstice-v-fit-text").forEach(fitText)
      );
    };

    deck.on("ready", (event) =>
      processSlides(
        event.currentSlide ? [event.currentSlide] : deck.getSlides()
      )
    );
    deck.on(
      "slidechanged",
      (event) => event.currentSlide && processSlides([event.currentSlide])
    );
  },
};