##// END OF EJS Templates
initial bootstrap tour...
Paul Ivanov -
Show More
@@ -0,0 +1,105 b''
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2011 The IPython Development Team
3 //
4 // Distributed under the terms of the BSD License. The full license is in
5 // the file COPYING, distributed as part of this software.
6 //----------------------------------------------------------------------------
7
8 //============================================================================
9 // Tour of IPython Notebok UI (with Bootstrap Tour)
10 //============================================================================
11
12 var step_duration = 5000;
13 var tour_steps = [
14 {
15 element: $("#ipython_notebook").parent(),
16 title: "Let's take it from the top",
17 placement: 'bottom',
18 content: "This is the Header.",
19 backdrop: true,
20 }, {
21 element: "#ipython_notebook",
22 title: "Header",
23 placement: 'bottom',
24 content: "Clicking here takes you back to the Dashboard."
25 }, {
26 element: "#notebook_name",
27 title: "Filename",
28 placement: 'bottom',
29 content: "You can click here to change the filename for this notebook."
30 },
31 {
32 element: "#checkpoint_status",
33 title: "Checkpoint status",
34 placement: 'bottom',
35 content: "Information about the last time this notebook was saved."
36 }, {
37 element: "#menus",
38 placement: 'bottom',
39 title: "Notebook Menubar",
40 content: "The actions that you can perform with this notebook, its cells, and its kernel"
41 }, {
42 element: "#menus",
43 placement: 'bottom',
44 title: "Notebook Menubar",
45 content: "The actions that you can perform with this notebook, its cells, and its kernel"
46 }, {
47 element: "#notification_kernel",
48 placement: 'bottom',
49 onShow: function(tour) { IPython.notification_area.widget_dict.kernel.set_message("sample notification"); },
50 onHide: function(tour) { IPython.notification_area.widget_dict.kernel.set_message("sample notification", 100); },
51 title: "Notification area",
52 content: "Message in response to user action (Kernel busy, Interrupt, etc)"
53 }, {
54 element: "#modal_indicator",
55 title: "Mode indicator",
56 placement: 'bottom',
57 content: "IPython has two modes: Edit Mode and Command Mode. This indicator tells you which mode you are in."
58 }, {
59 element: "#modal_indicator",
60 title: "Mode indicator",
61 placement: 'bottom',
62 content: "Right now you are in Command mode, and many keyboard shortcuts are available."
63 }, {
64 element: "#modal_indicator",
65 title: "Edit Mode",
66 placement: 'bottom',
67 onShow: function(tour) { IPython.notebook.edit_mode(); },
68 content: "And now we've switched to Edit Mode, regular typing will go into the currently active cell."
69 }, {
70 element: $('.selected'),
71 title: "Edit Mode",
72 placement: 'bottom',
73 onHide: function(tour) { IPython.notebook.command_mode(); },
74 content: "Notice that the border around the currently active cell changed color."
75 }, {
76 element: "#kernel_indicator",
77 title: "Kernel indicator",
78 placement: 'bottom',
79 content: "This is the Kernel indicator. It looks like this when the Kernel is idle.",
80 }, {
81 element: "#kernel_indicator",
82 title: "Kernel Indicator",
83 placement: 'bottom',
84 onShow: function(tour) { $([IPython.events]).trigger('status_busy.Kernel'); },
85 onHide: function(tour) { $([IPython.events]).trigger('status_idle.Kernel');},
86 content: "The Kernel indicator looks like this when the Kernel is busy.",
87 }
88 ];
89 var tour = new Tour({
90 //orphan: true,
91 storage: false, // start tour from beginning every time
92 //element: $("#ipython_notebook"),
93 debug: true,
94 reflex: true, // click on element to continue tour
95 //backdrop: true, // show dark behind popover
96 animation: false,
97 duration: step_duration,
98 onStart: function() { console.log('tour started'); },
99 steps: tour_steps,
100 });
101 // Initialize the tour
102 tour.init();
103
104 // Start the tour
105 tour.start();
General Comments 0
You need to be logged in to leave comments. Login now