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

import { extend, queryAll } from "../utils/util.js";

/**
 * Handles sorting and navigation of slide fragments.
 * Fragments are elements within a slide that are
 * revealed/animated incrementally.
 */
export default class Fragments {
  constructor(Reveal) {
    this.Reveal = Reveal;
  }

  /**
   * Called when the reveal.js config is updated.
   */
  configure(config, oldConfig) {
    if (config.fragments === false) {
      this.disable();
    } else if (oldConfig.fragments === false) {
      this.enable();
    }
  }

  /**
   * If fragments are disabled in the deck, they should all be
   * visible rather than stepped through.
   */
  disable() {
    queryAll(this.Reveal.getSlidesElement(), ".fragment").forEach((element) => {
      element.classList.add("visible");
      element.classList.remove("current-fragment");
    });
  }

  /**
   * Reverse of #disable(). Only called if fragments have
   * previously been disabled.
   */
  enable() {
    queryAll(this.Reveal.getSlidesElement(), ".fragment").forEach((element) => {
      element.classList.remove("visible");
      element.classList.remove("current-fragment");
    });
  }

  /**
   * Returns an object describing the available fragment
   * directions.
   *
   * @return {{prev: boolean, next: boolean}}
   */
  availableRoutes() {
    let currentSlide = this.Reveal.getCurrentSlide();
    if (currentSlide && this.Reveal.getConfig().fragments) {
      let fragments = currentSlide.querySelectorAll(".fragment:not(.disabled)");
      let hiddenFragments = currentSlide.querySelectorAll(
        ".fragment:not(.disabled):not(.visible)"
      );

      return {
        prev: fragments.length - hiddenFragments.length > 0,
        next: !!hiddenFragments.length,
      };
    } else {
      return { prev: false, next: false };
    }
  }

  /**
   * Return a sorted fragments list, ordered by an increasing
   * "data-fragment-index" attribute.
   *
   * Fragments will be revealed in the order that they are returned by
   * this function, so you can use the index attributes to control the
   * order of fragment appearance.
   *
   * To maintain a sensible default fragment order, fragments are presumed
   * to be passed in document order. This function adds a "fragment-index"
   * attribute to each node if such an attribute is not already present,
   * and sets that attribute to an integer value which is the position of
   * the fragment within the fragments list.
   *
   * @param {object[]|*} fragments
   * @param {boolean} grouped If true the returned array will contain
   * nested arrays for all fragments with the same index
   * @return {object[]} sorted Sorted array of fragments
   */
  sort(fragments, grouped = false) {
    fragments = Array.from(fragments);

    let ordered = [],
      unordered = [],
      sorted = [];

    // Group ordered and unordered elements
    fragments.forEach((fragment) => {
      if (fragment.hasAttribute("data-fragment-index")) {
        let index = parseInt(fragment.getAttribute("data-fragment-index"), 10);

        if (!ordered[index]) {
          ordered[index] = [];
        }

        ordered[index].push(fragment);
      } else {
        unordered.push([fragment]);
      }
    });

    // Append fragments without explicit indices in their
    // DOM order
    ordered = ordered.concat(unordered);

    // Manually count the index up per group to ensure there
    // are no gaps
    let index = 0;

    // Push all fragments in their sorted order to an array,
    // this flattens the groups
    ordered.forEach((group) => {
      group.forEach((fragment) => {
        sorted.push(fragment);
        fragment.setAttribute("data-fragment-index", index);
      });

      index++;
    });

    return grouped === true ? ordered : sorted;
  }

  /**
   * Sorts and formats all of fragments in the
   * presentation.
   */
  sortAll() {
    this.Reveal.getHorizontalSlides().forEach((horizontalSlide) => {
      let verticalSlides = queryAll(horizontalSlide, "section");
      verticalSlides.forEach((verticalSlide, y) => {
        this.sort(verticalSlide.querySelectorAll(".fragment"));
      }, this);

      if (verticalSlides.length === 0)
        this.sort(horizontalSlide.querySelectorAll(".fragment"));
    });
  }

  /**
   * Refreshes the fragments on the current slide so that they
   * have the appropriate classes (.visible + .current-fragment).
   *
   * @param {number} [index] The index of the current fragment
   * @param {array} [fragments] Array containing all fragments
   * in the current slide
   *
   * @return {{shown: array, hidden: array}}
   */
  update(index, fragments) {
    let changedFragments = {
      shown: [],
      hidden: [],
    };

    let currentSlide = this.Reveal.getCurrentSlide();
    if (currentSlide && this.Reveal.getConfig().fragments) {
      fragments =
        fragments || this.sort(currentSlide.querySelectorAll(".fragment"));

      if (fragments.length) {
        let maxIndex = 0;

        if (typeof index !== "number") {
          let currentFragment = this.sort(
            currentSlide.querySelectorAll(".fragment.visible")
          ).pop();
          if (currentFragment) {
            index = parseInt(
              currentFragment.getAttribute("data-fragment-index") || 0,
              10
            );
          }
        }

        Array.from(fragments).forEach((el, i) => {
          if (el.hasAttribute("data-fragment-index")) {
            i = parseInt(el.getAttribute("data-fragment-index"), 10);
          }

          maxIndex = Math.max(maxIndex, i);

          // Visible fragments
          if (i <= index) {
            let wasVisible = el.classList.contains("visible");
            el.classList.add("visible");
            el.classList.remove("current-fragment");

            if (i === index) {
              // Announce the fragments one by one to the Screen Reader
              this.Reveal.announceStatus(this.Reveal.getStatusText(el));

              el.classList.add("current-fragment");
              this.Reveal.slideContent.startEmbeddedContent(el);
            }

            if (!wasVisible) {
              changedFragments.shown.push(el);
              this.Reveal.dispatchEvent({
                target: el,
                type: "visible",
                bubbles: false,
              });
            }
          }
          // Hidden fragments
          else {
            let wasVisible = el.classList.contains("visible");
            el.classList.remove("visible");
            el.classList.remove("current-fragment");

            if (wasVisible) {
              this.Reveal.slideContent.stopEmbeddedContent(el);
              changedFragments.hidden.push(el);
              this.Reveal.dispatchEvent({
                target: el,
                type: "hidden",
                bubbles: false,
              });
            }
          }
        });

        // Write the current fragment index to the slide <section>.
        // This can be used by end users to apply styles based on
        // the current fragment index.
        index = typeof index === "number" ? index : -1;
        index = Math.max(Math.min(index, maxIndex), -1);
        currentSlide.setAttribute("data-fragment", index);
      }
    }

    return changedFragments;
  }

  /**
   * Formats the fragments on the given slide so that they have
   * valid indices. Call this if fragments are changed in the DOM
   * after reveal.js has already initialized.
   *
   * @param {HTMLElement} slide
   * @return {Array} a list of the HTML fragments that were synced
   */
  sync(slide = this.Reveal.getCurrentSlide()) {
    return this.sort(slide.querySelectorAll(".fragment"));
  }

  /**
   * Navigate to the specified slide fragment.
   *
   * @param {?number} index The index of the fragment that
   * should be shown, -1 means all are invisible
   * @param {number} offset Integer offset to apply to the
   * fragment index
   *
   * @return {boolean} true if a change was made in any
   * fragments visibility as part of this call
   */
  goto(index, offset = 0) {
    let currentSlide = this.Reveal.getCurrentSlide();
    if (currentSlide && this.Reveal.getConfig().fragments) {
      let fragments = this.sort(
        currentSlide.querySelectorAll(".fragment:not(.disabled)")
      );
      if (fragments.length) {
        // If no index is specified, find the current
        if (typeof index !== "number") {
          let lastVisibleFragment = this.sort(
            currentSlide.querySelectorAll(".fragment:not(.disabled).visible")
          ).pop();

          if (lastVisibleFragment) {
            index = parseInt(
              lastVisibleFragment.getAttribute("data-fragment-index") || 0,
              10
            );
          } else {
            index = -1;
          }
        }

        // Apply the offset if there is one
        index += offset;

        let changedFragments = this.update(index, fragments);

        if (changedFragments.hidden.length) {
          this.Reveal.dispatchEvent({
            type: "fragmenthidden",
            data: {
              fragment: changedFragments.hidden[0],
              fragments: changedFragments.hidden,
            },
          });
        }

        if (changedFragments.shown.length) {
          this.Reveal.dispatchEvent({
            type: "fragmentshown",
            data: {
              fragment: changedFragments.shown[0],
              fragments: changedFragments.shown,
            },
          });
        }

        this.Reveal.controls.update();
        this.Reveal.progress.update();

        if (this.Reveal.getConfig().fragmentInURL) {
          this.Reveal.location.writeURL();
        }

        return !!(
          changedFragments.shown.length || changedFragments.hidden.length
        );
      }
    }

    return false;
  }

  /**
   * Navigate to the next slide fragment.
   *
   * @return {boolean} true if there was a next fragment,
   * false otherwise
   */
  next() {
    return this.goto(null, 1);
  }

  /**
   * Navigate to the previous slide fragment.
   *
   * @return {boolean} true if there was a previous fragment,
   * false otherwise
   */
  prev() {
    return this.goto(null, -1);
  }
}