From b8adb42c4e50ecb575ead7512d90c3b2c7423c4c Mon Sep 17 00:00:00 2001
From: David Huynh <dfhuynh@gmail.com>
Date: Sat, 24 Apr 2010 00:44:33 +0000
Subject: [PATCH] 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  | 37 +++++++++++--------
 .../webapp/scripts/project/browsing-engine.js | 10 +++++
 src/main/webapp/styles/project/browsing.css   | 16 ++++++--
 3 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/main/webapp/scripts/facets/list-facet.js b/src/main/webapp/scripts/facets/list-facet.js
index 398d09a6b..a86dcdc66 100644
--- a/src/main/webapp/scripts/facets/list-facet.js
+++ b/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();
-    if (!("scroll" in this._options) || this._options.scroll) {
-        this._elmts.bodyDiv.resizable();
-    }
-    
+    this._elmts.bodyInnerDiv.empty();
     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.bodyDiv[0].scrollTop = scrollTop;
+    this._elmts.bodyInnerDiv.html(html.join(''));
+    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;
-        bodyDiv.find('.facet-choice-label').click(function() {
+        var bodyInnerDiv = self._elmts.bodyInnerDiv;
+        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);
diff --git a/src/main/webapp/scripts/project/browsing-engine.js b/src/main/webapp/scripts/project/browsing-engine.js
index c09aac79f..be4389d71 100644
--- a/src/main/webapp/scripts/project/browsing-engine.js
+++ b/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() {
diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css
index 92e5df063..c01737c54 100644
--- a/src/main/webapp/styles/project/browsing.css
+++ b/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;