Fixed cell toolbars

This commit is contained in:
Jonathan Frederic 2014-07-03 10:52:28 -07:00
parent b15633a89e
commit a226bd2d6e
9 changed files with 127 additions and 134 deletions

View File

@ -4,8 +4,7 @@
define([
'base/js/namespace',
'jquery',
'notebook/js/textcell',
], function(IPython, $, textcell) {
], function(IPython, $) {
"use strict";
var CellToolbar = function (options) {
@ -176,13 +175,13 @@ define([
* 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.register_preset = function(name, preset_list, notebook, events) {
CellToolbar._presets[name] = preset_list;
this.events.trigger('preset_added.CellToolbar', {name: name});
events.trigger('preset_added.CellToolbar', {name: name});
// 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.
if (this.notebook && this.notebook.metadata && this.notebook.metadata.celltoolbar === name)
this.activate_preset(name);
if (notebook && notebook.metadata && notebook.metadata.celltoolbar === name)
CellToolbar.activate_preset(name, events);
};
@ -215,7 +214,7 @@ define([
*
* CellToolbar.activate_preset('foo.foo_preset1');
*/
CellToolbar.activate_preset = function(preset_name){
CellToolbar.activate_preset = function(preset_name, events){
var preset = CellToolbar._presets[preset_name];
if(preset !== undefined){
@ -223,8 +222,8 @@ define([
CellToolbar.rebuild_all();
}
if (this.events) {
this.events.trigger('preset_activated.CellToolbar', {name: preset_name});
if (events) {
events.trigger('preset_activated.CellToolbar', {name: preset_name});
}
};
@ -279,7 +278,7 @@ define([
}
// If there are no controls or the cell is a rendered TextCell hide the toolbar.
if (!this.ui_controls_list.length || (this.cell instanceof textcell.TextCell && this.cell.rendered)) {
if (!this.ui_controls_list.length || (this.cell_type != 'code' && this.cell.rendered)) {
this.hide();
} else {
this.show();

View File

@ -1,31 +1,23 @@
//----------------------------------------------------------------------------
// Copyright (C) 2012 The IPython Development Team
//
// Distributed under the terms of the BSD License. The full license is in
// the file COPYING, distributed as part of this software.
//----------------------------------------------------------------------------
// Copyright (c) IPython Development Team.
// Distributed under the terms of the Modified BSD License.
//============================================================================
// CellToolbar Default
//============================================================================
/**
* Example Use for the CellToolbar library
*/
// IIFE without asignement, we don't modifiy the IPython namespace
(function (IPython) {
define([
'jquery',
'notebook/js/celltoolbar',
'base/js/dialog',
], function($, celltoolbar, dialog) {
"use strict";
var CellToolbar = IPython.CellToolbar;
var CellToolbar = celltoolbar.CellToolbar;
var raw_edit = function(cell){
IPython.dialog.edit_metadata(cell.metadata, function (md) {
dialog.edit_metadata(cell.metadata, function (md) {
cell.metadata = md;
});
};
var add_raw_edit_button = function(div, cell) {
var button_container = div;
var button_container = $(div);
var button = $('<button/>')
.addClass("btn btn-default btn-xs")
.text("Edit Metadata")
@ -36,11 +28,13 @@
button_container.append(button);
};
CellToolbar.register_callback('default.rawedit', add_raw_edit_button);
var example_preset = [];
example_preset.push('default.rawedit');
var register = function (notebook, events) {
CellToolbar.register_callback('default.rawedit', add_raw_edit_button);
var example_preset = [];
example_preset.push('default.rawedit');
CellToolbar.register_preset('Edit Metadata', example_preset);
console.log('Default extension for cell metadata editing loaded.');
}(IPython));
CellToolbar.register_preset('Edit Metadata', example_preset, notebook, events);
console.log('Default extension for cell metadata editing loaded.');
};
return {'register': register};
});

View File

@ -1,28 +1,20 @@
//----------------------------------------------------------------------------
// Copyright (C) 2012 The IPython Development Team
//
// Distributed under the terms of the BSD License. The full license is in
// the file COPYING, distributed as part of this software.
//----------------------------------------------------------------------------
// Copyright (c) IPython Development Team.
// Distributed under the terms of the Modified BSD License.
//============================================================================
// CellToolbar Example
//============================================================================
// Example Use for the CellToolbar library
// add the following to your custom.js to load
// Celltoolbar UI for slideshow
/**
* Example Use for the CellToolbar library
* add the following to your custom.js to load
* Celltoolbar UI for slideshow
*
* ```
* $.getScript('/static/js/celltoolbarpresets/example.js');
* ```
*/
// IIFE without asignement, we don't modifiy the IPython namespace
(function (IPython) {
// ```
// $.getScript('/static/js/celltoolbarpresets/example.js');
// ```
define([
'jquery',
'notebook/js/celltoolbar',
], function($, celltoolbar) {
"use strict";
var CellToolbar = IPython.CellToolbar;
var CellToolbar = celltoolbar.CellToolbar;
var example_preset = [];
@ -32,32 +24,32 @@
var fun = function(value){
try{
if(value){
cell.code_mirror.setOption('readOnly','nocursor')
button.button('option','icons',{primary:'ui-icon-locked'})
cell.code_mirror.setOption('readOnly','nocursor');
button.button('option','icons',{primary:'ui-icon-locked'});
} else {
cell.code_mirror.setOption('readOnly',false)
button.button('option','icons',{primary:'ui-icon-unlocked'})
cell.code_mirror.setOption('readOnly',false);
button.button('option','icons',{primary:'ui-icon-unlocked'});
}
} catch(e){}
}
fun(cell.metadata.ro)
};
fun(cell.metadata.ro);
button.click(function(){
var v = cell.metadata.ro;
var locked = !v;
cell.metadata.ro = locked;
fun(locked)
fun(locked);
})
.css('height','16px')
.css('width','35px');
button_container.append(button);
}
};
CellToolbar.register_callback('example.lock',simple_button);
example_preset.push('example.lock');
var toggle_test = function(div, cell) {
var button_container = $(div)
var button_container = $(div);
var button = $('<div/>')
.button({label:String(cell.metadata.foo)}).
css('width','65px');
@ -65,9 +57,9 @@
var v = cell.metadata.foo;
cell.metadata.foo = !v;
button.button("option","label",String(!v));
})
});
button_container.append(button);
}
};
CellToolbar.register_callback('example.toggle',toggle_test);
example_preset.push('example.toggle');
@ -76,16 +68,16 @@
// 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 = {}}
if (cell.metadata.yn_test === undefined){cell.metadata.yn_test = {};}
// set the value
cell.metadata.yn_test.value = 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
return (ns === undefined)? undefined: ns.value;
}
);
@ -103,16 +95,16 @@
// setter
function(cell,value){
// we check that the slideshow namespace exist and create it if needed
if (cell.metadata.test == undefined){cell.metadata.test = {}}
if (cell.metadata.test === undefined){cell.metadata.test = {};}
// set the value
cell.metadata.test.slide_type = 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
return (ns === undefined)? undefined: ns.slide_type;
});
CellToolbar.register_callback('example.select',select_test);
@ -120,7 +112,7 @@
var simple_dialog = function(title,text){
var dlg = $('<div/>').attr('title',title)
.append($('<p/>').text(text))
.append($('<p/>').text(text));
$(dlg).dialog({
autoOpen: true,
height: 300,
@ -131,24 +123,26 @@
$(this).remove();
}
});
}
};
var add_simple_dialog_button = function(div, cell) {
var help_text = ["This is the Metadata editting UI.",
"It heavily rely on plugin to work ",
"and is still under developpement. You shouldn't wait too long before",
" seeing some customisable buttons in those toolbar."
].join('\n')
var button_container = $(div)
].join('\n');
var button_container = $(div);
var button = $('<div/>').button({label:'?'})
.click(function(){simple_dialog('help',help_text); return false;})
.click(function(){simple_dialog('help',help_text); return false;});
button_container.append(button);
}
};
CellToolbar.register_callback('example.help',add_simple_dialog_button)
example_preset.push('example.help')
var register = function (notebook, events) {
CellToolbar.register_callback('example.help',add_simple_dialog_button);
example_preset.push('example.help');
CellToolbar.register_preset('Example',example_preset);
console.log('Example extension for metadata editing loaded.');
}(IPython));
CellToolbar.register_preset('Example',example_preset, notebook, events);
console.log('Example extension for metadata editing loaded.');
};
return {'register': register};
});

View File

@ -1,18 +1,15 @@
//----------------------------------------------------------------------------
// Copyright (C) 2012 The IPython Development Team
//
// Distributed under the terms of the BSD License. The full license is in
// the file COPYING, distributed as part of this software.
//----------------------------------------------------------------------------
// Copyright (c) IPython Development Team.
// Distributed under the terms of the Modified BSD License.
//============================================================================
// CellToolbar Example
//============================================================================
define([
'jquery',
'notebook/js/celltoolbar',
'base/js/dialog',
'base/js/keyboard',
], function($, celltoolbar, dialog, keyboard) {
"use strict";
(function(IPython) {
"use strict";
var CellToolbar = IPython.CellToolbar;
var CellToolbar = celltoolbar.CellToolbar;
var raw_cell_preset = [];
var select_type = CellToolbar.utils.select_ui_generator([
@ -39,7 +36,7 @@
$('<input/>').attr('type','text').attr('size','25')
.val(cell.metadata.raw_mimetype || "-")
);
IPython.dialog.modal({
dialog.modal({
title: "Raw Cell MIME Type",
body: dialog,
buttons : {
@ -57,7 +54,7 @@
var that = $(this);
// Upon ENTER, click the OK button.
that.find('input[type="text"]').keydown(function (event, ui) {
if (event.which === IPython.keyboard.keycodes.enter) {
if (event.which === keyboard.keycodes.enter) {
that.find('.btn-primary').first().click();
return false;
}
@ -77,11 +74,13 @@
"Raw NBConvert Format"
);
CellToolbar.register_callback('raw_cell.select', select_type, ['raw']);
var register = function (notebook, events) {
CellToolbar.register_callback('raw_cell.select', select_type, ['raw']);
raw_cell_preset.push('raw_cell.select');
raw_cell_preset.push('raw_cell.select');
CellToolbar.register_preset('Raw Cell Format', raw_cell_preset, notebook, events);
console.log('Raw Cell Format toolbar preset loaded.');
};
return {'register': register};
CellToolbar.register_preset('Raw Cell Format', raw_cell_preset);
console.log('Raw Cell Format toolbar preset loaded.');
}(IPython));
});

View File

@ -1,19 +1,14 @@
//----------------------------------------------------------------------------
// Copyright (C) 2012 The IPython Development Team
//
// Distributed under the terms of the BSD License. The full license is in
// the file COPYING, distributed as part of this software.
//----------------------------------------------------------------------------
// Copyright (c) IPython Development Team.
// Distributed under the terms of the Modified BSD License.
//============================================================================
//CellToolbar Example
//============================================================================
// IIFE without asignement, we don't modifiy the IPython namespace
(function (IPython) {
define([
'jquery',
'notebook/js/celltoolbar',
], function($, celltoolbar) {
"use strict";
var CellToolbar = IPython.CellToolbar;
var CellToolbar = celltoolbar.CellToolbar;
var slideshow_preset = [];
var select_type = CellToolbar.utils.select_ui_generator([
@ -27,24 +22,25 @@
// setter
function(cell, value){
// we check that the slideshow namespace exist and create it if needed
if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
if (cell.metadata.slideshow === undefined){cell.metadata.slideshow = {};}
// set the value
cell.metadata.slideshow.slide_type = value
cell.metadata.slideshow.slide_type = value;
},
//geter
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
return (ns === undefined)? undefined: ns.slide_type;
},
"Slide Type");
CellToolbar.register_callback('slideshow.select',select_type);
var register = function (notebook, events) {
CellToolbar.register_callback('slideshow.select',select_type);
slideshow_preset.push('slideshow.select');
slideshow_preset.push('slideshow.select');
CellToolbar.register_preset('Slideshow',slideshow_preset);
console.log('Slideshow extension for metadata editing loaded.');
}(IPython));
CellToolbar.register_preset('Slideshow',slideshow_preset, notebook, events);
console.log('Slideshow extension for metadata editing loaded.');
};
return {'register': register};
});

View File

@ -135,7 +135,7 @@ define([
notebook: this.notebook});
inner_cell.append(this.celltoolbar.element);
var input_area = $('<div/>').addClass('input_area');
this.code_mirror = CodeMirror(input_area.get(0), this.cm_config);
this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config);
$(this.code_mirror.getInputField()).attr("spellcheck", "false");
inner_cell.append(input_area);
input.append(prompt).append(inner_cell);

View File

@ -8,7 +8,6 @@
CodeMirror.requireMode('gfm', function(){
CodeMirror.requireMode('stex', function(){
console.log('defining custom mode...');
CodeMirror.defineMode("ipythongfm", function(config, parserConfig) {
var gfm_mode = CodeMirror.getMode(config, "gfm");

View File

@ -158,6 +158,7 @@ define([
.addClass('form-control select-xs')
.append($('<option/>').attr('value', '').text('None'));
this.element.append(label).append(select);
var that = this;
select.change(function() {
var val = $(this).val();
if (val ==='') {
@ -165,7 +166,7 @@ define([
delete that.notebook.metadata.celltoolbar;
} else {
celltoolbar.CellToolbar.global_show();
celltoolbar.CellToolbar.activate_preset(val);
celltoolbar.CellToolbar.activate_preset(val, that.events);
that.notebook.metadata.celltoolbar = val;
}
});

View File

@ -14,6 +14,9 @@ define([
'notebook/js/mathjaxutils',
'base/js/keyboard',
'notebook/js/tooltip',
'notebook/js/celltoolbarpresets/default',
'notebook/js/celltoolbarpresets/rawcell',
'notebook/js/celltoolbarpresets/slideshow',
], function (
IPython,
$,
@ -26,7 +29,10 @@ define([
marked,
mathjaxutils,
keyboard,
tooltip
tooltip,
default_celltoolbar,
rawcell_celltoolbar,
slideshow_celltoolbar
) {
var Notebook = function (selector, options) {
@ -115,6 +121,11 @@ define([
this.save_notebook = function() { // don't allow save until notebook_loaded
this.save_notebook_error(null, null, "Load failed, save is disabled");
};
// Trigger cell toolbar registration.
default_celltoolbar.register(this, options.events);
rawcell_celltoolbar.register(this, options.events);
slideshow_celltoolbar.register(this, options.events);
};
/**
@ -2201,7 +2212,7 @@ define([
// load toolbar state
if (this.metadata.celltoolbar) {
celltoolbar.CellToolbar.global_show();
celltoolbar.CellToolbar.activate_preset(this.metadata.celltoolbar);
celltoolbar.CellToolbar.activate_preset(this.metadata.celltoolbar, this.events);
} else {
celltoolbar.CellToolbar.global_hide();
}