Fix for #210: selected sidebar group is collapsable

Author: mikewesthad

scripts/createWebBook.py

@@ -329,7 +329,10 @@ def returnChapterByCommonName( commonName ):
 		# Create a chapter group LI
 		groupLi = Tag(soup, None, "li")
 		groupLi['class']="group"
-		groupLi.append( group['groupName'])
+		groupTitle = Tag(soup, None, 'div')
+		groupTitle['class'] = 'groupTitle'
+		groupTitle.string = group['groupName']
+		groupLi.append(groupTitle)
 		navbar.append(groupLi)
 
 		# Run through the chapters of the group

static/javascript/navbar.js

@@ -1,10 +1,27 @@
 $(document).ready(function() {
 
+  // Handle selecting & unselecting chapter groups in the sidebar
+  var $selectedGroup = $('.group.selected');
   $(".group").click(function() {
-    $('.group.selected').removeClass('selected');
+    // Pull out the element that to which the click event is bound (li.group)
+    var newSelected = event.currentTarget;
 
-    $(this).addClass('selected');
-  })
+    if ($selectedGroup.length && ($selectedGroup.get(0) === newSelected)) {
+      // Clicked on already selected group, but only unselect the current group
+      // if the click happened over the title div. This helps prevents
+      // accidentally closing the group, e.g. if click happened in-between
+      // chapter links.
+      if ($(event.target).hasClass('groupTitle')) {
+        $selectedGroup.removeClass('selected');
+        $selectedGroup = $(); // Empty selection
+      }
+    } else {
+      // Clicked on a new group
+      $selectedGroup.removeClass('selected');
+      $selectedGroup = $(newSelected);
+      $selectedGroup.addClass('selected');
+    }
+  });
 
 
   // Cache selectors

static/style/_navbar.scss

@@ -34,6 +34,10 @@ nav {
       overflow: hidden;
       max-height:42px;
       transition: all 0.3s;
+      
+      .groupTitle {        
+        cursor: pointer;
+      }
 
       &.selected {
         background-color: rgba(255,255,255,1);