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