Facets can now be removed.

Minor polishing on history widget.

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

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

@@ -30,6 +30,22 @@ BrowsingEngine.prototype.addFacet = function(type, config) {
     this.update();
 };
 
+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);
+            break;
+        }
+    }
+    
+    if (update) {
+        this.update();
+        ui.dataTableView.update(true);
+    }
+};
+
 BrowsingEngine.prototype.update = function() {
     var self = this;
     

src/main/webapp/scripts/project/history-widget.js

@@ -1,11 +1,5 @@
 function HistoryWidget(div) {
     this._div = div;
-    this._div.mouseover(function() {
-        this.style.height = "300px";
-    }).mouseout(function() {
-        this.style.height = "100px";
-    });
-    
     this.update();
 }
 
@@ -22,29 +16,50 @@ HistoryWidget.prototype.update = function(onDone) {
 
 HistoryWidget.prototype._render = function() {
     var self = this;
-    var container = this._div.empty();
+    
+    this._div.empty();
     
     $('<h3>History</h3>').appendTo(this._div);
     
+    var bodyDiv = $('<div></div>').addClass("history-panel-body").appendTo(this._div);
+    bodyDiv.mouseover(function() {
+        this.style.height = "300px";
+    }).mouseout(function() {
+        this.style.height = "50px";
+    });
+    
+    var lastPast = null;
     var renderEntry = function(container, entry, lastDoneID, title) {
         var a = $('<a href="javascript:{}"></a>').appendTo(container);
         a.addClass("history-entry").html(entry.description).attr("title", title).click(function(evt) {
             return self._onClickHistoryEntry(evt, entry, lastDoneID);
         });
+        return a;
     };
     
-    var divPast = $('<div></div>').addClass("history-past").appendTo(this._div);
-    for (var i = 0; i < this._data.past.length; i++) {
-        var entry = this._data.past[i];
-        renderEntry(divPast, entry, i == 0 ? 0 : this._data.past[i - 1].id, "Undo upto and including this change");
-    }
-
-    var divFuture = $('<div></div>').addClass("history-future").appendTo(this._div);
-    for (var i = 0; i < this._data.future.length; i++) {
-        var entry = this._data.future[i];
-        renderEntry(divFuture, entry, entry.id, "Redo upto and including this change");
+    var divPast = $('<div></div>').addClass("history-past").appendTo(bodyDiv);
+    if (this._data.past.length == 0) {
+        $('<div></div>').addClass("history-panel-message").text("No change to undo").appendTo(divPast);
+    } else {
+        for (var i = 0; i < this._data.past.length; i++) {
+            var entry = this._data.past[i];
+            lastPast = renderEntry(divPast, entry, i == 0 ? 0 : this._data.past[i - 1].id, "Undo upto and including this change");
+        }
     }
     
+    var divFuture = $('<div></div>').addClass("history-future").appendTo(bodyDiv);
+    if (this._data.future.length == 0) {
+        $('<div></div>').addClass("history-panel-message").text("No change to redo").appendTo(divFuture);
+    } else {
+        for (var i = 0; i < this._data.future.length; i++) {
+            var entry = this._data.future[i];
+            renderEntry(divFuture, entry, entry.id, "Redo upto and including this change");
+        }
+    }
+    
+    if (lastPast != null) {
+        bodyDiv[0].scrollTop = lastPast[0].offsetTop;
+    }
 };
 
 HistoryWidget.prototype._onClickHistoryEntry = function(evt, entry, lastDoneID) {

src/main/webapp/scripts/project/list-facet.js

@@ -19,6 +19,10 @@ ListFacet.prototype.getJSON = function() {
     return o;
 };
 
+ListFacet.prototype.hasSelection = function() {
+    return this._selection.length > 0;
+};
+
 ListFacet.prototype.updateState = function(data) {
     this._data = data;
     
@@ -48,6 +52,10 @@ ListFacet.prototype.render = function() {
     var headerDiv = $('<div></div>').addClass("facet-title").appendTo(container);
     $('<span></span>').text(this._config.name).appendTo(headerDiv);
     
+    var removeButton = $('<a href="javascript:{}"></a>').addClass("facet-choice-link").text("remove").click(function() {
+        self._remove();
+    }).prependTo(headerDiv);
+    
     var bodyDiv = $('<div></div>').addClass("facet-body").appendTo(container);
     if (this._data == null) {
         bodyDiv.html("Loading...");
@@ -57,7 +65,9 @@ ListFacet.prototype.render = function() {
             var reset = function() {
                 self._reset();
             };
-            $('<a href="javascript:{}"></a>').addClass("facet-choice-link").text("reset").click(reset).prependTo(headerDiv);
+            removeButton.after(
+                $('<a href="javascript:{}"></a>').addClass("facet-choice-link").text("reset").click(reset)
+            );
         }
         
         var renderChoice = function(choice) {
@@ -136,7 +146,16 @@ ListFacet.prototype._reset = function() {
     this._updateRest();
 };
 
+ListFacet.prototype._remove = function() {
+    ui.browsingEngine.removeFacet(this);
+    
+    this._div = null;
+    this._config = null;
+    this._selection = null;
+    this._data = null;
+};
+
 ListFacet.prototype._updateRest = function() {
     ui.browsingEngine.update();
     ui.dataTableView.update(true);
-};
+};

src/main/webapp/styles/browsing.css

@@ -48,6 +48,7 @@ a.facet-choice-label:hover {
 }
 
 a.facet-choice-link {
+    margin-left: 1em;
     font-size: 80%;
     float: right;
     text-decoration: none;

src/main/webapp/styles/history.css

@@ -3,18 +3,26 @@
     top: -1px;
     right: 20px;
     width: 200px;
-    padding: 2px;
     background: #fffee0;
     border: 1px solid #ccc;
-    height: 100px;
-    overflow: auto;
 }
 .history-panel h3 {
     margin: 0;
     padding: 3px;
-    background: #fee;
+    background: #888;
+    color: #eee;
     font-size: 100%;
 }
+.history-panel-body {
+    padding: 2px;
+    height: 50px;
+    overflow: auto;
+}
+.history-panel-message {
+    text-align: center;
+    color: #aaa;
+}
+
 .history-past {
     padding-bottom: 3px;
     border-bottom: 2px solid #aaa;
@@ -33,3 +41,8 @@ a.history-entry:hover {
     background: #eee;
     color: #a88;
 }
+
+.history-future a.history-entry {
+    color: #888;
+    font-style: italic;
+}