ipython/ipython — pull request #2127 by Carreau (2012-07-12 13:06:10+00:00)
Title: Ability to build toolbar in JS + slideshow demo.

Description:
--
This allow to *easily* create new toolbar/append buttons on existing one purely in JS.
This is done by passing dict of `icon , label , callback [,id] ` to a methods of toolbar.

Details:
--
I changed the current `ToolBar` implementation to use this, and named it `MainToolBar` which inherit of `IPython.ToolBar`. The only instance is now named `IPython.maintoolbar`.
`IPython.ToolBar` is more general and can be use as a template to create any toolbar with buttons.
I removed the `toolbar` content from the html template and left only the `

`

code example :
--
```js
maintoolbar.addButtonsGroup([
{
'label' : 'Insert Cell Above',
'icon' : 'ui-icon-arrowthickstop-1-n',
'callback': IPython.notebook.insert_cell_above
},
{
'label' : 'Insert Cell Below',
'icon' : 'ui-icon-arrowthickstop-1-s',
'callback': IPython.notebook.insert_cell_below
}
]);
```
Demo
--
I made a quick demo of what can be done by copy pasting [this js file (gist)](https://gist.github.com/3097817) into a MD cell:

Notice the slideshow icon on the right of `markdown` that is inserted if you uses the above script
![Imgur](http://i.imgur.com/SNdoL.png)
( CSS looks broken, but it's chrome dev, master have same issues)

And what it look like when clicked. One can get back to normal view by clicking the `stop` button or go to next/prev slide. One cell == one slide , and the notebook is still fully functional, cell can be edited and run live.
![Imgur](http://i.imgur.com/EC2K2.png)