[toc2, collapsible_headings] optional sync of collapsed sections

we pass new events, either through Jupyter's events object, or in a non-live notebook, through an ojbect at `window.events`, which we create if necessary.

src/jupyter_contrib_nbextensions/nbextensions/collapsible_headings/collapsible_headings.yaml

@@ -78,3 +78,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

@@ -33,7 +33,8 @@ define(['jquery', 'require'], function ($, require) {
 		show_section_brackets : false,
 		section_bracket_width : 10,
 		show_ellipsis : true,
-		select_reveals : true
+		select_reveals : true,
+		collapse_to_match_toc: false,
 	};
 
 	// ------------------------------------------------------------------------
@@ -42,6 +43,21 @@ define(['jquery', 'require'], function ($, require) {
 	// 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
@@ -473,7 +489,7 @@ define(['jquery', 'require'], function ($, require) {
 	 *
 	 * @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);
@@ -482,6 +498,9 @@ define(['jquery', 'require'], function ($, require) {
 			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});
+			}
 		}
 	}
 
@@ -759,6 +778,9 @@ define(['jquery', 'require'], function ($, require) {
 	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 () {
@@ -801,6 +823,11 @@ define(['jquery', 'require'], function ($, require) {
 		}
 	}
 
+	var callback_toc_collapse = function (evt, data) {
+		// use trigger_event false to avoid re-triggering toc2
+		toggle_heading(data.cell, evt.name.indexOf('un') < 0, false);
+	}
+
 	/**
 	 *  Return a promise which resolves once event handlers have been bound
 	 *

src/jupyter_contrib_nbextensions/nbextensions/collapsible_headings/readme.md

@@ -38,6 +38,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
 
 
 css

src/jupyter_contrib_nbextensions/nbextensions/toc2/README.md

@@ -31,6 +31,7 @@ The initial configuration can be given using the IPython-contrib nbextensions fa
 - Moving header title and menus on the left (default: true)
 - 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). 
 

src/jupyter_contrib_nbextensions/nbextensions/toc2/main.js

@@ -32,7 +32,8 @@ define(["require", "jquery", "base/js/namespace",  'services/config',
                 'sidebar_border': '#EEEEEE',
                 'navigate_text': '#333333',
                 'navigate_num': '#000000',
-              }
+              },
+        collapse_to_match_collapsible_headings: false,
 }
 
 //.....................global variables....
@@ -209,6 +210,9 @@ define(["require", "jquery", "base/js/namespace",  'services/config',
       $([IPython.events]).on("kernel_ready.Kernel", function() {
               addSaveAsWithToc();
           })
+
+      toc2_collapsible_headings_integration(cfg, st);
+
           // add a save as HTML with toc included    
       addSaveAsWithToc();
       // 

src/jupyter_contrib_nbextensions/nbextensions/toc2/toc2.js

@@ -2,6 +2,19 @@
 
 //......... utilitary functions............
 
+var events;
+if (liveNotebook) {
+    events = require('base/js/events');
+}
+else {
+    // in non-live notebook, there's no event structure, so we make our own
+    if (window.events === undefined) {
+        var Events = function () {};
+        window.events = $([new Events()]);
+    }
+    events = window.events;
+}
+
 var liveNotebook = !(typeof IPython == "undefined")
 
 function incr_lbl(ary, h_idx) { //increment heading label  w/ h_idx (zero based)
@@ -526,10 +539,22 @@ var table_of_contents = function (cfg,st) {
             return $(elt).attr('data-toc-modified-id') === trg_id;
         });
         var show = clicked_i.hasClass('fa-caret-right');
+        collapse_by_id(trg_id, show);
+    };
+
+    var collapse_by_id = function (trg_id, show, trigger_event) {
+        var anchors = $('.toc .toc-item > li > a').filter(function (idx, elt) {
+            return $(elt).attr('data-toc-modified-id') === trg_id;
+        });
         anchors.siblings('i')
             .toggleClass('fa-caret-right', !show)
             .toggleClass('fa-caret-down', show);
         anchors.siblings('ul')[show ? 'slideDown' : 'slideUp']('fast');
+        if (trigger_event !== false) {
+            // fire event for collapsible_heading to catch
+            var cell = $(document.getElementById(trg_id)).closest('.cell').data('cell');
+            events.trigger((show ? 'un' : '') + 'collapse.Toc', {cell: cell});
+        }
     };
 
     var depth = 1; //var depth = ol_depth(ol);
@@ -650,3 +675,16 @@ var table_of_contents = function (cfg,st) {
     });
 
   };
+
+    var toc2_collapsible_headings_integration = function (cfg, st) {
+        if (cfg.collapse_to_match_collapsible_headings) {
+            events.on('collapse.CollapsibleHeading uncollapse.CollapsibleHeading', function (evt, data) {
+                var trg_id = data.cell.element.find(':header').filter(function (idx, elt) {
+                    return Boolean($(elt).attr('data-toc-modified-id'));
+                }).attr('data-toc-modified-id');
+                var show = evt.name.indexOf('un') >= 0;
+                // set trigger_event false to avoid re-triggering ch
+                collapse_by_id(trg_id, show, false);
+            });
+        }
+    };

src/jupyter_contrib_nbextensions/nbextensions/toc2/toc2.yaml

@@ -40,6 +40,15 @@ Parameters:
   description: Move notebook's title and menu on the left instead of being centered -- This provides a better look when the toc/sidebar is present
   input_type: checkbox
   default: true
+
+- name: toc2.collapse_to_match_collapsible_headings
+  input_type: checkbox
+  default: false
+  description: |
+    Collapse/uncollapse ToC sections when the collapsible_headings nbextension
+    is used to collapse/uncollapse sections in the notebook. For the inverse
+    behaviour, see collapsible_headings' configuration
+
 - name: toc2.colors.hover_highlight
   input_type: color
   description: Hover color in toc