Merge pull request #196 from martinRenou/toolbar_collapsed_state

Add collapsed state to the toolbar

Author: martinRenou

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)
 

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() {