Navigation works properly

Author: Tom Clark

_config.yml

@@ -1,2 +1,4 @@
 pygments:    true
 markdown:    kramdown
+
+tracking_id: UA-30727234-1

javascripts/sidebar.js

@@ -1,43 +1,95 @@
-var tutorials;
-var sidebar;
-var sidebar_counts;
+var tutorials, visible, visible_counts, hidden, dict, filters = [];
 
-$(function(){
+$(function() {
   // Grab all tutorials
   tutorials = $("section.tutorial");
 
-  // Generate the sidebar
-  sidebar = _.chain(tutorials)
-    .map(function(tutorial) {
-      return $(tutorial).data().facets;
-    })
+  // Mark all tutorials as visible
+  tutorials.show();
+
+  dict = _.chain(tutorials)
+    .reduce(function(lookup, tutorial) {
+      _($(tutorial).data().facets).each(function(val, key) {
+        if(!_(lookup).has(key)) { lookup[key] = {}; }
+        if(!_(lookup[key]).has(val)) { lookup[key][val] = []; }
+        lookup[key][val].push(tutorial);
+      });
+      return lookup;
+    }, {})
+    .value();
+
+  // Draw the sidebar
+  redraw();
+
+  // Hide tutorials if the user clicks on a facet
+  $("nav li").live("click", function(e) {
+    target = $(this).data();
+    existing_filter = _(filters).find(function(filter) {
+      return filter.name === target.name && filter.value === target.value;
+    });
+    if(existing_filter) {
+      console.log("Removing filter: " + existing_filter.name);
+      filters = _(filters).without(existing_filter);
+    } else {
+      console.log("Applying filter: " + target.name);
+      filters = _(filters).reject(function(filter) { return filter.name === target.name; });
+      filters.push(target);
+    }
+    redraw();
+  });
+});
+
+function redraw() {
+  update_visibility();
+  update_sidebar();
+  var template = $("#sidebar_template").text();
+  var list = _.template(template);
+  $("#sidebar").html(list);
+};
+
+function update_visibility() {
+  // Grab all the tutorials for each facet into an array
+  console.log("Calculating all ...")
+  all = _.chain(filters).map(function(filter) {
+    return dict[filter.name][filter.value];
+  }).flatten().value();
+
+  // Only keep the tutorials that are visible
+  console.log("Calculating keep ...")
+  keep = _(tutorials).select(function(tutorial) {
+    return all.length - _(all).without(tutorial).length === filters.length
+  });
+
+  // Make DOM elements visible or not
+  $(keep).show();
+  $(_(tutorials).difference(keep)).hide();
+};
+
+function update_sidebar() {
+  visible = _.chain($("section.tutorial:visible"))
+    // Collect all the facets
+    .map(function(tutorial) { return $(tutorial).data().facets; })
+    // and combine all facets into a nested hash
     .reduce(function(counts, facets) {
+      // by iterating over each pair and aggregating the counts of each
       _(facets).each(function(val, key) {
-        if(!_(counts).has(key)) {
-          counts[key] = {};
-        }
-        if(!_(counts[key]).has(val)) {
-          counts[key][val] = 0;
-        }
+        // Initialize the names
+        if(!_(counts).has(key)) { counts[key] = {}; }
+        // and the values/counts
+        if(!_(counts[key]).has(val)) { counts[key][val] = 0; }
+        // then increment the counts
         counts[key][val] += 1;
       });
       return counts;
+    // This is where we're storing the new data
     }, {})
+    // Get the final counts
     .value();
 
   // Generate counts for the sidebar
-  counts = {};
-  _(sidebar).each(function(val, key) {
+  var counts = {};
+  _(visible).each(function(val, key) {
     counts[key] = _(val).keys().length;
   });
-  sidebar_counts = counts;
-
-  // Draw the sidebar
-  redraw();
-});
-
-function redraw() {
-  template = "<% _(sidebar).each(function(val, key) { %><h3><%= key %> (<%= sidebar_counts[key] %>)</h3><ul><% _(val).each(function(v, k) { %><li><%= k %> (<%= v %>)</li><% }) %></ul><% }) %>";
-  list = _.template(template);
-  $("#sidebar").append(list);
+  visible_counts = counts;
 };

pages/test.md

@@ -45,12 +45,26 @@ should show the following sidebar:
 
 This allows users to filter the document by those attributes which are relevant to them.
 
+If you clicked on the "Source (1)" `li` then you should see this:
+
+    Operating System (1)
+      Ubuntu (1)
+
+    Package Management (3)
+      Source (Selected)
+      Homebrew (1)
+      Macports (1)
+
+That is, "Source" goes to the top of the list and the other lists are filtered.
+
 <section class="tutorial" markdown="1" data-facets='{"Operating System": "OS X", "Package Management": "Homebrew"}'>
+<hr />
 This is the tutorial written for _OS X_ and _Homebrew_.
 It has data attributes on the preceeding `hr` tag.
 </section>
 
 <section class="tutorial" markdown="1" data-facets='{"Operating System": "OS X", "Package Management": "Macports"}'>
+<hr />
 This is the tutorial written for _OS X_ and _Source_.
 It has data attributes on a surrounding section tag (written in html).
 It uses kramdown's `markdown="1"` attribute to enable markdown processing within an html tag.
@@ -65,5 +79,6 @@ Yay!
 </section>
 
 <section class="tutorial" markdown="1" data-facets='{"Operating System": "Ubuntu", "Package Management": "Source"}'>
+<hr />
 This is the tutorial written for _Ubuntu_ and _Source_.
 </section>