{
 "metadata": {
  "name": "",
  "signature": "sha256:3ac8512f1eab399da758b33b61abb8225f8d6b129cf9456e316cb5e44f2bbb2c"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": [],
     "source": [
      "> This is one of the 100 recipes of the [IPython Cookbook](http://ipython-books.github.io/), the definitive guide to high-performance scientific computing and data science in Python.\n"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "# 3.3. Adding custom controls in the notebook toolbar"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The CSS and Javascript of the HTML notebook can be customized through the files in `~/.ipython/profile_default/static/custom`, where `~` is your `HOME` directory, and `default` is your IPython profile. In this short recipe, we will use this feature to add a new button in the notebook toolbar on top of every notebook. Specifically, this button renumbers linearly all code cells."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "1. First, we are going to inject Javascript code directly in the notebook. This is useful for testing purposes, or if you don't want your changes to be permanent. The Javascript code will be loaded with that notebook only. To do this, we can just use the `%%javascript` cell magic."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "// This function allows us to add buttons \n",
      "// to the notebook toolbar.\n",
      "IPython.toolbar.add_buttons_group([\n",
      "{\n",
      "    // The button's label.\n",
      "    'label': 'renumber all code cells',\n",
      "    \n",
      "    // The button's icon.\n",
      "    // See a list of Font-Awesome icons here:\n",
      "    // http://fortawesome.github.io/Font-Awesome/icons/\n",
      "    'icon': 'icon-list-ol',\n",
      "    \n",
      "    // The callback function.\n",
      "    'callback': function () {\n",
      "        \n",
      "        // We retrieve the lists of all cells.\n",
      "        var cells = IPython.notebook.get_cells();\n",
      "        \n",
      "        // We only keep the code cells.\n",
      "        cells = cells.filter(function(c)\n",
      "            {\n",
      "                return c instanceof IPython.CodeCell; \n",
      "            })\n",
      "        \n",
      "        // We set the input prompt of all code cells.\n",
      "        for (var i = 0; i < cells.length; i++) {\n",
      "            cells[i].set_input_prompt(i + 1);\n",
      "        }\n",
      "    }\n",
      "}]);"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Running this code cell adds a button in the toolbar. Clicking on this button automatically updates the prompt numbers of all code cells."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "2. To make these changes permanent, i.e. to add this button on every notebook open within the current profile, we can open the file `~/.ipython/profile_default/static/custom/custom.js` and add the following code:"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "```javascript\n",
      "$([IPython.events]).on('app_initialized.NotebookApp',\n",
      "                       function(){\n",
      "\n",
      "    // Copy of the Javascript code above (step 1).\n",
      "    IPython.toolbar.add_buttons_group([\n",
      "    {\n",
      "        // The button's label.\n",
      "        'label': 'renumber all code cells',\n",
      "\n",
      "        // The button's icon.\n",
      "        // See a list of Font-Awesome icons here:\n",
      "        // http://fortawesome.github.io/Font-Awesome/icons/\n",
      "        'icon': 'icon-list-ol',\n",
      "\n",
      "        // The callback function.\n",
      "        'callback': function () {\n",
      "\n",
      "            // We retrieve the lists of all cells.\n",
      "            var cells = IPython.notebook.get_cells();\n",
      "\n",
      "            // We only keep the code cells.\n",
      "            cells = cells.filter(function(c)\n",
      "                {\n",
      "                    return c instanceof IPython.CodeCell; \n",
      "                })\n",
      "\n",
      "            // We set the input prompt of all code cells.\n",
      "            for (var i = 0; i < cells.length; i++) {\n",
      "                cells[i].set_input_prompt(i + 1);\n",
      "            }\n",
      "        }\n",
      "    }]);\n",
      "});\n",
      "```"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "The code put here will be automatically loaded as soon as a notebook page is loaded."
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "> You'll find all the explanations, figures, references, and much more in the book (to be released later this summer).\n",
      "\n",
      "> [IPython Cookbook](http://ipython-books.github.io/), by [Cyrille Rossant](http://cyrille.rossant.net), Packt Publishing, 2014 (500 pages)."
     ]
    }
   ],
   "metadata": {}
  }
 ]
}