Show More
@@ -1,175 +1,170 | |||||
1 | //---------------------------------------------------------------------------- |
|
1 | //---------------------------------------------------------------------------- | |
2 | // Copyright (C) 2011 The IPython Development Team |
|
2 | // Copyright (C) 2011 The IPython Development Team | |
3 | // |
|
3 | // | |
4 | // Distributed under the terms of the BSD License. The full license is in |
|
4 | // Distributed under the terms of the BSD License. The full license is in | |
5 | // the file COPYING, distributed as part of this software. |
|
5 | // the file COPYING, distributed as part of this software. | |
6 | //---------------------------------------------------------------------------- |
|
6 | //---------------------------------------------------------------------------- | |
7 |
|
7 | |||
8 | //============================================================================ |
|
8 | //============================================================================ | |
9 | // Tour of IPython Notebok UI (with Bootstrap Tour) |
|
9 | // Tour of IPython Notebok UI (with Bootstrap Tour) | |
10 | //============================================================================ |
|
10 | //============================================================================ | |
11 |
|
11 | |||
12 | var tour_steps = [ |
|
12 | var tour_steps = [ | |
13 | { |
|
13 | { | |
14 | title: "Welcome to the Notebook Tour", |
|
14 | title: "Welcome to the Notebook Tour", | |
15 | placement: 'bottom', |
|
15 | placement: 'bottom', | |
16 | orphan: true, |
|
16 | orphan: true, | |
17 | content: "This tour will take 2 minutes.", |
|
17 | content: "This tour will take 2 minutes.", | |
18 | }, { |
|
18 | }, { | |
19 | element: "#notebook_name", |
|
19 | element: "#notebook_name", | |
20 | title: "Filename", |
|
20 | title: "Filename", | |
21 | placement: 'bottom', |
|
21 | placement: 'bottom', | |
22 | content: "Click here to change the filename for this notebook." |
|
22 | content: "Click here to change the filename for this notebook." | |
23 |
}, |
|
23 | }, { | |
24 | element: "#checkpoint_status", |
|
|||
25 | title: "Checkpoint Status", |
|
|||
26 | placement: 'bottom', |
|
|||
27 | content: "Information about the last time this notebook was saved." |
|
|||
28 | },*/ { |
|
|||
29 | element: $("#menus").parent(), |
|
24 | element: $("#menus").parent(), | |
30 | placement: 'bottom', |
|
25 | placement: 'bottom', | |
31 | backdrop: true, |
|
26 | backdrop: true, | |
32 | title: "Notebook Menubar", |
|
27 | title: "Notebook Menubar", | |
33 | content: "The menubar has menus for actions on the notebook, its cells, and the kernel it communicates with." |
|
28 | content: "The menubar has menus for actions on the notebook, its cells, and the kernel it communicates with." | |
34 | }, { |
|
29 | }, { | |
35 | element: "#maintoolbar", |
|
30 | element: "#maintoolbar", | |
36 | placement: 'bottom', |
|
31 | placement: 'bottom', | |
37 | backdrop: true, |
|
32 | backdrop: true, | |
38 | title: "Notebook Toolbar", |
|
33 | title: "Notebook Toolbar", | |
39 | content: "The toolbar has buttons for the most common actions. Hover your mouse over each button for more information." |
|
34 | content: "The toolbar has buttons for the most common actions. Hover your mouse over each button for more information." | |
40 | }, { |
|
35 | }, { | |
41 | element: "#modal_indicator", |
|
36 | element: "#modal_indicator", | |
42 | title: "Mode Indicator", |
|
37 | title: "Mode Indicator", | |
43 | placement: 'bottom', |
|
38 | placement: 'bottom', | |
44 | 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.", |
|
39 | 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.", | |
45 | onShow: function(tour) { command_icon_hack(); } |
|
40 | onShow: function(tour) { command_icon_hack(); } | |
46 | }, { |
|
41 | }, { | |
47 | element: "#modal_indicator", |
|
42 | element: "#modal_indicator", | |
48 | title: "Command Mode", |
|
43 | title: "Command Mode", | |
49 | placement: 'bottom', |
|
44 | placement: 'bottom', | |
50 | onShow: function(tour) { IPython.notebook.command_mode(); command_icon_hack(); }, |
|
45 | onShow: function(tour) { IPython.notebook.command_mode(); command_icon_hack(); }, | |
51 | onNext: function(tour) { edit_mode(); }, |
|
46 | onNext: function(tour) { edit_mode(); }, | |
52 | 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." |
|
47 | 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." | |
53 | }, { |
|
48 | }, { | |
54 | element: "#modal_indicator", |
|
49 | element: "#modal_indicator", | |
55 | title: "Edit Mode", |
|
50 | title: "Edit Mode", | |
56 | placement: 'bottom', |
|
51 | placement: 'bottom', | |
57 | onShow: function(tour) { edit_mode(); }, |
|
52 | onShow: function(tour) { edit_mode(); }, | |
58 | content: "Pressing <code>Enter</code> or clicking in the input text area of the cell switches to Edit Mode." |
|
53 | content: "Pressing <code>Enter</code> or clicking in the input text area of the cell switches to Edit Mode." | |
59 | }, { |
|
54 | }, { | |
60 | element: '.selected', |
|
55 | element: '.selected', | |
61 | title: "Edit Mode", |
|
56 | title: "Edit Mode", | |
62 | placement: 'bottom', |
|
57 | placement: 'bottom', | |
63 | onShow: function(tour) { edit_mode(); }, |
|
58 | onShow: function(tour) { edit_mode(); }, | |
64 | content: "Notice that the border around the currently active cell changed color. Typing will insert text into the currently active cell." |
|
59 | content: "Notice that the border around the currently active cell changed color. Typing will insert text into the currently active cell." | |
65 | }, { |
|
60 | }, { | |
66 | element: '.selected', |
|
61 | element: '.selected', | |
67 | title: "Back to Command Mode", |
|
62 | title: "Back to Command Mode", | |
68 | placement: 'bottom', |
|
63 | placement: 'bottom', | |
69 | onShow: function(tour) { IPython.notebook.command_mode(); }, |
|
64 | onShow: function(tour) { IPython.notebook.command_mode(); }, | |
70 | onHide: function(tour) { $('#help_menu').parent().children('a').click(); }, |
|
65 | onHide: function(tour) { $('#help_menu').parent().children('a').click(); }, | |
71 | content: "Pressing <code>Esc</code> or clicking outside of the input text area takes you back to Command Mode." |
|
66 | content: "Pressing <code>Esc</code> or clicking outside of the input text area takes you back to Command Mode." | |
72 | }, { |
|
67 | }, { | |
73 | element: '#keyboard_shortcuts', |
|
68 | element: '#keyboard_shortcuts', | |
74 | title: "Keyboard Shortcuts", |
|
69 | title: "Keyboard Shortcuts", | |
75 | placement: 'bottom', |
|
70 | placement: 'bottom', | |
76 | onHide: function(tour) { $('#help_menu').parent().children('a').click(); }, |
|
71 | onHide: function(tour) { $('#help_menu').parent().children('a').click(); }, | |
77 | content: "You can click here to get a list of all of the keyboard shortcuts." |
|
72 | content: "You can click here to get a list of all of the keyboard shortcuts." | |
78 | }, { |
|
73 | }, { | |
79 | element: "#kernel_indicator", |
|
74 | element: "#kernel_indicator", | |
80 | title: "Kernel Indicator", |
|
75 | title: "Kernel Indicator", | |
81 | placement: 'bottom', |
|
76 | placement: 'bottom', | |
82 | onShow: function(tour) { $([IPython.events]).trigger('status_idle.Kernel');}, |
|
77 | onShow: function(tour) { $([IPython.events]).trigger('status_idle.Kernel');}, | |
83 | content: "This is the Kernel indicator. It looks like this when the Kernel is idle.", |
|
78 | content: "This is the Kernel indicator. It looks like this when the Kernel is idle.", | |
84 | }, { |
|
79 | }, { | |
85 | element: "#kernel_indicator", |
|
80 | element: "#kernel_indicator", | |
86 | title: "Kernel Indicator", |
|
81 | title: "Kernel Indicator", | |
87 | placement: 'bottom', |
|
82 | placement: 'bottom', | |
88 | onShow: function(tour) { $([IPython.events]).trigger('status_busy.Kernel'); }, |
|
83 | onShow: function(tour) { $([IPython.events]).trigger('status_busy.Kernel'); }, | |
89 | content: "The Kernel indicator looks like this when the Kernel is busy.", |
|
84 | content: "The Kernel indicator looks like this when the Kernel is busy.", | |
90 | }, { |
|
85 | }, { | |
91 | element: ".icon-stop", |
|
86 | element: ".icon-stop", | |
92 | placement: 'bottom', |
|
87 | placement: 'bottom', | |
93 | title: "Interrupting the Kernel", |
|
88 | title: "Interrupting the Kernel", | |
94 | onHide: function(tour) { $([IPython.events]).trigger('status_idle.Kernel'); }, |
|
89 | onHide: function(tour) { $([IPython.events]).trigger('status_idle.Kernel'); }, | |
95 | content: "To cancel a computation in progress, you can click here." |
|
90 | content: "To cancel a computation in progress, you can click here." | |
96 | }, { |
|
91 | }, { | |
97 | element: "#notification_kernel", |
|
92 | element: "#notification_kernel", | |
98 | placement: 'bottom', |
|
93 | placement: 'bottom', | |
99 | onShow: function(tour) { $('.icon-stop').click(); }, |
|
94 | onShow: function(tour) { $('.icon-stop').click(); }, | |
100 | title: "Notification Area", |
|
95 | title: "Notification Area", | |
101 | content: "Messages in response to user actions (Save, Interrupt, etc) appear here." |
|
96 | content: "Messages in response to user actions (Save, Interrupt, etc) appear here." | |
102 | }, { |
|
97 | }, { | |
103 | title: "Fin.", |
|
98 | title: "Fin.", | |
104 | placement: 'bottom', |
|
99 | placement: 'bottom', | |
105 | orphan: true, |
|
100 | orphan: true, | |
106 | content: "This concludes the IPython Notebook User Interface Tour. Happy hacking!", |
|
101 | content: "This concludes the IPython Notebook User Interface Tour. Happy hacking!", | |
107 | } |
|
102 | } | |
108 | ]; |
|
103 | ]; | |
109 |
|
104 | |||
110 | var tour_style = "<div class='popover tour'>\ |
|
105 | var tour_style = "<div class='popover tour'>\ | |
111 | <div class='arrow'></div>\ |
|
106 | <div class='arrow'></div>\ | |
112 | <div style='position:absolute; top:7px; right:7px'>\ |
|
107 | <div style='position:absolute; top:7px; right:7px'>\ | |
113 | <button class='btn btn-default btn-sm icon-remove' data-role='end'></button></div>\ |
|
108 | <button class='btn btn-default btn-sm icon-remove' data-role='end'></button></div>\ | |
114 | <h3 class='popover-title'></h3>\ |
|
109 | <h3 class='popover-title'></h3>\ | |
115 | <div class='popover-content'></div>\ |
|
110 | <div class='popover-content'></div>\ | |
116 | <div class='popover-navigation'>\ |
|
111 | <div class='popover-navigation'>\ | |
117 | <button class='btn btn-default icon-step-backward' data-role='prev'></button>\ |
|
112 | <button class='btn btn-default icon-step-backward' data-role='prev'></button>\ | |
118 | <button class='btn btn-default icon-step-forward pull-right' data-role='next'></button>\ |
|
113 | <button class='btn btn-default icon-step-forward pull-right' data-role='next'></button>\ | |
119 | <button id='tour-pause' class='btn btn-sm btn-default icon-pause' data-resume-text='' data-pause-text='' data-role='pause-resume'></button>\ |
|
114 | <button id='tour-pause' class='btn btn-sm btn-default icon-pause' data-resume-text='' data-pause-text='' data-role='pause-resume'></button>\ | |
120 | </div>\ |
|
115 | </div>\ | |
121 | </div>"; |
|
116 | </div>"; | |
122 |
|
117 | |||
123 | var command_icon_hack = function() {$('#modal_indicator').css('min-height', 20);} |
|
118 | var command_icon_hack = function() {$('#modal_indicator').css('min-height', 20);} | |
124 | var toggle_pause_play = function () { $('#tour-pause').toggleClass('icon-pause icon-play'); }; |
|
119 | var toggle_pause_play = function () { $('#tour-pause').toggleClass('icon-pause icon-play'); }; | |
125 | var edit_mode = function() { |
|
120 | var edit_mode = function() { | |
126 | IPython.notebook.focus_cell(); |
|
121 | IPython.notebook.focus_cell(); | |
127 | IPython.notebook.edit_mode(); |
|
122 | IPython.notebook.edit_mode(); | |
128 | ;} |
|
123 | ;} | |
129 |
|
124 | |||
130 | IPython = (function (IPython) { |
|
125 | IPython = (function (IPython) { | |
131 | "use strict"; |
|
126 | "use strict"; | |
132 |
|
127 | |||
133 |
|
128 | |||
134 | var NotebookTour = function () { |
|
129 | var NotebookTour = function () { | |
135 | this.step_duration = 0; |
|
130 | this.step_duration = 0; | |
136 | this.tour_steps = tour_steps ; |
|
131 | this.tour_steps = tour_steps ; | |
137 | this.tour_steps[0].content = "You can use the left and right arrow keys to go backwards and forwards."; |
|
132 | this.tour_steps[0].content = "You can use the left and right arrow keys to go backwards and forwards."; | |
138 | this.tour = new Tour({ |
|
133 | this.tour = new Tour({ | |
139 | //orphan: true, |
|
134 | //orphan: true, | |
140 | storage: false, // start tour from beginning every time |
|
135 | storage: false, // start tour from beginning every time | |
141 | //element: $("#ipython_notebook"), |
|
136 | //element: $("#ipython_notebook"), | |
142 | debug: true, |
|
137 | debug: true, | |
143 | reflex: true, // click on element to continue tour |
|
138 | reflex: true, // click on element to continue tour | |
144 | //backdrop: true, // show dark behind popover |
|
139 | //backdrop: true, // show dark behind popover | |
145 | animation: false, |
|
140 | animation: false, | |
146 | duration: this.step_duration, |
|
141 | duration: this.step_duration, | |
147 | onStart: function() { console.log('tour started'); }, |
|
142 | onStart: function() { console.log('tour started'); }, | |
148 | // TODO: remove the onPause/onResume logic once pi's patch has been |
|
143 | // TODO: remove the onPause/onResume logic once pi's patch has been | |
149 | // merged upstream to make this work via data-resume-class and |
|
144 | // merged upstream to make this work via data-resume-class and | |
150 | // data-resume-text attributes. |
|
145 | // data-resume-text attributes. | |
151 | onPause: toggle_pause_play, |
|
146 | onPause: toggle_pause_play, | |
152 | onResume: toggle_pause_play, |
|
147 | onResume: toggle_pause_play, | |
153 | steps: this.tour_steps, |
|
148 | steps: this.tour_steps, | |
154 | template: tour_style, |
|
149 | template: tour_style, | |
155 | orphan: true |
|
150 | orphan: true | |
156 | }); |
|
151 | }); | |
157 |
|
152 | |||
158 | }; |
|
153 | }; | |
159 |
|
154 | |||
160 | NotebookTour.prototype.start = function () { |
|
155 | NotebookTour.prototype.start = function () { | |
161 | console.log("let's start the tour"); |
|
156 | console.log("let's start the tour"); | |
162 | this.tour.init(); |
|
157 | this.tour.init(); | |
163 | this.tour.start(); |
|
158 | this.tour.start(); | |
164 | if (this.tour.ended()) |
|
159 | if (this.tour.ended()) | |
165 | { |
|
160 | { | |
166 | this.tour.restart(); |
|
161 | this.tour.restart(); | |
167 | } |
|
162 | } | |
168 | }; |
|
163 | }; | |
169 |
|
164 | |||
170 | // Set module variables |
|
165 | // Set module variables | |
171 | IPython.NotebookTour = NotebookTour; |
|
166 | IPython.NotebookTour = NotebookTour; | |
172 |
|
167 | |||
173 | return IPython; |
|
168 | return IPython; | |
174 |
|
169 | |||
175 | }(IPython)); |
|
170 | }(IPython)); |
General Comments 0
You need to be logged in to leave comments.
Login now