From 8ffea99405d8264f8ae5eb131795b4fbb0b4ba33 Mon Sep 17 00:00:00 2001
From: martinRenou <martin.renou@gmail.com>
Date: Mon, 2 Mar 2020 12:15:42 +0100
Subject: [PATCH] Add collapsed state to the toolbar

Signed-off-by: martinRenou <martin.renou@gmail.com>
---
 ipympl/backend_nbagg.py  |  1 +
 js/src/toolbar_widget.js | 13 ++++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/ipympl/backend_nbagg.py b/ipympl/backend_nbagg.py
index ad79ca6d..d3500399 100644
--- a/ipympl/backend_nbagg.py
+++ b/ipympl/backend_nbagg.py
@@ -96,6 +96,7 @@ class Toolbar(DOMWidget, NavigationToolbar2WebAgg):
     button_style = CaselessStrEnum(
         values=['primary', 'success', 'info', 'warning', 'danger', ''], default_value='',
         help="""Use a predefined styling for the button.""").tag(sync=True)
+    collapsed = Bool(True).tag(sync=True)
 
     _current_action = Enum(values=['pan', 'zoom', ''], default_value='').tag(sync=True)
 
diff --git a/js/src/toolbar_widget.js b/js/src/toolbar_widget.js
index 6df51ef9..9907e2ac 100644
--- a/js/src/toolbar_widget.js
+++ b/js/src/toolbar_widget.js
@@ -17,6 +17,7 @@ class ToolbarModel extends widgets.DOMWidgetModel {
             toolitems: [],
             orientation: 'vertical',
             button_style: '',
+            collapsed: true,
             _current_action: '',
         };
     }
@@ -42,7 +43,10 @@ class ToolbarView extends widgets.DOMWidgetView {
         this.toggle_button.setAttribute('href', '#');
         this.toggle_button.setAttribute('title', 'Toggle Interaction');
         this.toggle_button.style.outline = 'none';
-        this.toggle_button.addEventListener('click', this.toggle_interaction.bind(this));
+        this.toggle_button.addEventListener('click', () => {
+            this.model.set('collapsed', !this.model.get('collapsed'));
+            this.model.save_changes();
+        });
 
         const icon = document.createElement('i');
         icon.classList = 'center fa fa-bars';
@@ -141,15 +145,14 @@ class ToolbarView extends widgets.DOMWidgetView {
         }
     }
 
-    toggle_interaction() {
-        // Toggle the interactivity of the figure.
-        const visible = this.toolbar.style.display !== 'none';
-        this.toolbar.style.display = visible ? 'none' : '';
+    update_collapsed() {
+        this.toolbar.style.display = this.model.get('collapsed') ? '' : 'none';
     }
 
     model_events() {
         this.model.on('change:orientation', this.update_orientation.bind(this));
         this.model.on_some_change(['button_style', '_current_action'], this.set_buttons_style.bind(this));
+        this.model.on('change:collapsed', this.update_collapsed.bind(this));
     }
 
     update_orientation() {