From ccdc2aed2d985dc95e7fcf493977380e1bcf62be Mon Sep 17 00:00:00 2001
From: Rufus Pollock <rufus.pollock@okfn.org>
Date: Sun, 1 Apr 2012 18:55:07 +0100
Subject: [PATCH] [#62,facets/view][s]: start refactoring the facet viewer to
 something nicer.

* facet listing are bootstrap dropdowns and rename from FacetQueryEditor to FacetViewer to better reflect purpose.
---
 css/data-explorer.css |  6 +++++-
 src/view.js           | 25 ++++++++++---------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/css/data-explorer.css b/css/data-explorer.css
index a88f53cd..f0aa4dba 100644
--- a/css/data-explorer.css
+++ b/css/data-explorer.css
@@ -60,10 +60,14 @@
   clear: both;
 }
 
-.recline-query-facet-editor {
+.recline-facet-viewer {
   clear: both;
 }
 
+.recline-facet-viewer .facet-summary label {
+  display: inline;
+}
+
 /**********************************************************
   * Notifications
   *********************************************************/
diff --git a/src/view.js b/src/view.js
index db77661e..88011c21 100644
--- a/src/view.js
+++ b/src/view.js
@@ -168,7 +168,7 @@ my.DataExplorer = Backbone.View.extend({
       model: this.model.queryState
     });
     this.el.find('.header').append(queryEditor.el);
-    var queryFacetEditor = new my.FacetQueryEditor({
+    var queryFacetEditor = new my.FacetViewer({
       model: this.model
     });
     this.el.find('.header').append(queryFacetEditor.el);
@@ -279,9 +279,10 @@ my.QueryEditor = Backbone.View.extend({
   }
 });
 
-my.FacetQueryEditor = Backbone.View.extend({
-  className: 'recline-query-facet-editor', 
+my.FacetViewer = Backbone.View.extend({
+  className: 'recline-facet-viewer well', 
   template: ' \
+    <a class="close" href="#"><i class="icon-chevron-up"></i></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"> \
@@ -290,21 +291,22 @@ my.FacetQueryEditor = Backbone.View.extend({
         {{/fields}} \
       </ul> \
     </div> \
-    <div class="facets"> \
+    <div class="facets row"> \
       {{#facets}} \
-        <a class="btn js-facet-show-toggle" data-facet="{{id}}"><i class="icon-plus"></i> {{id}} {{label}}</a> \
-        <ul class="facet-items" data-facet="{{id}}" style="display: none;"> \
+      <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> \
+        <ul class="facet-items dropdown-menu"> \
         {{#terms}} \
-          <li>{{term}} ({{count}}) <input type="checkbox" class="facet-choice" data-facet="{{label}}" value="{{term}}" /></li> \
+          <li><input type="checkbox" class="facet-choice" value="{{term}}" name="{{term}}" /> <label for="{{term}}">{{term}} ({{count}})</label></li> \
         {{/terms}} \
         </ul> \
+      </div> \
       {{/facets}} \
     </div> \
   ',
 
   events: {
     'click .js-add-facet .dropdown-menu a': 'onAddFacet',
-    'click .js-facet-show-toggle': 'onFacetShowToggle'
   },
   initialize: function(model) {
     _.bindAll(this, 'render');
@@ -325,13 +327,6 @@ my.FacetQueryEditor = Backbone.View.extend({
     e.preventDefault();
     var fieldId = $(e.target).attr('href').slice(1);
     this.model.queryState.addFacet(fieldId);
-  },
-  onFacetShowToggle: function(e) {
-    e.preventDefault();
-    var $a = $(e.target);
-    var facetId = $a.attr('data-facet');
-    var $ul = this.el.find('.facet-items[data-facet="' + facetId + '"]');
-    $ul.toggle();
   }
 });