##// END OF EJS Templates
Removed block commented tour step (never worked anyways)
Jonathan Frederic -
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