##// END OF EJS Templates
Merge pull request #2127 from Carreau/jsToolbar...
Brian E. Granger -
r8513:d9a42fe4 merge
parent child Browse files
Show More
@@ -0,0 +1,179 b''
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2011 The IPython Development Team
3 //
4 // Distributed under the terms of the BSD License. The full license is in
5 // the file COPYING, distributed as part of this software.
6 //----------------------------------------------------------------------------
7
8 //============================================================================
9 // ToolBar
10 //============================================================================
11
12 var IPython = (function (IPython) {
13
14 var MainToolBar = function (selector) {
15 this.selector = selector;
16 IPython.ToolBar.apply(this, arguments);
17 this.construct();
18 this.add_drop_down_list();
19 this.bind_events();
20 };
21
22 MainToolBar.prototype = new IPython.ToolBar();
23
24 MainToolBar.prototype.construct = function () {
25 this.add_buttons_group([
26 {
27 id : 'save_b',
28 label : 'Save',
29 icon : 'ui-icon-disk',
30 callback : function () {
31 IPython.notebook.save_notebook();
32 }
33 }
34 ]);
35 this.add_buttons_group([
36 {
37 id : 'cut_b',
38 label : 'Cut Cell',
39 icon : 'ui-icon-scissors',
40 callback : function () {
41 IPython.notebook.cut_cell();
42 }
43 },
44 {
45 id : 'copy_b',
46 label : 'Copy Cell',
47 icon : 'ui-icon-copy',
48 callback : function () {
49 IPython.notebook.copy_cell();
50 }
51 },
52 {
53 id : 'paste_b',
54 label : 'Paste Cell',
55 icon : 'ui-icon-clipboard',
56 callback : function () {
57 IPython.notebook.paste_cell();
58 }
59 }
60 ],'cut_copy_paste');
61
62 this.add_buttons_group([
63 {
64 id : 'move_up_b',
65 label : 'Move Cell Up',
66 icon : 'ui-icon-arrowthick-1-n',
67 callback : function () {
68 IPython.notebook.move_cell_up();
69 }
70 },
71 {
72 id : 'move_down_b',
73 label : 'Move Cell Down',
74 icon : 'ui-icon-arrowthick-1-s',
75 callback : function () {
76 IPython.notebook.move_cell_down();
77 }
78 }
79 ],'move_up_down');
80
81 this.add_buttons_group([
82 {
83 id : 'insert_above_b',
84 label : 'Insert Cell Above',
85 icon : 'ui-icon-arrowthickstop-1-n',
86 callback : function () {
87 IPython.notebook.insert_cell_above('code');
88 }
89 },
90 {
91 id : 'insert_below_b',
92 label : 'Insert Cell Below',
93 icon : 'ui-icon-arrowthickstop-1-s',
94 callback : function () {
95 IPython.notebook.insert_cell_below('code');
96 }
97 }
98 ],'insert_above_below');
99
100 this.add_buttons_group([
101 {
102 id : 'run_b',
103 label : 'Run Cell',
104 icon : 'ui-icon-play',
105 callback : function () {
106 IPython.notebook.execute_selected_cell();
107 }
108 },
109 {
110 id : 'interrupt_b',
111 label : 'Interrupt',
112 icon : 'ui-icon-stop',
113 callback : function () {
114 IPython.notebook.kernel.interrupt();
115 }
116 }
117 ],'run_int');
118
119
120 };
121
122 MainToolBar.prototype.add_drop_down_list = function () {
123 var select = $(this.selector)
124 .append($('<select/>')
125 .attr('id','cell_type')
126 .addClass('ui-widget ui-widget-content')
127 .append($('<option/>').attr('value','code').text('Code'))
128 .append($('<option/>').attr('value','markdown').text('Markdown'))
129 .append($('<option/>').attr('value','raw').text('Raw Text'))
130 .append($('<option/>').attr('value','heading1').text('Heading 1'))
131 .append($('<option/>').attr('value','heading2').text('Heading 2'))
132 .append($('<option/>').attr('value','heading3').text('Heading 3'))
133 .append($('<option/>').attr('value','heading4').text('Heading 4'))
134 .append($('<option/>').attr('value','heading5').text('Heading 5'))
135 .append($('<option/>').attr('value','heading6').text('Heading 6'))
136 .append($('<option/>').attr('value','heading7').text('Heading 7'))
137 .append($('<option/>').attr('value','heading8').text('Heading 8'))
138 );
139 };
140
141 MainToolBar.prototype.bind_events = function () {
142 var that = this;
143
144 this.element.find('#cell_type').change(function () {
145 var cell_type = $(this).val();
146 if (cell_type === 'code') {
147 IPython.notebook.to_code();
148 } else if (cell_type === 'markdown') {
149 IPython.notebook.to_markdown();
150 } else if (cell_type === 'raw') {
151 IPython.notebook.to_raw();
152 } else if (cell_type === 'heading1') {
153 IPython.notebook.to_heading(undefined, 1);
154 } else if (cell_type === 'heading2') {
155 IPython.notebook.to_heading(undefined, 2);
156 } else if (cell_type === 'heading3') {
157 IPython.notebook.to_heading(undefined, 3);
158 } else if (cell_type === 'heading4') {
159 IPython.notebook.to_heading(undefined, 4);
160 } else if (cell_type === 'heading5') {
161 IPython.notebook.to_heading(undefined, 5);
162 } else if (cell_type === 'heading6') {
163 IPython.notebook.to_heading(undefined, 6);
164 }
165 });
166 $([IPython.events]).on('selected_cell_type_changed.Notebook', function (event, data) {
167 if (data.cell_type === 'heading') {
168 that.element.find('#cell_type').val(data.cell_type+data.level);
169 } else {
170 that.element.find('#cell_type').val(data.cell_type);
171 }
172 });
173 };
174
175 IPython.MainToolBar = MainToolBar;
176
177 return IPython;
178
179 }(IPython));
@@ -70,7 +70,7 b' span#notebook_name {'
70 70 z-index: 10;
71 71 }
72 72
73 #toolbar {
73 .toolbar {
74 74 padding: 3px 15px;
75 75 }
76 76
@@ -32,10 +32,10 b' var IPython = (function (IPython) {'
32 32 }
33 33 var menubar_height = $('div#menubar').outerHeight(true);
34 34 var toolbar_height;
35 if ($('div#toolbar').css('display') === 'none') {
35 if ($('div#maintoolbar').css('display') === 'none') {
36 36 toolbar_height = 0;
37 37 } else {
38 toolbar_height = $('div#toolbar').outerHeight(true);
38 toolbar_height = $('div#maintoolbar').outerHeight(true);
39 39 }
40 40 return h-header_height-menubar_height-toolbar_height; // content height
41 41 }
@@ -48,7 +48,7 b' $(document).ready(function () {'
48 48 IPython.notebook = new IPython.Notebook('div#notebook');
49 49 IPython.save_widget = new IPython.SaveWidget('span#save_widget');
50 50 IPython.menubar = new IPython.MenuBar('#menubar')
51 IPython.toolbar = new IPython.ToolBar('#toolbar')
51 IPython.toolbar = new IPython.MainToolBar('#maintoolbar')
52 52 IPython.tooltip = new IPython.Tooltip()
53 53 IPython.notification_area = new IPython.NotificationArea('#notification_area')
54 54 IPython.notification_area.init_notification_widgets();
@@ -1,5 +1,5 b''
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.
@@ -16,132 +16,76 b' var IPython = (function (IPython) {'
16 16 if (this.selector !== undefined) {
17 17 this.element = $(selector);
18 18 this.style();
19 this.bind_events();
20 19 }
21 20 };
22 21
22 // add a group of button into the current toolbar.
23 //
24 // First argument : Mandatory
25 // list of dict as argument, each dict should contain
26 // 3 mandatory keys and values :
27 // label : string -- the text to show on hover
28 // icon : string -- the jQuery-ui icon to add on this button
29 // callback : function -- the callback to execute on a click
30 //
31 // and optionally an 'id' key that is assigned to the button element
32 //
33 // Second Argument, optional,
34 // string reprensenting the id to give to the button group.
35 //
36 // Example
37 //
38 // IPython.toolbar.add_button_group([
39 // {label:'my button',
40 // icon:'ui-icon-disk',
41 // callback:function(){alert('hoho'),
42 // id : 'my_button_id', // this is optional
43 // }
44 // },
45 // {label:'my second button',
46 // icon:'ui-icon-scissors',
47 // callback:function(){alert('be carefull I cut')}
48 // }
49 // ],
50 // "my_button_group_id"
51 // )
52 //
53 ToolBar.prototype.add_buttons_group = function (list, group_id) {
54 var span_group = $('<span/>');
55 if( group_id != undefined ) {
56 span_group.attr('id',group_id);
57 }
58 for(var el in list) {
59 var button = $('<button/>').button({
60 icons : {primary : list[el].icon},
61 text : false,
62 label : list[el].label
63 });
64 var id = list[el].id;
65 if( id != undefined )
66 button.attr('id',id);
67 var fun = list[el].callback;
68 button.click(fun);
69 span_group.append(button);
70 }
71 span_group.buttonset();
72 $(this.selector).append(span_group);
73 };
23 74
24 75 ToolBar.prototype.style = function () {
25 76 this.element.addClass('border-box-sizing').
26 addClass('ui-widget ui-widget-content').
77 addClass('ui-widget ui-widget-content toolbar').
27 78 css('border-top-style','none').
28 79 css('border-left-style','none').
29 80 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 };
76
77
78 ToolBar.prototype.bind_events = function () {
79 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 });
110 this.element.find('#cell_type').change(function () {
111 var cell_type = $(this).val();
112 if (cell_type === 'code') {
113 IPython.notebook.to_code();
114 } else if (cell_type === 'markdown') {
115 IPython.notebook.to_markdown();
116 } else if (cell_type === 'raw') {
117 IPython.notebook.to_raw();
118 } else if (cell_type === 'heading1') {
119 IPython.notebook.to_heading(undefined, 1);
120 } else if (cell_type === 'heading2') {
121 IPython.notebook.to_heading(undefined, 2);
122 } else if (cell_type === 'heading3') {
123 IPython.notebook.to_heading(undefined, 3);
124 } else if (cell_type === 'heading4') {
125 IPython.notebook.to_heading(undefined, 4);
126 } else if (cell_type === 'heading5') {
127 IPython.notebook.to_heading(undefined, 5);
128 } else if (cell_type === 'heading6') {
129 IPython.notebook.to_heading(undefined, 6);
130 };
131 });
132 $([IPython.events]).on('selected_cell_type_changed.Notebook', function (event, data) {
133 if (data.cell_type === 'heading') {
134 that.element.find('#cell_type').val(data.cell_type+data.level);
135 } else {
136 that.element.find('#cell_type').val(data.cell_type);
137 }
138 });
139 81 };
140 82
141 83
142 84 ToolBar.prototype.toggle = function () {
143 85 this.element.toggle();
86 if (IPython.layout_manager != undefined) {
144 87 IPython.layout_manager.do_resize();
88 }
145 89 };
146 90
147 91
@@ -157,43 +157,7 b' data-notebook-id={{notebook_id}}'
157 157 </div>
158 158
159 159
160 <div id="toolbar">
161
162 <span>
163 <button id="save_b">Save</button>
164 </span>
165 <span id="cut_copy_paste">
166 <button id="cut_b" title="Cut Cell">Cut Cell</button>
167 <button id="copy_b" title="Copy Cell">Copy Cell</button>
168 <button id="paste_b" title="Paste Cell">Paste Cell</button>
169 </span>
170 <span id="move_up_down">
171 <button id="move_up_b" title="Move Cell Up">Move Cell Up</button>
172 <button id="move_down_b" title="Move Cell Down">Move Down</button>
173 </span>
174 <span id="insert_above_below">
175 <button id="insert_above_b" title="Insert Cell Above">Insert Cell Above</button>
176 <button id="insert_below_b" title="Insert Cell Below">Insert Cell Below</button>
177 </span>
178 <span id="run_int">
179 <button id="run_b" title="Run Cell">Run Cell</button>
180 <button id="interrupt_b" title="Interrupt">Interrupt</button>
181 </span>
182 <span>
183 <select id="cell_type">
184 <option value="code">Code</option>
185 <option value="markdown">Markdown</option>
186 <option value="raw">Raw Text</option>
187 <option value="heading1">Heading 1</option>
188 <option value="heading2">Heading 2</option>
189 <option value="heading3">Heading 3</option>
190 <option value="heading4">Heading 4</option>
191 <option value="heading5">Heading 5</option>
192 <option value="heading6">Heading 6</option>
193 </select>
194 </span>
195
196 </div>
160 <div id="maintoolbar"></div>
197 161
198 162 <div id="main_app">
199 163
@@ -247,6 +211,7 b' data-notebook-id={{notebook_id}}'
247 211 <script src="{{ static_url("js/pager.js") }}" type="text/javascript" charset="utf-8"></script>
248 212 <script src="{{ static_url("js/menubar.js") }}" type="text/javascript" charset="utf-8"></script>
249 213 <script src="{{ static_url("js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
214 <script src="{{ static_url("js/maintoolbar.js") }}" type="text/javascript" charset="utf-8"></script>
250 215 <script src="{{ static_url("js/notebook.js") }}" type="text/javascript" charset="utf-8"></script>
251 216 <script src="{{ static_url("js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
252 217 <script src="{{ static_url("js/notificationarea.js") }}" type="text/javascript" charset="utf-8"></script>
General Comments 0
You need to be logged in to leave comments. Login now