why-cant-we-deploy-today/js/controllers/backgrounds.js

import { queryAll } from "../utils/util.js";
import { colorToRgb, colorBrightness } from "../utils/color.js";

/**
 * Creates and updates slide backgrounds.
 */
export default class Backgrounds {
  constructor(Reveal) {
    this.Reveal = Reveal;
  }

  render() {
    this.element = document.createElement("div");
    this.element.className = "backgrounds";
    this.Reveal.getRevealElement().appendChild(this.element);
  }

  /**
   * Creates the slide background elements and appends them
   * to the background container. One element is created per
   * slide no matter if the given slide has visible background.
   */
  create() {
    // Clear prior backgrounds
    this.element.innerHTML = "";
    this.element.classList.add("no-transition");

    // Iterate over all horizontal slides
    this.Reveal.getHorizontalSlides().forEach((slideh) => {
      let backgroundStack = this.createBackground(slideh, this.element);

      // Iterate over all vertical slides
      queryAll(slideh, "section").forEach((slidev) => {
        this.createBackground(slidev, backgroundStack);

        backgroundStack.classList.add("stack");
      });
    });

    // Add parallax background if specified
    if (this.Reveal.getConfig().parallaxBackgroundImage) {
      this.element.style.backgroundImage =
        'url("' + this.Reveal.getConfig().parallaxBackgroundImage + '")';
      this.element.style.backgroundSize =
        this.Reveal.getConfig().parallaxBackgroundSize;
      this.element.style.backgroundRepeat =
        this.Reveal.getConfig().parallaxBackgroundRepeat;
      this.element.style.backgroundPosition =
        this.Reveal.getConfig().parallaxBackgroundPosition;

      // Make sure the below properties are set on the element - these properties are
      // needed for proper transitions to be set on the element via CSS. To remove
      // annoying background slide-in effect when the presentation starts, apply
      // these properties after short time delay
      setTimeout(() => {
        this.Reveal.getRevealElement().classList.add("has-parallax-background");
      }, 1);
    } else {
      this.element.style.backgroundImage = "";
      this.Reveal.getRevealElement().classList.remove(
        "has-parallax-background"
      );
    }
  }

  /**
   * Creates a background for the given slide.
   *
   * @param {HTMLElement} slide
   * @param {HTMLElement} container The element that the background
   * should be appended to
   * @return {HTMLElement} New background div
   */
  createBackground(slide, container) {
    // Main slide background element
    let element = document.createElement("div");
    element.className =
      "slide-background " + slide.className.replace(/present|past|future/, "");

    // Inner background element that wraps images/videos/iframes
    let contentElement = document.createElement("div");
    contentElement.className = "slide-background-content";

    element.appendChild(contentElement);
    container.appendChild(element);

    slide.slideBackgroundElement = element;
    slide.slideBackgroundContentElement = contentElement;

    // Syncs the background to reflect all current background settings
    this.sync(slide);

    return element;
  }

  /**
   * Renders all of the visual properties of a slide background
   * based on the various background attributes.
   *
   * @param {HTMLElement} slide
   */
  sync(slide) {
    const element = slide.slideBackgroundElement,
      contentElement = slide.slideBackgroundContentElement;

    const data = {
      background: slide.getAttribute("data-background"),
      backgroundSize: slide.getAttribute("data-background-size"),
      backgroundImage: slide.getAttribute("data-background-image"),
      backgroundVideo: slide.getAttribute("data-background-video"),
      backgroundIframe: slide.getAttribute("data-background-iframe"),
      backgroundColor: slide.getAttribute("data-background-color"),
      backgroundGradient: slide.getAttribute("data-background-gradient"),
      backgroundRepeat: slide.getAttribute("data-background-repeat"),
      backgroundPosition: slide.getAttribute("data-background-position"),
      backgroundTransition: slide.getAttribute("data-background-transition"),
      backgroundOpacity: slide.getAttribute("data-background-opacity"),
    };

    const dataPreload = slide.hasAttribute("data-preload");

    // Reset the prior background state in case this is not the
    // initial sync
    slide.classList.remove("has-dark-background");
    slide.classList.remove("has-light-background");

    element.removeAttribute("data-loaded");
    element.removeAttribute("data-background-hash");
    element.removeAttribute("data-background-size");
    element.removeAttribute("data-background-transition");
    element.style.backgroundColor = "";

    contentElement.style.backgroundSize = "";
    contentElement.style.backgroundRepeat = "";
    contentElement.style.backgroundPosition = "";
    contentElement.style.backgroundImage = "";
    contentElement.style.opacity = "";
    contentElement.innerHTML = "";

    if (data.background) {
      // Auto-wrap image urls in url(...)
      if (
        /^(http|file|\/\/)/gi.test(data.background) ||
        /\.(svg|png|jpg|jpeg|gif|bmp|webp)([?#\s]|$)/gi.test(data.background)
      ) {
        slide.setAttribute("data-background-image", data.background);
      } else {
        element.style.background = data.background;
      }
    }

    // Create a hash for this combination of background settings.
    // This is used to determine when two slide backgrounds are
    // the same.
    if (
      data.background ||
      data.backgroundColor ||
      data.backgroundGradient ||
      data.backgroundImage ||
      data.backgroundVideo ||
      data.backgroundIframe
    ) {
      element.setAttribute(
        "data-background-hash",
        data.background +
          data.backgroundSize +
          data.backgroundImage +
          data.backgroundVideo +
          data.backgroundIframe +
          data.backgroundColor +
          data.backgroundGradient +
          data.backgroundRepeat +
          data.backgroundPosition +
          data.backgroundTransition +
          data.backgroundOpacity
      );
    }

    // Additional and optional background properties
    if (data.backgroundSize)
      element.setAttribute("data-background-size", data.backgroundSize);
    if (data.backgroundColor)
      element.style.backgroundColor = data.backgroundColor;
    if (data.backgroundGradient)
      element.style.backgroundImage = data.backgroundGradient;
    if (data.backgroundTransition)
      element.setAttribute(
        "data-background-transition",
        data.backgroundTransition
      );

    if (dataPreload) element.setAttribute("data-preload", "");

    // Background image options are set on the content wrapper
    if (data.backgroundSize)
      contentElement.style.backgroundSize = data.backgroundSize;
    if (data.backgroundRepeat)
      contentElement.style.backgroundRepeat = data.backgroundRepeat;
    if (data.backgroundPosition)
      contentElement.style.backgroundPosition = data.backgroundPosition;
    if (data.backgroundOpacity)
      contentElement.style.opacity = data.backgroundOpacity;

    // If this slide has a background color, we add a class that
    // signals if it is light or dark. If the slide has no background
    // color, no class will be added
    let contrastColor = data.backgroundColor;

    // If no bg color was found, or it cannot be converted by colorToRgb, check the computed background
    if (!contrastColor || !colorToRgb(contrastColor)) {
      let computedBackgroundStyle = window.getComputedStyle(element);
      if (computedBackgroundStyle && computedBackgroundStyle.backgroundColor) {
        contrastColor = computedBackgroundStyle.backgroundColor;
      }
    }

    if (contrastColor) {
      const rgb = colorToRgb(contrastColor);

      // Ignore fully transparent backgrounds. Some browsers return
      // rgba(0,0,0,0) when reading the computed background color of
      // an element with no background
      if (rgb && rgb.a !== 0) {
        if (colorBrightness(contrastColor) < 128) {
          slide.classList.add("has-dark-background");
        } else {
          slide.classList.add("has-light-background");
        }
      }
    }
  }

  /**
   * Updates the background elements to reflect the current
   * slide.
   *
   * @param {boolean} includeAll If true, the backgrounds of
   * all vertical slides (not just the present) will be updated.
   */
  update(includeAll = false) {
    let currentSlide = this.Reveal.getCurrentSlide();
    let indices = this.Reveal.getIndices();

    let currentBackground = null;

    // Reverse past/future classes when in RTL mode
    let horizontalPast = this.Reveal.getConfig().rtl ? "future" : "past",
      horizontalFuture = this.Reveal.getConfig().rtl ? "past" : "future";

    // Update the classes of all backgrounds to match the
    // states of their slides (past/present/future)
    Array.from(this.element.childNodes).forEach((backgroundh, h) => {
      backgroundh.classList.remove("past", "present", "future");

      if (h < indices.h) {
        backgroundh.classList.add(horizontalPast);
      } else if (h > indices.h) {
        backgroundh.classList.add(horizontalFuture);
      } else {
        backgroundh.classList.add("present");

        // Store a reference to the current background element
        currentBackground = backgroundh;
      }

      if (includeAll || h === indices.h) {
        queryAll(backgroundh, ".slide-background").forEach((backgroundv, v) => {
          backgroundv.classList.remove("past", "present", "future");

          if (v < indices.v) {
            backgroundv.classList.add("past");
          } else if (v > indices.v) {
            backgroundv.classList.add("future");
          } else {
            backgroundv.classList.add("present");

            // Only if this is the present horizontal and vertical slide
            if (h === indices.h) currentBackground = backgroundv;
          }
        });
      }
    });

    // Stop content inside of previous backgrounds
    if (this.previousBackground) {
      this.Reveal.slideContent.stopEmbeddedContent(this.previousBackground, {
        unloadIframes: !this.Reveal.slideContent.shouldPreload(
          this.previousBackground
        ),
      });
    }

    // Start content in the current background
    if (currentBackground) {
      this.Reveal.slideContent.startEmbeddedContent(currentBackground);

      let currentBackgroundContent = currentBackground.querySelector(
        ".slide-background-content"
      );
      if (currentBackgroundContent) {
        let backgroundImageURL =
          currentBackgroundContent.style.backgroundImage || "";

        // Restart GIFs (doesn't work in Firefox)
        if (/\.gif/i.test(backgroundImageURL)) {
          currentBackgroundContent.style.backgroundImage = "";
          window.getComputedStyle(currentBackgroundContent).opacity;
          currentBackgroundContent.style.backgroundImage = backgroundImageURL;
        }
      }

      // Don't transition between identical backgrounds. This
      // prevents unwanted flicker.
      let previousBackgroundHash = this.previousBackground
        ? this.previousBackground.getAttribute("data-background-hash")
        : null;
      let currentBackgroundHash = currentBackground.getAttribute(
        "data-background-hash"
      );
      if (
        currentBackgroundHash &&
        currentBackgroundHash === previousBackgroundHash &&
        currentBackground !== this.previousBackground
      ) {
        this.element.classList.add("no-transition");
      }

      this.previousBackground = currentBackground;
    }

    // If there's a background brightness flag for this slide,
    // bubble it to the .reveal container
    if (currentSlide) {
      ["has-light-background", "has-dark-background"].forEach(
        (classToBubble) => {
          if (currentSlide.classList.contains(classToBubble)) {
            this.Reveal.getRevealElement().classList.add(classToBubble);
          } else {
            this.Reveal.getRevealElement().classList.remove(classToBubble);
          }
        },
        this
      );
    }

    // Allow the first background to apply without transition
    setTimeout(() => {
      this.element.classList.remove("no-transition");
    }, 1);
  }

  /**
   * Updates the position of the parallax background based
   * on the current slide index.
   */
  updateParallax() {
    let indices = this.Reveal.getIndices();

    if (this.Reveal.getConfig().parallaxBackgroundImage) {
      let horizontalSlides = this.Reveal.getHorizontalSlides(),
        verticalSlides = this.Reveal.getVerticalSlides();

      let backgroundSize = this.element.style.backgroundSize.split(" "),
        backgroundWidth,
        backgroundHeight;

      if (backgroundSize.length === 1) {
        backgroundWidth = backgroundHeight = parseInt(backgroundSize[0], 10);
      } else {
        backgroundWidth = parseInt(backgroundSize[0], 10);
        backgroundHeight = parseInt(backgroundSize[1], 10);
      }

      let slideWidth = this.element.offsetWidth,
        horizontalSlideCount = horizontalSlides.length,
        horizontalOffsetMultiplier,
        horizontalOffset;

      if (
        typeof this.Reveal.getConfig().parallaxBackgroundHorizontal === "number"
      ) {
        horizontalOffsetMultiplier =
          this.Reveal.getConfig().parallaxBackgroundHorizontal;
      } else {
        horizontalOffsetMultiplier =
          horizontalSlideCount > 1
            ? (backgroundWidth - slideWidth) / (horizontalSlideCount - 1)
            : 0;
      }

      horizontalOffset = horizontalOffsetMultiplier * indices.h * -1;

      let slideHeight = this.element.offsetHeight,
        verticalSlideCount = verticalSlides.length,
        verticalOffsetMultiplier,
        verticalOffset;

      if (
        typeof this.Reveal.getConfig().parallaxBackgroundVertical === "number"
      ) {
        verticalOffsetMultiplier =
          this.Reveal.getConfig().parallaxBackgroundVertical;
      } else {
        verticalOffsetMultiplier =
          (backgroundHeight - slideHeight) / (verticalSlideCount - 1);
      }

      verticalOffset =
        verticalSlideCount > 0 ? verticalOffsetMultiplier * indices.v : 0;

      this.element.style.backgroundPosition =
        horizontalOffset + "px " + -verticalOffset + "px";
    }
  }

  destroy() {
    this.element.remove();
  }
}