Simplify some things I found confusing

- class the #sidebar itself as collapsed not the #id-container
- the #sidebar is the selection, so just use `selection` instead of
  `var sidebar = d3_select('#sidebar');`
  (which conflicts with the closure `sidebar()` function)
- have separate functions `expand` `collapse` `toggle` rather than a
  `toggle(shouldCollapse)`

css/80_app.css

@@ -755,20 +755,20 @@ a.hide-toggle {
     width: 6px;
     cursor: col-resize;
 }
-.sidebar-collapsed #sidebar-resizer {
-    /* make target wider to avoid the user accidentally resizing window */
-    width: 10px;
-    right: -10px;
-}
 [dir='rtl'] #sidebar-resizer {
     right: auto;
     left: -6px;
 }
-.sidebar-collapsed[dir='rtl'] #sidebar-resizer {
+
+#sidebar.collapsed #sidebar-resizer {
+    /* make target wider to avoid the user accidentally resizing window */
+    width: 10px;
+    right: -10px;
+}
+[dir='rtl'] #sidebar.collapsed #sidebar-resizer {
     left: -10px;
 }
 
-
 .sidebar-component {
     position: absolute;
     top: 0;

modules/ui/init.js

@@ -105,7 +105,7 @@ export function uiInit(context) {
             .append('button')
             .attr('class', 'sidebar-toggle')
             .attr('tabindex', -1)
-            .on('click', ui.sidebar.toggleCollapse)
+            .on('click', ui.sidebar.toggle)
             .call(tooltip()
                 .placement('bottom')
                 .html(true)
@@ -295,7 +295,7 @@ export function uiInit(context) {
         var pa = 80;  // pan amount
         var keybinding = d3_keybinding('main')
             .on('⌫', function() { d3_event.preventDefault(); })
-            .on(t('sidebar.key'), ui.sidebar.toggleCollapse)
+            .on(t('sidebar.key'), ui.sidebar.toggle)
             .on('←', pan([pa, 0]))
             .on('↑', pan([0, pa]))
             .on('→', pan([-pa, 0]))

modules/ui/sidebar.js

@@ -34,6 +34,7 @@ export function uiSidebar(context) {
 
 
     function sidebar(selection) {
+        var container = d3_select('#id-container');
         var minWidth = 280;
         var sidebarWidth;
         var containerWidth;
@@ -44,11 +45,11 @@ export function uiSidebar(context) {
             .attr('id', 'sidebar-resizer');
 
         // Set the initial width constraints
-        selection.style('min-width', minWidth + 'px');
-        selection.style('max-width', '400px');
-        selection.style('width', '33.3333%');
+        selection
+            .style('min-width', minWidth + 'px')
+            .style('max-width', '400px')
+            .style('width', '33.3333%');
 
-        var container = d3_select('#id-container');
         resizer.call(d3_drag()
             .container(container.node())
             .on('start', function() {
@@ -69,10 +70,10 @@ export function uiSidebar(context) {
                 var x = d3_event.x - dragOffset;
                 sidebarWidth = isRTL ? containerWidth - x : x;
 
-                var isCollapsed = container.classed('sidebar-collapsed');
+                var isCollapsed = selection.classed('collapsed');
                 var shouldCollapse = sidebarWidth < minWidth;
 
-                container.classed('sidebar-collapsed', shouldCollapse);
+                selection.classed('collapsed', shouldCollapse);
 
                 if (shouldCollapse) {
                     if (!isCollapsed) {
@@ -167,7 +168,7 @@ export function uiSidebar(context) {
         sidebar.select = function(id, newFeature) {
             if (!_current && id) {
                 // uncollapse the sidebar to show the editor
-                sidebar.toggleCollapse(false);
+                sidebar.expand();
 
                 featureListWrap
                     .classed('inspector-hidden', true);
@@ -222,7 +223,21 @@ export function uiSidebar(context) {
         };
 
 
-        sidebar.toggleCollapse = function(shouldCollapse) {
+        sidebar.expand = function() {
+            if (selection.classed('collapsed')) {
+                sidebar.toggle();
+            }
+        };
+
+
+        sidebar.collapse = function() {
+            if (!selection.classed('collapsed')) {
+                sidebar.toggle();
+            }
+        };
+
+
+        sidebar.toggle = function() {
             var e = d3_event;
             if (e.sourceEvent) {
                 e.sourceEvent.preventDefault();
@@ -230,24 +245,14 @@ export function uiSidebar(context) {
                 e.preventDefault();
             }
 
-            var container = d3_select('#id-container');
-            var isCollapsing;
-            var isCollapsed = container.classed('sidebar-collapsed');
-
-            if (typeof shouldCollapse !== 'undefined') {
-                if (shouldCollapse === isCollapsed) return;
-                isCollapsing = shouldCollapse;
-            } else {
-                isCollapsing = !isCollapsed;
-            }
-
+            var isCollapsed = selection.classed('collapsed');
+            var isCollapsing = !isCollapsed;
             var xMarginProperty = textDirection === 'rtl' ? 'margin-right' : 'margin-left';
 
-            var sidebar = d3_select('#sidebar');
-            sidebarWidth = sidebar.node().getBoundingClientRect().width;
+            sidebarWidth = selection.node().getBoundingClientRect().width;
 
             // switch from % to px
-            sidebar.style('width', sidebarWidth + 'px');
+            selection.style('width', sidebarWidth + 'px');
 
             var startMargin, endMargin, lastMargin;
             if (isCollapsing) {
@@ -258,7 +263,7 @@ export function uiSidebar(context) {
                 endMargin = 0;
             }
 
-            sidebar.transition()
+            selection.transition()
                 .style(xMarginProperty, endMargin + 'px')
                 .tween('panner', function() {
                     var i = d3_interpolateNumber(startMargin, endMargin);
@@ -269,13 +274,13 @@ export function uiSidebar(context) {
                     };
                 })
                 .on('end', function() {
-                    container.classed('sidebar-collapsed', isCollapsing);
+                    selection.classed('collapsed', isCollapsing);
 
                     // switch back from px to %
                     if (!isCollapsing) {
                         var containerWidth = container.node().getBoundingClientRect().width;
                         var widthPct = (sidebarWidth / containerWidth) * 100;
-                        sidebar
+                        selection
                             .style(xMarginProperty, null)
                             .style('width', widthPct + '%');
                     }
@@ -283,7 +288,7 @@ export function uiSidebar(context) {
         };
 
         // toggle the sidebar collapse when double-clicking the resizer
-        resizer.on('dblclick', sidebar.toggleCollapse);
+        resizer.on('dblclick', sidebar.toggle);
     }
 
 
@@ -292,7 +297,9 @@ export function uiSidebar(context) {
     sidebar.select = function() {};
     sidebar.show = function() {};
     sidebar.hide = function() {};
-    sidebar.toggleCollapse = function() {};
+    sidebar.expand = function() {};
+    sidebar.collapse = function() {};
+    sidebar.toggle = function() {};
 
     return sidebar;
 }