[#62,facets,ux][s]: add facets via column menus and tidy up facet viewer (hide support, plus do not show if no facets).

src/view-grid.js

@@ -71,6 +71,9 @@ my.DataGrid = Backbone.View.extend({
     e.preventDefault();
     var actions = {
       bulkEdit: function() { self.showTransformColumnDialog('bulkEdit', {name: self.state.currentColumn}) },
+      facet: function() { 
+        self.model.queryState.addFacet(self.state.currentColumn);
+      },
       transform: function() { self.showTransformDialog('transform') },
       sortAsc: function() { self.setColumnSort('asc') },
       sortDesc: function() { self.setColumnSort('desc') },
@@ -161,10 +164,11 @@ my.DataGrid = Backbone.View.extend({
               <div class="btn-group column-header-menu"> \
                 <a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
                 <ul class="dropdown-menu data-table-menu pull-right"> \
-                  <li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
+                  <li><a data-action="facet" href="JavaScript:void(0);">Facet on this Field</a></li> \
                   <li><a data-action="sortAsc" href="JavaScript:void(0);">Sort ascending</a></li> \
                   <li><a data-action="sortDesc" href="JavaScript:void(0);">Sort descending</a></li> \
                   <li><a data-action="hideColumn" href="JavaScript:void(0);">Hide this column</a></li> \
+                  <li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
                 </ul> \
               </div> \
               <span class="column-header-name">{{label}}</span> \

src/view.js

@@ -282,16 +282,11 @@ my.QueryEditor = Backbone.View.extend({
 my.FacetViewer = Backbone.View.extend({
   className: 'recline-facet-viewer well', 
   template: ' \
-    <a class="close" href="#"><i class="icon-chevron-up"></i></a> \
+    <a class="close js-hide" href="#">&times;</a> \
-    <div class="dropdown js-add-facet"> \
-      <a class="btn dropdown-toggle" data-toggle="dropdown" href=".js-add-facet">Add Facet On <i class="caret"></i></a> \
-      <ul class="dropdown-menu"> \
-        {{#fields}} \
-        <li><a href="#{{id}}">{{label}}</a></li> \
-        {{/fields}} \
-      </ul> \
-    </div> \
     <div class="facets row"> \
+      <div class="span1"> \
+        <h3>Facets</h3> \
+      </div> \
       {{#facets}} \
       <div class="facet-summary span2 dropdown" data-facet="{{id}}"> \
         <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-chevron-down"></i> {{id}} {{label}}</a> \
@@ -306,7 +301,7 @@ my.FacetViewer = Backbone.View.extend({
   ',
 
   events: {
-    'click .js-add-facet .dropdown-menu a': 'onAddFacet',
+    'click .js-hide': 'onHide'
   },
   initialize: function(model) {
     _.bindAll(this, 'render');
@@ -322,11 +317,16 @@ my.FacetViewer = Backbone.View.extend({
     };
     var templated = $.mustache(this.template, tmplData);
     this.el.html(templated);
+    // are there actually any facets to show?
+    if (this.model.facets.length > 0) {
+      this.el.show();
+    } else {
+      this.el.hide();
+    }
   },
-  onAddFacet: function(e) {
+  onHide: function(e) {
     e.preventDefault();
-    var fieldId = $(e.target).attr('href').slice(1);
+    this.el.hide();
-    this.model.queryState.addFacet(fieldId);
   }
 });