##// END OF EJS Templates
upstream » ipython
RSS

Clone from https://github.com/ipython/ipython.git

Allow toolbar construction in js...
Matthias BUSSONNIER -
Show More
Show file before | Show file after | Hide comments
@@ -60,7 +60,7 span#notebook_name {
60 60 z-index: 10;
61 61 }
62 62
63 #toolbar {
63 .toolbar {
64 64 padding: 3px 15px;
65 65 }
66 66
Show file before | Show file after | Hide comments
@@ -1,5 +1,5
1 1 //----------------------------------------------------------------------------
2 // Copyright (C) 2008-2011 The IPython Development Team
2 // Copyright (C) 2008 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.
@@ -14,99 +14,195 var IPython = (function (IPython) {
14 14 var ToolBar = function (selector) {
15 15 this.selector = selector;
16 16 if (this.selector !== undefined) {
17 this.construct();
18 this.addDropDownList();
17 19 this.element = $(selector);
18 20 this.style();
19 21 this.bind_events();
20 22 }
21 23 };
22 24
25 // add a group of button into the current toolbar.
26 //
27 // First argument : Mandatory
28 // list of dict as argument, each dict should contain
29 // 3 mandatory keys and values :
30 // 'label' : string -- the text to show on hover
31 // 'icon' : string -- the jQuery-ui icon to add on this button
32 // 'callback' : function -- the callback to execute on a click
33 //
34 // and optionnaly an 'id' key that is assigned to the button element
35 //
36 // Second Argument, optionnal,
37 // string reprensenting the id to give to the button group.
38 //
39 // Example
40 //
41 // IPython.toolbar.addButtonsGroup([
42 // {'label':'my button',
43 // 'icon':'ui-icon-disk',
44 // 'callback':function(){alert('hoho'),
45 // 'id' : 'my_button_id', // this is optionnal
46 // }
47 // },
48 // {'label':'my second button',
49 // 'icon':'ui-icon-scissors',
50 // 'callback':function(){alert('be carefull I cut')}
51 // }
52 // ],
53 // "my_button_group_id"
54 // )
55 //
56 ToolBar.prototype.addButtonsGroup = function(list, group_id){
57 var span_group = $('<span/>');
58 if( group_id != undefined )
59 span_group.attr('id',group_id)
60 for(var el in list)
61 {
62 var button = $('<button/>').button({
63 icons : {primary: list[el]['icon']},
64 text : false,
65 label: list[el]['label'],
66 });
67 var id = list[el]['id'];
68 if( id != undefined )
69 button.attr('id',id);
70 var fun = list[el]['callback']
71 button.click(fun);
72 span_group.append(button);
73 }
74 span_group.buttonset();
75 $(this.selector).append(span_group)
76 }
23 77
24 78 ToolBar.prototype.style = function () {
25 79 this.element.addClass('border-box-sizing').
26 addClass('ui-widget ui-widget-content').
80 addClass('ui-widget ui-widget-content toolbar').
27 81 css('border-top-style','none').
28 82 css('border-left-style','none').
29 83 css('border-right-style','none');
30 this.element.find('#cell_type').addClass('ui-widget ui-widget-content');
31 this.element.find('#save_b').button({
32 icons : {primary: 'ui-icon-disk'},
33 text : false
34 });
35 this.element.find('#cut_b').button({
36 icons: {primary: 'ui-icon-scissors'},
37 text : false
38 });
39 this.element.find('#copy_b').button({
40 icons: {primary: 'ui-icon-copy'},
41 text : false
42 });
43 this.element.find('#paste_b').button({
44 icons: {primary: 'ui-icon-clipboard'},
45 text : false
46 });
47 this.element.find('#cut_copy_paste').buttonset();
48 this.element.find('#move_up_b').button({
49 icons: {primary: 'ui-icon-arrowthick-1-n'},
50 text : false
51 });
52 this.element.find('#move_down_b').button({
53 icons: {primary: 'ui-icon-arrowthick-1-s'},
54 text : false
55 });
56 this.element.find('#move_up_down').buttonset();
57 this.element.find('#insert_above_b').button({
58 icons: {primary: 'ui-icon-arrowthickstop-1-n'},
59 text : false
60 });
61 this.element.find('#insert_below_b').button({
62 icons: {primary: 'ui-icon-arrowthickstop-1-s'},
63 text : false
64 });
65 this.element.find('#insert_above_below').buttonset();
66 this.element.find('#run_b').button({
67 icons: {primary: 'ui-icon-play'},
68 text : false
69 });
70 this.element.find('#interrupt_b').button({
71 icons: {primary: 'ui-icon-stop'},
72 text : false
73 });
74 this.element.find('#run_int').buttonset();
75 84 };
76 85
86 ToolBar.prototype.addDropDownList = function()
87 {
88 var select = $(this.selector)
89 .append($('<select/>')
90 .attr('id','cell_type')
91 .addClass('ui-widget ui-widget-content')
92 .append($('<option/>').attr('value','code').text('Code'))
93 .append($('<option/>').attr('value','markdown').text('Markdown'))
94 .append($('<option/>').attr('value','raw').text('Raw Text'))
95 .append($('<option/>').attr('value','heading1').text('Heading 1'))
96 .append($('<option/>').attr('value','heading2').text('Heading 2'))
97 .append($('<option/>').attr('value','heading3').text('Heading 3'))
98 .append($('<option/>').attr('value','heading4').text('Heading 4'))
99 .append($('<option/>').attr('value','heading5').text('Heading 5'))
100 .append($('<option/>').attr('value','heading6').text('Heading 6'))
101 .append($('<option/>').attr('value','heading7').text('Heading 7'))
102 .append($('<option/>').attr('value','heading8').text('Heading 8'))
103 );
104 }
105
106 ToolBar.prototype.construct = function() {
107 this.addButtonsGroup([
108 {
109 'id':'save_b',
110 'label':'Save',
111 'icon':'ui-icon-disk',
112 'callback':function(){
113 IPython.notebook.save_notebook();
114 },
115 },
116 ]);
117 this.addButtonsGroup([
118 {
119 'id':'cut_b',
120 'label':'Cut Cell',
121 'icon':'ui-icon-scissors',
122 'callback':function(){
123 IPython.notebook.cut_cell();
124 },
125 },
126 {
127 'id':'copy_b',
128 'label':'Copy Cell',
129 'icon':'ui-icon-copy',
130 'callback':function(){
131 IPython.notebook.copy_cell();
132 },
133 },
134 {
135 'id':'paste_b',
136 'label':'Paste Cell',
137 'icon':'ui-icon-clipboard',
138 'callback':function(){
139 IPython.notebook.paste_cell();
140 },
141 },
142 ],'cut_copy_paste');
143
144 this.addButtonsGroup([
145 {
146 'id':'move_up_b',
147 'label':'Move Cell Up',
148 'icon':'ui-icon-arrowthick-1-n',
149 'callback':function(){
150 IPython.notebook.move_cell_up();
151 },
152 },
153 {
154 'id':'move_down_b',
155 'label':'Move Cell Down',
156 'icon':'ui-icon-arrowthick-1-s',
157 'callback':function(){
158 IPython.notebook.move_cell_down();
159 },
160 },
161 ],'move_up_down');
162
163 this.addButtonsGroup([
164 {
165 'id':'insert_above_b',
166 'label':'Insert Cell Above',
167 'icon':'ui-icon-arrowthickstop-1-n',
168 'callback':function(){
169 IPython.notebook.insert_cell_above('code');
170 },
171 },
172 {
173 'id':'insert_below_b',
174 'label':'Insert Cell Below',
175 'icon':'ui-icon-arrowthickstop-1-s',
176 'callback':function(){
177 IPython.notebook.insert_cell_below('code');
178 },
179 },
180 ],'insert_above_below');
77 181
182 this.addButtonsGroup([
183 {
184 'id':'run_b',
185 'label':'Run Cell',
186 'icon':'ui-icon-play',
187 'callback':function(){
188 IPython.notebook.execute_selected_cell();
189 },
190 },
191 {
192 'id':'interrupt_b',
193 'label':'Interrupt',
194 'icon':'ui-icon-stop',
195 'callback':function(){
196 IPython.notebook.kernel.interrupt();
197 },
198 },
199 ],'run_int');
200
201
202 }
78 203 ToolBar.prototype.bind_events = function () {
79 204 var that = this;
80 this.element.find('#save_b').click(function () {
81 IPython.notebook.save_notebook();
82 });
83 this.element.find('#cut_b').click(function () {
84 IPython.notebook.cut_cell();
85 });
86 this.element.find('#copy_b').click(function () {
87 IPython.notebook.copy_cell();
88 });
89 this.element.find('#paste_b').click(function () {
90 IPython.notebook.paste_cell();
91 });
92 this.element.find('#move_up_b').click(function () {
93 IPython.notebook.move_cell_up();
94 });
95 this.element.find('#move_down_b').click(function () {
96 IPython.notebook.move_cell_down();
97 });
98 this.element.find('#insert_above_b').click(function () {
99 IPython.notebook.insert_cell_above('code');
100 });
101 this.element.find('#insert_below_b').click(function () {
102 IPython.notebook.insert_cell_below('code');
103 });
104 this.element.find('#run_b').click(function () {
105 IPython.notebook.execute_selected_cell();
106 });
107 this.element.find('#interrupt_b').click(function () {
108 IPython.notebook.kernel.interrupt();
109 });
205
110 206 this.element.find('#cell_type').change(function () {
111 207 var cell_type = $(this).val();
112 208 if (cell_type === 'code') {
Show file before | Show file after | Hide comments
@@ -154,43 +154,7 data-notebook-id={{notebook_id}}
154 154 </div>
155 155
156 156
157 <div id="toolbar">
158
159 <span>
160 <button id="save_b">Save</button>
161 </span>
162 <span id="cut_copy_paste">
163 <button id="cut_b" title="Cut Cell">Cut Cell</button>
164 <button id="copy_b" title="Copy Cell">Copy Cell</button>
165 <button id="paste_b" title="Paste Cell">Paste Cell</button>
166 </span>
167 <span id="move_up_down">
168 <button id="move_up_b" title="Move Cell Up">Move Cell Up</button>
169 <button id="move_down_b" title="Move Cell Down">Move Down</button>
170 </span>
171 <span id="insert_above_below">
172 <button id="insert_above_b" title="Insert Cell Above">Insert Cell Above</button>
173 <button id="insert_below_b" title="Insert Cell Below">Insert Cell Below</button>
174 </span>
175 <span id="run_int">
176 <button id="run_b" title="Run Cell">Run Cell</button>
177 <button id="interrupt_b" title="Interrupt">Interrupt</button>
178 </span>
179 <span>
180 <select id="cell_type">
181 <option value="code">Code</option>
182 <option value="markdown">Markdown</option>
183 <option value="raw">Raw Text</option>
184 <option value="heading1">Heading 1</option>
185 <option value="heading2">Heading 2</option>
186 <option value="heading3">Heading 3</option>
187 <option value="heading4">Heading 4</option>
188 <option value="heading5">Heading 5</option>
189 <option value="heading6">Heading 6</option>
190 </select>
191 </span>
192
193 </div>
157 <div id="toolbar"></div>
194 158
195 159 <div id="main_app">
196 160
General Comments 0
You need to be logged in to leave comments. Login now