Show More
@@ -0,0 +1,184 b'' | |||
|
1 | //---------------------------------------------------------------------------- | |
|
2 | // Copyright (C) 2012 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 | // MetaUI Example | |
|
10 | //============================================================================ | |
|
11 | ||
|
12 | /** | |
|
13 | * Example Use for the MetaUI library | |
|
14 | * add the following to your custom.js to load | |
|
15 | * metadata UI for slideshow | |
|
16 | * | |
|
17 | * ``` | |
|
18 | * $.getScript('/static/js/examples/metaui.example.js'); | |
|
19 | * ``` | |
|
20 | */ | |
|
21 | // IIFE without asignement, we don't modifiy the IPython namespace | |
|
22 | (function (IPython) { | |
|
23 | "use strict"; | |
|
24 | ||
|
25 | var MetaUI = IPython.MetaUI; | |
|
26 | ||
|
27 | ||
|
28 | var raw_edit = function(cell){ | |
|
29 | ||
|
30 | var md = cell.metadata | |
|
31 | ||
|
32 | var textarea = $('<textarea/>') | |
|
33 | .attr('rows','13') | |
|
34 | .attr('cols','75') | |
|
35 | .attr('name','metadata') | |
|
36 | .text(JSON.stringify(md, null,4)||''); | |
|
37 | var dialogform = $('<div/>').attr('title','Edit the metadata') | |
|
38 | .append( | |
|
39 | $('<form/>').append( | |
|
40 | $('<fieldset/>').append( | |
|
41 | $('<label/>') | |
|
42 | .attr('for','metadata') | |
|
43 | .text("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)") | |
|
44 | ) | |
|
45 | .append($('<br/>')) | |
|
46 | .append( | |
|
47 | textarea | |
|
48 | ) | |
|
49 | ) | |
|
50 | ); | |
|
51 | var editor = CodeMirror.fromTextArea(textarea[0], { | |
|
52 | lineNumbers: true, | |
|
53 | matchBrackets: true, | |
|
54 | }); | |
|
55 | $(dialogform).dialog({ | |
|
56 | autoOpen: true, | |
|
57 | height: 300, | |
|
58 | width: 650, | |
|
59 | modal: true, | |
|
60 | buttons: { | |
|
61 | "Ok": function() { | |
|
62 | //validate json and set it | |
|
63 | try { | |
|
64 | var json = JSON.parse(editor.getValue()); | |
|
65 | cell.metadata = json; | |
|
66 | $( this ).dialog( "close" ); | |
|
67 | } | |
|
68 | catch(e) | |
|
69 | { | |
|
70 | alert('invalid json'); | |
|
71 | } | |
|
72 | }, | |
|
73 | Cancel: function() { | |
|
74 | $( this ).dialog( "close" ); | |
|
75 | } | |
|
76 | }, | |
|
77 | close: function() { | |
|
78 | //cleanup on close | |
|
79 | $(this).remove(); | |
|
80 | } | |
|
81 | }); | |
|
82 | editor.refresh(); | |
|
83 | } | |
|
84 | ||
|
85 | var add_raw_edit_button = function(div, cell) { | |
|
86 | var button_container = $(div) | |
|
87 | var button = $('<div/>').button({label:'Raw Edit'}) | |
|
88 | .click(function(){raw_edit(cell); return false;}) | |
|
89 | button_container.append(button); | |
|
90 | } | |
|
91 | ||
|
92 | MetaUI.register_callback('example.rawedit',add_raw_edit_button); | |
|
93 | var example_preset = [] | |
|
94 | example_preset.push('example.rawedit'); | |
|
95 | ||
|
96 | ||
|
97 | var simple_button = function(div, cell) { | |
|
98 | var button_container = $(div); | |
|
99 | var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}}); | |
|
100 | var fun = function(value){ | |
|
101 | try{ | |
|
102 | if(value){ | |
|
103 | cell.code_mirror.setOption('readOnly','nocursor') | |
|
104 | button.button('option','icons',{primary:'ui-icon-locked'}) | |
|
105 | } else { | |
|
106 | cell.code_mirror.setOption('readOnly','false') | |
|
107 | button.button('option','icons',{primary:'ui-icon-unlocked'}) | |
|
108 | } | |
|
109 | } catch(e){} | |
|
110 | ||
|
111 | } | |
|
112 | fun(cell.metadata.ro) | |
|
113 | button.click(function(){ | |
|
114 | var v = cell.metadata.ro; | |
|
115 | var locked = !v; | |
|
116 | cell.metadata.ro = locked; | |
|
117 | fun(locked) | |
|
118 | }) | |
|
119 | .css('height','16px') | |
|
120 | .css('width','35px'); | |
|
121 | button_container.append(button); | |
|
122 | } | |
|
123 | ||
|
124 | MetaUI.register_callback('example.lock',simple_button); | |
|
125 | example_preset.push('example.lock'); | |
|
126 | ||
|
127 | var toggle_test = function(div, cell) { | |
|
128 | var button_container = $(div) | |
|
129 | var button = $('<div/>').button({label:String(cell.metadata.foo)}); | |
|
130 | button.click(function(){ | |
|
131 | var v = cell.metadata.foo; | |
|
132 | cell.metadata.foo = !v; | |
|
133 | button.button("option","label",String(!v)); | |
|
134 | }) | |
|
135 | button_container.append(button); | |
|
136 | } | |
|
137 | ||
|
138 | MetaUI.register_callback('example.toggle',toggle_test); | |
|
139 | example_preset.push('example.toggle'); | |
|
140 | ||
|
141 | var checkbox_test = function(div, cell) { | |
|
142 | var button_container = $(div) | |
|
143 | ||
|
144 | var chkb = $('<input/>').attr('type','checkbox'); | |
|
145 | var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%')); | |
|
146 | lbl.append(chkb); | |
|
147 | chkb.attr("checked",cell.metadata.bar); | |
|
148 | chkb.click(function(){ | |
|
149 | var v = cell.metadata.bar; | |
|
150 | cell.metadata.bar = !v; | |
|
151 | chkb.attr("checked",!v); | |
|
152 | }) | |
|
153 | button_container.append($('<div/>').append(lbl)); | |
|
154 | ||
|
155 | } | |
|
156 | ||
|
157 | MetaUI.register_callback('example.checkbox',checkbox_test); | |
|
158 | example_preset.push('example.checkbox'); | |
|
159 | ||
|
160 | var select_test = function(div, cell) { | |
|
161 | var button_container = $(div) | |
|
162 | ||
|
163 | var select = $('<select/>'); | |
|
164 | ||
|
165 | select.append($('<option/>').attr('value','foo').text('foo')); | |
|
166 | select.append($('<option/>').attr('value','bar').text('bar')); | |
|
167 | select.append($('<option/>').attr('value','qux').text('qux')); | |
|
168 | select.append($('<option/>').attr('value','zip').text('zip')); | |
|
169 | select.val(cell.metadata.option); | |
|
170 | select.change(function(){ | |
|
171 | cell.metadata.option = select.val(); | |
|
172 | }); | |
|
173 | button_container.append($('<div/>').append(select)); | |
|
174 | ||
|
175 | } | |
|
176 | ||
|
177 | MetaUI.register_callback('example.select',select_test); | |
|
178 | example_preset.push('example.select'); | |
|
179 | ||
|
180 | MetaUI.register_preset('example',example_preset); | |
|
181 | MetaUI.set_preset('example'); | |
|
182 | console.log('Example extension for metadata editting loaded.'); | |
|
183 | ||
|
184 | }(IPython)); |
@@ -0,0 +1,63 b'' | |||
|
1 | //---------------------------------------------------------------------------- | |
|
2 | // Copyright (C) 2012 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 | // MetaUI Example | |
|
10 | //============================================================================ | |
|
11 | ||
|
12 | /** | |
|
13 | * Example Use for the MetaUI library | |
|
14 | * add the following to your custom.js to load | |
|
15 | * metadata UI for slideshow | |
|
16 | * | |
|
17 | * ``` | |
|
18 | * $.getScript('/static/js/examples/metaui.slideshow.js'); | |
|
19 | * ``` | |
|
20 | */ | |
|
21 | // IIFE without asignement, we don't modifiy the IPython namespace | |
|
22 | (function (IPython) { | |
|
23 | "use strict"; | |
|
24 | ||
|
25 | var MetaUI = IPython.MetaUI; | |
|
26 | var slideshow_preset = []; | |
|
27 | ||
|
28 | var hslide = MetaUI.utils.checkbox_ui_generator('New Section', | |
|
29 | function(md,value){ | |
|
30 | if (md.slideshow == undefined){md.slideshow = {}} | |
|
31 | return md.slideshow.new_section = value}, | |
|
32 | function(md){ var ns = md.slideshow; | |
|
33 | return (ns == undefined)? undefined: ns.new_section}); | |
|
34 | ||
|
35 | var vslide = MetaUI.utils.checkbox_ui_generator('New Subsection', | |
|
36 | function(md,value){ | |
|
37 | if (md.slideshow == undefined){md.slideshow = {}} | |
|
38 | return md.slideshow.new_subsection = value}, | |
|
39 | function(md){ var ns = md.slideshow; | |
|
40 | return (ns == undefined)? undefined: ns.new_subsection}); | |
|
41 | ||
|
42 | var fragment = MetaUI.utils.checkbox_ui_generator('New Fragment', | |
|
43 | function(md,value){ | |
|
44 | if (md.slideshow == undefined){md.slideshow = {}} | |
|
45 | return md.slideshow.new_fragment = value}, | |
|
46 | function(md){ var ns = md.slideshow; | |
|
47 | return (ns == undefined)? undefined: ns.new_fragment}); | |
|
48 | ||
|
49 | ||
|
50 | MetaUI.register_callback('slideshow.hslide',hslide); | |
|
51 | MetaUI.register_callback('slideshow.vslide',vslide); | |
|
52 | MetaUI.register_callback('slideshow.fragment',fragment); | |
|
53 | ||
|
54 | slideshow_preset.push('slideshow.fragment'); | |
|
55 | slideshow_preset.push('slideshow.vslide'); | |
|
56 | slideshow_preset.push('slideshow.hslide'); | |
|
57 | ||
|
58 | ||
|
59 | MetaUI.register_preset('slideshow',slideshow_preset); | |
|
60 | MetaUI.set_preset('slideshow'); | |
|
61 | console.log('Slideshow extension for metadata editting loaded.'); | |
|
62 | ||
|
63 | }(IPython)); |
@@ -28,6 +28,18 b'' | |||
|
28 | 28 | * ]); |
|
29 | 29 | * }); |
|
30 | 30 | * |
|
31 | * Example : | |
|
32 | * | |
|
33 | * Use `jQuery.getScript(url [, success(script, textStatus, jqXHR)] );` | |
|
34 | * to load custom script into the notebook. | |
|
35 | * | |
|
36 | * // to load the metadata ui extension example. | |
|
37 | * $.getScript('/static/js/examples/metaui.example.js'); | |
|
38 | * // or | |
|
39 | * // to load the metadata ui extension to control slideshow mode / reveal js for nbconvert | |
|
40 | * $.getScript('/static/js/examples/metaui.slideshow.js'); | |
|
41 | * | |
|
42 | * | |
|
31 | 43 | * @module IPython |
|
32 | 44 | * @namespace IPython |
|
33 | 45 | * @class customjs |
@@ -369,79 +369,6 b' var IPython = (function (IPython) {' | |||
|
369 | 369 | |
|
370 | 370 | } |
|
371 | 371 | } |
|
372 | var hslide = MetaUI.utils.checkbox_ui_generator('New Section', | |
|
373 | function(md,value){ | |
|
374 | if (md.slideshow == undefined){md.slideshow = {}} | |
|
375 | return md.slideshow.new_section = value}, | |
|
376 | function(md){ var ns = md.slideshow; | |
|
377 | return (ns == undefined)? undefined: ns.new_section}); | |
|
378 | ||
|
379 | var vslide = MetaUI.utils.checkbox_ui_generator('New Subsection', | |
|
380 | function(md,value){ | |
|
381 | if (md.slideshow == undefined){md.slideshow = {}} | |
|
382 | return md.slideshow.new_subsection = value}, | |
|
383 | function(md){ var ns = md.slideshow; | |
|
384 | return (ns == undefined)? undefined: ns.new_subsection}); | |
|
385 | ||
|
386 | var fragment = MetaUI.utils.checkbox_ui_generator('New Fragment', | |
|
387 | function(md,value){ | |
|
388 | if (md.slideshow == undefined){md.slideshow = {}} | |
|
389 | return md.slideshow.new_fragment = value}, | |
|
390 | function(md){ var ns = md.slideshow; | |
|
391 | return (ns == undefined)? undefined: ns.new_fragment}); | |
|
392 | ||
|
393 | ||
|
394 | MetaUI.register_callback('slideshow.hslide',hslide); | |
|
395 | MetaUI.register_callback('slideshow.vslide',vslide); | |
|
396 | MetaUI.register_callback('slideshow.fragment',fragment); | |
|
397 | ||
|
398 | example_preset.push('slideshow.fragment'); | |
|
399 | example_preset.push('slideshow.vslide'); | |
|
400 | example_preset.push('slideshow.hslide'); | |
|
401 | ||
|
402 | ||
|
403 | var checkbox_test = function(div, cell) { | |
|
404 | var button_container = $(div) | |
|
405 | ||
|
406 | var chkb = $('<input/>').attr('type','checkbox'); | |
|
407 | var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%')); | |
|
408 | lbl.append(chkb); | |
|
409 | chkb.attr("checked",cell.metadata.bar); | |
|
410 | chkb.click(function(){ | |
|
411 | var v = cell.metadata.bar; | |
|
412 | cell.metadata.bar = !v; | |
|
413 | chkb.attr("checked",!v); | |
|
414 | }) | |
|
415 | button_container.append($('<div/>').append(lbl)); | |
|
416 | ||
|
417 | } | |
|
418 | ||
|
419 | MetaUI.register_callback('example.checkbox',checkbox_test); | |
|
420 | example_preset.push('example.checkbox'); | |
|
421 | ||
|
422 | var select_test = function(div, cell) { | |
|
423 | var button_container = $(div) | |
|
424 | ||
|
425 | var select = $('<select/>'); | |
|
426 | ||
|
427 | select.append($('<option/>').attr('value','foo').text('foo')); | |
|
428 | select.append($('<option/>').attr('value','bar').text('bar')); | |
|
429 | select.append($('<option/>').attr('value','qux').text('qux')); | |
|
430 | select.append($('<option/>').attr('value','zip').text('zip')); | |
|
431 | select.val(cell.metadata.option); | |
|
432 | select.change(function(){ | |
|
433 | cell.metadata.option = select.val(); | |
|
434 | }); | |
|
435 | button_container.append($('<div/>').append(select)); | |
|
436 | ||
|
437 | } | |
|
438 | ||
|
439 | MetaUI.register_callback('example.select',select_test); | |
|
440 | example_preset.push('example.select'); | |
|
441 | ||
|
442 | MetaUI.register_preset('example',example_preset); | |
|
443 | MetaUI.register_preset('foo',['example.select','example.select']); | |
|
444 | MetaUI.set_preset('example'); | |
|
445 | 372 | |
|
446 | 373 | IPython.MetaUI = MetaUI; |
|
447 | 374 |
General Comments 0
You need to be logged in to leave comments.
Login now