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

/**
 * Creates a visual progress bar for the presentation.
 */
export default class Progress {
  constructor(Reveal) {
    this.Reveal = Reveal;

    this.onProgressClicked = this.onProgressClicked.bind(this);
  }

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

    this.bar = document.createElement("span");
    this.element.appendChild(this.bar);
  }

  /**
   * Called when the reveal.js config is updated.
   */
  configure(config, oldConfig) {
    this.element.style.display = config.progress ? "block" : "none";
  }

  bind() {
    if (this.Reveal.getConfig().progress && this.element) {
      this.element.addEventListener("click", this.onProgressClicked, false);
    }
  }

  unbind() {
    if (this.Reveal.getConfig().progress && this.element) {
      this.element.removeEventListener("click", this.onProgressClicked, false);
    }
  }

  /**
   * Updates the progress bar to reflect the current slide.
   */
  update() {
    // Update progress if enabled
    if (this.Reveal.getConfig().progress && this.bar) {
      let scale = this.Reveal.getProgress();

      // Don't fill the progress bar if there's only one slide
      if (this.Reveal.getTotalSlides() < 2) {
        scale = 0;
      }

      this.bar.style.transform = "scaleX(" + scale + ")";
    }
  }

  getMaxWidth() {
    return this.Reveal.getRevealElement().offsetWidth;
  }

  /**
   * Clicking on the progress bar results in a navigation to the
   * closest approximate horizontal slide using this equation:
   *
   * ( clickX / presentationWidth ) * numberOfSlides
   *
   * @param {object} event
   */
  onProgressClicked(event) {
    this.Reveal.onUserInput(event);

    event.preventDefault();

    let slides = this.Reveal.getSlides();
    let slidesTotal = slides.length;
    let slideIndex = Math.floor(
      (event.clientX / this.getMaxWidth()) * slidesTotal
    );

    if (this.Reveal.getConfig().rtl) {
      slideIndex = slidesTotal - slideIndex;
    }

    let targetIndices = this.Reveal.getIndices(slides[slideIndex]);
    this.Reveal.slide(targetIndices.h, targetIndices.v);
  }

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