Skip to content

Instantly share code, notes, and snippets.

@l-althueser

l-althueser/ToC.ipynb

Last active August 30, 2017 22:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save l-althueser/20a04d95d227f68ff317476db376af2c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save l-althueser/20a04d95d227f68ff317476db376af2c to your computer and use it in GitHub Desktop.
Download ZIP
Floating table of content in Jupyter
Display the source blob
Display the rendered blob
Raw
ToC.ipynb
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Floating table of content and hide input cells button\n",
"\n",
"Lutz Althüser, 27.08.2017 \n",
"**See this working example:** <a href=\"https://rawgit.com/l-althueser/20a04d95d227f68ff317476db376af2c/raw/5362b732877906ae1643989844a34e26473c5d21/ToC.html\">floating ToC</a>\n",
" \n",
"<h2 id=\"tocheading\">Table of Content</h2>\n",
"<div id=\"tocinline\"></div>"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"<script>\n",
"// Converts integer to roman numeral\n",
"function romanize(num) {\n",
" var lookup = {M:1000,CM:900,D:500,CD:400,C:100,XC:90,L:50,XL:40,X:10,IX:9,V:5,IV:4,I:1},\n",
" roman = '',\n",
" i;\n",
" for ( i in lookup ) {\n",
" while ( num >= lookup[i] ) {\n",
" roman += i;\n",
" num -= lookup[i];\n",
" }\n",
" }\n",
" return roman;\n",
"}\n",
"\n",
"//////////////////////////////////////////////////////////////////////////////////////////////////////////////\n",
"\n",
"// Builds a <ul> Table of Contents from all <headers> in DOM\n",
"function createTOC(toc_tag){\n",
" var toc = \"\";\n",
" var level = 0;\n",
" var maxlevel = 1 + 3;\n",
" var levels = {};\n",
" $('#'+toc_tag).html('');\n",
"\n",
" $(\":header\").each(function(i){\n",
" if (this.id=='tocheading'){return;}\n",
" if (this.tagName[1] >= maxlevel){return;}\n",
" \n",
" var titleText = this.innerHTML;\n",
" var openLevel = this.tagName[1];\n",
"\n",
" if (levels[openLevel]){\n",
" levels[openLevel] += 1;\n",
" } else{\n",
" levels[openLevel] = 1;\n",
" }\n",
"\n",
" if (openLevel > level) {\n",
" toc += (new Array(openLevel - level + 1)).join('<ul class=\"'+toc_tag+'\">');\n",
" } else if (openLevel < level) {\n",
" toc += (new Array(level - openLevel + 1)).join(\"</ul>\");\n",
" for (i=level;i>openLevel;i--){levels[i]=0;}\n",
" }\n",
"\n",
" level = parseInt(openLevel);\n",
"\n",
" if (this.id==''){this.id = this.innerHTML.replace(/ /g,\"-\")}\n",
" var anchor = this.id;\n",
"\n",
" toc += '<li><a href=\"#' + escape(anchor) + '\">'\n",
" + romanize(levels[openLevel].toString()) + '. ' + titleText\n",
" + '</a></li>';\n",
" \n",
" });\n",
" \n",
" if (level) {\n",
" toc += (new Array(level + 1)).join(\"</ul>\");\n",
" }\n",
" \n",
" $('#'+toc_tag).append(toc);\n",
"};\n",
"\n",
"//////////////////////////////////////////////////////////////////////////////////////////////////////////////\n",
"\n",
"// Executes the createTOC_inline function\n",
"setTimeout(function(){createTOC('tocinline');},1000);\n",
"setTimeout(function(){createTOC('tocinline');},5000);\n",
"setTimeout(function(){createTOC('tocinline');},15000);\n",
"\n",
"// Rebuild TOC_inline every 5 minutes\n",
"setInterval(function(){createTOC('tocinline');},300000);\n",
"\n",
"//////////////////////////////////////////////////////////////////////////////////////////////////////////////\n",
"\n",
"$('<div id=\"toc\"></div>').css({position: 'fixed', top: '160px', right: 20, background: \"rgba(255, 255, 255, 0.6)\"}).appendTo(document.body);\n",
"$(\"#toc\").css(\"z-index\", \"2000\");\n",
"\n",
"// Executes the createToc function\n",
"setTimeout(function(){createTOC('toc');},100);\n",
"setTimeout(function(){createTOC('toc');},5000);\n",
"setTimeout(function(){createTOC('toc');},15000);\n",
"\n",
"// Rebuild TOC every 5 minutes\n",
"setInterval(function(){createTOC('toc');},300000);\n",
"\n",
"//////////////////////////////////////////////////////////////////////////////////////////////////////////////\n",
"\n",
"function toc_toggle() {\n",
" if ($('#toc').is(':visible')){\n",
" $('#toc').hide('500');\n",
" $('#tocButton').val('Show table of content')\n",
" } else {\n",
" $('#toc').show('500');\n",
" $('#tocButton').val('Hide table of content')\n",
" }\n",
"} \n",
"\n",
"if (!($('#tocButton').length)) {\n",
" $('<form action=\"javascript:toc_toggle()\"><input type=\"submit\" id=\"tocButton\" value=\"Hide table of content\"></form>').css({position: 'fixed', top: '135px', right: 20, background: \"rgba(255, 255, 255, 0.6)\"}).appendTo(document.body);\n",
"} else {\n",
" $('#tocButton').val('Hide table of content')\n",
"}\n",
"\n",
"//////////////////////////////////////////////////////////////////////////////////////////////////////////////\n",
"\n",
"function code_toggle() {\n",
" if ($(\"div.input\").is(':visible')){\n",
" $(\"div.input\").hide('500');\n",
" $('#CodeButton').val('Show all Code')\n",
" $('#CodeButton_inline').val('Show all code in this notebook')\n",
" } else {\n",
" $(\"div.input\").show('500');\n",
" $('#CodeButton').val('Hide all Code')\n",
" $('#CodeButton_inline').val('Hide all code in this notebook')\n",
" }\n",
"} \n",
"\n",
"$( document ).ready(function(){ $('div.input').hide() });\n",
"\n",
"if (!($('#CodeButton').length)) {\n",
" $('<form action=\"javascript:code_toggle()\"><input type=\"submit\" id=\"CodeButton\" value=\"Show all code\"></form>').css({position: 'fixed', top: '110px', right: 20, background: \"rgba(255, 255, 255, 0.6)\"}).appendTo(document.body);\n",
"} else {\n",
" $('#CodeButton').val('Show all Code')\n",
"}\n",
"\n",
"$('<div id=\"attribution_footer\" style=\"float:right; color:#999; background:#fff;\"> </div>').css({position: 'fixed', bottom: '0px', right: 20}).appendTo(document.body);\n",
"$('#attribution_footer').html('Created by Lutz Althüser for the XENON collaboration.');\n",
"\n",
"</script>\n",
"\n",
"<form action=\"javascript:code_toggle()\"><input type=\"submit\" id=\"CodeButton_inline\" value=\"Show all code in this notebook\"></form>\n",
"\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"execution_count": 2,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"Init_HTML_additions(maxlevel=3, attribution='LA')"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"from IPython.display import HTML\n",
"\n",
"def Init_HTML_additions(maxlevel=3, attribution=''):\n",
" \"\"\"\n",
" Adds a floating code hider button and table of content to the top right of the notebook. Only the first apperance of equal headlines is linked. This can also be used to add a table of content somewhere in a markdown cell.\n",
"\n",
" To add a table of content in a markdown cell use the following code:\n",
" <h2 id=\"tocheading\">Table of Content</h2>\n",
" <div id=\"tocinline\"></div>\n",
" \n",
" Args:\n",
" maxlevel: Set the max level to which headlines are added. (default: maxlevel=3)\n",
" attribution: This will add a footer with you desired string. (default: attribution='')\n",
" \"\"\"\n",
" if attribution == 'LA': attribution = 'Created by Lutz Althüser for the XENON collaboration.'\n",
" return HTML('''<script>\n",
"// Converts integer to roman numeral\n",
"function romanize(num) {\n",
" var lookup = {M:1000,CM:900,D:500,CD:400,C:100,XC:90,L:50,XL:40,X:10,IX:9,V:5,IV:4,I:1},\n",
" roman = '',\n",
" i;\n",
" for ( i in lookup ) {\n",
" while ( num >= lookup[i] ) {\n",
" roman += i;\n",
" num -= lookup[i];\n",
" }\n",
" }\n",
" return roman;\n",
"}\n",
"\n",
"//////////////////////////////////////////////////////////////////////////////////////////////////////////////\n",
"\n",
"// Builds a <ul> Table of Contents from all <headers> in DOM\n",
"function createTOC(toc_tag){\n",
" var toc = \"\";\n",
" var level = 0;\n",
" var maxlevel = 1 + %s;\n",
" var levels = {};\n",
" $('#'+toc_tag).html('');\n",
"\n",
" $(\":header\").each(function(i){\n",
" if (this.id=='tocheading'){return;}\n",
" if (this.tagName[1] >= maxlevel){return;}\n",
" \n",
" var titleText = this.innerHTML;\n",
" var openLevel = this.tagName[1];\n",
"\n",
" // Wiki hacks\n",
" if (titleText.indexOf(\"User Tools\") !== -1){return;}\n",
" if (titleText.indexOf(\"Site Tools\") !== -1){return;}\n",
" if (titleText.indexOf(\"Page Tools\") !== -1){return;}\n",
" if (titleText.indexOf(\"XENON1TWiki\") !== -1){return;}\n",
" \n",
" if (levels[openLevel]){\n",
" levels[openLevel] += 1;\n",
" } else{\n",
" levels[openLevel] = 1;\n",
" }\n",
"\n",
" if (openLevel > level) {\n",
" toc += (new Array(openLevel - level + 1)).join('<ul class=\"'+toc_tag+'\">');\n",
" } else if (openLevel < level) {\n",
" toc += (new Array(level - openLevel + 1)).join(\"</ul>\");\n",
" for (i=level;i>openLevel;i--){levels[i]=0;}\n",
" }\n",
"\n",
" level = parseInt(openLevel);\n",
"\n",
" if (this.id==''){this.id = this.innerHTML.replace(/ /g,\"-\")}\n",
" var anchor = this.id;\n",
"\n",
" toc += '<li><a href=\"#' + escape(anchor) + '\">'\n",
" + romanize(levels[openLevel].toString()) + '. ' + titleText\n",
" + '</a></li>';\n",
" \n",
" });\n",
" \n",
" if (level) {\n",
" toc += (new Array(level + 1)).join(\"</ul>\");\n",
" }\n",
" \n",
" $('#'+toc_tag).append(toc);\n",
"};\n",
"\n",
"//////////////////////////////////////////////////////////////////////////////////////////////////////////////\n",
"\n",
"// Executes the createTOC_inline function\n",
"setTimeout(function(){createTOC('tocinline');},1000);\n",
"setTimeout(function(){createTOC('tocinline');},5000);\n",
"setTimeout(function(){createTOC('tocinline');},15000);\n",
"\n",
"// Rebuild TOC_inline every 5 minutes\n",
"setInterval(function(){createTOC('tocinline');},300000);\n",
"\n",
"//////////////////////////////////////////////////////////////////////////////////////////////////////////////\n",
"\n",
"$('<div id=\"toc\"></div>').css({position: 'fixed', top: '160px', right: 20, background: \"rgba(255, 255, 255, 0.6)\"}).appendTo(document.body);\n",
"$(\"#toc\").css(\"z-index\", \"2000\");\n",
"\n",
"// Executes the createToc function\n",
"setTimeout(function(){createTOC('toc');},100);\n",
"setTimeout(function(){createTOC('toc');},5000);\n",
"setTimeout(function(){createTOC('toc');},15000);\n",
"\n",
"// Rebuild TOC every 5 minutes\n",
"setInterval(function(){createTOC('toc');},300000);\n",
"\n",
"//////////////////////////////////////////////////////////////////////////////////////////////////////////////\n",
"\n",
"function toc_toggle() {\n",
" if ($('#toc').is(':visible')){\n",
" $('#toc').hide('500');\n",
" $('#tocButton').val('Show table of content')\n",
" } else {\n",
" $('#toc').show('500');\n",
" $('#tocButton').val('Hide table of content')\n",
" }\n",
"} \n",
"\n",
"if (!($('#tocButton').length)) {\n",
" $('<form action=\"javascript:toc_toggle()\"><input type=\"submit\" id=\"tocButton\" value=\"Hide table of content\"></form>').css({position: 'fixed', top: '135px', right: 20, background: \"rgba(255, 255, 255, 0.6)\"}).appendTo(document.body);\n",
"} else {\n",
" $('#tocButton').val('Hide table of content')\n",
"}\n",
"\n",
"//////////////////////////////////////////////////////////////////////////////////////////////////////////////\n",
"\n",
"function code_toggle() {\n",
" if ($(\"div.input\").is(':visible')){\n",
" $(\"div.input\").hide('500');\n",
" $('#CodeButton').val('Show all Code')\n",
" $('#CodeButton_inline').val('Show all code in this notebook')\n",
" } else {\n",
" $(\"div.input\").show('500');\n",
" $('#CodeButton').val('Hide all Code')\n",
" $('#CodeButton_inline').val('Hide all code in this notebook')\n",
" }\n",
"} \n",
"\n",
"$( document ).ready(function(){ $('div.input').hide() });\n",
"\n",
"if (!($('#CodeButton').length)) {\n",
" $('<form action=\"javascript:code_toggle()\"><input type=\"submit\" id=\"CodeButton\" value=\"Show all code\"></form>').css({position: 'fixed', top: '110px', right: 20, background: \"rgba(255, 255, 255, 0.6)\"}).appendTo(document.body);\n",
"} else {\n",
" $('#CodeButton').val('Show all Code')\n",
"}\n",
"\n",
"$('<div id=\"attribution_footer\" style=\"float:right; color:#999; background:#fff;\"> </div>').css({position: 'fixed', bottom: '0px', right: 20}).appendTo(document.body);\n",
"$('#attribution_footer').html('%s');\n",
"\n",
"</script>\n",
"\n",
"<form action=\"javascript:code_toggle()\"><input type=\"submit\" id=\"CodeButton_inline\" value=\"Show all code in this notebook\"></form>\n",
"\n",
"''' % (maxlevel, attribution))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## This is a second-level headline\n",
"### This is a third-level headline\n",
"## This is a second-level headline"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": []
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
}
],
"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.4.5"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment