Made list facets resizable. Made facet pane scrollable.
git-svn-id: http://google-refine.googlecode.com/svn/trunk@526 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
parent
50778a9e24
commit
b8adb42c4e
@ -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);
|
||||
|
@ -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() {
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user