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