##// END OF EJS Templates
trigger textcell render on unselect instead of focusout
MinRK -
Show More
@@ -1,272 +1,276
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2008-2011 The IPython Development Team
2 // Copyright (C) 2008-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 // TextCell
9 // TextCell
10 //============================================================================
10 //============================================================================
11
11
12 var IPython = (function (IPython) {
12 var IPython = (function (IPython) {
13
13
14 // TextCell base class
14 // TextCell base class
15
15
16 var TextCell = function (notebook) {
16 var TextCell = function (notebook) {
17 this.code_mirror_mode = this.code_mirror_mode || 'htmlmixed';
17 this.code_mirror_mode = this.code_mirror_mode || 'htmlmixed';
18 this.placeholder = this.placeholder || '\u0000';
18 this.placeholder = this.placeholder || '\u0000';
19 IPython.Cell.apply(this, arguments);
19 IPython.Cell.apply(this, arguments);
20 this.rendered = false;
20 this.rendered = false;
21 this.cell_type = this.cell_type || 'text';
21 this.cell_type = this.cell_type || 'text';
22 };
22 };
23
23
24
24
25 TextCell.prototype = new IPython.Cell();
25 TextCell.prototype = new IPython.Cell();
26
26
27
27
28 TextCell.prototype.create_element = function () {
28 TextCell.prototype.create_element = function () {
29 var cell = $("<div>").addClass('cell text_cell border-box-sizing');
29 var cell = $("<div>").addClass('cell text_cell border-box-sizing');
30 cell.attr('tabindex','2');
30 cell.attr('tabindex','2');
31 var input_area = $('<div/>').addClass('text_cell_input');
31 var input_area = $('<div/>').addClass('text_cell_input');
32 this.code_mirror = CodeMirror(input_area.get(0), {
32 this.code_mirror = CodeMirror(input_area.get(0), {
33 indentUnit : 4,
33 indentUnit : 4,
34 mode: this.code_mirror_mode,
34 mode: this.code_mirror_mode,
35 theme: 'default',
35 theme: 'default',
36 value: this.placeholder,
36 value: this.placeholder,
37 readOnly: this.read_only
37 readOnly: this.read_only
38 });
38 });
39 // The tabindex=-1 makes this div focusable.
39 // The tabindex=-1 makes this div focusable.
40 var render_area = $('<div/>').addClass('text_cell_render').
40 var render_area = $('<div/>').addClass('text_cell_render').
41 addClass('rendered_html').attr('tabindex','-1');
41 addClass('rendered_html').attr('tabindex','-1');
42 cell.append(input_area).append(render_area);
42 cell.append(input_area).append(render_area);
43 this.element = cell;
43 this.element = cell;
44 };
44 };
45
45
46
46
47 TextCell.prototype.bind_events = function () {
47 TextCell.prototype.bind_events = function () {
48 IPython.Cell.prototype.bind_events.apply(this);
48 IPython.Cell.prototype.bind_events.apply(this);
49 var that = this;
49 var that = this;
50 this.element.keydown(function (event) {
50 this.element.keydown(function (event) {
51 if (event.which === 13) {
51 if (event.which === 13) {
52 if (that.rendered) {
52 if (that.rendered) {
53 that.edit();
53 that.edit();
54 event.preventDefault();
54 event.preventDefault();
55 }
55 }
56 }
56 }
57 });
57 });
58 };
58 };
59
59
60
60
61 TextCell.prototype.select = function () {
61 TextCell.prototype.select = function () {
62 IPython.Cell.prototype.select.apply(this);
62 IPython.Cell.prototype.select.apply(this);
63 var output = this.element.find("div.text_cell_render");
63 var output = this.element.find("div.text_cell_render");
64 output.trigger('focus');
64 output.trigger('focus');
65 };
65 };
66
66
67
67
68 TextCell.prototype.unselect = function() {
69 // render on selection of another cell
70 this.render();
71 IPython.Cell.prototype.unselect.apply(this);
72 };
73
74
68 TextCell.prototype.edit = function () {
75 TextCell.prototype.edit = function () {
69 if ( this.read_only ) return;
76 if ( this.read_only ) return;
70 if (this.rendered === true) {
77 if (this.rendered === true) {
71 var text_cell = this.element;
78 var text_cell = this.element;
72 var output = text_cell.find("div.text_cell_render");
79 var output = text_cell.find("div.text_cell_render");
73 output.hide();
80 output.hide();
74 text_cell.find('div.text_cell_input').show();
81 text_cell.find('div.text_cell_input').show();
75 this.code_mirror.focus();
82 this.code_mirror.focus();
76 this.code_mirror.refresh();
83 this.code_mirror.refresh();
77 this.rendered = false;
84 this.rendered = false;
78 if (this.get_source() === this.placeholder) {
85 if (this.get_source() === this.placeholder) {
79 this.set_source('');
86 this.set_source('');
80 }
87 }
81 }
88 }
82 };
89 };
83
90
84
91
85 // Subclasses must define render.
92 // Subclasses must define render.
86 TextCell.prototype.render = function () {};
93 TextCell.prototype.render = function () {};
87
94
88
95
89 TextCell.prototype.config_mathjax = function () {
96 TextCell.prototype.config_mathjax = function () {
90 var text_cell = this.element;
97 var text_cell = this.element;
91 var that = this;
98 var that = this;
92 text_cell.dblclick(function () {
99 text_cell.dblclick(function () {
93 that.edit();
100 that.edit();
94 }).focusout(function () {
95 that.render();
96 });
101 });
97
102 that.render();
98 text_cell.trigger("focusout");
99 };
103 };
100
104
101
105
102 TextCell.prototype.get_source = function() {
106 TextCell.prototype.get_source = function() {
103 return this.code_mirror.getValue();
107 return this.code_mirror.getValue();
104 };
108 };
105
109
106
110
107 TextCell.prototype.set_source = function(text) {
111 TextCell.prototype.set_source = function(text) {
108 this.code_mirror.setValue(text);
112 this.code_mirror.setValue(text);
109 this.code_mirror.refresh();
113 this.code_mirror.refresh();
110 };
114 };
111
115
112
116
113 TextCell.prototype.get_rendered = function() {
117 TextCell.prototype.get_rendered = function() {
114 return this.element.find('div.text_cell_render').html();
118 return this.element.find('div.text_cell_render').html();
115 };
119 };
116
120
117
121
118 TextCell.prototype.set_rendered = function(text) {
122 TextCell.prototype.set_rendered = function(text) {
119 this.element.find('div.text_cell_render').html(text);
123 this.element.find('div.text_cell_render').html(text);
120 };
124 };
121
125
122
126
123 TextCell.prototype.at_top = function () {
127 TextCell.prototype.at_top = function () {
124 if (this.rendered) {
128 if (this.rendered) {
125 return true;
129 return true;
126 } else {
130 } else {
127 return false;
131 return false;
128 }
132 }
129 };
133 };
130
134
131
135
132 TextCell.prototype.at_bottom = function () {
136 TextCell.prototype.at_bottom = function () {
133 if (this.rendered) {
137 if (this.rendered) {
134 return true;
138 return true;
135 } else {
139 } else {
136 return false;
140 return false;
137 }
141 }
138 };
142 };
139
143
140
144
141 TextCell.prototype.fromJSON = function (data) {
145 TextCell.prototype.fromJSON = function (data) {
142 if (data.cell_type === this.cell_type) {
146 if (data.cell_type === this.cell_type) {
143 if (data.source !== undefined) {
147 if (data.source !== undefined) {
144 this.set_source(data.source);
148 this.set_source(data.source);
145 this.set_rendered(data.rendered || '');
149 this.set_rendered(data.rendered || '');
146 this.rendered = false;
150 this.rendered = false;
147 this.render();
151 this.render();
148 }
152 }
149 }
153 }
150 };
154 };
151
155
152
156
153 TextCell.prototype.toJSON = function () {
157 TextCell.prototype.toJSON = function () {
154 var data = {};
158 var data = {};
155 data.cell_type = this.cell_type;
159 data.cell_type = this.cell_type;
156 data.source = this.get_source();
160 data.source = this.get_source();
157 return data;
161 return data;
158 };
162 };
159
163
160
164
161 // HTMLCell
165 // HTMLCell
162
166
163 var HTMLCell = function (notebook) {
167 var HTMLCell = function (notebook) {
164 this.placeholder = "\u0000Type <strong>HTML</strong> and LaTeX: $\\alpha^2$";
168 this.placeholder = "\u0000Type <strong>HTML</strong> and LaTeX: $\\alpha^2$";
165 IPython.TextCell.apply(this, arguments);
169 IPython.TextCell.apply(this, arguments);
166 this.cell_type = 'html';
170 this.cell_type = 'html';
167 };
171 };
168
172
169
173
170 HTMLCell.prototype = new TextCell();
174 HTMLCell.prototype = new TextCell();
171
175
172
176
173 HTMLCell.prototype.render = function () {
177 HTMLCell.prototype.render = function () {
174 if (this.rendered === false) {
178 if (this.rendered === false) {
175 var text = this.get_source();
179 var text = this.get_source();
176 if (text === "") { text = this.placeholder; }
180 if (text === "") { text = this.placeholder; }
177 this.set_rendered(text);
181 this.set_rendered(text);
178 this.typeset();
182 this.typeset();
179 this.element.find('div.text_cell_input').hide();
183 this.element.find('div.text_cell_input').hide();
180 this.element.find("div.text_cell_render").show();
184 this.element.find("div.text_cell_render").show();
181 this.rendered = true;
185 this.rendered = true;
182 }
186 }
183 };
187 };
184
188
185
189
186 // MarkdownCell
190 // MarkdownCell
187
191
188 var MarkdownCell = function (notebook) {
192 var MarkdownCell = function (notebook) {
189 this.placeholder = "\u0000Type *Markdown* and LaTeX: $\\alpha^2$";
193 this.placeholder = "\u0000Type *Markdown* and LaTeX: $\\alpha^2$";
190 IPython.TextCell.apply(this, arguments);
194 IPython.TextCell.apply(this, arguments);
191 this.cell_type = 'markdown';
195 this.cell_type = 'markdown';
192 };
196 };
193
197
194
198
195 MarkdownCell.prototype = new TextCell();
199 MarkdownCell.prototype = new TextCell();
196
200
197
201
198 MarkdownCell.prototype.render = function () {
202 MarkdownCell.prototype.render = function () {
199 if (this.rendered === false) {
203 if (this.rendered === false) {
200 var text = this.get_source();
204 var text = this.get_source();
201 if (text === "") { text = this.placeholder; }
205 if (text === "") { text = this.placeholder; }
202 var html = IPython.markdown_converter.makeHtml(text);
206 var html = IPython.markdown_converter.makeHtml(text);
203 this.set_rendered(html);
207 this.set_rendered(html);
204 this.typeset()
208 this.typeset()
205 this.element.find('div.text_cell_input').hide();
209 this.element.find('div.text_cell_input').hide();
206 this.element.find("div.text_cell_render").show();
210 this.element.find("div.text_cell_render").show();
207 var code_snippets = this.element.find("pre > code");
211 var code_snippets = this.element.find("pre > code");
208 code_snippets.replaceWith(function () {
212 code_snippets.replaceWith(function () {
209 var code = $(this).html();
213 var code = $(this).html();
210 /* Substitute br for newlines and &nbsp; for spaces
214 /* Substitute br for newlines and &nbsp; for spaces
211 before highlighting, since prettify doesn't
215 before highlighting, since prettify doesn't
212 preserve those on all browsers */
216 preserve those on all browsers */
213 code = code.replace(/(\r\n|\n|\r)/gm, "<br/>");
217 code = code.replace(/(\r\n|\n|\r)/gm, "<br/>");
214 code = code.replace(/ /gm, '&nbsp;');
218 code = code.replace(/ /gm, '&nbsp;');
215 code = prettyPrintOne(code);
219 code = prettyPrintOne(code);
216
220
217 return '<code class="prettyprint">' + code + '</code>';
221 return '<code class="prettyprint">' + code + '</code>';
218 });
222 });
219 this.rendered = true;
223 this.rendered = true;
220 }
224 }
221 };
225 };
222
226
223
227
224 // RSTCell
228 // RSTCell
225
229
226 var RSTCell = function (notebook) {
230 var RSTCell = function (notebook) {
227 this.placeholder = "\u0000Type *ReStructured Text* and LaTeX: $\\alpha^2$";
231 this.placeholder = "\u0000Type *ReStructured Text* and LaTeX: $\\alpha^2$";
228 IPython.TextCell.apply(this, arguments);
232 IPython.TextCell.apply(this, arguments);
229 this.cell_type = 'rst';
233 this.cell_type = 'rst';
230 };
234 };
231
235
232
236
233 RSTCell.prototype = new TextCell();
237 RSTCell.prototype = new TextCell();
234
238
235
239
236 RSTCell.prototype.render = function () {
240 RSTCell.prototype.render = function () {
237 if (this.rendered === false) {
241 if (this.rendered === false) {
238 var text = this.get_source();
242 var text = this.get_source();
239 if (text === "") { text = this.placeholder; }
243 if (text === "") { text = this.placeholder; }
240 var settings = {
244 var settings = {
241 processData : false,
245 processData : false,
242 cache : false,
246 cache : false,
243 type : "POST",
247 type : "POST",
244 data : text,
248 data : text,
245 headers : {'Content-Type': 'application/x-rst'},
249 headers : {'Content-Type': 'application/x-rst'},
246 success : $.proxy(this.handle_render,this)
250 success : $.proxy(this.handle_render,this)
247 };
251 };
248 $.ajax("/rstservice/render", settings);
252 $.ajax("/rstservice/render", settings);
249 this.element.find('div.text_cell_input').hide();
253 this.element.find('div.text_cell_input').hide();
250 this.element.find("div.text_cell_render").show();
254 this.element.find("div.text_cell_render").show();
251 this.set_rendered("Rendering...");
255 this.set_rendered("Rendering...");
252 }
256 }
253 };
257 };
254
258
255
259
256 RSTCell.prototype.handle_render = function (data, status, xhr) {
260 RSTCell.prototype.handle_render = function (data, status, xhr) {
257 this.set_rendered(data);
261 this.set_rendered(data);
258 this.typeset();
262 this.typeset();
259 this.rendered = true;
263 this.rendered = true;
260 };
264 };
261
265
262
266
263 IPython.TextCell = TextCell;
267 IPython.TextCell = TextCell;
264 IPython.HTMLCell = HTMLCell;
268 IPython.HTMLCell = HTMLCell;
265 IPython.MarkdownCell = MarkdownCell;
269 IPython.MarkdownCell = MarkdownCell;
266 IPython.RSTCell = RSTCell;
270 IPython.RSTCell = RSTCell;
267
271
268
272
269 return IPython;
273 return IPython;
270
274
271 }(IPython));
275 }(IPython));
272
276
General Comments 0
You need to be logged in to leave comments. Login now