Show More
| @@ -0,0 +1,105 | |||||
|
|
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