IPython/html/static/notebook/js/tour.js

//----------------------------------------------------------------------------
//  Copyright (C) 2011  The IPython Development Team
//
//  Distributed under the terms of the BSD License.  The full license is in
//  the file COPYING, distributed as part of this software.
//----------------------------------------------------------------------------

//============================================================================
// Tour of IPython Notebok UI (with Bootstrap Tour)
//============================================================================

var tour_steps = [
  { 
    element: $("#ipython_notebook").parent(),
    title: "Welcome to the Notebook Tour",
    placement: 'bottom',
    content: "This tour will take 2 minutes.",
    backdrop: true,
  }, {
    element: "#ipython_notebook",
    title: "Header",
    placement: 'bottom',
    content: "Clicking here takes you back to the Dashboard."
  }, {
    element: "#notebook_name",
    title: "Filename",
    placement: 'bottom',
    content: "You can click here to change the filename for this notebook."
  }, 
          {
    element: "#checkpoint_status",
    title: "Checkpoint status",
    placement: 'bottom',
    content: "Information about the last time this notebook was saved."
  }, {
    element: "#menus",
    placement: 'bottom',
    title: "Notebook Menubar",
    content: "The actions that you can perform with this notebook, its cells, and its kernel"
  }, {
    element: "#menus",
    placement: 'bottom',
    title: "Notebook Menubar",
    content: "The actions that you can perform with this notebook, its cells, and its kernel"
  }, {
    element: "#notification_kernel",
    placement: 'bottom',
    onShow: function(tour) {  IPython.notification_area.widget_dict.kernel.set_message("sample notification"); },
    onHide: function(tour) {  IPython.notification_area.widget_dict.kernel.set_message("sample notification", 100); },
    title: "Notification area",
    content: "Message in response to user action (Kernel busy, Interrupt, etc)"
  }, {
    element: "#modal_indicator",
    title: "Mode indicator",
    placement: 'bottom',
    content: "IPython has two modes: Edit Mode and Command Mode. This indicator tells you which mode you are in."
  }, {
    element: "#modal_indicator",
    title: "Mode indicator",
    placement: 'bottom',
    content: "Right now you are in Command mode, and many keyboard shortcuts are available."
  }, {
    element: "#modal_indicator",
    title: "Edit Mode",
    placement: 'bottom',
    onShow: function(tour) { IPython.notebook.edit_mode(); },
    content: "And now we've switched to Edit Mode, regular typing will go into the currently active cell."
  }, {
    element: $('.selected'),
    title: "Edit Mode",
    placement: 'bottom',
    onHide: function(tour) { IPython.notebook.command_mode(); },
    content: "Notice that the border around the currently active cell changed color."
  }, {
    element: $('.selected'),
    title: "back to Command Mode",
    placement: 'bottom',
    onHide: function(tour) { IPython.notebook.command_mode(); },
    content: "Pressing Esc or clicking outside of the input text area takes you back to command mode."
  }, {
    element: "#kernel_indicator",
    title: "Kernel indicator",
    placement: 'bottom',
    content: "This is the Kernel indicator. It looks like this when the Kernel is idle.",
  }, {
    element: "#kernel_indicator",
    title: "Kernel Indicator",
    placement: 'bottom',
    onShow: function(tour) { $([IPython.events]).trigger('status_busy.Kernel'); },
    onHide: function(tour) { $([IPython.events]).trigger('status_idle.Kernel');},
    content: "The Kernel indicator looks like this when the Kernel is busy.",
  }, {
    element: "#kernel_indicator",
    title: "Fin.",
    placement: 'bottom',
    onShow: function(tour) { $([IPython.events]).trigger('status_busy.Kernel'); },
    onHide: function(tour) { $([IPython.events]).trigger('status_idle.Kernel');},
    content: "This concludes the IPython Notebook User Interface Tour. Happy hacking!",
  }
];

IPython = (function (IPython) {
 "use strict";

    
    var NotebookTour = function () {
        this.step_duration = 5000;
        this.tour_steps = tour_steps ;
        this.tour_steps[0].content = "This tour will take " + this.step_duration * tour_steps.length / 1000 + " seconds";
        this.tour = new Tour({
            //orphan: true,
            storage: false, // start tour from beginning every time
            //element: $("#ipython_notebook"),
            debug: true,
            reflex: true, // click on element to continue tour
            //backdrop: true, // show dark behind popover
            animation: false,
            duration: this.step_duration,
            onStart: function() { console.log('tour started'); },
            steps: this.tour_steps,
        });
        this.tour.init();
    };

    NotebookTour.prototype.start = function () {
        console.log("let's start the tour");
        this.tour.start();
        if (this.tour.ended())
        {
            this.tour.restart();
        }
    };

    // Set module variables
    IPython.NotebookTour = NotebookTour;

    return IPython;

}(IPython));