sherpaa

Sherpa is an application guide for your users.

npm install sherpaa
4 downloads in the last week
41 downloads in the last month

Sherpa is an application guide for your users.

Example:

var sherpa = require("sherpa");

//tours is a bindable.collection
var tours = new sherpa.tours();


tours.add({
  "onboarding": {
    title: "add students",
    step: [
      {
        element : ".add_students",
        type    : "popover",
        title   : "Add students",
        trigger : function(element, next) {
          element.one("click", next);
        }
      },
      {
        element : "#add_student_input",
        type    : "popover",
        title   : "Enter a student name",
        trigger : function(element, next) {
          element.one("enter", next);
        }
      },
      {
        element : ".close-modal",
        type    : "popover",
        title   : "You're done!",
        trigger : function(element, next) {
          element.one("click", next);
        }
      }
    ],
    trigger: {

      //tour must not be viewed
      tour: {
        viewed: false
      },

      //url must be /onboarding
      url: /onboarding/
    }
  }
});

API

tours sherpa.tours()

Creates a new collection of tours

tours.start()

Starts the tours, and initializes any registered triggers.

tours.add(nameOrOptions[, options])

Adds one, or many tours

tour tours.get(name)

returns a tour by the given name

tours.use(plugin)

uses a sherpa plugin

tours.use({
  view: {
    name: "popover",
    attach: (step) {
      new Popover({ title: step.title }).render(step.element)
    }
  }
})

tour tours.at(index)

returns a tour at a given index

tours.on(event, callback)

listens for an event emitted by the tours collection

  • event - the event to listen to
    • start - emitted when a tour is started
    • stop - emitted when a tour is stopped
    • complete - emitted when a tour is complete

tour.start()

starts the tour

tour.stop()

steps tour.steps()

returns the steps within a tour

step.show()

shows the particular step

npm loves you