Merge pull request #1124 from jcb91/t2_0

[toc2] configurable titles; dialog-alterable metadata settings

Author: jcb91

src/jupyter_contrib_nbextensions/nbextensions/toc2/README.md

@@ -4,10 +4,10 @@
 
 The toc2 extension enables to collect all running headers and display them in a floating window, as a sidebar or with a navigation menu. The extension is also draggable, resizable, collapsable, dockable and features automatic numerotation with unique links ids, and an optional toc cell. Sections of currently selected/edited or running cells are highlighted in the toc. Some minor diplay tweaks are also available (moving header tile/menus, widening cells); Finally, the toc can preserved when exporting to html.
 
-#### First demo: Floating toc window and SideBar, toc auto-update, section numbering
+### First demo: Floating toc window and SideBar, toc auto-update, section numbering
 ![](demo.gif)
 
-##### Second demo: Save as html with toc / Navigation menu
+### Second demo: Save as html with toc / Navigation menu
 ![](demo2.gif)
 
 ### Third demo: Notebook scrolling and Collapsing sections
@@ -33,23 +33,35 @@ The state of these two toggles is memorized and restored on reload.
 
 ![](image.png) 
 
+
 ## Configuration
-The initial configuration can be given using the IPython-contrib nbextensions facility. It includes:
 
-- Display Table of Contents as a sidebar (otherwise as a floating window; default: true) 
+The initial configuration can be set using the
+[jupyter_nbextensions_configurator](https://github.com/Jupyter-contrib/jupyter_nbextensions_configurator)
+facility, included with
+[jupyter_contrib_nbextnensions](https://github.com/ipython-contrib/jupyter_contrib_nbextensions).
+Configurable options include:
+
+- Display Table of Contents as a sidebar (otherwise as a floating window; default: true)
+- Title of the sidebar/window (default: `Contents`)
 - The maximum depth of headers to display on toc (with a default of 4)
 - The state of the toc cell (default: false, ie not present)
+- Title of the toc cell sidebar/window (default: `Table of Contents`)
 - Add a navigation menu (default: true)
-- Widening the display area to fit the browser window (may be useful with sidebar option; default: true)    
+- Widening the display area to fit the browser window (may be useful with sidebar option; default: true)
 - The numbering of headers (true by default)
 - Moving header title and menus on the left (default: true)
-- Marking toc item of first header displayed on viewport when scrolling the notebook (default: true)    
+- Marking toc item of first header displayed on viewport when scrolling the notebook (default: true)
 - 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 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). 
+Some config settings are stored in notebook metadata, so that they can be
+altered per-notebook, as well as setting the default in the configurator.
+The differents states and position of the floating window have reasonable
+defaults and can be modfied per notebook.
+
 
 #### Demo with dark theme
 ![](demo_dark.png) 
@@ -121,6 +133,12 @@ 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. 
-- @jcb91 August 2017. Use amd structure for toc2.js 
-- @jfbercher August 2017. Add a mark to the currently displayed section in the table of contents window as user scrolls the notebook, cf #944. 
+- @jcb91 with minor contributions by @jfbercher. August 2017. Make toc entries collapsible #1031 with optional synchronization with `collapsible_headings` + some small other tweaks.
+- @jcb91 August 2017. Use amd structure for toc2.js
+- @jfbercher August 2017. Add a mark to the currently displayed section in the table of contents window as user scrolls the notebook, cf #944.
+- @jcb91 October 2017,
+  + correct toc tree construction
+  + simplify toc cell processing
+  + constrain draggable toc to the body
+  + various bits of cleanup
+  + add settings dialog for per-notebook metadata-stored settings

src/jupyter_contrib_nbextensions/nbextensions/toc2/main.css

@@ -1,10 +1,10 @@
-/*extracted from https://gist.github.com/magican/5574556*/
+/*
 
+originally extracted from https://gist.github.com/magican/5574556
 
-/*
-Most colors definded here will be used on export, but can be overwritted in 
-the livenotebook by modyfying notebook.json or selecting a color in the 
-nbextension-configurator
+Most colors defined here are overridden by javascript which adds css based on
+values in the server config file notebook.json, which can be edited directly,
+or colors can be selected in the nbextensions_configurator
 */
 
 
@@ -55,7 +55,6 @@ padding-left: 20px;
 }
 
 .toc {
-  max-height: 500px;
   padding: 0px;
   overflow-y: auto;
   font-weight: normal;
@@ -64,38 +63,52 @@ padding-left: 20px;
   overflow-x: auto;
 }
 
+.text_cell .toc {
+  margin-top: 1em;
+}
+
 .toc ul.toc-item {
     list-style-type: none;
     padding: 0;
     margin:  0;
 }
 
-.float-wrapper {
+#toc-wrapper {
+  z-index: 90;
   position: fixed !important;
-  top: 120px;
-  max-width:600px;
-  right: 20px;
-  border: thin solid rgba(0, 0, 0, 0.38);
-  border-radius: 5px;
-  padding:10px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 10px;
+  border-style: solid;
+  border-width: thin;
   background-color: #fff;   /* default - alterable via nbextension-configurator */
+}
+
+#toc-wrapper .toc {
+  flex-grow: 1;
+}
+
+.float-wrapper {
+  border-color: rgba(0, 0, 0, 0.38);
+  border-radius: 5px;
   opacity: .8;
-  z-index: 100;
-  overflow: hidden;
 }
 
 .sidebar-wrapper {
-    height: 100%;
-    left: 5px;
-    padding: 10px;
-    position: fixed !important;
+  top: 0;
+  bottom: 0;
     width: 212px;
-    max-width: 28%;
-    background-color: #fff;   /* default - alterable via nbextension-configurator */
-    border-style: solid;
     border-color: #eeeeee;  /* default - alterable via nbextension-configurator */
-    opacity: .99;
-    overflow: hidden;
+}
+
+.sidebar-wrapper .ui-resizable-se {
+  display: none;
+}
+
+.sidebar-wrapper .ui-resizable-e {
+  position: absolute;
+  top: calc(50% - 8px);
 }
 
 #toc-wrapper.closed {
@@ -110,32 +123,28 @@ padding-left: 20px;
   font-size: 18px;
   font-weight: bold;
 }
-#toc-wrapper .hide-btn {
-  font-size: 14px;
-  font-family: monospace;
+
+.sidebar-wrapper .hide-btn {
+  display:none;
 }
 
-#toc-wrapper .reload-btn {
-  font-size: 14px;
-  font-family: monospace;
+#toc-wrapper .hide-btn:before {
+  content: "\f147";
 }
 
-#toc-wrapper .number_sections-btn {
+#toc-wrapper.closed .hide-btn:before {
+  content: "\f196";
+}
+
+#toc-header .fa {
   font-size: 14px;
-  font-family: monospace;
+  text-decoration: none;
 }
 
 /* on scroll style */
 .highlight_on_scroll {
     border-left: solid 4px blue;
 }
-/* don't waste so much screen space... */
-
-/*
- .toc .toc-item .toc-item {
-  padding-left: 1em;
-}
-*/
 
 .toc-item li { margin:0; padding:0; color:black }
 .toc-item li > span { display:block }
@@ -146,12 +155,8 @@ padding-left: 20px;
 .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;
-}
 
 #toc-wrapper .toc-item-num {
-    font-style: normal;
     font-family: Georgia, Times New Roman, Times, serif;
     color: black;  /* default - alterable via nbextension-configurator */
 }
@@ -163,6 +168,16 @@ and updated using the nbextension-configurator
 .toc-item-highlight-execute  {background-color: red}
 .toc-item-highlight-execute.toc-item-highlight-select   {background-color: Gold} */
 
+#toc-header .fa ,
 .toc-item .fa-fw:first-child {
   cursor: pointer;
 }
+
+#toc-header,
+.modal-header {
+  cursor: move;
+}
+
+.tocSkip {
+  display: none;
+}

src/jupyter_contrib_nbextensions/nbextensions/toc2/main.js

@@ -49,18 +49,16 @@ define([
         number_sections: true,
         sideBar: true,
         skip_h1_title: false,
+        title_cell: 'Table of Contents',
+        title_sidebar: 'Contents',
         toc_cell: false,
         toc_position: {},
-        toc_section_display: 'block',
+        toc_section_display: true,
         toc_window_display: false,
     };
     // 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.
@@ -116,7 +114,7 @@ define([
 // ----------------------------------------------------------------------
 
     function toggleToc() {
-        toggle_toc(cfg, st)
+        toggle_toc(cfg)
     }
 
     var toc_button = function() {
@@ -210,12 +208,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
             });