celltoolbar.js
419 lines
| 14.7 KiB
| application/javascript
|
JavascriptLexer
|
r17196 | // Copyright (c) IPython Development Team. | ||
// Distributed under the terms of the Modified BSD License. | ||||
define([ | ||||
'base/js/namespace', | ||||
|
r17200 | 'jquery', | ||
|
r17454 | 'base/js/events' | ||
|
r17455 | ], function(IPython, $, events) { | ||
|
r9055 | "use strict"; | ||
|
r17214 | var CellToolbar = function (options) { | ||
// Constructor | ||||
// | ||||
// Parameters: | ||||
// options: dictionary | ||||
// Dictionary of keyword arguments. | ||||
// events: $(Events) instance | ||||
// cell: Cell instance | ||||
// notebook: Notebook instance | ||||
|
r17421 | // | ||
// TODO: This leaks, when cell are deleted | ||||
// There is still a reference to each celltoolbars. | ||||
|
r9064 | CellToolbar._instances.push(this); | ||
|
r17214 | this.notebook = options.notebook; | ||
this.cell = options.cell; | ||||
|
r9142 | this.create_element(); | ||
|
r9055 | this.rebuild(); | ||
return this; | ||||
}; | ||||
|
r9142 | |||
CellToolbar.prototype.create_element = function () { | ||||
|
r17196 | this.inner_element = $('<div/>').addClass('celltoolbar'); | ||
|
r9144 | this.element = $('<div/>').addClass('ctb_hideshow') | ||
|
r9462 | .append(this.inner_element); | ||
|
r9142 | }; | ||
|
r9145 | // The default css style for the outer celltoolbar div | ||
|
r13667 | // (ctb_hideshow) is display: none. | ||
// To show the cell toolbar, *both* of the following conditions must be met: | ||||
// - A parent container has class `ctb_global_show` | ||||
// - The celltoolbar has the class `ctb_show` | ||||
// This allows global show/hide, as well as per-cell show/hide. | ||||
|
r9062 | |||
|
r9143 | CellToolbar.global_hide = function () { | ||
|
r13667 | $('body').removeClass('ctb_global_show'); | ||
}; | ||||
|
r9142 | |||
|
r9143 | CellToolbar.global_show = function () { | ||
|
r13667 | $('body').addClass('ctb_global_show'); | ||
}; | ||||
|
r9145 | |||
|
r9143 | CellToolbar.prototype.hide = function () { | ||
|
r9144 | this.element.removeClass('ctb_show'); | ||
|
r13667 | }; | ||
|
r9143 | |||
CellToolbar.prototype.show = function () { | ||||
|
r9144 | this.element.addClass('ctb_show'); | ||
|
r13667 | }; | ||
|
r9142 | |||
|
r9062 | |||
|
r9055 | /** | ||
|
r13667 | * Class variable that should contain a dict of all available callback | ||
|
r9055 | * we need to think of wether or not we allow nested namespace | ||
* @property _callback_dict | ||||
* @private | ||||
|
r9077 | * @static | ||
* @type Dict | ||||
|
r9055 | */ | ||
|
r9064 | CellToolbar._callback_dict = {}; | ||
|
r9055 | |||
|
r9146 | |||
|
r9055 | /** | ||
* Class variable that should contain the reverse order list of the button | ||||
* to add to the toolbar of each cell | ||||
|
r9066 | * @property _ui_controls_list | ||
|
r9055 | * @private | ||
|
r9077 | * @static | ||
* @type List | ||||
|
r9055 | */ | ||
|
r9066 | CellToolbar._ui_controls_list = []; | ||
|
r9055 | |||
|
r9146 | |||
|
r9055 | /** | ||
|
r13670 | * Class variable that should contain the CellToolbar instances for each | ||
|
r9077 | * cell of the notebook | ||
* | ||||
|
r9055 | * @private | ||
* @property _instances | ||||
|
r9077 | * @static | ||
* @type List | ||||
|
r9055 | */ | ||
|
r13670 | CellToolbar._instances = []; | ||
|
r9055 | |||
|
r9146 | |||
|
r9055 | /** | ||
|
r13670 | * keep a list of all the available presets for the toolbar | ||
|
r9055 | * @private | ||
* @property _presets | ||||
|
r9077 | * @static | ||
* @type Dict | ||||
|
r9055 | */ | ||
|
r13670 | CellToolbar._presets = {}; | ||
|
r9055 | |||
|
r9146 | |||
|
r9055 | // this is by design not a prototype. | ||
/** | ||||
* Register a callback to create an UI element in a cell toolbar. | ||||
* @method register_callback | ||||
* @param name {String} name to use to refer to the callback. It is advised to use a prefix with the name | ||||
* for easier sorting and avoid collision | ||||
|
r16285 | * @param callback {function(div, cell)} callback that will be called to generate the ui element | ||
* @param [cell_types] {List of String|undefined} optional list of cell types. If present the UI element | ||||
* will be added only to cells of types in the list. | ||||
|
r9055 | * | ||
* | ||||
* The callback will receive the following element : | ||||
* | ||||
* * a div in which to add element. | ||||
|
r9077 | * * the cell it is responsible from | ||
|
r9055 | * | ||
* @example | ||||
* | ||||
* Example that create callback for a button that toggle between `true` and `false` label, | ||||
* with the metadata under the key 'foo' to reflect the status of the button. | ||||
* | ||||
* // first param reference to a DOM div | ||||
* // second param reference to the cell. | ||||
* var toggle = function(div, cell) { | ||||
* var button_container = $(div) | ||||
* | ||||
* // let's create a button that show the current value of the metadata | ||||
* var button = $('<div/>').button({label:String(cell.metadata.foo)}); | ||||
* | ||||
* // On click, change the metadata value and update the button label | ||||
* button.click(function(){ | ||||
* var v = cell.metadata.foo; | ||||
* cell.metadata.foo = !v; | ||||
|
r9072 | * button.button("option", "label", String(!v)); | ||
|
r9055 | * }) | ||
* | ||||
* // add the button to the DOM div. | ||||
* button_container.append(button); | ||||
* } | ||||
* | ||||
* // now we register the callback under the name `foo` to give the | ||||
* // user the ability to use it later | ||||
|
r9072 | * CellToolbar.register_callback('foo', toggle); | ||
|
r9055 | */ | ||
|
r16285 | CellToolbar.register_callback = function(name, callback, cell_types) { | ||
|
r9077 | // Overwrite if it already exists. | ||
|
r16285 | CellToolbar._callback_dict[name] = cell_types ? {callback: callback, cell_types: cell_types} : callback; | ||
|
r9055 | }; | ||
|
r9146 | |||
|
r9055 | /** | ||
* Register a preset of UI element in a cell toolbar. | ||||
* Not supported Yet. | ||||
* @method register_preset | ||||
* @param name {String} name to use to refer to the preset. It is advised to use a prefix with the name | ||||
* for easier sorting and avoid collision | ||||
* @param preset_list {List of String} reverse order of the button in the toolbar. Each String of the list | ||||
* should correspond to a name of a registerd callback. | ||||
* | ||||
* @private | ||||
* @example | ||||
* | ||||
|
r9072 | * 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){...}); | ||||
|
r9055 | * | ||
|
r9072 | * CellToolbar.register_preset('foo.foo_preset1', ['foo.c1', 'foo.c2', 'foo.c5']) | ||
* CellToolbar.register_preset('foo.foo_preset2', ['foo.c4', 'foo.c5']) | ||||
|
r9055 | */ | ||
|
r17454 | CellToolbar.register_preset = function(name, preset_list, notebook) { | ||
|
r13670 | CellToolbar._presets[name] = preset_list; | ||
|
r17455 | events.trigger('preset_added.CellToolbar', {name: name}); | ||
|
r16533 | // When "register_callback" is called by a custom extension, it may be executed after notebook is loaded. | ||
// In that case, activate the preset if needed. | ||||
|
r17454 | if (notebook && notebook.metadata && notebook.metadata.celltoolbar === name){ | ||
CellToolbar.activate_preset(name); | ||||
} | ||||
|
r9146 | }; | ||
/** | ||||
* List the names of the presets that are currently registered. | ||||
* | ||||
* @method list_presets | ||||
* @static | ||||
*/ | ||||
CellToolbar.list_presets = function() { | ||||
var keys = []; | ||||
for (var k in CellToolbar._presets) { | ||||
keys.push(k); | ||||
} | ||||
return keys; | ||||
}; | ||||
|
r9055 | /** | ||
|
r9077 | * Activate an UI preset from `register_preset` | ||
* | ||||
* This does not update the selection UI. | ||||
* | ||||
* @method activate_preset | ||||
|
r9055 | * @param preset_name {String} string corresponding to the preset name | ||
* | ||||
* @static | ||||
* @private | ||||
* @example | ||||
* | ||||
|
r9077 | * CellToolbar.activate_preset('foo.foo_preset1'); | ||
|
r9055 | */ | ||
|
r17454 | CellToolbar.activate_preset = function(preset_name){ | ||
|
r9064 | var preset = CellToolbar._presets[preset_name]; | ||
|
r9055 | |||
|
r13670 | if(preset !== undefined){ | ||
|
r9066 | CellToolbar._ui_controls_list = preset; | ||
|
r9064 | CellToolbar.rebuild_all(); | ||
|
r9055 | } | ||
|
r16533 | |||
|
r17455 | events.trigger('preset_activated.CellToolbar', {name: preset_name}); | ||
|
r13670 | }; | ||
|
r9055 | |||
|
r9062 | |||
|
r9055 | /** | ||
* This should be called on the class and not on a instance as it will trigger | ||||
* rebuild of all the instances. | ||||
* @method rebuild_all | ||||
* @static | ||||
* | ||||
*/ | ||||
|
r9064 | CellToolbar.rebuild_all = function(){ | ||
|
r16226 | for(var i=0; i < CellToolbar._instances.length; i++){ | ||
|
r9064 | CellToolbar._instances[i].rebuild(); | ||
|
r9055 | } | ||
|
r13670 | }; | ||
|
r9055 | |||
/** | ||||
|
r13670 | * Rebuild all the button on the toolbar to update its state. | ||
|
r9055 | * @method rebuild | ||
*/ | ||||
|
r9064 | CellToolbar.prototype.rebuild = function(){ | ||
|
r9055 | // strip evrything from the div | ||
|
r13670 | // which is probably inner_element | ||
|
r9064 | // or this.element. | ||
this.inner_element.empty(); | ||||
|
r16286 | this.ui_controls_list = []; | ||
|
r9055 | |||
|
r13670 | var callbacks = CellToolbar._callback_dict; | ||
|
r9066 | var preset = CellToolbar._ui_controls_list; | ||
|
r13670 | // Yes we iterate on the class variable, not the instance one. | ||
|
r16226 | for (var i=0; i < preset.length; i++) { | ||
var key = preset[i]; | ||||
|
r13670 | var callback = callbacks[key]; | ||
if (!callback) continue; | ||||
|
r16285 | |||
if (typeof callback === 'object') { | ||||
if (callback.cell_types.indexOf(this.cell.cell_type) === -1) continue; | ||||
callback = callback.callback; | ||||
} | ||||
|
r13670 | |||
|
r9055 | var local_div = $('<div/>').addClass('button_container'); | ||
|
r13670 | try { | ||
callback(local_div, this.cell, this); | ||||
|
r16286 | this.ui_controls_list.push(key); | ||
|
r13670 | } catch (e) { | ||
console.log("Error in cell toolbar callback " + key, e); | ||||
continue; | ||||
} | ||||
// only append if callback succeeded. | ||||
this.inner_element.append(local_div); | ||||
|
r9055 | } | ||
|
r16286 | |||
|
r16287 | // If there are no controls or the cell is a rendered TextCell hide the toolbar. | ||
|
r17284 | if (!this.ui_controls_list.length || (this.cell.cell_type != 'code' && this.cell.rendered)) { | ||
|
r16286 | this.hide(); | ||
|
r16287 | } else { | ||
this.show(); | ||||
|
r16286 | } | ||
|
r13670 | }; | ||
|
r9055 | |||
|
r9056 | /** | ||
*/ | ||||
|
r9064 | CellToolbar.utils = {}; | ||
|
r9056 | |||
|
r9146 | |||
|
r9056 | /** | ||
|
r9072 | * A utility function to generate bindings between a checkbox and cell/metadata | ||
|
r9056 | * @method utils.checkbox_ui_generator | ||
* @static | ||||
* | ||||
* @param name {string} Label in front of the checkbox | ||||
|
r9072 | * @param setter {function( cell, newValue )} | ||
* A setter method to set the newValue | ||||
* @param getter {function( cell )} | ||||
* A getter methods which return the current value. | ||||
|
r9056 | * | ||
* @return callback {function( div, cell )} Callback to be passed to `register_callback` | ||||
* | ||||
* @example | ||||
* | ||||
* An exmple that bind the subkey `slideshow.isSectionStart` to a checkbox with a `New Slide` label | ||||
* | ||||
|
r9064 | * var newSlide = CellToolbar.utils.checkbox_ui_generator('New Slide', | ||
|
r9056 | * // setter | ||
|
r9072 | * function(cell, value){ | ||
|
r9056 | * // we check that the slideshow namespace exist and create it if needed | ||
|
r9072 | * if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}} | ||
|
r9056 | * // set the value | ||
|
r9072 | * cell.metadata.slideshow.isSectionStart = value | ||
|
r9056 | * }, | ||
* //geter | ||||
|
r9072 | * function(cell){ var ns = cell.metadata.slideshow; | ||
|
r9056 | * // 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.isSectionStart | ||||
* } | ||||
* ); | ||||
* | ||||
|
r9064 | * CellToolbar.register_callback('newSlide', newSlide); | ||
|
r9056 | * | ||
*/ | ||||
|
r9072 | CellToolbar.utils.checkbox_ui_generator = function(name, setter, getter){ | ||
|
r13670 | return function(div, cell, celltoolbar) { | ||
var button_container = $(div); | ||||
|
r9056 | |||
|
r9072 | var chkb = $('<input/>').attr('type', 'checkbox'); | ||
|
r9142 | var lbl = $('<label/>').append($('<span/>').text(name)); | ||
|
r9056 | lbl.append(chkb); | ||
|
r9072 | chkb.attr("checked", getter(cell)); | ||
|
r9056 | |||
chkb.click(function(){ | ||||
|
r9072 | var v = getter(cell); | ||
setter(cell, !v); | ||||
chkb.attr("checked", !v); | ||||
|
r13670 | }); | ||
|
r17265 | button_container.append($('<span/>').append(lbl)); | ||
|
r13670 | }; | ||
}; | ||||
|
r9055 | |||
|
r9146 | |||
|
r9058 | /** | ||
|
r9072 | * A utility function to generate bindings between a dropdown list cell | ||
|
r9058 | * @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, | ||||
|
r12649 | * and second the corresponding value to be passed to setter/return by getter. the corresponding value | ||
* should not be "undefined" or behavior can be unexpected. | ||||
|
r9072 | * @param setter {function( cell, newValue )} | ||
* A setter method to set the newValue | ||||
* @param getter {function( cell )} | ||||
|
r9058 | * A getter methods which return the current value of the metadata. | ||
* @param [label=""] {String} optionnal label for the dropdown menu | ||||
* | ||||
* @return callback {function( div, cell )} Callback to be passed to `register_callback` | ||||
* | ||||
* @example | ||||
* | ||||
|
r9064 | * var select_type = CellToolbar.utils.select_ui_generator([ | ||
|
r12649 | * ["<None>" , "None" ], | ||
|
r9072 | * ["Header Slide" , "header_slide" ], | ||
* ["Slide" , "slide" ], | ||||
* ["Fragment" , "fragment" ], | ||||
* ["Skip" , "skip" ], | ||||
|
r9058 | * ], | ||
* // setter | ||||
|
r9072 | * function(cell, value){ | ||
|
r9058 | * // we check that the slideshow namespace exist and create it if needed | ||
|
r9072 | * if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}} | ||
|
r9058 | * // set the value | ||
|
r9072 | * cell.metadata.slideshow.slide_type = value | ||
|
r9058 | * }, | ||
* //geter | ||||
|
r9072 | * function(cell){ var ns = cell.metadata.slideshow; | ||
|
r9058 | * // 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 | ||||
* } | ||||
|
r9072 | * CellToolbar.register_callback('slideshow.select', select_type); | ||
|
r9058 | * | ||
*/ | ||||
|
r16316 | CellToolbar.utils.select_ui_generator = function(list_list, setter, getter, label) { | ||
|
r13670 | label = label || ""; | ||
return function(div, cell, celltoolbar) { | ||||
var button_container = $(div); | ||||
|
r9142 | var lbl = $("<label/>").append($('<span/>').text(label)); | ||
|
r17759 | var select = $('<select/>'); | ||
|
r16226 | for(var i=0; i < list_list.length; i++){ | ||
|
r13670 | var opt = $('<option/>') | ||
|
r16226 | .attr('value', list_list[i][1]) | ||
.text(list_list[i][0]); | ||||
|
r9058 | select.append(opt); | ||
} | ||||
|
r9072 | select.val(getter(cell)); | ||
|
r9058 | select.change(function(){ | ||
|
r9072 | setter(cell, select.val()); | ||
|
r9058 | }); | ||
|
r17265 | button_container.append($('<span/>').append(lbl).append(select)); | ||
|
r13670 | }; | ||
|
r9058 | }; | ||
|
r17196 | // Backwards compatability. | ||
|
r9064 | IPython.CellToolbar = CellToolbar; | ||
|
r9055 | |||
|
r17201 | return {'CellToolbar': CellToolbar}; | ||
|
r17196 | }); | ||