##// END OF EJS Templates
remove useless jquery selector
Matthias BUSSONNIER -
Show More
@@ -1,217 +1,217 b''
1 //----------------------------------------------------------------------------
1 //----------------------------------------------------------------------------
2 // Copyright (C) 2012 The IPython Development Team
2 // Copyright (C) 2012 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 // CellToolbar Example
9 // CellToolbar Example
10 //============================================================================
10 //============================================================================
11
11
12 /**
12 /**
13 * Example Use for the CellToolbar library
13 * Example Use for the CellToolbar library
14 * add the following to your custom.js to load
14 * add the following to your custom.js to load
15 * Celltoolbar UI for slideshow
15 * Celltoolbar UI for slideshow
16 *
16 *
17 * ```
17 * ```
18 * $.getScript('/static/js/examples/celltoolbar.example.js');
18 * $.getScript('/static/js/examples/celltoolbar.example.js');
19 * ```
19 * ```
20 */
20 */
21 // IIFE without asignement, we don't modifiy the IPython namespace
21 // IIFE without asignement, we don't modifiy the IPython namespace
22 (function (IPython) {
22 (function (IPython) {
23 "use strict";
23 "use strict";
24
24
25 var CellToolbar = IPython.CellToolbar;
25 var CellToolbar = IPython.CellToolbar;
26
26
27
27
28 var raw_edit = function(cell){
28 var raw_edit = function(cell){
29
29
30 var md = cell.metadata
30 var md = cell.metadata
31 var error_div = $('<div/>').css('color','red')
31 var error_div = $('<div/>').css('color','red')
32
32
33 var textarea = $('<textarea/>')
33 var textarea = $('<textarea/>')
34 .attr('rows','13')
34 .attr('rows','13')
35 .attr('cols','75')
35 .attr('cols','75')
36 .attr('name','metadata')
36 .attr('name','metadata')
37 .text(JSON.stringify(md, null,4)||'');
37 .text(JSON.stringify(md, null,4)||'');
38 var dialogform = $('<div/>').attr('title','Edit the metadata')
38 var dialogform = $('<div/>').attr('title','Edit the metadata')
39 .append(
39 .append(
40 $('<form/>').append(
40 $('<form/>').append(
41 $('<fieldset/>').append(
41 $('<fieldset/>').append(
42 $('<label/>')
42 $('<label/>')
43 .attr('for','metadata')
43 .attr('for','metadata')
44 .text("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
44 .text("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
45 )
45 )
46 .append(error_div)
46 .append(error_div)
47 .append($('<br/>'))
47 .append($('<br/>'))
48 .append(
48 .append(
49 textarea
49 textarea
50 )
50 )
51 )
51 )
52 );
52 );
53 var editor = CodeMirror.fromTextArea(textarea[0], {
53 var editor = CodeMirror.fromTextArea(textarea[0], {
54 lineNumbers: true,
54 lineNumbers: true,
55 matchBrackets: true,
55 matchBrackets: true,
56 });
56 });
57 $(dialogform).dialog({
57 $(dialogform).dialog({
58 autoOpen: true,
58 autoOpen: true,
59 height: 300,
59 height: 300,
60 width: 650,
60 width: 650,
61 modal: true,
61 modal: true,
62 buttons: {
62 buttons: {
63 "Ok": function() {
63 "Ok": function() {
64 //validate json and set it
64 //validate json and set it
65 try {
65 try {
66 var json = JSON.parse(editor.getValue());
66 var json = JSON.parse(editor.getValue());
67 cell.metadata = json;
67 cell.metadata = json;
68 $( this ).dialog( "close" );
68 $( this ).dialog( "close" );
69 }
69 }
70 catch(e)
70 catch(e)
71 {
71 {
72 error_div.text('Warning, invalid json, not saved');
72 error_div.text('Warning, invalid json, not saved');
73 }
73 }
74 },
74 },
75 Cancel: function() {
75 Cancel: function() {
76 $( this ).dialog( "close" );
76 $( this ).dialog( "close" );
77 }
77 }
78 },
78 },
79 close: function() {
79 close: function() {
80 //cleanup on close
80 //cleanup on close
81 $(this).remove();
81 $(this).remove();
82 }
82 }
83 });
83 });
84 editor.refresh();
84 editor.refresh();
85 }
85 }
86
86
87 var add_raw_edit_button = function(div, cell) {
87 var add_raw_edit_button = function(div, cell) {
88 var button_container = $(div)
88 var button_container = div
89 var button = $('<div/>').button({label:'Raw Edit'})
89 var button = $('<div/>').button({label:'Raw Edit'})
90 .click(function(){raw_edit(cell); return false;})
90 .click(function(){raw_edit(cell); return false;})
91 button_container.append(button);
91 button_container.append(button);
92 }
92 }
93
93
94 CellToolbar.register_callback('example.rawedit',add_raw_edit_button);
94 CellToolbar.register_callback('example.rawedit',add_raw_edit_button);
95 var example_preset = []
95 var example_preset = []
96 example_preset.push('example.rawedit');
96 example_preset.push('example.rawedit');
97
97
98
98
99 var simple_button = function(div, cell) {
99 var simple_button = function(div, cell) {
100 var button_container = $(div);
100 var button_container = $(div);
101 var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}});
101 var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}});
102 var fun = function(value){
102 var fun = function(value){
103 try{
103 try{
104 if(value){
104 if(value){
105 cell.code_mirror.setOption('readOnly','nocursor')
105 cell.code_mirror.setOption('readOnly','nocursor')
106 button.button('option','icons',{primary:'ui-icon-locked'})
106 button.button('option','icons',{primary:'ui-icon-locked'})
107 } else {
107 } else {
108 cell.code_mirror.setOption('readOnly','false')
108 cell.code_mirror.setOption('readOnly','false')
109 button.button('option','icons',{primary:'ui-icon-unlocked'})
109 button.button('option','icons',{primary:'ui-icon-unlocked'})
110 }
110 }
111 } catch(e){}
111 } catch(e){}
112
112
113 }
113 }
114 fun(cell.metadata.ro)
114 fun(cell.metadata.ro)
115 button.click(function(){
115 button.click(function(){
116 var v = cell.metadata.ro;
116 var v = cell.metadata.ro;
117 var locked = !v;
117 var locked = !v;
118 cell.metadata.ro = locked;
118 cell.metadata.ro = locked;
119 fun(locked)
119 fun(locked)
120 })
120 })
121 .css('height','16px')
121 .css('height','16px')
122 .css('width','35px');
122 .css('width','35px');
123 button_container.append(button);
123 button_container.append(button);
124 }
124 }
125
125
126 CellToolbar.register_callback('example.lock',simple_button);
126 CellToolbar.register_callback('example.lock',simple_button);
127 example_preset.push('example.lock');
127 example_preset.push('example.lock');
128
128
129 var toggle_test = function(div, cell) {
129 var toggle_test = function(div, cell) {
130 var button_container = $(div)
130 var button_container = $(div)
131 var button = $('<div/>')
131 var button = $('<div/>')
132 .button({label:String(cell.metadata.foo)}).
132 .button({label:String(cell.metadata.foo)}).
133 css('width','65px');
133 css('width','65px');
134 button.click(function(){
134 button.click(function(){
135 var v = cell.metadata.foo;
135 var v = cell.metadata.foo;
136 cell.metadata.foo = !v;
136 cell.metadata.foo = !v;
137 button.button("option","label",String(!v));
137 button.button("option","label",String(!v));
138 })
138 })
139 button_container.append(button);
139 button_container.append(button);
140 }
140 }
141
141
142 CellToolbar.register_callback('example.toggle',toggle_test);
142 CellToolbar.register_callback('example.toggle',toggle_test);
143 example_preset.push('example.toggle');
143 example_preset.push('example.toggle');
144
144
145 var checkbox_test = function(div, cell) {
145 var checkbox_test = function(div, cell) {
146 var button_container = $(div)
146 var button_container = $(div)
147
147
148 var chkb = $('<input/>').attr('type','checkbox');
148 var chkb = $('<input/>').attr('type','checkbox');
149 var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%'));
149 var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%'));
150 lbl.append(chkb);
150 lbl.append(chkb);
151 chkb.attr("checked",cell.metadata.bar);
151 chkb.attr("checked",cell.metadata.bar);
152 chkb.click(function(){
152 chkb.click(function(){
153 var v = cell.metadata.bar;
153 var v = cell.metadata.bar;
154 cell.metadata.bar = !v;
154 cell.metadata.bar = !v;
155 chkb.attr("checked",!v);
155 chkb.attr("checked",!v);
156 })
156 })
157 button_container.append($('<div/>').append(lbl));
157 button_container.append($('<div/>').append(lbl));
158
158
159 }
159 }
160
160
161 CellToolbar.register_callback('example.checkbox',checkbox_test);
161 CellToolbar.register_callback('example.checkbox',checkbox_test);
162 example_preset.push('example.checkbox');
162 example_preset.push('example.checkbox');
163
163
164 var select_test = function(div, cell) {
164 var select_test = function(div, cell) {
165 var button_container = $(div)
165 var button_container = $(div)
166
166
167 var select = $('<select/>');
167 var select = $('<select/>');
168
168
169 select.append($('<option/>').attr('value','foo').text('foo'));
169 select.append($('<option/>').attr('value','foo').text('foo'));
170 select.append($('<option/>').attr('value','bar').text('bar'));
170 select.append($('<option/>').attr('value','bar').text('bar'));
171 select.append($('<option/>').attr('value','qux').text('qux'));
171 select.append($('<option/>').attr('value','qux').text('qux'));
172 select.append($('<option/>').attr('value','zip').text('zip'));
172 select.append($('<option/>').attr('value','zip').text('zip'));
173 select.val(cell.metadata.option);
173 select.val(cell.metadata.option);
174 select.change(function(){
174 select.change(function(){
175 cell.metadata.option = select.val();
175 cell.metadata.option = select.val();
176 });
176 });
177 button_container.append($('<div/>').append(select));
177 button_container.append($('<div/>').append(select));
178
178
179 }
179 }
180
180
181 CellToolbar.register_callback('example.select',select_test);
181 CellToolbar.register_callback('example.select',select_test);
182 example_preset.push('example.select');
182 example_preset.push('example.select');
183
183
184 var simple_dialog = function(title,text){
184 var simple_dialog = function(title,text){
185 var dlg = $('<div/>').attr('title',title)
185 var dlg = $('<div/>').attr('title',title)
186 .append($('<p/>').text(text))
186 .append($('<p/>').text(text))
187 $(dlg).dialog({
187 $(dlg).dialog({
188 autoOpen: true,
188 autoOpen: true,
189 height: 300,
189 height: 300,
190 width: 650,
190 width: 650,
191 modal: true,
191 modal: true,
192 close: function() {
192 close: function() {
193 //cleanup on close
193 //cleanup on close
194 $(this).remove();
194 $(this).remove();
195 }
195 }
196 });
196 });
197 }
197 }
198
198
199 var add_simple_dialog_button = function(div, cell) {
199 var add_simple_dialog_button = function(div, cell) {
200 var help_text = ["This is the Metadata editting UI.",
200 var help_text = ["This is the Metadata editting UI.",
201 "It heavily rely on plugin to work ",
201 "It heavily rely on plugin to work ",
202 "and is still under developpement. You shouldn't wait too long before",
202 "and is still under developpement. You shouldn't wait too long before",
203 " seeing some customisable buttons in those toolbar."
203 " seeing some customisable buttons in those toolbar."
204 ].join('\n')
204 ].join('\n')
205 var button_container = $(div)
205 var button_container = $(div)
206 var button = $('<div/>').button({label:'?'})
206 var button = $('<div/>').button({label:'?'})
207 .click(function(){simple_dialog('help',help_text); return false;})
207 .click(function(){simple_dialog('help',help_text); return false;})
208 button_container.append(button);
208 button_container.append(button);
209 }
209 }
210
210
211 CellToolbar.register_callback('example.help',add_simple_dialog_button)
211 CellToolbar.register_callback('example.help',add_simple_dialog_button)
212 example_preset.push('example.help')
212 example_preset.push('example.help')
213
213
214 CellToolbar.register_preset('example',example_preset);
214 CellToolbar.register_preset('example',example_preset);
215 console.log('Example extension for metadata editting loaded.');
215 console.log('Example extension for metadata editting loaded.');
216
216
217 }(IPython));
217 }(IPython));
General Comments 0
You need to be logged in to leave comments. Login now