##// END OF EJS Templates
Refactoring of text/markdown/rst/html cells.
Brian Granger -
Show More
@@ -0,0 +1,20 b''
1 .rendered_html {color: black;}
2 .rendered_html em {font-style: italic;}
3 .rendered_html strong {font-weight: bold;}
4 .rendered_html u {text-decoration: underline;}
5 .rendered_html :link { text-decoration: underline }
6 .rendered_html :visited { text-decoration: underline }
7 .rendered_html h1 {font-size: 197%; margin: .67em 0; font-weight: bold;}
8 .rendered_html h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
9 .rendered_html h3 {font-size: 116%; margin: .83em 0; font-weight: bold;}
10 .rendered_html h4 {margin: 1.12em 0; font-weight: bold;}
11 .rendered_html h5 {font-size: 85%.; margin: 1.5em 0; font-weight: bold;}
12 .rendered_html h6 {font-size: 77%; margin: 1.67em 0; font-weight: bold;}
13 .rendered_html ul {list-style:disc; margin-left: 40px;}
14 .rendered_html ul ul {list-style:square; margin-left: 40px;}
15 .rendered_html ul ul ul {list-style:circle; margin-left: 40px;}
16 .rendered_html ol {list-style:upper-roman; margin-left: 40px;}
17 .rendered_html ol ol {list-style:upper-alpha;}
18 .rendered_html ol ol ol {list-style:decimal;}
19 .rendered_html ol ol ol ol {list-style:lower-alpha;}
20 .rendered_html ol ol ol ol ol {list-style:lower-roman;} No newline at end of file
@@ -69,7 +69,7 b' div.section_content {'
69 69
70 70
71 71 span.section_row_buttons > button {
72 width: 60px;
72 width: 70px;
73 73 }
74 74
75 75 .section_row {
@@ -205,31 +205,15 b' div.output_html {'
205 205 div.output_png {
206 206 }
207 207
208 div.html_cell {
208 div.text_cell {
209 209 background-color: white;
210 210 }
211 211
212 div.html_cell_input {
213 color: black;
214 }
215
216 div.html_cell_render {
217 font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
218 /* Slightly bigger than the rest of the notebook */
219 font-size: 116%;
220 outline: none;
221 resize: none;
222 width: inherit;
223 border-style: none;
224 padding: 5px;
225 color: black;
226 }
227
228 div.rst_cell_input {
212 div.text_cell_input {
229 213 color: black;
230 214 }
231 215
232 div.rst_cell_render {
216 div.text_cell_render {
233 217 font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
234 218 /* Slightly bigger than the rest of the notebook */
235 219 font-size: 116%;
@@ -241,27 +225,6 b' div.rst_cell_render {'
241 225 color: black;
242 226 }
243 227
244 .rendered_html {color: black;}
245 .rendered_html em {font-style: italic;}
246 .rendered_html strong {font-weight: bold;}
247 .rendered_html u {text-decoration: underline;}
248 .rendered_html :link { text-decoration: underline }
249 .rendered_html :visited { text-decoration: underline }
250 .rendered_html h1 {font-size: 197%; margin: .67em 0; font-weight: bold;}
251 .rendered_html h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
252 .rendered_html h3 {font-size: 116%; margin: .83em 0; font-weight: bold;}
253 .rendered_html h4 {margin: 1.12em 0; font-weight: bold;}
254 .rendered_html h5 {font-size: 85%.; margin: 1.5em 0; font-weight: bold;}
255 .rendered_html h6 {font-size: 77%; margin: 1.67em 0; font-weight: bold;}
256 .rendered_html ul {list-style:disc; margin-left: 40px;}
257 .rendered_html ul ul {list-style:square; margin-left: 40px;}
258 .rendered_html ul ul ul {list-style:circle; margin-left: 40px;}
259 .rendered_html ol {list-style:upper-roman; margin-left: 40px;}
260 .rendered_html ol ol {list-style:upper-alpha;}
261 .rendered_html ol ol ol {list-style:decimal;}
262 .rendered_html ol ol ol ol {list-style:lower-alpha;}
263 .rendered_html ol ol ol ol ol {list-style:lower-roman;}
264
265 228 .CodeMirror {
266 229 line-height: 1.231; /* Changed from 1em to our global default */
267 230 }
@@ -23,7 +23,7 b' var IPython = (function (IPython) {'
23 23 Cell.prototype.select = function () {
24 24 this.element.addClass('ui-widget-content ui-corner-all');
25 25 this.selected = true;
26 // TODO: we need t test across browsers to see if both of these are needed.
26 // TODO: we need to test across browsers to see if both of these are needed.
27 27 // In the meantime, there should not be any harm in having them both.
28 28 this.element.find('textarea').trigger('focusin');
29 29 this.element.find('textarea').trigger('focus');
@@ -12,7 +12,7 b' var IPython = (function (IPython) {'
12 12 this.left_panel_element = $(left_panel_selector);
13 13 this.left_panel_splitter_element = $(left_panel_splitter_selector);
14 14 this.expanded = true;
15 this.width = 250;
15 this.width = 300;
16 16 this.style();
17 17 this.bind_events();
18 18 this.create_children();
@@ -342,10 +342,10 b' var IPython = (function (IPython) {'
342 342 }
343 343
344 344
345 Notebook.prototype.insert_rst_cell_before = function (index) {
345 Notebook.prototype.insert_markdown_cell_before = function (index) {
346 346 // TODO: Bounds check for i
347 347 var i = this.index_or_selected(index);
348 var cell = new IPython.RSTCell(this);
348 var cell = new IPython.MarkdownCell(this);
349 349 cell.config_mathjax();
350 350 this.insert_cell_before(cell, i);
351 351 this.select(this.find_cell_index(cell));
@@ -353,10 +353,10 b' var IPython = (function (IPython) {'
353 353 }
354 354
355 355
356 Notebook.prototype.insert_rst_cell_after = function (index) {
356 Notebook.prototype.insert_markdown_cell_after = function (index) {
357 357 // TODO: Bounds check for i
358 358 var i = this.index_or_selected(index);
359 var cell = new IPython.RSTCell(this);
359 var cell = new IPython.MarkdownCell(this);
360 360 cell.config_mathjax();
361 361 this.insert_cell_after(cell, i);
362 362 this.select(this.find_cell_index(cell));
@@ -369,7 +369,8 b' var IPython = (function (IPython) {'
369 369 var i = this.index_or_selected(index);
370 370 var source_element = this.cell_elements().eq(i);
371 371 var source_cell = source_element.data("cell");
372 if (source_cell instanceof IPython.HTMLCell || source_cell instanceof IPython.RSTCell) {
372 if (source_cell instanceof IPython.HTMLCell ||
373 source_cell instanceof IPython.MarkdownCell) {
373 374 this.insert_code_cell_after(i);
374 375 var target_cell = this.cells()[i+1];
375 376 target_cell.set_code(source_cell.get_source());
@@ -378,20 +379,23 b' var IPython = (function (IPython) {'
378 379 };
379 380
380 381
381 Notebook.prototype.to_rst = function (index) {
382 Notebook.prototype.to_markdown = function (index) {
382 383 // TODO: Bounds check for i
383 384 var i = this.index_or_selected(index);
384 385 var source_element = this.cell_elements().eq(i);
385 386 var source_cell = source_element.data("cell");
386 387 var target_cell = null;
387 388 if (source_cell instanceof IPython.CodeCell) {
388 this.insert_rst_cell_after(i);
389 this.insert_markdown_cell_after(i);
389 390 var target_cell = this.cells()[i+1];
390 391 var text = source_cell.get_code();
391 392 } else if (source_cell instanceof IPython.HTMLCell) {
392 this.insert_rst_cell_after(i);
393 this.insert_markdown_cell_after(i);
393 394 var target_cell = this.cells()[i+1];
394 395 var text = source_cell.get_source();
396 if (text === source_cell.placeholder) {
397 text = target_cell.placeholder;
398 }
395 399 }
396 400 if (target_cell !== null) {
397 401 if (text === "") {text = target_cell.placeholder;};
@@ -412,10 +416,13 b' var IPython = (function (IPython) {'
412 416 this.insert_html_cell_after(i);
413 417 var target_cell = this.cells()[i+1];
414 418 var text = source_cell.get_code();
415 } else if (source_cell instanceof IPython.RSTCell) {
419 } else if (source_cell instanceof IPython.MarkdownCell) {
416 420 this.insert_html_cell_after(i);
417 421 var target_cell = this.cells()[i+1];
418 422 var text = source_cell.get_source();
423 if (text === source_cell.placeholder) {
424 text = target_cell.placeholder;
425 }
419 426 }
420 427 if (target_cell !== null) {
421 428 if (text === "") {text = target_cell.placeholder;};
@@ -158,8 +158,8 b' var IPython = (function (IPython) {'
158 158 this.content.find('#to_html').click(function () {
159 159 IPython.notebook.to_html();
160 160 });
161 this.content.find('#to_rst').click(function () {
162 IPython.notebook.to_rst();
161 this.content.find('#to_markdown').click(function () {
162 IPython.notebook.to_markdown();
163 163 });
164 164 this.content.find('#run_selected_cell').click(function () {
165 165 IPython.notebook.execute_selected_cell();
@@ -1,41 +1,44 b''
1 1
2 2 //============================================================================
3 // HTMLCell
3 // TextCell
4 4 //============================================================================
5 5
6 6 var IPython = (function (IPython) {
7 7
8 var HTMLCell = function (notebook) {
8 // TextCell base class
9
10 var TextCell = function (notebook) {
11 this.code_mirror_mode = this.code_mirror_mode || 'htmlmixed';
12 this.placeholder = this.placeholder || '';
9 13 IPython.Cell.apply(this, arguments);
10 this.placeholder = "Type <strong>HTML</strong> and LaTeX: $\\alpha^2$"
11 14 this.rendered = false;
15 this.cell_type = this.cell_type || 'text';
12 16 };
13 17
14 18
15 HTMLCell.prototype = new IPython.Cell();
16
19 TextCell.prototype = new IPython.Cell();
17 20
18 21
19 HTMLCell.prototype.create_element = function () {
20 var cell = $("<div>").addClass('cell html_cell border-box-sizing');
21 var input_area = $('<div/>').addClass('html_cell_input');
22 TextCell.prototype.create_element = function () {
23 var cell = $("<div>").addClass('cell text_cell border-box-sizing');
24 var input_area = $('<div/>').addClass('text_cell_input');
22 25 this.code_mirror = CodeMirror(input_area.get(0), {
23 26 indentUnit : 4,
24 27 enterMode : 'flat',
25 28 tabMode: 'shift',
26 mode: 'htmlmixed',
29 mode: this.code_mirror_mode,
27 30 theme: 'default',
28 31 value: this.placeholder
29 32 });
30 33 // The tabindex=-1 makes this div focusable.
31 var render_area = $('<div/>').addClass('html_cell_render').
34 var render_area = $('<div/>').addClass('text_cell_render').
32 35 addClass('rendered_html').attr('tabindex','-1');
33 36 cell.append(input_area).append(render_area);
34 37 this.element = cell;
35 38 };
36 39
37 40
38 HTMLCell.prototype.bind_events = function () {
41 TextCell.prototype.bind_events = function () {
39 42 IPython.Cell.prototype.bind_events.apply(this);
40 43 var that = this;
41 44 this.element.keydown(function (event) {
@@ -49,19 +52,19 b' var IPython = (function (IPython) {'
49 52 };
50 53
51 54
52 HTMLCell.prototype.select = function () {
55 TextCell.prototype.select = function () {
53 56 IPython.Cell.prototype.select.apply(this);
54 var output = this.element.find("div.html_cell_render");
57 var output = this.element.find("div.text_cell_render");
55 58 output.trigger('focus');
56 59 };
57 60
58 61
59 HTMLCell.prototype.edit = function () {
62 TextCell.prototype.edit = function () {
60 63 if (this.rendered === true) {
61 var html_cell = this.element;
62 var output = html_cell.find("div.html_cell_render");
64 var text_cell = this.element;
65 var output = text_cell.find("div.text_cell_render");
63 66 output.hide();
64 html_cell.find('div.html_cell_input').show();
67 text_cell.find('div.text_cell_input').show();
65 68 this.code_mirror.focus();
66 69 this.code_mirror.refresh();
67 70 this.rendered = false;
@@ -69,51 +72,45 b' var IPython = (function (IPython) {'
69 72 };
70 73
71 74
72 HTMLCell.prototype.render = function () {
73 if (this.rendered === false) {
74 var html_cell = this.element;
75 var output = html_cell.find("div.html_cell_render");
76 var text = this.get_source();
77 if (text === "") {text = this.placeholder;};
78 this.set_rendered(text);
79 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
80 html_cell.find('div.html_cell_input').hide();
81 output.show();
82 this.rendered = true;
83 };
84 };
75 // Subclasses must define render.
76 TextCell.prototype.render = function () {};
85 77
86 78
87 HTMLCell.prototype.config_mathjax = function () {
88 var html_cell = this.element;
79 TextCell.prototype.config_mathjax = function () {
80 var text_cell = this.element;
89 81 var that = this;
90 html_cell.click(function () {
82 text_cell.click(function () {
91 83 that.edit();
92 84 }).focusout(function () {
93 85 that.render();
94 86 });
95 87
96 html_cell.trigger("focusout");
88 text_cell.trigger("focusout");
97 89 };
98 90
99 91
100 HTMLCell.prototype.get_source = function() {
92 TextCell.prototype.get_source = function() {
101 93 return this.code_mirror.getValue();
102 94 };
103 95
104 96
105 HTMLCell.prototype.set_source = function(text) {
97 TextCell.prototype.set_source = function(text) {
106 98 this.code_mirror.setValue(text);
107 99 this.code_mirror.refresh();
108 100 };
109 101
110 102
111 HTMLCell.prototype.set_rendered = function(text) {
112 this.element.find('div.html_cell_render').html(text);
103 TextCell.prototype.get_rendered = function(text) {
104 return this.element.find('div.text_cell_render').html();
105 };
106
107
108 TextCell.prototype.set_rendered = function(text) {
109 this.element.find('div.text_cell_render').html(text);
113 110 };
114 111
115 112
116 HTMLCell.prototype.at_top = function () {
113 TextCell.prototype.at_top = function () {
117 114 if (this.rendered) {
118 115 return true;
119 116 } else {
@@ -122,7 +119,7 b' var IPython = (function (IPython) {'
122 119 };
123 120
124 121
125 HTMLCell.prototype.at_bottom = function () {
122 TextCell.prototype.at_bottom = function () {
126 123 if (this.rendered) {
127 124 return true;
128 125 } else {
@@ -131,8 +128,8 b' var IPython = (function (IPython) {'
131 128 };
132 129
133 130
134 HTMLCell.prototype.fromJSON = function (data) {
135 if (data.cell_type === 'html') {
131 TextCell.prototype.fromJSON = function (data) {
132 if (data.cell_type === this.cell_type) {
136 133 if (data.source !== undefined) {
137 134 this.set_source(data.source);
138 135 this.set_rendered(data.source);
@@ -141,14 +138,110 b' var IPython = (function (IPython) {'
141 138 }
142 139
143 140
144 HTMLCell.prototype.toJSON = function () {
141 TextCell.prototype.toJSON = function () {
145 142 var data = {}
146 data.cell_type = 'html';
143 data.cell_type = this.cell_type;
147 144 data.source = this.get_source();
145 data.rendered = this.get_rendered();
148 146 return data;
149 147 };
150 148
149
150 // HTMLCell
151
152 var HTMLCell = function (notebook) {
153 this.placeholder = "Type <strong>HTML</strong> and LaTeX: $\\alpha^2$";
154 IPython.TextCell.apply(this, arguments);
155 this.cell_type = 'html';
156 };
157
158
159 HTMLCell.prototype = new TextCell();
160
161
162 HTMLCell.prototype.render = function () {
163 if (this.rendered === false) {
164 var text = this.get_source();
165 if (text === "") {text = this.placeholder;};
166 this.set_rendered(text);
167 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
168 this.element.find('div.text_cell_input').hide();
169 this.element.find("div.text_cell_render").show();
170 this.rendered = true;
171 };
172 };
173
174
175 // MarkdownCell
176
177 var MarkdownCell = function (notebook) {
178 this.placeholder = "Type *Markdown* and LaTeX: $\\alpha^2$";
179 IPython.TextCell.apply(this, arguments);
180 this.cell_type = 'markdown';
181 };
182
183
184 MarkdownCell.prototype = new TextCell();
185
186
187 MarkdownCell.prototype.render = function () {
188 if (this.rendered === false) {
189 var text = this.get_source();
190 if (text === "") {text = this.placeholder;};
191 var html = IPython.markdown_converter.makeHtml(text);
192 this.set_rendered(html);
193 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
194 this.element.find('div.text_cell_input').hide();
195 this.element.find("div.text_cell_render").show();
196 this.rendered = true;
197 };
198 };
199
200
201 // RSTCell
202
203 var RSTCell = function (notebook) {
204 this.placeholder = "Type *ReStructured Text* and LaTeX: $\\alpha^2$";
205 IPython.TextCell.apply(this, arguments);
206 this.cell_type = 'rst';
207 };
208
209
210 RSTCell.prototype = new TextCell();
211
212
213 RSTCell.prototype.render = function () {
214 if (this.rendered === false) {
215 var text = this.get_source();
216 if (text === "") {text = this.placeholder;};
217 var settings = {
218 processData : false,
219 cache : false,
220 type : "POST",
221 data : text,
222 headers : {'Content-Type': 'application/x-rst'},
223 success : $.proxy(this.handle_render,this)
224 };
225 $.ajax("/rstservice/render", settings);
226 this.element.find('div.text_cell_input').hide();
227 this.element.find("div.text_cell_render").show();
228 this.set_rendered("Rendering...");
229 };
230 };
231
232
233 RSTCell.prototype.handle_render = function (data, status, xhr) {
234 this.set_rendered(data);
235 MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
236 this.rendered = true;
237 };
238
239
240 IPython.TextCell = TextCell;
151 241 IPython.HTMLCell = HTMLCell;
242 IPython.MarkdownCell = MarkdownCell;
243 IPython.RSTCell = RSTCell;
244
152 245
153 246 return IPython;
154 247
@@ -28,6 +28,8 b''
28 28 <link rel="stylesheet" href="static/css/layout.css" type="text/css" />
29 29 <link rel="stylesheet" href="static/css/base.css" type="text/css" />
30 30 <link rel="stylesheet" href="static/css/notebook.css" type="text/css" />
31 <link rel="stylesheet" href="static/css/renderedhtml.css" type="text/css" />
32
31 33
32 34 </head>
33 35
@@ -82,6 +84,14 b''
82 84 <span class="section_row_header">Actions</span>
83 85 </div>
84 86 <div class="section_row">
87 <span id="cell_type" class="section_row_buttons">
88 <button id="to_code">Code</button>
89 <button id="to_html">HTML</button>
90 <button id="to_markdown">Markdown</button>
91 </span>
92 <!-- <span class="button_label">Format</span> -->
93 </div>
94 <div class="section_row">
85 95 <span id="insert" class="section_row_buttons">
86 96 <button id="insert_cell_above">Above</button>
87 97 <button id="insert_cell_below">Below</button>
@@ -96,14 +106,6 b''
96 106 <span class="button_label">Move</span>
97 107 </div>
98 108 <div class="section_row">
99 <span id="cell_type" class="section_row_buttons">
100 <button id="to_code">Code</button>
101 <button id="to_html">HTML</button>
102 <button id="to_rst">RST</button>
103 </span>
104 <span class="button_label">Format</span>
105 </div>
106 <div class="section_row">
107 109 <span id="toggle_output" class="section_row_buttons">
108 110 <button id="collapse_cell">Collapse</button>
109 111 <button id="expand_cell">Expand</button>
@@ -173,12 +175,22 b''
173 175 <script src="static/jquery/js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
174 176 <script src="static/jquery/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript" charset="utf-8"></script>
175 177 <script src="static/jquery/js/jquery.autogrow.js" type="text/javascript" charset="utf-8"></script>
178
179 <script src="static/codemirror-2.12/lib/codemirror.js" charset="utf-8"></script>
180 <script src="static/codemirror-2.12/mode/python/python.js" charset="utf-8"></script>
181 <script src="static/codemirror-2.12/mode/htmlmixed/htmlmixed.js" charset="utf-8"></script>
182 <script src="static/codemirror-2.12/mode/xml/xml.js" charset="utf-8"></script>
183 <script src="static/codemirror-2.12/mode/javascript/javascript.js" charset="utf-8"></script>
184 <script src="static/codemirror-2.12/mode/css/css.js" charset="utf-8"></script>
185 <script src="static/codemirror-2.12/mode/rst/rst.js" charset="utf-8"></script>
186
187 <script src="static/pagedown/Markdown.Converter.js" charset="utf-8"></script>
188
176 189 <script src="static/js/namespace.js" type="text/javascript" charset="utf-8"></script>
177 190 <script src="static/js/utils.js" type="text/javascript" charset="utf-8"></script>
178 191 <script src="static/js/cell.js" type="text/javascript" charset="utf-8"></script>
179 192 <script src="static/js/codecell.js" type="text/javascript" charset="utf-8"></script>
180 <script src="static/js/htmlcell.js" type="text/javascript" charset="utf-8"></script>
181 <script src="static/js/rstcell.js" type="text/javascript" charset="utf-8"></script>
193 <script src="static/js/textcell.js" type="text/javascript" charset="utf-8"></script>
182 194 <script src="static/js/kernel.js" type="text/javascript" charset="utf-8"></script>
183 195 <script src="static/js/kernelstatus.js" type="text/javascript" charset="utf-8"></script>
184 196 <script src="static/js/layout.js" type="text/javascript" charset="utf-8"></script>
@@ -188,14 +200,7 b''
188 200 <script src="static/js/leftpanel.js" type="text/javascript" charset="utf-8"></script>
189 201 <script src="static/js/notebook.js" type="text/javascript" charset="utf-8"></script>
190 202 <script src="static/js/notebook_main.js" type="text/javascript" charset="utf-8"></script>
191 <script src="static/codemirror-2.12/lib/codemirror.js" charset="utf-8"></script>
192 <script src="static/codemirror-2.12/mode/python/python.js" charset="utf-8"></script>
193 <script src="static/codemirror-2.12/mode/htmlmixed/htmlmixed.js" charset="utf-8"></script>
194 <script src="static/codemirror-2.12/mode/xml/xml.js" charset="utf-8"></script>
195 <script src="static/codemirror-2.12/mode/javascript/javascript.js" charset="utf-8"></script>
196 <script src="static/codemirror-2.12/mode/css/css.js" charset="utf-8"></script>
197 <script src="static/codemirror-2.12/mode/rst/rst.js" charset="utf-8"></script>
198 <script src="static/pagedown/Markdown.Converter.js" charset="utf-8"></script>
203
199 204
200 205 </body>
201 206
1 NO CONTENT: file was removed
General Comments 0
You need to be logged in to leave comments. Login now