Show More
@@ -1,38 +1,52 b'' | |||
|
1 | /*Css for the metadata edit area*/ | |
|
1 | /* Css for the metadata edit area */ | |
|
2 | 2 | |
|
3 | .celltoolbar{ | |
|
4 | border:thin solid #DDD; | |
|
5 | margin-left:81px; | |
|
6 | border-bottom:none; | |
|
3 | ||
|
4 | .celltoolbar { | |
|
5 | border: thin solid #DDD; | |
|
6 | margin-left: 0px; | |
|
7 | border-bottom: none; | |
|
7 | 8 | background : #EEE; |
|
8 | 9 | border-top-right-radius: 3px; |
|
9 | 10 | border-top-left-radius: 3px; |
|
10 | display:none; | |
|
11 | 11 | } |
|
12 | 12 | |
|
13 | .code_cell .celltoolbar{ | |
|
14 | margin-left:81px; | |
|
13 | .no_input_radius { | |
|
14 | border-top-right-radius: 0px; | |
|
15 | border-top-left-radius: 0px; | |
|
15 | 16 | } |
|
16 | 17 | |
|
17 |
.text_cell .c |
|
|
18 | margin-left:0px; | |
|
18 | .text_cell .ctb_prompt { | |
|
19 | display: none; | |
|
19 | 20 | } |
|
20 | 21 | |
|
21 | .celltoolbar-on div.input_area , .celltoolbar-on div.text_cell_input{ | |
|
22 | border-top-right-radius: 0px; | |
|
23 | border-top-left-radius: 0px; | |
|
22 | .code_cell .ctb_prompt { | |
|
23 | display: block; | |
|
24 | 24 | } |
|
25 | 25 | |
|
26 | .celltoolbar-on .celltoolbar { | |
|
27 |
display: |
|
|
26 | .ctb_hideshow { | |
|
27 | display: none; | |
|
28 | 28 | } |
|
29 | 29 | |
|
30 | .celltoolbar ui-button { | |
|
31 | border :none; | |
|
30 | /*ctb_show is added to either body or the ctb_hideshow div to show | |
|
31 | all or one cell's toolbars. | |
|
32 | */ | |
|
33 | .ctb_show.ctb_hideshow, .ctb_show .ctb_hideshow { | |
|
34 | display: block; | |
|
35 | } | |
|
36 | ||
|
37 | .ctb_show .ctb_hideshow + div > div.input_area, | |
|
38 | .ctb_show .ctb_hideshow + div.text_cell_input { | |
|
39 | border-top-right-radius: 0px; | |
|
40 | border-top-left-radius: 0px; | |
|
41 | } | |
|
42 | ||
|
43 | .ctb_show > .celltoolbar { | |
|
44 | border-bottom-right-radius: 0px; | |
|
45 | border-bottom-left-radius: 0px; | |
|
32 | 46 | } |
|
33 | 47 | |
|
34 | 48 | .button_container { |
|
35 | float:right; | |
|
49 | float: right; | |
|
36 | 50 | } |
|
37 | 51 | |
|
38 | 52 | .button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{ |
@@ -40,14 +54,22 b'' | |||
|
40 | 54 | border : none; |
|
41 | 55 | } |
|
42 | 56 | |
|
43 | .celltoolbar select { | |
|
44 | margin:10px; | |
|
45 | margin-top:0px; | |
|
46 | margin-bottom:0px; | |
|
57 | .celltoolbar .button_container select { | |
|
58 | margin: 10px; | |
|
59 | margin-top: 0px; | |
|
60 | margin-bottom: 0px; | |
|
61 | font-size: 77%; | |
|
62 | } | |
|
63 | ||
|
64 | .celltoolbar label span { | |
|
65 | font-size: 77%; | |
|
47 | 66 | } |
|
48 | 67 | |
|
49 | 68 | .celltoolbar input[type=checkbox] { |
|
50 | margin-bottom:1px; | |
|
69 | margin-bottom: 1px; | |
|
70 | } | |
|
51 | 71 | |
|
72 | .celltoolbar ui-button { | |
|
73 | border: none; | |
|
52 | 74 | } |
|
53 | 75 |
@@ -51,7 +51,6 b' var IPython = (function (IPython) {' | |||
|
51 | 51 | * @method create_element |
|
52 | 52 | */ |
|
53 | 53 | Cell.prototype.create_element = function () { |
|
54 | this.celltoolbar = new IPython.CellToolbar(this); | |
|
55 | 54 | }; |
|
56 | 55 | |
|
57 | 56 |
@@ -19,7 +19,6 b'' | |||
|
19 | 19 | var IPython = (function (IPython) { |
|
20 | 20 | "use strict"; |
|
21 | 21 | |
|
22 | ||
|
23 | 22 | /** |
|
24 | 23 | * @constructor |
|
25 | 24 | * @class CellToolbar |
@@ -27,30 +26,51 b' var IPython = (function (IPython) {' | |||
|
27 | 26 | */ |
|
28 | 27 | var CellToolbar = function (cell) { |
|
29 | 28 | CellToolbar._instances.push(this); |
|
30 | this.inner_element = $('<div/>'); | |
|
31 | 29 | this.cell = cell; |
|
32 | this.element = $('<div/>').addClass('celltoolbar') | |
|
33 | .append(this.inner_element) | |
|
30 | this.create_element(); | |
|
34 | 31 | this.rebuild(); |
|
35 | 32 | return this; |
|
36 | 33 | }; |
|
37 | 34 | |
|
38 | CellToolbar.dropdown_preset_element = $('<select/>') | |
|
39 | .addClass('ui-widget ui-widget-content') | |
|
40 | .attr('id', 'celltoolbar_selector') | |
|
41 | .append($('<option/>').attr('value', '').text('None')) | |
|
42 | ||
|
43 | CellToolbar.dropdown_preset_element.change(function(){ | |
|
44 | var val = CellToolbar.dropdown_preset_element.val() | |
|
45 | if(val ==''){ | |
|
46 | $('body').removeClass('celltoolbar-on') | |
|
47 | } else { | |
|
48 | $('body').addClass('celltoolbar-on') | |
|
49 | CellToolbar.activate_preset(val) | |
|
50 | } | |
|
51 | }) | |
|
35 | ||
|
36 | CellToolbar.prototype.create_element = function () { | |
|
37 | this.inner_element = $('<div/>'); | |
|
38 | var ctb_element = $('<div/>').addClass('celltoolbar') | |
|
39 | .append(this.inner_element); | |
|
40 | ctb_element.addClass('box-flex1'); | |
|
41 | var ctb_area = $('<div/>').addClass('ctb_area hbox'); | |
|
42 | var ctb_prompt = $('<div/>').addClass('ctb_prompt prompt'); | |
|
43 | ctb_area.append(ctb_prompt).append(ctb_element); | |
|
44 | this.element = $('<div/>').addClass('ctb_hideshow') | |
|
45 | .append(ctb_area); | |
|
46 | }; | |
|
47 | ||
|
48 | ||
|
49 | // The default css style for the outer celltoolbar div | |
|
50 | // (ctb_hideshow) is display: none. We add the ctb_show | |
|
51 | // class to either 1) the body to show all cell's toolbars | |
|
52 | // or 2) to the individual celltoolbar divs to show just one | |
|
53 | // cell's toolbar. | |
|
54 | ||
|
55 | CellToolbar.global_hide = function () { | |
|
56 | $('body').removeClass('ctb_show'); | |
|
57 | } | |
|
52 | 58 | |
|
53 | 59 | |
|
60 | CellToolbar.global_show = function () { | |
|
61 | $('body').addClass('ctb_show'); | |
|
62 | } | |
|
63 | ||
|
64 | ||
|
65 | CellToolbar.prototype.hide = function () { | |
|
66 | this.element.removeClass('ctb_show'); | |
|
67 | } | |
|
68 | ||
|
69 | ||
|
70 | CellToolbar.prototype.show = function () { | |
|
71 | this.element.addClass('ctb_show'); | |
|
72 | } | |
|
73 | ||
|
54 | 74 | |
|
55 | 75 | /** |
|
56 | 76 | * Class variable that should contain a dict of all availlable callback |
@@ -62,6 +82,7 b' var IPython = (function (IPython) {' | |||
|
62 | 82 | */ |
|
63 | 83 | CellToolbar._callback_dict = {}; |
|
64 | 84 | |
|
85 | ||
|
65 | 86 | /** |
|
66 | 87 | * Class variable that should contain the reverse order list of the button |
|
67 | 88 | * to add to the toolbar of each cell |
@@ -72,6 +93,7 b' var IPython = (function (IPython) {' | |||
|
72 | 93 | */ |
|
73 | 94 | CellToolbar._ui_controls_list = []; |
|
74 | 95 | |
|
96 | ||
|
75 | 97 | /** |
|
76 | 98 | * Class variable that should contains the CellToolbar instances for each |
|
77 | 99 | * cell of the notebook |
@@ -83,6 +105,7 b' var IPython = (function (IPython) {' | |||
|
83 | 105 | */ |
|
84 | 106 | CellToolbar._instances =[] |
|
85 | 107 | |
|
108 | ||
|
86 | 109 | /** |
|
87 | 110 | * keep a list of all the availlabel presets for the toolbar |
|
88 | 111 | * @private |
@@ -92,6 +115,7 b' var IPython = (function (IPython) {' | |||
|
92 | 115 | */ |
|
93 | 116 | CellToolbar._presets ={} |
|
94 | 117 | |
|
118 | ||
|
95 | 119 | // this is by design not a prototype. |
|
96 | 120 | /** |
|
97 | 121 | * Register a callback to create an UI element in a cell toolbar. |
@@ -139,6 +163,7 b' var IPython = (function (IPython) {' | |||
|
139 | 163 | CellToolbar._callback_dict[name] = callback; |
|
140 | 164 | }; |
|
141 | 165 | |
|
166 | ||
|
142 | 167 | /** |
|
143 | 168 | * Register a preset of UI element in a cell toolbar. |
|
144 | 169 | * Not supported Yet. |
@@ -160,12 +185,28 b' var IPython = (function (IPython) {' | |||
|
160 | 185 | * CellToolbar.register_preset('foo.foo_preset1', ['foo.c1', 'foo.c2', 'foo.c5']) |
|
161 | 186 | * CellToolbar.register_preset('foo.foo_preset2', ['foo.c4', 'foo.c5']) |
|
162 | 187 | */ |
|
163 | CellToolbar.register_preset = function(name, preset_list){ | |
|
188 | CellToolbar.register_preset = function(name, preset_list) { | |
|
164 | 189 | CellToolbar._presets[name] = preset_list |
|
165 | CellToolbar.dropdown_preset_element.append( | |
|
166 | $('<option/>').attr('value', name).text(name) | |
|
167 | ) | |
|
168 | } | |
|
190 | $([IPython.events]).trigger('preset_added.CellToolbar', {name: name}); | |
|
191 | }; | |
|
192 | ||
|
193 | ||
|
194 | /** | |
|
195 | * List the names of the presets that are currently registered. | |
|
196 | * | |
|
197 | * @method list_presets | |
|
198 | * @static | |
|
199 | */ | |
|
200 | CellToolbar.list_presets = function() { | |
|
201 | var keys = []; | |
|
202 | for (var k in CellToolbar._presets) { | |
|
203 | keys.push(k); | |
|
204 | } | |
|
205 | console.log(keys); | |
|
206 | return keys; | |
|
207 | }; | |
|
208 | ||
|
209 | ||
|
169 | 210 | /** |
|
170 | 211 | * Activate an UI preset from `register_preset` |
|
171 | 212 | * |
@@ -190,7 +231,6 b' var IPython = (function (IPython) {' | |||
|
190 | 231 | } |
|
191 | 232 | |
|
192 | 233 | |
|
193 | // this is by design not a prototype. | |
|
194 | 234 | /** |
|
195 | 235 | * This should be called on the class and not on a instance as it will trigger |
|
196 | 236 | * rebuild of all the instances. |
@@ -224,7 +264,6 b' var IPython = (function (IPython) {' | |||
|
224 | 264 | this.inner_element.append(local_div) |
|
225 | 265 | cdict[preset[index]](local_div, this.cell) |
|
226 | 266 | } |
|
227 | ||
|
228 | 267 | } |
|
229 | 268 | |
|
230 | 269 | |
@@ -232,6 +271,7 b' var IPython = (function (IPython) {' | |||
|
232 | 271 | */ |
|
233 | 272 | CellToolbar.utils = {}; |
|
234 | 273 | |
|
274 | ||
|
235 | 275 | /** |
|
236 | 276 | * A utility function to generate bindings between a checkbox and cell/metadata |
|
237 | 277 | * @method utils.checkbox_ui_generator |
@@ -274,7 +314,7 b' var IPython = (function (IPython) {' | |||
|
274 | 314 | var button_container = $(div) |
|
275 | 315 | |
|
276 | 316 | var chkb = $('<input/>').attr('type', 'checkbox'); |
|
277 |
var lbl = $('<label/>').append($('<span/>').text(name) |
|
|
317 | var lbl = $('<label/>').append($('<span/>').text(name)); | |
|
278 | 318 | lbl.append(chkb); |
|
279 | 319 | chkb.attr("checked", getter(cell)); |
|
280 | 320 | |
@@ -288,6 +328,7 b' var IPython = (function (IPython) {' | |||
|
288 | 328 | } |
|
289 | 329 | } |
|
290 | 330 | |
|
331 | ||
|
291 | 332 | /** |
|
292 | 333 | * A utility function to generate bindings between a dropdown list cell |
|
293 | 334 | * @method utils.select_ui_generator |
@@ -334,8 +375,8 b' var IPython = (function (IPython) {' | |||
|
334 | 375 | label= label? label: ""; |
|
335 | 376 | return function(div, cell) { |
|
336 | 377 | var button_container = $(div) |
|
337 |
var lbl = $("<label/>").append($('<span/>').text(label) |
|
|
338 | var select = $('<select/>'); | |
|
378 | var lbl = $("<label/>").append($('<span/>').text(label)); | |
|
379 | var select = $('<select/>').addClass('ui-widget ui-widget-content'); | |
|
339 | 380 | for(var itemn in list_list){ |
|
340 | 381 | var opt = $('<option/>'); |
|
341 | 382 | opt.attr('value', list_list[itemn][1]) |
@@ -89,6 +89,6 b'' | |||
|
89 | 89 | example_preset.push('default.rawedit'); |
|
90 | 90 | |
|
91 | 91 | CellToolbar.register_preset('Default',example_preset); |
|
92 |
console.log('Default extension for metadata edit |
|
|
92 | console.log('Default extension for metadata editing loaded.'); | |
|
93 | 93 | |
|
94 | 94 | }(IPython)); |
@@ -61,8 +61,11 b' var IPython = (function (IPython) {' | |||
|
61 | 61 | IPython.Cell.prototype.create_element.apply(this, arguments); |
|
62 | 62 | |
|
63 | 63 | var cell = $('<div></div>').addClass('cell border-box-sizing code_cell vbox'); |
|
64 | cell.append(this.celltoolbar.element); | |
|
65 | 64 | cell.attr('tabindex','2'); |
|
65 | ||
|
66 | this.celltoolbar = new IPython.CellToolbar(this); | |
|
67 | cell.append(this.celltoolbar.element); | |
|
68 | ||
|
66 | 69 | var input = $('<div></div>').addClass('input hbox'); |
|
67 | 70 | input.append($('<div/>').addClass('prompt input_prompt')); |
|
68 | 71 | var input_area = $('<div/>').addClass('input_area box-flex1'); |
@@ -12,14 +12,11 b'' | |||
|
12 | 12 | var IPython = (function (IPython) { |
|
13 | 13 | |
|
14 | 14 | var MainToolBar = function (selector) { |
|
15 | this.selector = selector; | |
|
16 | 15 | IPython.ToolBar.apply(this, arguments); |
|
17 | 16 | this.construct(); |
|
18 |
this.add_ |
|
|
17 | this.add_celltype_list(); | |
|
18 | this.add_celltoolbar_list(); | |
|
19 | 19 | this.bind_events(); |
|
20 | $(this.selector) | |
|
21 | .append($('<label/>').text('Cell Toolbar:')) | |
|
22 | .append(IPython.CellToolbar.dropdown_preset_element) | |
|
23 | 20 | }; |
|
24 | 21 | |
|
25 | 22 | MainToolBar.prototype = new IPython.ToolBar(); |
@@ -120,23 +117,54 b' var IPython = (function (IPython) {' | |||
|
120 | 117 | ],'run_int'); |
|
121 | 118 | }; |
|
122 | 119 | |
|
123 |
MainToolBar.prototype.add_ |
|
|
124 | var select = $(this.selector) | |
|
120 | MainToolBar.prototype.add_celltype_list = function () { | |
|
121 | this.element | |
|
125 | 122 | .append($('<select/>') |
|
126 | 123 | .attr('id','cell_type') |
|
127 |
.addClass('ui-widget |
|
|
128 |
|
|
|
129 |
|
|
|
130 |
|
|
|
131 |
|
|
|
132 |
|
|
|
133 |
|
|
|
134 |
|
|
|
135 |
|
|
|
136 |
|
|
|
137 |
|
|
|
124 | .addClass('ui-widget-content') | |
|
125 | .append($('<option/>').attr('value','code').text('Code')) | |
|
126 | .append($('<option/>').attr('value','markdown').text('Markdown')) | |
|
127 | .append($('<option/>').attr('value','raw').text('Raw Text')) | |
|
128 | .append($('<option/>').attr('value','heading1').text('Heading 1')) | |
|
129 | .append($('<option/>').attr('value','heading2').text('Heading 2')) | |
|
130 | .append($('<option/>').attr('value','heading3').text('Heading 3')) | |
|
131 | .append($('<option/>').attr('value','heading4').text('Heading 4')) | |
|
132 | .append($('<option/>').attr('value','heading5').text('Heading 5')) | |
|
133 | .append($('<option/>').attr('value','heading6').text('Heading 6')) | |
|
134 | ); | |
|
138 | 135 | }; |
|
139 | 136 | |
|
137 | ||
|
138 | MainToolBar.prototype.add_celltoolbar_list = function () { | |
|
139 | var label = $('<label/>').text('Cell Toolbar:'); | |
|
140 | var select = $('<select/>') | |
|
141 | .addClass('ui-widget-content') | |
|
142 | .attr('id', 'ctb_select') | |
|
143 | .append($('<option/>').attr('value', '').text('None')); | |
|
144 | this.element.append(label).append(select); | |
|
145 | select.change(function() { | |
|
146 | var val = $(this).val() | |
|
147 | if (val =='') { | |
|
148 | IPython.CellToolbar.global_hide(); | |
|
149 | } else { | |
|
150 | IPython.CellToolbar.global_show(); | |
|
151 | IPython.CellToolbar.activate_preset(val); | |
|
152 | } | |
|
153 | }); | |
|
154 | // Setup the currently registered presets. | |
|
155 | var presets = IPython.CellToolbar.list_presets(); | |
|
156 | for (var i=0; i<presets.length; i++) { | |
|
157 | var name = presets[i]; | |
|
158 | select.append($('<option/>').attr('value', name).text(name)); | |
|
159 | } | |
|
160 | // Setup future preset registrations. | |
|
161 | $([IPython.events]).on('preset_added.CellToolbar', function (event, data) { | |
|
162 | var name = data.name; | |
|
163 | select.append($('<option/>').attr('value', name).text(name)); | |
|
164 | }); | |
|
165 | }; | |
|
166 | ||
|
167 | ||
|
140 | 168 | MainToolBar.prototype.bind_events = function () { |
|
141 | 169 | var that = this; |
|
142 | 170 |
@@ -44,8 +44,11 b' var IPython = (function (IPython) {' | |||
|
44 | 44 | TextCell.prototype.create_element = function () { |
|
45 | 45 | IPython.Cell.prototype.create_element.apply(this, arguments); |
|
46 | 46 | var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox'); |
|
47 | cell.append(this.celltoolbar.element); | |
|
48 | 47 | cell.attr('tabindex','2'); |
|
48 | ||
|
49 | this.celltoolbar = new IPython.CellToolbar(this); | |
|
50 | cell.append(this.celltoolbar.element); | |
|
51 | ||
|
49 | 52 | var input_area = $('<div/>').addClass('text_cell_input border-box-sizing'); |
|
50 | 53 | this.code_mirror = CodeMirror(input_area.get(0), { |
|
51 | 54 | indentUnit : 4, |
General Comments 0
You need to be logged in to leave comments.
Login now