{
 "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 `~/.jupyter/custom` directory, where `~` is your `HOME` directory, (if you are using IPython < 4.x, the location is `~/.ipython/profile_default/static/custom`, where `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",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "// This function allows us to add buttons \n",
    "// to the notebook toolbar.\n",
    "// If using IPython < 4.x, replace 'Jupyter' everywhere below\n",
    "// with 'IPython'\n",
    "Jupyter.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': 'fa-list-ol', // 'icon-list-ol' for older IPython\n",
    "    \n",
    "    // The callback function.\n",
    "    'callback': function () {\n",
    "        \n",
    "        // We retrieve the lists of all cells.\n",
    "        var cells = Jupyter.notebook.get_cells();\n",
    "        \n",
    "        // We only keep the code cells.\n",
    "        cells = cells.filter(function(c)\n",
    "            {\n",
    "                return c instanceof Jupyter.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",
    "}]);"
   ]
  },
  {
   "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, we can open (or create, if necesary) the file `~/.jupyter/custom/custom.js` and add the code below. For IPython before 3.x and older, use file `~/.ipython/profile_default/static/custom/custom.js` and replace all occurences of `Jupyter` in the code with `IPython`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "```javascript\n",
    "$([Jupyter.events]).on('app_initialized.NotebookApp',\n",
    "                       function(){\n",
    "\n",
    "    // Copy of the Javascript code above (step 1).\n",
    "    Jupyter.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': 'fa-list-ol', // 'icon-list-ol' for older IPython\n",
    "\n",
    "        // The callback function.\n",
    "        'callback': function () {\n",
    "\n",
    "            // We retrieve the lists of all cells.\n",
    "            var cells = Jupyter.notebook.get_cells();\n",
    "\n",
    "            // We only keep the code cells.\n",
    "            cells = cells.filter(function(c)\n",
    "                {\n",
    "                    return c instanceof Jupyter.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": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.5.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}