atom-user-support-helper/lib/tutorial-step.js

A helper for user support features in Atom.io

'use babel';

let Promise = null;
let Disposable = null;
let Emitter = null;
let CompositeDisposable = null;

const TUTORIAL_CLASSNAME = "user-support-helper-tutorial"
const ANNOTATED_CLASSNMAE = "user-support-helper-annotated"

let initialized = false;
function initialize() {
  if (initialized) return ;

  Promise = require('bluebird');
  const atom = require('atom')
  Disposable = atom.Disposable;
  Emitter = atom.Emitter;
  CompositeDisposable = atom.CompositeDisposable;

  initialized = true
}

class TutorialStep {

  constructor(options, onStarted, onFinished) {
    initialize();

    const getAnnotatedDoms = options.getAnnotatedDoms || ((x) => { return x; })
    const getCaptionOf = options.getCaptionOf || ((x) => { return null; })

    this.emitter = new Emitter()
    this.disposals = new CompositeDisposable()
    this.modified = new Set()

    // Observe the mutation of DOMs
    const observer = new MutationObserver((mutation) => {
      mutation.forEach((elem) => { this.modified.add(elem); })
    })
    observer.observe(
      document.body,
      { attributes: true, subtree: true, characterData: true }
    )

    this.disposals.add(onStarted(() => {
      // Get the DOMs to be annotated
      const toBeAnnotated = getAnnotatedDoms(this.modified)
      observer.disconnect()

      // Add class-name
      document.body.classList.add(TUTORIAL_CLASSNAME)
      toBeAnnotated.forEach((elem) => {
        elem.classList.add(ANNOTATED_CLASSNMAE)
      })
    }));

    this.disposals.add(onFinished(() => {
      // Remove class-name
      document.body.classList.remove(TUTORIAL_CLASSNAME)
      this.annotated.forEach((elem) => {
        elem.classList.remove(ANNOTATED_CLASSNMAE)
      })
    }));

  }

  destroy() {
    this.disposals.dispose()
    this.annotated.clear()
  }

  onStarted(callback) {
    return this.emitter.on("start", callback)
  }

  onFinished(callback) {
    return this.emitter.on("finish", callback)
  }
}

export default TutorialStep