[toc2] rework minimize button - don't show in sidebar

Author: jcb91

src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css

@@ -115,6 +115,10 @@ padding-left: 20px;
   font-weight: bold;
 }
 
+.sidebar-wrapper .hide-btn {
+  display:none;
+}
+
 #toc-wrapper .hide-btn:before {
   content: "\f147";
 }
@@ -128,11 +132,6 @@ padding-left: 20px;
   text-decoration: none;
 }
 
-#toc-wrapper .number_sections-btn {
-  font-size: 14px;
-  font-family: monospace;
-}
-
 /* on scroll style */
 .highlight_on_scroll {
     border-left: solid 4px blue;

src/jupyter_contrib_nbextensions/nbextensions/toc2/main.js

@@ -59,10 +59,6 @@ define([
     // add per-notebook settings into global config object
     $.extend(true, cfg, metadata_settings);
 
-//.....................global variables....
-    var st={}
-    st.oldTocHeight = undefined 
-
     var read_config = function (cfg, callback) {
         IPython.notebook.config.loaded.then(function () {
       // config may be specified at system level or at document level.
@@ -118,7 +114,7 @@ define([
 // ----------------------------------------------------------------------
 
     function toggleToc() {
-        toggle_toc(cfg, st)
+        toggle_toc(cfg)
     }
 
     var toc_button = function() {
@@ -211,12 +207,12 @@ define([
     var toc_init = function() {
         // read configuration, then call toc
         cfg = read_config(cfg, function() {
-            table_of_contents(cfg, st);
+            table_of_contents(cfg);
         }); // called after config is stable
         // event: render toc for each markdown cell modification
         events.on("rendered.MarkdownCell",
             function(evt, data) {
-                table_of_contents(cfg, st); // recompute the toc
+                table_of_contents(cfg); // recompute the toc
                 rehighlight_running_cells() // re-highlight running cells
                 highlight_toc_item(evt, data); // and of course the one currently rendered
             });

src/jupyter_contrib_nbextensions/nbextensions/toc2/toc2.js

@@ -14,6 +14,7 @@
 
     // globally-used status variables:
     var rendering_toc_cell = false;
+    var oldTocSize = {height: '200px', width: '200px'};
 
     try {
         // this will work in a live notebook because nbextensions & custom.js
@@ -193,41 +194,41 @@
         }
     }
 
+    var makeUnmakeMinimized = function (cfg, animate) {
+        var open = cfg.sideBar || cfg.toc_section_display;
+        var new_css, wrap = $('#toc-wrapper');
+        var anim_opts = {duration: animate ? 'fast' : 0};
+        if (open) {
+            $('#toc').show();
+            new_css = cfg.sideBar ? {} : oldTocSize;
+        }
+        else {
+            oldTocSize = wrap.css(['height', 'width']);
+            new_css = {
+                height: wrap.outerHeight() - wrap.find('#toc').outerHeight(),
+            };
+            anim_opts.complete = function () {
+                $('#toc').hide();
+                $('#toc-wrapper').css('width', '');
+            };
+        }
+        wrap.toggleClass('closed', !open)
+            .animate(new_css, anim_opts)
+            .find('.hide-btn').attr('title', open ? 'Hide ToC' : 'Show ToC');
+        return open;
+    };
+
     var create_toc_div = function(cfg, st) {
         var toc_wrapper = $('<div id="toc-wrapper"/>')
+            .css('display', 'none')
             .append(
                 $('<div id="toc-header"/>')
                 .append('<span class="header"/>')
                 .append(
                     $('<i class="fa fa-fw hide-btn" title="Hide ToC">')
                     .on('click', function (evt) {
-                        $('#toc').slideToggle({
-                            'complete': function() {
-                                if (liveNotebook) {
-                                    IPython.notebook.metadata.toc['toc_section_display'] = $('#toc').css('display');
-                                    IPython.notebook.set_dirty();
-                                }
-                            }
-                        });
-                        $('#toc-wrapper').toggleClass('closed');
-                        if ($('#toc-wrapper').hasClass('closed')) {
-                            st.oldTocHeight = $('#toc-wrapper').css('height');
-                            $('#toc-wrapper').css({
-                                height: 40
-                            });
-                            $('#toc-wrapper .hide-btn')
-                                .attr('title', 'Show ToC');
-                        } else {
-                            $('#toc-wrapper').css({
-                                height: st.oldTocHeight
-                            });
-                            $('#toc').css({
-                                height: st.oldTocHeight
-                            });
-                            $('#toc-wrapper .hide-btn')
-                                .attr('title', 'Hide ToC');
-                        }
-                        return false;
+                        cfg.toc_section_display = setMd('toc_section_display', !cfg.toc_section_display);
+                        makeUnmakeMinimized(cfg, true);
                     })
                 ).append(
                     $('<i class="fa fa-fw fa-refresh" title="Reload ToC">')
@@ -334,6 +335,10 @@
             },
             start: function(event, ui) {
                 $(this).width($(this).width());
+                if (!cfg.sideBar) {
+                    cfg.toc_section_display = setMd('toc_section_display', true);
+                    makeUnmakeMinimized(cfg);
+                }
             },
             stop: function(event, ui) { // on save, store toc position
                 if (liveNotebook) {