Tour - tsgrp/HPI GitHub Wiki

HPI Tour Tourist.js allows for tours of HPI to be created. The interface of the tour can be changed for each step.

Adding a Tour

Tours can be added through Tour.js by adding the tour to Tour.tours and similar to the Search Tour, adding the tour as a function: ex)

 Tour.Search = function(options {
    self.tourSteps = [{step1}, {step2},....]
    self.tour = new Tourist.Tour({
        steps: steps
    });
 };

Tours can be activated in HPI through creating a Tour View Layout. For example in searchrouter.js a new Tour Layout is created when listening for "afterRender" and is made by creating a new Tour View Layout:

 var tour = new Tour.Views.Layout({ tours: [  
    name: nameOfTour,
    options: {}
    ]
 });
 self.layout.setView("#tour-outlet", tour);
 tour.render();

Modifying the Current Search Tour

The current tour for Search can be altered through Tour.js. Each tour contains multiple step objects which look like this :

 {
  content: 'Welcome to my step',
  target: $('#something-to-point-at'),
  closeButton: true,
  highlightTarget: true,
  setup: (tour, options) {
    // do stuff in the interface/bind
  },
  teardown: function(tour, options) {
    // remove stuff/unbind
  }
 }

Steps have many object options that can be found here: https://github.com/easelinc/tourist; An example of a simple tour can be found here: http://easelinc.github.io/tourist/; ^_^