added output cell toggling

chrisjsewell · Jul 23, 2019 · 02d206f · 02d206f
1 parent c3cf912
commit 02d206f
Show file tree

Hide file tree

Showing 13 changed files with 170 additions and 34 deletions.
diff --git a/docs/source/code_cells.ipynb b/docs/source/code_cells.ipynb
@@ -479,7 +479,9 @@
             },
             "sphinx": {
                 "toggle_input": true,
-                "toggle_input_all": true
+                "toggle_input_all": true,
+                "toggle_output": true,
+                "toggle_output_all": true
             },
             "titlepage": {
                 "author": "Chris Sewell",

diff --git a/docs/source/releases.rst b/docs/source/releases.rst
@@ -13,17 +13,11 @@ Releases
 Version 0.10
 ------------
 
-v0.10.7
-~~~~~~~
-
-Added sphinx option for toggling all code cells;
-see :ref:`sphinx_ext_notebook_toggle_in` example.
-
-v0.10.6
-~~~~~~~
+v0.10.6 & v0.10.7
+~~~~~~~~~~~~~~~~~
 
-Added sphinx option for toggling code cells;
-see :ref:`sphinx_ext_notebook_toggle_in` example.
+Added sphinx option for toggling notebook input and output cells.
+For examples see :ref:`sphinx_ext_notebook_toggle_in` and :ref:`code_cells`.
 
 v0.10.5
 ~~~~~~~

diff --git a/docs/source/sphinx_ext_notebook.rst b/docs/source/sphinx_ext_notebook.rst
@@ -121,6 +121,7 @@ setup by adding to the conf.py:
     ipysphinx_input_prompt        "[{count}]:"                format of input prompts
     ipysphinx_output_prompt       "[{count}]:"                format of output prompts
     ipysphinx_input_toggle        False                       add a button at the right side of input cells, to toggle show/hide
+    ipysphinx_output_toggle       False                       add a button at the right side of output cells, to toggle show/hide
     ipysphinx_preconverters       {}                          a mapping of additional file extensions to preconversion functions
     ============================= =========================== ===================================================================
 
@@ -164,13 +165,15 @@ Basic output
 
 .. _sphinx_ext_notebook_toggle_in:
 
-Toggle input
-~~~~~~~~~~~~
+Toggle inputs/outputs
+~~~~~~~~~~~~~~~~~~~~~
 
 .. code-block:: rst
 
     .. nbinput-toggle-all:: NbInput Toggle All
 
+    .. nboutput-toggle-all:: NbOutput Toggle All
+
     .. nbinput:: python
         :add-toggle:
         :execution-count: 3
@@ -181,8 +184,17 @@ Toggle input
             j += i
         print(j)
 
+    .. nboutput::
+        :add-toggle:
+        :execution-count: 3
+
+        hallo
+        there
+
 .. nbinput-toggle-all:: NbInput Toggle All
 
+.. nboutput-toggle-all:: NbOutput Toggle All
+
 .. nbinput:: python
     :add-toggle:
     :execution-count: 3
@@ -193,6 +205,13 @@ Toggle input
         j += i
     print(j)
 
+.. nboutput::
+    :add-toggle:
+    :execution-count: 3
+
+    hallo
+    there
+
 Information and Warnings
 ~~~~~~~~~~~~~~~~~~~~~~~~
 

diff --git a/ipypublish/schema/doc_metadata.schema.json b/ipypublish/schema/doc_metadata.schema.json
@@ -270,6 +270,16 @@
                             "description": "add a toggle button at the top of the top of the document (using `:toggle-input-all:`), which will show/hide all nbinput cell's content",
                             "type": "boolean",
                             "default": false
+                        },
+                        "toggle_output": {
+                            "description": "add toggle buttons to the right of all nboutput cells, to hide/show their content",
+                            "type": "boolean",
+                            "default": false
+                        },
+                        "toggle_output_all": {
+                            "description": "add a toggle button at the top of the top of the document (using `:toggle-output-all:`), which will show/hide all nboutput cell's content",
+                            "type": "boolean",
+                            "default": false
                         }
                     }
                 }

diff --git a/ipypublish/sphinx/notebook/css/nb_cells.css b/ipypublish/sphinx/notebook/css/nb_cells.css
@@ -202,7 +202,8 @@ div.rendered_html tbody tr:hover {
   background: rgba(66, 165, 245, 0.2);
 }
 
-div.toggle-nbinput {
+div.toggle-nbinput,
+div.toggle-nboutput {
     cursor: pointer;
     min-width: 2ex;
     padding-top: 0.4em;
@@ -212,17 +213,25 @@ div.toggle-nbinput {
     margin-left: auto;
     margin-right: 0;
 }
-div.toggle-nbinput p {
+div.toggle-nbinput p,
+div.toggle-nboutput p {
     overflow: hidden;
 }
-div.toggle-nbinput:after {
+div.toggle-nbinput:after,
+div.toggle-nboutput:after,
+div.nbinput-toggle-all :after,
+div.nboutput-toggle-all :after {
     content: " ▼";
 }
-div.toggle-nbinput.open:after {
+div.toggle-nbinput.open:after,
+div.toggle-nboutput.open:after,
+div.nbinput-toggle-all.open :after,
+div.nboutput-toggle-all.open :after {
     content: " ▲";
 }
 
-div.nbinput-toggle-all {
+div.nbinput-toggle-all,
+div.nboutput-toggle-all {
     display: inline-block;
     cursor: pointer;
     min-width: 7ex;
@@ -231,16 +240,12 @@ div.nbinput-toggle-all {
     border: 1px solid #000;
     border-radius: 15px;
 }
-div.nbinput-toggle-all p {
+div.nbinput-toggle-all p,
+div.nboutput-toggle-all p {
     overflow: hidden;
     margin: 0 auto;
 }
-div.nbinput-toggle-all:hover{
+div.nbinput-toggle-all:hover,
+div.nboutput-toggle-all:hover{
     background: rgb(158, 210, 230);
 }
-div.nbinput-toggle-all :after {
-    content: " ▼";
-}
-div.nbinput-toggle-all.open :after {
-    content: " ▲";
-}
diff --git a/ipypublish/sphinx/notebook/directives.py b/ipypublish/sphinx/notebook/directives.py
@@ -38,7 +38,9 @@ class NbInfo(NbAdmonition):
 
 
 class NBInputToggle(rst.Directive):
-    """ a toggle button """
+    """ a toggle button for nbinput cells """
+    _class = 'nbinput-toggle-all'
+    _default_text = 'Toggle Input Cells'
 
     required_arguments = 0
     optional_arguments = 0
@@ -48,17 +50,23 @@ class NBInputToggle(rst.Directive):
     def run(self):
         """This is called by the reST parser."""
         node = nodes.container()
-        node['classes'].append('nbinput-toggle-all')
+        node['classes'].append(self._class)
         if self.content:
             self.state.nested_parse(self.content, self.content_offset, node)
         else:
-            text = self.arguments[0] if self.arguments and self.arguments[0] else 'Toggle Input Cells'
+            text = self.arguments[0] if self.arguments and self.arguments[0] else self._default_text
             paragraph = nodes.paragraph(text=text)
             node += paragraph
 
         return [node]
 
 
+class NBOutputToggle(NBInputToggle):
+    """ a toggle button for nboutput cells """
+    _class = 'nboutput-toggle-all'
+    _default_text = 'Toggle Output Cells'
+
+
 class NbInput(rst.Directive):
     """A notebook input cell with prompt and code area."""
 
@@ -94,6 +102,7 @@ class NbOutput(rst.Directive):
         'empty-lines-before': rst.directives.nonnegative_int,
         'empty-lines-after': rst.directives.nonnegative_int,
         'class': rst.directives.unchanged,
+        'add-toggle': rst.directives.flag
     }
     has_content = True
 
@@ -183,9 +192,15 @@ def _create_nbcell_nodes(directive):
             outer_node += codearea_node
 
     if isinstance(directive, NbInput) and (config.ipysphinx_input_toggle or 'add-toggle' in directive.options):
+        directive.state.document['ipysphinx_include_js'] = True
         outer_node += sphinx.addnodes.only(
             '', docutils.nodes.container(classes=['toggle-nbinput', 'empty']), expr='html')
 
+    if isinstance(directive, NbOutput) and (config.ipysphinx_output_toggle or 'add-toggle' in directive.options):
+        directive.state.document['ipysphinx_include_js'] = True
+        outer_node += sphinx.addnodes.only(
+            '', docutils.nodes.container(classes=['toggle-nboutput', 'empty']), expr='html')
+
     return [outer_node]
 
 

diff --git a/ipypublish/sphinx/notebook/extension.py b/ipypublish/sphinx/notebook/extension.py
@@ -7,7 +7,7 @@
 from ipypublish.sphinx.utils import import_sphinx
 
 from ipypublish.sphinx.notebook.directives import (NbInfo, NbInput, NbOutput, NbWarning, AdmonitionNode, NBInputToggle,
-                                                   CodeAreaNode, FancyOutputNode)
+                                                   NBOutputToggle, CodeAreaNode, FancyOutputNode)
 from ipypublish.sphinx.notebook.transforms import (CreateDomainObjectLabels, CreateSectionLabels, RewriteLocalLinks)
 from ipypublish.sphinx.notebook.parser import NBParser
 
@@ -76,8 +76,9 @@ def add_transform(transform, post=False):
     app.add_config_value('ipysphinx_input_prompt', '[{count}]:', rebuild='env')
     app.add_config_value('ipysphinx_output_prompt', '[{count}]:', rebuild='env')
 
-    # config for input cell toggling
+    # config for cell toggling
     app.add_config_value('ipysphinx_input_toggle', False, rebuild='env')
+    app.add_config_value('ipysphinx_output_toggle', False, rebuild='env')
 
     # config for html css
     app.add_config_value('ipysphinx_responsive_width', '540px', rebuild='html')
@@ -104,6 +105,7 @@ def add_transform(transform, post=False):
     app.add_directive('nbinfo', NbInfo)
     app.add_directive('nbwarning', NbWarning)
     app.add_directive('nbinput-toggle-all', NBInputToggle)
+    app.add_directive('nboutput-toggle-all', NBOutputToggle)
 
     # add docutils nodes and visit/depart wraps
     app.add_node(
@@ -289,6 +291,8 @@ def copy_javascript(name):
 
 def html_add_javascript(app, pagename, templatename, context, doctree):
     """Add JavaScript string to HTML pages that contain code cells."""
-    if doctree and doctree.get('ipysphinx_include_css'):
+    if doctree and doctree.get('ipysphinx_include_js'):
         code = copy_javascript('toggle_code')
         context['body'] = '\n<script>' + code + '</script>\n' + context['body']
+        code = copy_javascript('toggle_output')
+        context['body'] = '\n<script>' + code + '</script>\n' + context['body']
diff --git a/ipypublish/sphinx/notebook/js/toggle_output.js b/ipypublish/sphinx/notebook/js/toggle_output.js
@@ -0,0 +1,24 @@
+
+$(function () {
+
+    $(".output_area").show();
+    $(".toggle-nboutput").addClass("open");
+    $(".nboutput-toggle-all").addClass("open");
+
+    $(".toggle-nboutput").click(function () {
+        $(this).toggleClass("open");
+        $(this).prev(".output_area").toggle("400");
+    });
+
+    $(".nboutput-toggle-all").click(function () {
+        $(this).toggleClass("open");
+        if ($(this).hasClass("open")) {
+            $(".toggle-nboutput").addClass("open");
+            $(".output_area").show("400");
+        } else {
+            $(".toggle-nboutput").removeClass("open");
+            $(".output_area").hide("400");
+        }
+    });
+
+});
diff --git a/ipypublish/sphinx/tests/sourcedirs/notebook_cell_decor/conf.py b/ipypublish/sphinx/tests/sourcedirs/notebook_cell_decor/conf.py
@@ -5,3 +5,4 @@
 master_doc = 'contents'
 ipysphinx_show_prompts = True
 ipysphinx_input_toggle = True
+ipysphinx_output_toggle = True
diff --git a/ipypublish/sphinx/tests/sourcedirs/notebook_cell_decor/contents.rst b/ipypublish/sphinx/tests/sourcedirs/notebook_cell_decor/contents.rst
@@ -1,5 +1,7 @@
 .. nbinput-toggle-all:: NbInput Toggle All
 
+.. nboutput-toggle-all:: NbOutput Toggle All
+
 .. nbinput:: ipython3
     :execution-count: 3
     :no-output:

diff --git a/ipypublish/sphinx/tests/test_notebook/test_cell_decoration_v1.yml b/ipypublish/sphinx/tests/test_notebook/test_cell_decoration_v1.yml
@@ -35,6 +35,15 @@
                 - container
                 - docutils
                 - nbinput-toggle-all
+            - 1_tag: div
+              2_data:
+              - ''
+              - NbOutput Toggle All
+              3_attributes:
+                class:
+                - container
+                - docutils
+                - nboutput-toggle-all
             - 1_tag: div
               3_attributes:
                 class:
@@ -273,6 +282,13 @@
                       - 1_tag: td
                         2_data:
                         - '0.116'
+              - 1_tag: div
+                3_attributes:
+                  class:
+                  - container
+                  - docutils
+                  - empty
+                  - toggle-nboutput
             - 1_tag: div
               3_attributes:
                 class:
@@ -307,3 +323,10 @@
                     - This is some printed text,
                     - with a nicely formatted output.
                     - ''
+              - 1_tag: div
+                3_attributes:
+                  class:
+                  - container
+                  - docutils
+                  - empty
+                  - toggle-nboutput
diff --git a/ipypublish/sphinx/tests/test_notebook/test_cell_decoration_v2.yml b/ipypublish/sphinx/tests/test_notebook/test_cell_decoration_v2.yml
@@ -36,6 +36,16 @@
               - 1_tag: p
                 2_data:
                 - NbInput Toggle All
+            - 1_tag: div
+              3_attributes:
+                class:
+                - container
+                - docutils
+                - nboutput-toggle-all
+              4_children:
+              - 1_tag: p
+                2_data:
+                - NbOutput Toggle All
             - 1_tag: div
               3_attributes:
                 class:
@@ -300,6 +310,13 @@
                         - 1_tag: p
                           2_data:
                           - '0.116'
+              - 1_tag: div
+                3_attributes:
+                  class:
+                  - container
+                  - docutils
+                  - empty
+                  - toggle-nboutput
             - 1_tag: div
               3_attributes:
                 class:
@@ -334,3 +351,10 @@
                     - This is some printed text,
                     - with a nicely formatted output.
                     - ''
+              - 1_tag: div
+                3_attributes:
+                  class:
+                  - container
+                  - docutils
+                  - empty
+                  - toggle-nboutput