Added indicator for facet refreshing, and control for forcing facets to refresh.

Made facets drag-and-drop-able.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@168 7d457c2a-affb-35e4-300a-418c747d4874

src/main/webapp/scripts/project/browsing-engine.js

@@ -9,20 +9,20 @@ function BrowsingEngine(div, facetConfigs) {
             var facetConfig = facetConfigs[i];
             var type = facetConfig.c.type;
             
-            var div = $('<div></div>').addClass("facet-container").appendTo(this._div);
+            var elmt = this._createFacetContainer();
             var facet;
             switch (type) {
                 case "range":
-                    facet = RangeFacet.reconstruct(div, facetConfig);
+                    facet = RangeFacet.reconstruct(elmt, facetConfig);
                     break;
                 case "text":
-                    facet = TextSearchFacet.reconstruct(div, facetConfig);
+                    facet = TextSearchFacet.reconstruct(elmt, facetConfig);
                     break;
                 default:
-                    facet = ListFacet.reconstruct(div, facetConfig);
+                    facet = ListFacet.reconstruct(elmt, facetConfig);
             }
             
-            this._facets.push({ elmt: div, facet: facet });
+            this._facets.push({ elmt: elmt, facet: facet });
         }
         this.update();
     }
@@ -39,7 +39,37 @@ BrowsingEngine.prototype.getFacetUIStates = function() {
 
 BrowsingEngine.prototype._initializeUI = function() {
     var self = this;
-    var container = this._div.empty();
+    
+    this._div.html(
+        '<div class="browsing-panel-indicator" bind="indicator"><img src="images/small-spinner.gif" /> refreshing facets ...</div>' +
+        '<div class="browsing-panel-controls" bind="controls"><a href="javascript:{}" bind="refreshLink">refresh facets</a></div>' +
+        '<ul bind="facets" class="facets-container"></ul>'
+    );
+    this._elmts = DOM.bind(this._div);
+    this._elmts.facets.sortable({
+        handle: '.facet-title',
+        update: function(event, ui) {
+            self._updateFacetOrder();
+        }
+    });
+    this._elmts.facets.disableSelection();
+    
+    this._elmts.refreshLink.click(function() { self.update(); });
+};
+
+BrowsingEngine.prototype._updateFacetOrder = function() {
+    var elmts = this._elmts.facets.children();
+    var newFacets = [];
+    for (var e = 0; e < elmts.length; e++) {
+        var elmt = elmts[e];
+        for (var f = 0; f < this._facets.length; f++) {
+            if (elmt === this._facets[f].elmt[0]) {
+                newFacets.push(this._facets[f]);
+                break;
+            }
+        }
+    }
+    this._facets = newFacets;
 };
 
 BrowsingEngine.prototype.getJSON = function(keepUnrestrictedFacets) {
@@ -54,29 +84,33 @@ BrowsingEngine.prototype.getJSON = function(keepUnrestrictedFacets) {
 };
 
 BrowsingEngine.prototype.addFacet = function(type, config, options) {
-    var div = $('<div></div>').addClass("facet-container").appendTo(this._div);
+    var elmt = this._createFacetContainer();
     var facet;
     switch (type) {
         case "range":
-            facet = new RangeFacet(div, config, options);
+            facet = new RangeFacet(elmt, config, options);
             break;
         case "text":
-            facet = new TextSearchFacet(div, config, options);
+            facet = new TextSearchFacet(elmt, config, options);
             break;
         default:
-            facet = new ListFacet(div, config, options);
+            facet = new ListFacet(elmt, config, options);
     }
     
-    this._facets.push({ elmt: div, facet: facet });
+    this._facets.push({ elmt: elmt, facet: facet });
     this.update();
 };
 
+BrowsingEngine.prototype._createFacetContainer = function() {
+    return $('<li></li>').addClass("facet-container").appendTo(this._elmts.facets);
+};
+
 BrowsingEngine.prototype.removeFacet = function(facet) {
     var update = facet.hasSelection();
     for (var i = this._facets.length - 1;i >= 0; i--) {
         if (this._facets[i].facet === facet) {
             this._facets[i].elmt.remove();
-            this._facets.splice(i, 1);
+            this._facets.splice(i, 1);console.log("removed");
             break;
         }
     }
@@ -89,6 +123,9 @@ BrowsingEngine.prototype.removeFacet = function(facet) {
 BrowsingEngine.prototype.update = function(onDone) {
     var self = this;
     
+    this._elmts.controls.hide();
+    this._elmts.indicator.show();
+    
     $.post(
         "/command/compute-facets?" + $.param({ project: theProject.id }),
         { engine: JSON.stringify(this.getJSON(true)) },
@@ -99,6 +136,11 @@ BrowsingEngine.prototype.update = function(onDone) {
                 self._facets[i].facet.updateState(facetData[i]);
             }
             
+            self._elmts.indicator.hide();
+            if (self._facets.length > 0) {
+                self._elmts.controls.show();
+            }
+            
             if (onDone) {
                 onDone();
             }

src/main/webapp/styles/browsing.css

@@ -1,15 +1,37 @@
 .browsing-panel {
 }
-
+.browsing-panel-indicator {
-.facet-container {
     clear: both;
+    display: none;
+    margin: 1em;
+    text-align: center;
+}
+.browsing-panel-controls {
+    clear: both;
+    display: none;
+    margin: 1em;
+    text-align: center;
+}
+
+ul.facets-container {
+    margin: 0;
+    padding: 0;
+}
+
+li.facet-container {
+    display: block;
+    clear: both;
+    margin: 0;
+    padding: 0;
     margin-top: 1em;
+    background: white;
 }
 
 .facet-title {
     padding: 5px;
     background: #eee;
     font-weight: bold;
+    cursor: move;
 }
 .facet-body {
     border: 1px solid #ccc;