Made list facets resizable. Made facet pane scrollable.

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

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

@@ -128,7 +128,9 @@ ListFacet.prototype._initializeUI = function() {
                 '</td>' +
             '</tr></table>' +
         '</div></div>' +
-        '<div class="facet-body" bind="bodyDiv"></div>'
+        '<div class="facet-body" bind="bodyDiv">' +
+            '<div class="facet-body-inner" bind="bodyInnerDiv"></div>' +
+        '</div>'
     );
     this._elmts = DOM.bind(this._div);
     
@@ -160,6 +162,13 @@ ListFacet.prototype._initializeUI = function() {
     
     if (!("scroll" in this._options) || this._options.scroll) {
         this._elmts.bodyDiv.addClass("facet-body-scrollable");
+        this._elmts.bodyDiv.resizable({
+            minHeight: 30,
+            handles: 's',
+            stop: function(event, ui) {
+                event.target.style.width = "auto"; // don't force the width
+            }
+        });
     }
 };
 
@@ -169,14 +178,14 @@ ListFacet.prototype._update = function(resetScroll) {
     if (!this._data) {
         this._elmts.statusDiv.hide();
         this._elmts.controlsDiv.hide();
-        this._elmts.bodyDiv.empty().append(
+        this._elmts.bodyInnerDiv.empty().append(
             $('<div>').text("Loading...").addClass("facet-body-message"));
             
         return;
     } else if ("error" in this._data) {
         this._elmts.statusDiv.hide();
         this._elmts.controlsDiv.hide();
-        this._elmts.bodyDiv.empty().append(
+        this._elmts.bodyInnerDiv.empty().append(
             $('<div>').text(this._data.error).addClass("facet-body-message"));
         
         return;
@@ -185,16 +194,12 @@ ListFacet.prototype._update = function(resetScroll) {
     var scrollTop = 0;
     if (!resetScroll) {
         try {
-            scrollTop = this._elmts.bodyDiv[0].scrollTop;
+            scrollTop = this._elmts.bodyInnerDiv[0].scrollTop;
         } catch (e) {
         }
     }
     
-    this._elmts.bodyDiv.empty();
+    this._elmts.bodyInnerDiv.empty();
-    if (!("scroll" in this._options) || this._options.scroll) {
-        this._elmts.bodyDiv.resizable();
-    }
-    
     this._elmts.statusDiv.show();
     this._elmts.controlsDiv.show();
     
@@ -259,8 +264,8 @@ ListFacet.prototype._update = function(resetScroll) {
         renderChoice(-2, this._errorChoice, "(error)");
     }
     
-    this._elmts.bodyDiv.html(html.join(''));
+    this._elmts.bodyInnerDiv.html(html.join(''));
-    this._elmts.bodyDiv[0].scrollTop = scrollTop;
+    this._elmts.bodyInnerDiv[0].scrollTop = scrollTop;
     
     var getChoice = function(elmt) {
         var index = parseInt(elmt.attr("choiceIndex"));
@@ -286,8 +291,8 @@ ListFacet.prototype._update = function(resetScroll) {
     };
     
     var wireEvents = function() {
-        var bodyDiv = self._elmts.bodyDiv;
+        var bodyInnerDiv = self._elmts.bodyInnerDiv;
-        bodyDiv.find('.facet-choice-label').click(function() {
+        bodyInnerDiv.find('.facet-choice-label').click(function() {
             var choice = findChoice($(this));
             if (choice.s) {
                 if (selectionCount > 1) {
@@ -301,12 +306,12 @@ ListFacet.prototype._update = function(resetScroll) {
                 select(choice);
             }
         });
-        bodyDiv.find('.facet-choice-edit').click(function() {
+        bodyInnerDiv.find('.facet-choice-edit').click(function() {
             var choice = findChoice($(this));
             self._editChoice(choice, $(this).closest('.facet-choice'));
         });
         
-        bodyDiv.find('.facet-choice').mouseenter(function() {
+        bodyInnerDiv.find('.facet-choice').mouseenter(function() {
             $(this).find('.facet-choice-edit').css("visibility", "visible");
             
             var choice = getChoice($(this));
@@ -322,7 +327,7 @@ ListFacet.prototype._update = function(resetScroll) {
             }
         });
         
-        bodyDiv.find('.facet-choice-toggle').click(function() {
+        bodyInnerDiv.find('.facet-choice-toggle').click(function() {
             var choice = findChoice($(this));
             if (choice.s) {
                 deselect(choice);

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

@@ -27,11 +27,21 @@ function BrowsingEngine(div, facetConfigs) {
             
             this._facets.push({ elmt: elmt, facet: facet });
         }
+        this.resize();
         this.update();
     }
 }
 
 BrowsingEngine.prototype.resize = function() {
+    if (this._facets.length > 0) {
+        var header = this._div.find(".browsing-panel-header");
+        var body = this._div.find(".facets-container");
+        var bodyPaddings = body.outerHeight(true) - body.height();
+        
+        body.css("height", (this._div.height() - header.outerHeight(true) - bodyPaddings) + "px");
+        
+        this._elmts.facets.sortable("refresh");
+    }
 };
 
 BrowsingEngine.prototype.getFacetUIStates = function() {

src/main/webapp/styles/project/browsing.css

@@ -28,8 +28,10 @@
 }
 
 ul.facets-container {
-    padding: 0;
     margin: 0;
+    padding: 0;
+    padding-right: 2px;
+    overflow: auto;
 }
 
 li.facet-container {
@@ -95,12 +97,20 @@ a.facet-mode-link.facet-mode-link-selected {
     margin: 1em;
     color: #f88;
 }
-.facet-body-scrollable {
+.facet-body.facet-body-scrollable {
     height: 17em;
+    padding-bottom: 10px;
+    background: url(../../images/down-arrow.png) center bottom no-repeat;
+}
+.facet-body.facet-body-scrollable .ui-resizable-s {
+    bottom: -5px;
+    height: 15px;
+}
+.facet-body-scrollable .facet-body-inner {
+    height: 100%;
     overflow: auto;
 }
 
-
 .facet-choice {
     padding: 2px 5px;
     clear: both;