Merge pull request #1031 from jcb91/ttoc

[toc2] make toc entries collapsible

Author: jfbercher

src/jupyter_contrib_nbextensions/nbextensions/collapsible_headings/collapsible_headings.yaml

@@ -90,3 +90,11 @@ Parameters:
   description: "By default, selecting a whole section also expands the section to reveal its last cell. Set this option to false to disable the expansion."
   input_type: checkbox
   default: true
+
+- name: collapsible_headings.collapse_to_match_toc
+  description: |
+    Collapse/uncollapse notebook sections when the ToC2 nbextension is used to
+    collapse/uncollapse sections in the table of contents. For the inverse
+    behaviour, see ToC2's configuration
+  input_type: checkbox
+  default: false

src/jupyter_contrib_nbextensions/nbextensions/collapsible_headings/main.js

@@ -41,7 +41,8 @@
 		show_section_brackets : false,
 		section_bracket_width : 10,
 		show_ellipsis : true,
-		select_reveals : true
+		select_reveals : true,
+		collapse_to_match_toc: false,
 	};
 
 	// ------------------------------------------------------------------------
@@ -50,6 +51,21 @@
 	// It is declared here to allow us to keep logic for live/nonlive functions
 	// together.
 	var Jupyter;
+	// similarly, in a live notebook, events is the Jupyter global events
+	// object, but in a non-live notebook, we must construct our own version
+	var events;
+	try {
+		events = require('base/js/events');
+	}
+	catch (err) {
+		// in non-live notebook, there's no events structure, so we make our own
+		if (window.events === undefined) {
+			var Events = function () {};
+			window.events = $([new Events()]);
+		}
+		events = window.events;
+	}
+
 	// global flag denoting whether we're in a live notebook or exported html.
 	// In a live notebook we operate on Cell instances, in exported html we
 	// operate on jQuery collections of '.cell' elements
@@ -486,7 +502,7 @@
 	 *
 	 * @param {Object} cell Cell instance or jQuery collection of '.cell' elements
 	 */
-	function toggle_heading (cell, set_collapsed) {
+	function toggle_heading (cell, set_collapsed, trigger_event) {
 		if (is_heading(cell)) {
 			if (set_collapsed === undefined) {
 				set_collapsed = !_is_collapsed(cell);
@@ -495,6 +511,9 @@
 			update_heading_cell_status(cell);
 			update_collapsed_headings(params.show_section_brackets ? undefined : cell);
 			console.log(log_prefix, set_collapsed ? 'collapsed' : 'expanded', 'cell', _find_cell_index(cell));
+			if (trigger_event !== false) {
+				events.trigger((set_collapsed ? '' : 'un') + 'collapse.CollapsibleHeading', {cell: cell});
+			}
 		}
 	}
 
@@ -796,31 +815,6 @@
 		Jupyter.notebook.edit_mode();
 	}
 
-	function toc2_callback (evt) {
-		// evt.target is what was clicked, not what the handler was attached to
-		var toc_link = $(evt.target).closest('a');
-		var href = toc_link.attr('href');
-		href = href.slice(href.indexOf('#') + 1); // remove #
-		// for toc2's cell-toc links, we use the data-toc-modified-id attr
-		var toc_mod_href = toc_link.attr('data-toc-modified-id');
-
-		// jquery doesn't cope with $(href) or $('a[href=' + href + ']')
-		// if href contains periods or other unusual characters
-		var $anchor = $(document.getElementById(toc_mod_href));
-		if ($anchor.length < 1) {
-			// we didn't find the toc-modified id, so use the regular id
-			$anchor = $(document.getElementById(href));
-		}
-		if ($anchor.length < 1) {
-			return;
-		}
-		var cell_index = $anchor.closest('.cell').index();
-
-		reveal_cell_by_index(cell_index);
-		// scroll link into view once animation is complete
-		setTimeout(function () { imitate_hash_click($anchor); }, 400);
-	}
-
 	function refresh_all_headings () {
 		var cells = _get_cells();
 		for (var ii=0; ii < cells.length; ii++) {
@@ -832,6 +826,9 @@
 	function set_collapsible_headings_options (options) {
 		// options may be undefined here, but it's still handled ok by $.extend
 		$.extend(true, params, options);
+		// bind/unbind toc-collapse handler
+		events[params.collapse_to_match_toc ? 'on' : 'off']('collapse.Toc uncollapse.Toc', callback_toc_collapse);
+		return params;
 	}
 
 	function add_buttons_and_shortcuts () {
@@ -893,6 +890,11 @@
 		}
 	}
 
+	var callback_toc_collapse = function (evt, data) {
+		// use trigger_event false to avoid re-triggering toc2
+		toggle_heading(data.cell, evt.type.indexOf('un') < 0, false);
+	}
+
 	/**
 	 *  Return a promise which resolves once event handlers have been bound
 	 *
@@ -997,10 +999,6 @@
 			})
 			.appendTo('head');
 
-		// register toc2 callback - see
-		// https://github.com/ipython-contrib/jupyter_contrib_nbextensions/issues/609
-		$(document).on('click', '.toc-item a', toc2_callback);
-
 		// ensure Jupyter module is defined before proceeding further
 		new Promise(function (resolve, reject) {
 			require(['base/js/namespace'], function (Jupyter_mod) {

src/jupyter_contrib_nbextensions/nbextensions/collapsible_headings/readme.md

@@ -40,6 +40,7 @@ the nbextensions config page:
   indicating hidden content (disabled by default)
 * A toolbar button to collapse the nearest heading to the curently selected
   cell (disabled by default)
+* Collapse/uncollapse sections when ToC2 sections are collapsed/uncollapsed
 * A toolbar button to collapse/uncollapse all headings (disabled by default)
 
 

src/jupyter_contrib_nbextensions/nbextensions/toc2/README.md

@@ -43,6 +43,7 @@ The initial configuration can be given using the IPython-contrib nbextensions fa
 - Skipping h1 headers, useful if you want to use h1 as unnumbered notebook title (default: false)
 - Customization of highlighting the title of currently selected/running sections.  
 - Customization of background, fonts, border and highlighting colors in the toc window and navigation menus (as third demo).
+- Collapse/uncollapse ToC2 sections when collapsible_headings is used to collapse/uncollapse notebook sections (default: false).
 
 The differents states and position of the floating window have reasonable defaults and can be modfied per notebook). 
 
@@ -116,3 +117,4 @@ This option requires the IPython kernel and is not present with other kernels.
      - Support customization of background, fonts, border and highlighting colors in the toc window and navigation menus with PR [#969](https://github.com/ipython-contrib/jupyter_contrib_nbextensions/pull/969)
 - @jfbercher, @louisabraham, @jcb91 July 2017. Add support for skipping h1
   headings, enabling their use as unnumbered notebook titles
+- @jcb91 with minor contributions by @jfbercher. August 2017. Make toc entries collapsible #1031 with optional synchronization with `collapsible_headings` + some small other tweaks. 

src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css

@@ -4,13 +4,18 @@
 /*background color for links when you mouse over it 
 This style is used on export, but can be overwritted in the livenotebook 
 by selecting a color in the nbextension-configurator*/
-#toc-level0 li > a:hover {  display: block; background-color: #DAA520} 
+
+
+
+#toc-wrapper li > span:hover {
+  background-color: #DAA520;
+}
 
 #toc-level0  a {
-  /*color: #333333;*/  /* now specified in js */ 
+  color: #333333;  /* default - color also loaded from notebook config */ 
   text-decoration: none;
 }
-#navigate_menu li a:hover {background-color: #f1f1f1}
+#navigate_menu li > span:hover {background-color: #f1f1f1}
 
 
 /* Move menus and tooolbar to the left, following @Kevin-McIsaac suggestion 
@@ -36,13 +41,13 @@ padding-left: 20px;
 }
 
 #navigate_menu li  {
-  padding-left: 2px;
+  padding-left: 0px;
   clear: both;
   list-style-type: none;
 }
 
-#navigate_menu-level0  {padding-left: 10px;}
-#navigate_menu-level0 ul  {padding-left: 10px;}
+#navigate_menu-level0  {padding-left: 0px;}
+#navigate_menu-level0 ul  {padding-left: 0px;}
 
 
 .toc {
@@ -65,7 +70,7 @@ padding-left: 20px;
     display: block;
   }
 
-#toc ul.toc-item {
+.toc ul.toc-item {
     list-style-type: none;
     padding: 0;
     margin:  0;
@@ -142,13 +147,21 @@ padding-left: 20px;
 
 
 /* don't waste so much screen space... */
-#toc-wrapper .toc-item{
-  padding-left: 20px;
-}
 
-#toc-wrapper .toc-item .toc-item{
-  padding-left: 10px;
+/*
+ .toc .toc-item .toc-item {
+  padding-left: 1em;
 }
+*/
+
+.toc-item li { margin:0; padding:0; color:black }
+.toc-item li > span { display:block }
+.toc-item li > span { padding-left:0em }
+.toc-item li li > span { padding-left:1em }
+.toc-item li li li > span { padding-left:2em }
+.toc-item li li li li > span { padding-left:3em }
+.toc-item li li li li li > span { padding-left:4em }
+.toc-item li li li li li li > span { padding-left:5em }
 
 .toc-item-num {
     font-style: normal;
@@ -167,11 +180,6 @@ and updated using the nbextension-configurator
 .toc-item-highlight-execute  {background-color: red} 
 .toc-item-highlight-execute.toc-item-highlight-select   {background-color: Gold} */
 
-.lev1 {margin-left: 80px}
-.lev2 {margin-left: 100px}
-.lev3 {margin-left: 120px}
-.lev4 {margin-left: 140px}
-.lev5 {margin-left: 160px}
-.lev6 {margin-left: 180px}
-.lev7 {margin-left: 200px}
-.lev8 {margin-left: 220px}
+.toc-item .fa-fw:first-child {
+  cursor: pointer;
+}

src/jupyter_contrib_nbextensions/nbextensions/toc2/main.js

@@ -33,7 +33,8 @@ define(["require", "jquery", "base/js/namespace",  'services/config',
                 'navigate_text': '#333333',
                 'navigate_num': '#000000',
               },
-              skip_h1_title: false,
+              collapse_to_match_collapsible_headings: false,
+        skip_h1_title: false,
 }
 
 //.....................global variables....
@@ -73,10 +74,11 @@ define(["require", "jquery", "base/js/namespace",  'services/config',
       try
          {cfg.colors = IPython.notebook.metadata.toc.colors = $.extend(true, cfg.colors, config.data.toc2.colors);  }
       catch(e) {}
-      // and moveMenuLeft, threshold, wideNotebook taken globally (if it exists, otherwise default)
+      // and moveMenuLeft, threshold, wideNotebook, collapse_to_match_collapsible_headings taken globally (if it exists, otherwise default)
       cfg.moveMenuLeft = IPython.notebook.metadata.toc.moveMenuLeft = initial_cfg.moveMenuLeft;
       cfg.threshold = IPython.notebook.metadata.toc.threshold = initial_cfg.threshold;
       cfg.widenNotebook = IPython.notebook.metadata.toc.widenNotebook = initial_cfg.widenNotebook;
+      cfg.collapse_to_match_collapsible_headings = IPython.notebook.metadata.toc.collapse_to_match_collapsible_headings = initial_cfg.collapse_to_match_collapsible_headings
       if (config.data.toc2) {
         if (typeof config.data.toc2.moveMenuLeft !== "undefined") {
             cfg.moveMenuLeft = IPython.notebook.metadata.toc.moveMenuLeft = config.data.toc2.moveMenuLeft; 
@@ -87,6 +89,9 @@ define(["require", "jquery", "base/js/namespace",  'services/config',
         if (typeof config.data.toc2.widenNotebook !== "undefined") {
             cfg.widenNotebook = IPython.notebook.metadata.toc.widenNotebook = config.data.toc2.widenNotebook; 
         }
+        if (typeof config.data.toc2.collapse_to_match_collapsible_headings !== "undefined") {
+            cfg.collapse_to_match_collapsible_headings = IPython.notebook.metadata.toc.collapse_to_match_collapsible_headings = config.data.toc2.collapse_to_match_collapsible_headings; 
+        }
       }
       // create highlights style section in document
       create_additional_css();
@@ -138,7 +143,7 @@ define(["require", "jquery", "base/js/namespace",  'services/config',
 
   function create_additional_css() {
       var sheet = document.createElement('style')
-      sheet.innerHTML = "#toc-level0 li > a:hover {  display: block; background-color: " + cfg.colors.hover_highlight + " }\n" +
+      sheet.innerHTML = "#toc-level0 li > span:hover { background-color: " + cfg.colors.hover_highlight + " }\n" +
           ".toc-item-highlight-select  {background-color: " + cfg.colors.selected_highlight + "}\n" +
           ".toc-item-highlight-execute  {background-color: " + cfg.colors.running_highlight + "}\n" +
           ".toc-item-highlight-execute.toc-item-highlight-select   {background-color: " + cfg.colors.selected_highlight + "}"       
@@ -168,7 +173,7 @@ define(["require", "jquery", "base/js/namespace",  'services/config',
         callbacks.shell.reply = function(msg) {
             if (msg.msg_type === 'execute_reply') {
                 setTimeout(function(){ 
-                       $(toc).find('.toc-item-highlight-execute').removeClass('toc-item-highlight-execute')
+                    $('.toc .toc-item-highlight-execute').removeClass('toc-item-highlight-execute');
               rehighlight_running_cells() // re-highlight running cells
                  }, 100);
                 var c = IPython.notebook.get_selected_cell();
@@ -210,6 +215,7 @@ define(["require", "jquery", "base/js/namespace",  'services/config',
       $([IPython.events]).on("kernel_ready.Kernel", function() {
               addSaveAsWithToc();
           })
+
           // add a save as HTML with toc included    
       addSaveAsWithToc();
       //