@eclipsefdn/revealjs-solstice/plugin/brand-plugin.js

A flexible Reveal.js template with Eclipse Design System

export const BrandPlugin = {
  id: "brand-plugin",
  init: (deck) => {
    const slides = deck.getSlides();
    const config = deck.getConfig();
    const copyright = config?.brand?.copyright;
    const logoLightSrc = config?.brand?.logo.light;
    const logoDarkSrc = config?.brand?.logo.dark;
    const logoHeight = config?.brand?.logo.height;

    const isLightMode = (config?.brand?.theme || "light") === "light";

    if (!copyright || !logoLightSrc || !logoDarkSrc) return;

    slides.forEach((_, index) => {
      const backgroundElement = deck.getSlideBackground(index);
      const isLightSlide =
        backgroundElement?.classList.contains("light") || isLightMode;
      const isDarkSlide =
        backgroundElement?.classList.contains("dark") || !isLightMode;

      if (
        backgroundElement &&
        !backgroundElement.querySelector(".slide-brand-footer")
      ) {
        const brandDiv = document.createElement("div");
        brandDiv.className = "slide-brand-footer";
        brandDiv.innerHTML = `
          <span class="slide-brand-copyright">${copyright}</span>
          <img src="${logoLightSrc}" style="height: ${logoHeight ?? "auto"};" class="slide-brand-logo-light" alt="Brand Logo" />
          <img src="${logoDarkSrc}" style="height: ${logoHeight ?? "auto"};" class="slide-brand-logo-dark" alt="Brand Logo" />
        `;
        backgroundElement.appendChild(brandDiv);

        if (isLightSlide) backgroundElement.classList.add("slide-brand-light");
        if (isDarkSlide) backgroundElement.classList.add("slide-brand-dark");
      }
    });
  },
};