diff --git a/IPython/frontend/html/notebook/static/js/celltoolbar.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js index a2bf6f6..533ce3e 100644 --- a/IPython/frontend/html/notebook/static/js/celltoolbar.js +++ b/IPython/frontend/html/notebook/static/js/celltoolbar.js @@ -37,8 +37,8 @@ var IPython = (function (IPython) { CellToolbar.dropdown_preset_element = $('') .addClass('ui-widget ui-widget-content') - .attr('id','celltoolbar_selector') - .append($('').attr('value','').text('-')) + .attr('id', 'celltoolbar_selector') + .append($('').attr('value', '').text('-')) CellToolbar.dropdown_preset_element.change(function(){ var val = CellToolbar.dropdown_preset_element.val() @@ -117,7 +117,7 @@ var IPython = (function (IPython) { * button.click(function(){ * var v = cell.metadata.foo; * cell.metadata.foo = !v; - * button.button("option","label",String(!v)); + * button.button("option", "label", String(!v)); * }) * * // add the button to the DOM div. @@ -126,7 +126,7 @@ var IPython = (function (IPython) { * * // now we register the callback under the name `foo` to give the * // user the ability to use it later - * CellToolbar.register_callback('foo',toggle); + * CellToolbar.register_callback('foo', toggle); */ CellToolbar.register_callback = function(name, callback){ // what do we do if name already exist ? @@ -145,19 +145,19 @@ var IPython = (function (IPython) { * @private * @example * - * CellToolbar.register_callback('foo.c1',function(div,cell){...}); - * CellToolbar.register_callback('foo.c2',function(div,cell){...}); - * CellToolbar.register_callback('foo.c3',function(div,cell){...}); - * CellToolbar.register_callback('foo.c4',function(div,cell){...}); - * CellToolbar.register_callback('foo.c5',function(div,cell){...}); + * CellToolbar.register_callback('foo.c1', function(div, cell){...}); + * CellToolbar.register_callback('foo.c2', function(div, cell){...}); + * CellToolbar.register_callback('foo.c3', function(div, cell){...}); + * CellToolbar.register_callback('foo.c4', function(div, cell){...}); + * CellToolbar.register_callback('foo.c5', function(div, cell){...}); * - * CellToolbar.register_preset('foo.foo_preset1',['foo.c1','foo.c2','foo.c5']) - * CellToolbar.register_preset('foo.foo_preset2',['foo.c4','foo.c5']) + * CellToolbar.register_preset('foo.foo_preset1', ['foo.c1', 'foo.c2', 'foo.c5']) + * CellToolbar.register_preset('foo.foo_preset2', ['foo.c4', 'foo.c5']) */ CellToolbar.register_preset = function(name, preset_list){ CellToolbar._presets[name] = preset_list CellToolbar.dropdown_preset_element.append( - $('').attr('value',name).text(name) + $('').attr('value', name).text(name) ) } /** @@ -213,29 +213,26 @@ var IPython = (function (IPython) { // Note, // do this the other way, wrap in try/catch and don't append if any errors. this.inner_element.append(local_div) - cdict[preset[index]](local_div,this.cell) + cdict[preset[index]](local_div, this.cell) } } - - - /** */ CellToolbar.utils = {}; /** - * A utility function to generate bindings between a checkbox and metadata + * A utility function to generate bindings between a checkbox and cell/metadata * @method utils.checkbox_ui_generator * @static * * @param name {string} Label in front of the checkbox - * @param setter {function( metadata_dict, newValue )} - * A setter method to set the newValue of the metadata dictionnary - * @param getter {function( metadata )} - * A getter methods which return the current value of the metadata. + * @param setter {function( cell, newValue )} + * A setter method to set the newValue + * @param getter {function( cell )} + * A getter methods which return the current value. * * @return callback {function( div, cell )} Callback to be passed to `register_callback` * @@ -245,14 +242,14 @@ var IPython = (function (IPython) { * * var newSlide = CellToolbar.utils.checkbox_ui_generator('New Slide', * // setter - * function(metadata,value){ + * function(cell, value){ * // we check that the slideshow namespace exist and create it if needed - * if (metadata.slideshow == undefined){metadata.slideshow = {}} + * if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}} * // set the value - * metadata.slideshow.isSectionStart = value + * cell.metadata.slideshow.isSectionStart = value * }, * //geter - * function(metadata){ var ns = metadata.slideshow; + * function(cell){ var ns = cell.metadata.slideshow; * // if the slideshow namespace does not exist return `undefined` * // (will be interpreted as `false` by checkbox) otherwise * // return the value @@ -263,19 +260,19 @@ var IPython = (function (IPython) { * CellToolbar.register_callback('newSlide', newSlide); * */ - CellToolbar.utils.checkbox_ui_generator = function(name,setter,getter){ + CellToolbar.utils.checkbox_ui_generator = function(name, setter, getter){ return function(div, cell) { var button_container = $(div) - var chkb = $('').attr('type','checkbox'); - var lbl = $('').append($('').text(name).css('font-size','77%')); + var chkb = $('').attr('type', 'checkbox'); + var lbl = $('').append($('').text(name).css('font-size', '77%')); lbl.append(chkb); - chkb.attr("checked",getter(cell.metadata)); + chkb.attr("checked", getter(cell)); chkb.click(function(){ - var v = getter(cell.metadata); - setter(cell.metadata,!v); - chkb.attr("checked",!v); + var v = getter(cell); + setter(cell, !v); + chkb.attr("checked", !v); }) button_container.append($('
').append(lbl)); @@ -283,16 +280,16 @@ var IPython = (function (IPython) { } /** - * A utility function to generate bindings between a dropdown list and metadata + * A utility function to generate bindings between a dropdown list cell * @method utils.select_ui_generator * @static * * @param list_list {list of sublist} List of sublist of metadata value and name in the dropdown list. * subslit shoud contain 2 element each, first a string that woul be displayed in the dropdown list, - * and second the corresponding value for the metadata to be passed to setter/return by getter. - * @param setter {function( metadata_dict, newValue )} - * A setter method to set the newValue of the metadata dictionnary - * @param getter {function( metadata )} + * and second the corresponding value to be passed to setter/return by getter. + * @param setter {function( cell, newValue )} + * A setter method to set the newValue + * @param getter {function( cell )} * A getter methods which return the current value of the metadata. * @param [label=""] {String} optionnal label for the dropdown menu * @@ -301,45 +298,44 @@ var IPython = (function (IPython) { * @example * * var select_type = CellToolbar.utils.select_ui_generator([ - * ["-" ,undefined ], - * ["Header Slide" ,"header_slide" ], - * ["Slide" ,"slide" ], - * ["Fragment" ,"fragment" ], - * ["Skip" ,"skip" ], + * ["-" , undefined ], + * ["Header Slide" , "header_slide" ], + * ["Slide" , "slide" ], + * ["Fragment" , "fragment" ], + * ["Skip" , "skip" ], * ], * // setter - * function(metadata,value){ + * function(cell, value){ * // we check that the slideshow namespace exist and create it if needed - * if (metadata.slideshow == undefined){metadata.slideshow = {}} + * if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}} * // set the value - * metadata.slideshow.slide_type = value + * cell.metadata.slideshow.slide_type = value * }, * //geter - * function(metadata){ var ns = metadata.slideshow; + * function(cell){ var ns = cell.metadata.slideshow; * // if the slideshow namespace does not exist return `undefined` * // (will be interpreted as `false` by checkbox) otherwise * // return the value * return (ns == undefined)? undefined: ns.slide_type * } - * CellToolbar.register_callback('slideshow.select',select_type); + * CellToolbar.register_callback('slideshow.select', select_type); * */ - CellToolbar.utils.select_ui_generator = function(list_list,setter, getter, label){ + CellToolbar.utils.select_ui_generator = function(list_list, setter, getter, label){ label= label? label: ""; return function(div, cell) { var button_container = $(div) - var lbl = $("").append($('').text(label).css('font-size','77%')); + var lbl = $("").append($('').text(label).css('font-size', '77%')); var select = $(''); for(var itemn in list_list){ var opt = $(''); - opt.attr('value',list_list[itemn][1]) + opt.attr('value', list_list[itemn][1]) opt.text(list_list[itemn][0]) select.append(opt); } - select.val(getter(cell.metadata)); - + select.val(getter(cell)); select.change(function(){ - setter(cell.metadata,select.val()); + setter(cell, select.val()); }); button_container.append($('').append(lbl).append(select)); diff --git a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js index ed4ca1c..b5aa77a 100644 --- a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js +++ b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js @@ -142,41 +142,48 @@ CellToolbar.register_callback('example.toggle',toggle_test); example_preset.push('example.toggle'); - var checkbox_test = function(div, cell) { - var button_container = $(div) + var checkbox_test = CellToolbar.utils.checkbox_ui_generator('Yes/No', + // setter + function(cell, value){ + // we check that the slideshow namespace exist and create it if needed + if (cell.metadata.yn_test == undefined){cell.metadata.yn_test = {}} + // set the value + cell.metadata.yn_test.value = value + }, + //geter + function(cell){ var ns = cell.metadata.yn_test; + // if the slideshow namespace does not exist return `undefined` + // (will be interpreted as `false` by checkbox) otherwise + // return the value + return (ns == undefined)? undefined: ns.value + } + ); - var chkb = $('').attr('type','checkbox'); - var lbl = $('').append($('').text('bar :').css('font-size','77%')); - lbl.append(chkb); - chkb.attr("checked",cell.metadata.bar); - chkb.click(function(){ - var v = cell.metadata.bar; - cell.metadata.bar = !v; - chkb.attr("checked",!v); - }) - button_container.append($('').append(lbl)); - - } CellToolbar.register_callback('example.checkbox',checkbox_test); example_preset.push('example.checkbox'); - var select_test = function(div, cell) { - var button_container = $(div) - - var select = $(''); - - select.append($('').attr('value','foo').text('foo')); - select.append($('').attr('value','bar').text('bar')); - select.append($('').attr('value','qux').text('qux')); - select.append($('').attr('value','zip').text('zip')); - select.val(cell.metadata.option); - select.change(function(){ - cell.metadata.option = select.val(); + var select_test = CellToolbar.utils.select_ui_generator([ + ["-" ,undefined ], + ["Header Slide" ,"header_slide" ], + ["Slide" ,"slide" ], + ["Fragment" ,"fragment" ], + ["Skip" ,"skip" ], + ], + // setter + function(cell,value){ + // we check that the slideshow namespace exist and create it if needed + if (cell.metadata.test == undefined){cell.metadata.test = {}} + // set the value + cell.metadata.test.slide_type = value + }, + //geter + function(cell){ var ns = cell.metadata.test; + // if the slideshow namespace does not exist return `undefined` + // (will be interpreted as `false` by checkbox) otherwise + // return the value + return (ns == undefined)? undefined: ns.slide_type }); - button_container.append($('').append(select)); - - } CellToolbar.register_callback('example.select',select_test); example_preset.push('example.select');