tour.js
172 lines
| 7.5 KiB
| application/javascript
|
JavascriptLexer
Jonathan Frederic
|
r17198 | // Copyright (c) IPython Development Team. | ||
// Distributed under the terms of the Modified BSD License. | ||||
Paul Ivanov
|
r15564 | |||
Jonathan Frederic
|
r17198 | define([ | ||
'base/js/namespace', | ||||
Jonathan Frederic
|
r17200 | 'jquery', | ||
Jonathan Frederic
|
r17198 | ], function(IPython, $) { | ||
"use strict"; | ||||
Paul Ivanov
|
r15564 | |||
Jonathan Frederic
|
r17198 | var tour_style = "<div class='popover tour'>\n" + | ||
"<div class='arrow'></div>\n" + | ||||
"<div style='position:absolute; top:7px; right:7px'>\n" + | ||||
"<button class='btn btn-default btn-sm icon-remove' data-role='end'></button>\n" + | ||||
"</div><h3 class='popover-title'></h3>\n" + | ||||
"<div class='popover-content'></div>\n" + | ||||
"<div class='popover-navigation'>\n" + | ||||
"<button class='btn btn-default icon-step-backward' data-role='prev'></button>\n" + | ||||
"<button class='btn btn-default icon-step-forward pull-right' data-role='next'></button>\n" + | ||||
"<button id='tour-pause' class='btn btn-sm btn-default icon-pause' data-resume-text='' data-pause-text='' data-role='pause-resume'></button>\n" + | ||||
"</div>\n" + | ||||
"</div>"; | ||||
Paul Ivanov
|
r15567 | |||
Jonathan Frederic
|
r17198 | var NotebookTour = function (notebook, events) { | ||
var that = this; | ||||
Jonathan Frederic
|
r17203 | this.notebook = notebook; | ||
Paul Ivanov
|
r15577 | this.step_duration = 0; | ||
Jonathan Frederic
|
r17203 | this.events = events; | ||
Jonathan Frederic
|
r17198 | this.tour_steps = [ | ||
{ | ||||
title: "Welcome to the Notebook Tour", | ||||
placement: 'bottom', | ||||
orphan: true, | ||||
content: "You can use the left and right arrow keys to go backwards and forwards.", | ||||
}, { | ||||
element: "#notebook_name", | ||||
title: "Filename", | ||||
placement: 'bottom', | ||||
content: "Click here to change the filename for this notebook." | ||||
}, { | ||||
element: $("#menus").parent(), | ||||
placement: 'bottom', | ||||
backdrop: true, | ||||
title: "Notebook Menubar", | ||||
content: "The menubar has menus for actions on the notebook, its cells, and the kernel it communicates with." | ||||
}, { | ||||
element: "#maintoolbar", | ||||
placement: 'bottom', | ||||
backdrop: true, | ||||
title: "Notebook Toolbar", | ||||
content: "The toolbar has buttons for the most common actions. Hover your mouse over each button for more information." | ||||
}, { | ||||
element: "#modal_indicator", | ||||
title: "Mode Indicator", | ||||
placement: 'bottom', | ||||
content: "The Notebook has two modes: Edit Mode and Command Mode. In this area, an indicator can appear to tell you which mode you are in.", | ||||
Jonathan Frederic
|
r17203 | onShow: function(tour) { that.command_icon_hack(); } | ||
Jonathan Frederic
|
r17198 | }, { | ||
element: "#modal_indicator", | ||||
title: "Command Mode", | ||||
placement: 'bottom', | ||||
Jonathan Frederic
|
r17203 | onShow: function(tour) { notebook.command_mode(); that.command_icon_hack(); }, | ||
onNext: function(tour) { that.edit_mode(); }, | ||||
Jonathan Frederic
|
r17198 | content: "Right now you are in Command Mode, and many keyboard shortcuts are available. In this mode, no icon is displayed in the indicator area." | ||
}, { | ||||
element: "#modal_indicator", | ||||
title: "Edit Mode", | ||||
placement: 'bottom', | ||||
Jonathan Frederic
|
r17203 | onShow: function(tour) { that.edit_mode(); }, | ||
Jonathan Frederic
|
r17198 | content: "Pressing <code>Enter</code> or clicking in the input text area of the cell switches to Edit Mode." | ||
}, { | ||||
element: '.selected', | ||||
title: "Edit Mode", | ||||
placement: 'bottom', | ||||
Jonathan Frederic
|
r17203 | onShow: function(tour) { that.edit_mode(); }, | ||
Jonathan Frederic
|
r17198 | content: "Notice that the border around the currently active cell changed color. Typing will insert text into the currently active cell." | ||
}, { | ||||
element: '.selected', | ||||
title: "Back to Command Mode", | ||||
placement: 'bottom', | ||||
Jonathan Frederic
|
r17203 | onShow: function(tour) { notebook.command_mode(); }, | ||
Jonathan Frederic
|
r17198 | onHide: function(tour) { $('#help_menu').parent().children('a').click(); }, | ||
content: "Pressing <code>Esc</code> or clicking outside of the input text area takes you back to Command Mode." | ||||
}, { | ||||
element: '#keyboard_shortcuts', | ||||
title: "Keyboard Shortcuts", | ||||
placement: 'bottom', | ||||
onHide: function(tour) { $('#help_menu').parent().children('a').click(); }, | ||||
content: "You can click here to get a list of all of the keyboard shortcuts." | ||||
}, { | ||||
element: "#kernel_indicator", | ||||
title: "Kernel Indicator", | ||||
placement: 'bottom', | ||||
onShow: function(tour) { events.trigger('status_idle.Kernel');}, | ||||
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) { events.trigger('status_busy.Kernel'); }, | ||||
content: "The Kernel indicator looks like this when the Kernel is busy.", | ||||
}, { | ||||
element: ".icon-stop", | ||||
placement: 'bottom', | ||||
title: "Interrupting the Kernel", | ||||
onHide: function(tour) { events.trigger('status_idle.Kernel'); }, | ||||
content: "To cancel a computation in progress, you can click here." | ||||
}, { | ||||
element: "#notification_kernel", | ||||
placement: 'bottom', | ||||
onShow: function(tour) { $('.icon-stop').click(); }, | ||||
title: "Notification Area", | ||||
content: "Messages in response to user actions (Save, Interrupt, etc) appear here." | ||||
}, { | ||||
title: "Fin.", | ||||
placement: 'bottom', | ||||
orphan: true, | ||||
Jonathan Frederic
|
r17202 | content: "This concludes the IPython Notebook User Interface tour.Tour. Happy hacking!", | ||
Jonathan Frederic
|
r17198 | } | ||
]; | ||||
Paul Ivanov
|
r15568 | 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'); }, | ||||
Paul Ivanov
|
r15572 | // TODO: remove the onPause/onResume logic once pi's patch has been | ||
// merged upstream to make this work via data-resume-class and | ||||
// data-resume-text attributes. | ||||
Jonathan Frederic
|
r17200 | onPause: this.toggle_pause_play, | ||
onResume: this.toggle_pause_play, | ||||
Paul Ivanov
|
r15568 | steps: this.tour_steps, | ||
Jonathan Frederic
|
r16972 | template: tour_style, | ||
orphan: true | ||||
Paul Ivanov
|
r15568 | }); | ||
Paul Ivanov
|
r15816 | |||
Paul Ivanov
|
r15568 | }; | ||
Paul Ivanov
|
r15564 | |||
Paul Ivanov
|
r15568 | NotebookTour.prototype.start = function () { | ||
console.log("let's start the tour"); | ||||
Paul Ivanov
|
r15816 | this.tour.init(); | ||
Paul Ivanov
|
r15568 | this.tour.start(); | ||
Paul Ivanov
|
r15570 | if (this.tour.ended()) | ||
{ | ||||
this.tour.restart(); | ||||
} | ||||
Paul Ivanov
|
r15568 | }; | ||
Jonathan Frederic
|
r17198 | NotebookTour.prototype.command_icon_hack = function() { | ||
$('#modal_indicator').css('min-height', 20); | ||||
}; | ||||
NotebookTour.prototype.toggle_pause_play = function () { | ||||
$('#tour-pause').toggleClass('icon-pause icon-play'); | ||||
}; | ||||
NotebookTour.prototype.edit_mode = function() { | ||||
this.notebook.focus_cell(); | ||||
this.notebook.edit_mode(); | ||||
}; | ||||
// For backwards compatability. | ||||
Paul Ivanov
|
r15568 | IPython.NotebookTour = NotebookTour; | ||
Jonathan Frederic
|
r17202 | return {'Tour': NotebookTour}; | ||
Jonathan Frederic
|
r17198 | |||
}); | ||||
Paul Ivanov
|
r15568 | |||