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

import {
  queryAll,
  extend,
  createStyleSheet,
  matches,
  closest,
} from "../utils/util.js";
import { FRAGMENT_STYLE_REGEX } from "../utils/constants.js";

// Counter used to generate unique IDs for auto-animated elements
let autoAnimateCounter = 0;

/**
 * Automatically animates matching elements across
 * slides with the [data-auto-animate] attribute.
 */
export default class AutoAnimate {
  constructor(Reveal) {
    this.Reveal = Reveal;
  }

  /**
   * Runs an auto-animation between the given slides.
   *
   * @param  {HTMLElement} fromSlide
   * @param  {HTMLElement} toSlide
   */
  run(fromSlide, toSlide) {
    // Clean up after prior animations
    this.reset();

    let allSlides = this.Reveal.getSlides();
    let toSlideIndex = allSlides.indexOf(toSlide);
    let fromSlideIndex = allSlides.indexOf(fromSlide);

    // Ensure that both slides are auto-animate targets with the same data-auto-animate-id value
    // (including null if absent on both) and that data-auto-animate-restart isn't set on the
    // physically latter slide (independent of slide direction)
    if (
      fromSlide.hasAttribute("data-auto-animate") &&
      toSlide.hasAttribute("data-auto-animate") &&
      fromSlide.getAttribute("data-auto-animate-id") ===
        toSlide.getAttribute("data-auto-animate-id") &&
      !(toSlideIndex > fromSlideIndex ? toSlide : fromSlide).hasAttribute(
        "data-auto-animate-restart"
      )
    ) {
      // Create a new auto-animate sheet
      this.autoAnimateStyleSheet =
        this.autoAnimateStyleSheet || createStyleSheet();

      let animationOptions = this.getAutoAnimateOptions(toSlide);

      // Set our starting state
      fromSlide.dataset.autoAnimate = "pending";
      toSlide.dataset.autoAnimate = "pending";

      // Flag the navigation direction, needed for fragment buildup
      animationOptions.slideDirection =
        toSlideIndex > fromSlideIndex ? "forward" : "backward";

      // If the from-slide is hidden because it has moved outside
      // the view distance, we need to temporarily show it while
      // measuring
      let fromSlideIsHidden = fromSlide.style.display === "none";
      if (fromSlideIsHidden)
        fromSlide.style.display = this.Reveal.getConfig().display;

      // Inject our auto-animate styles for this transition
      let css = this.getAutoAnimatableElements(fromSlide, toSlide).map(
        (elements) => {
          return this.autoAnimateElements(
            elements.from,
            elements.to,
            elements.options || {},
            animationOptions,
            autoAnimateCounter++
          );
        }
      );

      if (fromSlideIsHidden) fromSlide.style.display = "none";

      // Animate unmatched elements, if enabled
      if (
        toSlide.dataset.autoAnimateUnmatched !== "false" &&
        this.Reveal.getConfig().autoAnimateUnmatched === true
      ) {
        // Our default timings for unmatched elements
        let defaultUnmatchedDuration = animationOptions.duration * 0.8,
          defaultUnmatchedDelay = animationOptions.duration * 0.2;

        this.getUnmatchedAutoAnimateElements(toSlide).forEach(
          (unmatchedElement) => {
            let unmatchedOptions = this.getAutoAnimateOptions(
              unmatchedElement,
              animationOptions
            );
            let id = "unmatched";

            // If there is a duration or delay set specifically for this
            // element our unmatched elements should adhere to those
            if (
              unmatchedOptions.duration !== animationOptions.duration ||
              unmatchedOptions.delay !== animationOptions.delay
            ) {
              id = "unmatched-" + autoAnimateCounter++;
              css.push(
                `[data-auto-animate="running"] [data-auto-animate-target="${id}"] { transition: opacity ${unmatchedOptions.duration}s ease ${unmatchedOptions.delay}s; }`
              );
            }

            unmatchedElement.dataset.autoAnimateTarget = id;
          },
          this
        );

        // Our default transition for unmatched elements
        css.push(
          `[data-auto-animate="running"] [data-auto-animate-target="unmatched"] { transition: opacity ${defaultUnmatchedDuration}s ease ${defaultUnmatchedDelay}s; }`
        );
      }

      // Setting the whole chunk of CSS at once is the most
      // efficient way to do this. Using sheet.insertRule
      // is multiple factors slower.
      this.autoAnimateStyleSheet.innerHTML = css.join("");

      // Start the animation next cycle
      requestAnimationFrame(() => {
        if (this.autoAnimateStyleSheet) {
          // This forces our newly injected styles to be applied in Firefox
          getComputedStyle(this.autoAnimateStyleSheet).fontWeight;

          toSlide.dataset.autoAnimate = "running";
        }
      });

      this.Reveal.dispatchEvent({
        type: "autoanimate",
        data: {
          fromSlide,
          toSlide,
          sheet: this.autoAnimateStyleSheet,
        },
      });
    }
  }

  /**
   * Rolls back all changes that we've made to the DOM so
   * that as part of animating.
   */
  reset() {
    // Reset slides
    queryAll(
      this.Reveal.getRevealElement(),
      '[data-auto-animate]:not([data-auto-animate=""])'
    ).forEach((element) => {
      element.dataset.autoAnimate = "";
    });

    // Reset elements
    queryAll(
      this.Reveal.getRevealElement(),
      "[data-auto-animate-target]"
    ).forEach((element) => {
      delete element.dataset.autoAnimateTarget;
    });

    // Remove the animation sheet
    if (this.autoAnimateStyleSheet && this.autoAnimateStyleSheet.parentNode) {
      this.autoAnimateStyleSheet.parentNode.removeChild(
        this.autoAnimateStyleSheet
      );
      this.autoAnimateStyleSheet = null;
    }
  }

  /**
   * Creates a FLIP animation where the `to` element starts out
   * in the `from` element position and animates to its original
   * state.
   *
   * @param {HTMLElement} from
   * @param {HTMLElement} to
   * @param {Object} elementOptions Options for this element pair
   * @param {Object} animationOptions Options set at the slide level
   * @param {String} id Unique ID that we can use to identify this
   * auto-animate element in the DOM
   */
  autoAnimateElements(from, to, elementOptions, animationOptions, id) {
    // 'from' elements are given a data-auto-animate-target with no value,
    // 'to' elements are are given a data-auto-animate-target with an ID
    from.dataset.autoAnimateTarget = "";
    to.dataset.autoAnimateTarget = id;

    // Each element may override any of the auto-animate options
    // like transition easing, duration and delay via data-attributes
    let options = this.getAutoAnimateOptions(to, animationOptions);

    // If we're using a custom element matcher the element options
    // may contain additional transition overrides
    if (typeof elementOptions.delay !== "undefined")
      options.delay = elementOptions.delay;
    if (typeof elementOptions.duration !== "undefined")
      options.duration = elementOptions.duration;
    if (typeof elementOptions.easing !== "undefined")
      options.easing = elementOptions.easing;

    let fromProps = this.getAutoAnimatableProperties(
        "from",
        from,
        elementOptions
      ),
      toProps = this.getAutoAnimatableProperties("to", to, elementOptions);

    // Maintain fragment visibility for matching elements when
    // we're navigating forwards, this way the viewer won't need
    // to step through the same fragments twice
    if (to.classList.contains("fragment")) {
      // Don't auto-animate the opacity of fragments to avoid
      // conflicts with fragment animations
      delete toProps.styles["opacity"];

      if (from.classList.contains("fragment")) {
        let fromFragmentStyle = (from.className.match(FRAGMENT_STYLE_REGEX) || [
          "",
        ])[0];
        let toFragmentStyle = (to.className.match(FRAGMENT_STYLE_REGEX) || [
          "",
        ])[0];

        // Only skip the fragment if the fragment animation style
        // remains unchanged
        if (
          fromFragmentStyle === toFragmentStyle &&
          animationOptions.slideDirection === "forward"
        ) {
          to.classList.add("visible", "disabled");
        }
      }
    }

    // If translation and/or scaling are enabled, css transform
    // the 'to' element so that it matches the position and size
    // of the 'from' element
    if (elementOptions.translate !== false || elementOptions.scale !== false) {
      let presentationScale = this.Reveal.getScale();

      let delta = {
        x: (fromProps.x - toProps.x) / presentationScale,
        y: (fromProps.y - toProps.y) / presentationScale,
        scaleX: fromProps.width / toProps.width,
        scaleY: fromProps.height / toProps.height,
      };

      // Limit decimal points to avoid 0.0001px blur and stutter
      delta.x = Math.round(delta.x * 1000) / 1000;
      delta.y = Math.round(delta.y * 1000) / 1000;
      delta.scaleX = Math.round(delta.scaleX * 1000) / 1000;
      delta.scaleX = Math.round(delta.scaleX * 1000) / 1000;

      let translate =
          elementOptions.translate !== false &&
          (delta.x !== 0 || delta.y !== 0),
        scale =
          elementOptions.scale !== false &&
          (delta.scaleX !== 0 || delta.scaleY !== 0);

      // No need to transform if nothing's changed
      if (translate || scale) {
        let transform = [];

        if (translate) transform.push(`translate(${delta.x}px, ${delta.y}px)`);
        if (scale) transform.push(`scale(${delta.scaleX}, ${delta.scaleY})`);

        fromProps.styles["transform"] = transform.join(" ");
        fromProps.styles["transform-origin"] = "top left";

        toProps.styles["transform"] = "none";
      }
    }

    // Delete all unchanged 'to' styles
    for (let propertyName in toProps.styles) {
      const toValue = toProps.styles[propertyName];
      const fromValue = fromProps.styles[propertyName];

      if (toValue === fromValue) {
        delete toProps.styles[propertyName];
      } else {
        // If these property values were set via a custom matcher providing
        // an explicit 'from' and/or 'to' value, we always inject those values.
        if (toValue.explicitValue === true) {
          toProps.styles[propertyName] = toValue.value;
        }

        if (fromValue.explicitValue === true) {
          fromProps.styles[propertyName] = fromValue.value;
        }
      }
    }

    let css = "";

    let toStyleProperties = Object.keys(toProps.styles);

    // Only create animate this element IF at least one style
    // property has changed
    if (toStyleProperties.length > 0) {
      // Instantly move to the 'from' state
      fromProps.styles["transition"] = "none";

      // Animate towards the 'to' state
      toProps.styles[
        "transition"
      ] = `all ${options.duration}s ${options.easing} ${options.delay}s`;
      toProps.styles["transition-property"] = toStyleProperties.join(", ");
      toProps.styles["will-change"] = toStyleProperties.join(", ");

      // Build up our custom CSS. We need to override inline styles
      // so we need to make our styles vErY IMPORTANT!1!!
      let fromCSS = Object.keys(fromProps.styles)
        .map((propertyName) => {
          return (
            propertyName +
            ": " +
            fromProps.styles[propertyName] +
            " !important;"
          );
        })
        .join("");

      let toCSS = Object.keys(toProps.styles)
        .map((propertyName) => {
          return (
            propertyName + ": " + toProps.styles[propertyName] + " !important;"
          );
        })
        .join("");

      css =
        '[data-auto-animate-target="' +
        id +
        '"] {' +
        fromCSS +
        "}" +
        '[data-auto-animate="running"] [data-auto-animate-target="' +
        id +
        '"] {' +
        toCSS +
        "}";
    }

    return css;
  }

  /**
   * Returns the auto-animate options for the given element.
   *
   * @param {HTMLElement} element Element to pick up options
   * from, either a slide or an animation target
   * @param {Object} [inheritedOptions] Optional set of existing
   * options
   */
  getAutoAnimateOptions(element, inheritedOptions) {
    let options = {
      easing: this.Reveal.getConfig().autoAnimateEasing,
      duration: this.Reveal.getConfig().autoAnimateDuration,
      delay: 0,
    };

    options = extend(options, inheritedOptions);

    // Inherit options from parent elements
    if (element.parentNode) {
      let autoAnimatedParent = closest(
        element.parentNode,
        "[data-auto-animate-target]"
      );
      if (autoAnimatedParent) {
        options = this.getAutoAnimateOptions(autoAnimatedParent, options);
      }
    }

    if (element.dataset.autoAnimateEasing) {
      options.easing = element.dataset.autoAnimateEasing;
    }

    if (element.dataset.autoAnimateDuration) {
      options.duration = parseFloat(element.dataset.autoAnimateDuration);
    }

    if (element.dataset.autoAnimateDelay) {
      options.delay = parseFloat(element.dataset.autoAnimateDelay);
    }

    return options;
  }

  /**
   * Returns an object containing all of the properties
   * that can be auto-animated for the given element and
   * their current computed values.
   *
   * @param {String} direction 'from' or 'to'
   */
  getAutoAnimatableProperties(direction, element, elementOptions) {
    let config = this.Reveal.getConfig();

    let properties = { styles: [] };

    // Position and size
    if (elementOptions.translate !== false || elementOptions.scale !== false) {
      let bounds;

      // Custom auto-animate may optionally return a custom tailored
      // measurement function
      if (typeof elementOptions.measure === "function") {
        bounds = elementOptions.measure(element);
      } else {
        if (config.center) {
          // More precise, but breaks when used in combination
          // with zoom for scaling the deck ¯\_(ツ)_/¯
          bounds = element.getBoundingClientRect();
        } else {
          let scale = this.Reveal.getScale();
          bounds = {
            x: element.offsetLeft * scale,
            y: element.offsetTop * scale,
            width: element.offsetWidth * scale,
            height: element.offsetHeight * scale,
          };
        }
      }

      properties.x = bounds.x;
      properties.y = bounds.y;
      properties.width = bounds.width;
      properties.height = bounds.height;
    }

    const computedStyles = getComputedStyle(element);

    // CSS styles
    (elementOptions.styles || config.autoAnimateStyles).forEach((style) => {
      let value;

      // `style` is either the property name directly, or an object
      // definition of a style property
      if (typeof style === "string") style = { property: style };

      if (typeof style.from !== "undefined" && direction === "from") {
        value = { value: style.from, explicitValue: true };
      } else if (typeof style.to !== "undefined" && direction === "to") {
        value = { value: style.to, explicitValue: true };
      } else {
        // Use a unitless value for line-height so that it inherits properly
        if (style.property === "line-height") {
          value =
            parseFloat(computedStyles["line-height"]) /
            parseFloat(computedStyles["font-size"]);
        }

        if (isNaN(value)) {
          value = computedStyles[style.property];
        }
      }

      if (value !== "") {
        properties.styles[style.property] = value;
      }
    });

    return properties;
  }

  /**
   * Get a list of all element pairs that we can animate
   * between the given slides.
   *
   * @param {HTMLElement} fromSlide
   * @param {HTMLElement} toSlide
   *
   * @return {Array} Each value is an array where [0] is
   * the element we're animating from and [1] is the
   * element we're animating to
   */
  getAutoAnimatableElements(fromSlide, toSlide) {
    let matcher =
      typeof this.Reveal.getConfig().autoAnimateMatcher === "function"
        ? this.Reveal.getConfig().autoAnimateMatcher
        : this.getAutoAnimatePairs;

    let pairs = matcher.call(this, fromSlide, toSlide);

    let reserved = [];

    // Remove duplicate pairs
    return pairs.filter((pair, index) => {
      if (reserved.indexOf(pair.to) === -1) {
        reserved.push(pair.to);
        return true;
      }
    });
  }

  /**
   * Identifies matching elements between slides.
   *
   * You can specify a custom matcher function by using
   * the `autoAnimateMatcher` config option.
   */
  getAutoAnimatePairs(fromSlide, toSlide) {
    let pairs = [];

    const codeNodes = "pre";
    const textNodes = "h1, h2, h3, h4, h5, h6, p, li";
    const mediaNodes = "img, video, iframe";

    // Explicit matches via data-id
    this.findAutoAnimateMatches(
      pairs,
      fromSlide,
      toSlide,
      "[data-id]",
      (node) => {
        return node.nodeName + ":::" + node.getAttribute("data-id");
      }
    );

    // Text
    this.findAutoAnimateMatches(
      pairs,
      fromSlide,
      toSlide,
      textNodes,
      (node) => {
        return node.nodeName + ":::" + node.innerText;
      }
    );

    // Media
    this.findAutoAnimateMatches(
      pairs,
      fromSlide,
      toSlide,
      mediaNodes,
      (node) => {
        return (
          node.nodeName +
          ":::" +
          (node.getAttribute("src") || node.getAttribute("data-src"))
        );
      }
    );

    // Code
    this.findAutoAnimateMatches(
      pairs,
      fromSlide,
      toSlide,
      codeNodes,
      (node) => {
        return node.nodeName + ":::" + node.innerText;
      }
    );

    pairs.forEach((pair) => {
      // Disable scale transformations on text nodes, we transition
      // each individual text property instead
      if (matches(pair.from, textNodes)) {
        pair.options = { scale: false };
      }
      // Animate individual lines of code
      else if (matches(pair.from, codeNodes)) {
        // Transition the code block's width and height instead of scaling
        // to prevent its content from being squished
        pair.options = { scale: false, styles: ["width", "height"] };

        // Lines of code
        this.findAutoAnimateMatches(
          pairs,
          pair.from,
          pair.to,
          ".hljs .hljs-ln-code",
          (node) => {
            return node.textContent;
          },
          {
            scale: false,
            styles: [],
            measure: this.getLocalBoundingBox.bind(this),
          }
        );

        // Line numbers
        this.findAutoAnimateMatches(
          pairs,
          pair.from,
          pair.to,
          ".hljs .hljs-ln-line[data-line-number]",
          (node) => {
            return node.getAttribute("data-line-number");
          },
          {
            scale: false,
            styles: ["width"],
            measure: this.getLocalBoundingBox.bind(this),
          }
        );
      }
    }, this);

    return pairs;
  }

  /**
   * Helper method which returns a bounding box based on
   * the given elements offset coordinates.
   *
   * @param {HTMLElement} element
   * @return {Object} x, y, width, height
   */
  getLocalBoundingBox(element) {
    const presentationScale = this.Reveal.getScale();

    return {
      x: Math.round(element.offsetLeft * presentationScale * 100) / 100,
      y: Math.round(element.offsetTop * presentationScale * 100) / 100,
      width: Math.round(element.offsetWidth * presentationScale * 100) / 100,
      height: Math.round(element.offsetHeight * presentationScale * 100) / 100,
    };
  }

  /**
   * Finds matching elements between two slides.
   *
   * @param {Array} pairs            	List of pairs to push matches to
   * @param {HTMLElement} fromScope   Scope within the from element exists
   * @param {HTMLElement} toScope     Scope within the to element exists
   * @param {String} selector         CSS selector of the element to match
   * @param {Function} serializer     A function that accepts an element and returns
   *                                  a stringified ID based on its contents
   * @param {Object} animationOptions Optional config options for this pair
   */
  findAutoAnimateMatches(
    pairs,
    fromScope,
    toScope,
    selector,
    serializer,
    animationOptions
  ) {
    let fromMatches = {};
    let toMatches = {};

    [].slice
      .call(fromScope.querySelectorAll(selector))
      .forEach((element, i) => {
        const key = serializer(element);
        if (typeof key === "string" && key.length) {
          fromMatches[key] = fromMatches[key] || [];
          fromMatches[key].push(element);
        }
      });

    [].slice.call(toScope.querySelectorAll(selector)).forEach((element, i) => {
      const key = serializer(element);
      toMatches[key] = toMatches[key] || [];
      toMatches[key].push(element);

      let fromElement;

      // Retrieve the 'from' element
      if (fromMatches[key]) {
        const primaryIndex = toMatches[key].length - 1;
        const secondaryIndex = fromMatches[key].length - 1;

        // If there are multiple identical from elements, retrieve
        // the one at the same index as our to-element.
        if (fromMatches[key][primaryIndex]) {
          fromElement = fromMatches[key][primaryIndex];
          fromMatches[key][primaryIndex] = null;
        }
        // If there are no matching from-elements at the same index,
        // use the last one.
        else if (fromMatches[key][secondaryIndex]) {
          fromElement = fromMatches[key][secondaryIndex];
          fromMatches[key][secondaryIndex] = null;
        }
      }

      // If we've got a matching pair, push it to the list of pairs
      if (fromElement) {
        pairs.push({
          from: fromElement,
          to: element,
          options: animationOptions,
        });
      }
    });
  }

  /**
   * Returns a all elements within the given scope that should
   * be considered unmatched in an auto-animate transition. If
   * fading of unmatched elements is turned on, these elements
   * will fade when going between auto-animate slides.
   *
   * Note that parents of auto-animate targets are NOT considered
   * unmatched since fading them would break the auto-animation.
   *
   * @param {HTMLElement} rootElement
   * @return {Array}
   */
  getUnmatchedAutoAnimateElements(rootElement) {
    return [].slice.call(rootElement.children).reduce((result, element) => {
      const containsAnimatedElements = element.querySelector(
        "[data-auto-animate-target]"
      );

      // The element is unmatched if
      // - It is not an auto-animate target
      // - It does not contain any auto-animate targets
      if (
        !element.hasAttribute("data-auto-animate-target") &&
        !containsAnimatedElements
      ) {
        result.push(element);
      }

      if (element.querySelector("[data-auto-animate-target]")) {
        result = result.concat(this.getUnmatchedAutoAnimateElements(element));
      }

      return result;
    }, []);
  }
}