Added custom suggest widget for properties.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@170 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-03-02 23:48:21 +00:00
parent 59c5314e42
commit 2741d54984
4 changed files with 99 additions and 17 deletions

View File

@ -1,2 +1,2 @@
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Gridworks</title> <link type="text/css" rel="stylesheet" href="externals/suggest/css/suggest-1.0.3.min.css" /> <link type="text/css" rel="stylesheet" href="externals/jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css" /> <link rel="stylesheet" href="/styles/common.css" /> <link rel="stylesheet" href="/styles/menu.css" /> <link rel="stylesheet" href="/styles/dialog.css" /> <link rel="stylesheet" href="/styles/project.css" /> <link rel="stylesheet" href="/styles/data-table-view.css" /> <link rel="stylesheet" href="/styles/history.css" /> <link rel="stylesheet" href="/styles/browsing.css" /> <link rel="stylesheet" href="/styles/process.css" /> <link rel="stylesheet" href="/styles/menu-bar.css" /> <link rel="stylesheet" href="/styles/expression-preview-dialog.css" /> <link rel="stylesheet" href="/styles/schema-alignment-dialog.css" /> <link rel="stylesheet" href="/styles/recon-dialog.css" /> <link rel="stylesheet" href="/styles/facet-based-edit-dialog.css" />
<script type="text/javascript" src="externals/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="externals/suggest/suggest-1.0.3.min.js"></script> <script type="text/javascript" src="externals/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="scripts/util/misc.js"></script> <script type="text/javascript" src="scripts/util/url.js"></script> <script type="text/javascript" src="scripts/util/string.js"></script> <script type="text/javascript" src="scripts/util/ajax.js"></script> <script type="text/javascript" src="scripts/util/menu.js"></script> <script type="text/javascript" src="scripts/util/dialog.js"></script> <script type="text/javascript" src="scripts/util/dom.js"></script> <script type="text/javascript" src="scripts/project.js"></script> <script type="text/javascript" src="scripts/project/history-widget.js"></script> <script type="text/javascript" src="scripts/project/process-widget.js"></script> <script type="text/javascript" src="scripts/project/menu-bar.js"></script> <script type="text/javascript" src="scripts/project/browsing-engine.js"></script> <script type="text/javascript" src="scripts/facets/list-facet.js"></script> <script type="text/javascript" src="scripts/facets/range-facet.js"></script> <script type="text/javascript" src="scripts/facets/text-search-facet.js"></script> <script type="text/javascript" src="scripts/views/data-table-view.js"></script> <script type="text/javascript" src="scripts/views/data-table-cell-ui.js"></script> <script type="text/javascript" src="scripts/views/data-table-column-header-ui.js"></script> <script type="text/javascript" src="scripts/dialogs/recon-dialog.js"></script> <script type="text/javascript" src="scripts/dialogs/expression-preview-dialog.js"></script> <script type="text/javascript" src="scripts/dialogs/facet-based-edit-dialog.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-node.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-link.js"></script> </head> <body> <div id="header"> <div id="path"><a class="app-path-section" href="./index.html">Gridworks</a> &raquo; </div> </div> <div id="body"> <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div> </div> </body> </html>
<script type="text/javascript" src="externals/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="externals/suggest/suggest-1.0.3.min.js"></script> <script type="text/javascript" src="externals/jquery-ui/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" src="scripts/util/misc.js"></script> <script type="text/javascript" src="scripts/util/url.js"></script> <script type="text/javascript" src="scripts/util/string.js"></script> <script type="text/javascript" src="scripts/util/ajax.js"></script> <script type="text/javascript" src="scripts/util/menu.js"></script> <script type="text/javascript" src="scripts/util/dialog.js"></script> <script type="text/javascript" src="scripts/util/dom.js"></script> <script type="text/javascript" src="scripts/util/property-suggest.js"></script> <script type="text/javascript" src="scripts/project.js"></script> <script type="text/javascript" src="scripts/project/history-widget.js"></script> <script type="text/javascript" src="scripts/project/process-widget.js"></script> <script type="text/javascript" src="scripts/project/menu-bar.js"></script> <script type="text/javascript" src="scripts/project/browsing-engine.js"></script> <script type="text/javascript" src="scripts/facets/list-facet.js"></script> <script type="text/javascript" src="scripts/facets/range-facet.js"></script> <script type="text/javascript" src="scripts/facets/text-search-facet.js"></script> <script type="text/javascript" src="scripts/views/data-table-view.js"></script> <script type="text/javascript" src="scripts/views/data-table-cell-ui.js"></script> <script type="text/javascript" src="scripts/views/data-table-column-header-ui.js"></script> <script type="text/javascript" src="scripts/dialogs/recon-dialog.js"></script> <script type="text/javascript" src="scripts/dialogs/expression-preview-dialog.js"></script> <script type="text/javascript" src="scripts/dialogs/facet-based-edit-dialog.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-node.js"></script> <script type="text/javascript" src="scripts/protograph/schema-alignment-ui-link.js"></script> </head> <body> <div id="header"> <div id="path"><a class="app-path-section" href="./index.html">Gridworks</a> &raquo; </div> </div> <div id="body"> <div id="loading-message"><img src="images/large-spinner.gif" /> starting up ...</div> </div> </body> </html>

View File

@ -107,6 +107,8 @@ ReconDialog.prototype._createDialog = function() {
$("#recon-dialog-tabs").tabs();
$("#recon-dialog-tabs-strict").css("display", "");
this._wireEvents();
};
ReconDialog.prototype._populateDialog = function() {
@ -122,13 +124,16 @@ ReconDialog.prototype._populateDialog = function() {
var td1 = tr.insertCell(1);
td0.width = "1%";
var checkbox = $('<input type="radio" name="recon-dialog-type-choice">')
var radio = $('<input type="radio" name="recon-dialog-type-choice">')
.attr("value", type.id)
.attr("typeName", type.name)
.appendTo(td0);
.appendTo(td0)
.click(function() {
self._rewirePropertySuggests(this.value);
});
if (check) {
checkbox.attr("checked", "true");
radio.attr("checked", "true");
}
$(td1).html(type.name + '<br/><span class="recon-dialog-type-id">' + type.id + '</span>');
@ -137,12 +142,6 @@ ReconDialog.prototype._populateDialog = function() {
createTypeChoice(this._types[i], i == 0);
}
this._elmts.heuristicTypeInput
.suggest({ type : '/type/type' })
.bind("fb-select", function(e, data) {
$('input[name="recon-dialog-type-choice"][value=""]').attr("checked", "true");
});
/*
* Populate properties in heuristic tab
*/
@ -160,8 +159,7 @@ ReconDialog.prototype._populateDialog = function() {
$(td0).html(column.headerLabel);
$('<input size="15" name="recon-dialog-heuristic-property" />')
.attr("columnName", column.headerLabel)
.appendTo(td1)
.suggest({ type: '/type/property' });
.appendTo(td1);
}
var columns = theProject.columnModel.columns;
for (var i = 0; i < columns.length; i++) {
@ -170,10 +168,18 @@ ReconDialog.prototype._populateDialog = function() {
renderDetailColumn(column);
}
}
};
/*
* Populate strict tab
*/
ReconDialog.prototype._wireEvents = function() {
this._elmts.heuristicTypeInput
.suggest({ type : '/type/type' })
.bind("fb-select", function(e, data) {
$('input[name="recon-dialog-type-choice"][value=""]').attr("checked", "true");
self._rewirePropertySuggests(data.id);
});
this._rewirePropertySuggests(this._types[0].id);
this._elmts.strictNamespaceInput
.suggest({ type: '/type/namespace' })
@ -183,6 +189,15 @@ ReconDialog.prototype._populateDialog = function() {
});
};
ReconDialog.prototype._rewirePropertySuggests = function(schema) {
var inputs = $('input[name="recon-dialog-heuristic-property"]');
inputs.suggestP({
type: '/type/property',
schema: schema || "/common/topic"
});
};
ReconDialog.prototype._onOK = function() {
var tab = $("#recon-dialog-tabs").tabs('option', 'selected');
if (tab == 0) {

View File

@ -318,7 +318,7 @@ SchemaAlignmentDialog.UILink.prototype._showPropertySuggestPopup = function(elmt
}
*/
}
input.suggest(suggestOptions).bind("fb-select", function(e, data) { commitProperty(data); });
input.suggestP(suggestOptions).bind("fb-select", function(e, data) { commitProperty(data); });
input[0].focus();
};

View File

@ -0,0 +1,67 @@
(function() {
var base = {
response: $.suggest.suggest.prototype.response
};
$.suggest(
"suggestP",
$.extend(
true,
{},
$.suggest.suggest.prototype,
{
response: function(data) {
if ("schema" in this.options) {
var schema = this.options.schema + "/";
var results = data.result;
var entries1 = [];
var entries2 = [];
for (var i = 0; i < results.length; i++) {
var result = results[i];
if (result.id.substring(0, schema.length) == schema) {
entries1.push(result);
} else {
entries2.push(result);
}
}
data.result = entries1.concat(entries2);
}
base.response.apply(this, [ data ]);
},
create_item: function(data, response_data) {
var css = this.options.css;
var li = $("<li>").addClass(css.item);
var name = $("<div>")
.addClass(css.item_name)
.append(
$("<label>")
.append($.suggest.strongify(data.name || data.guid, response_data.prefix)));
data.name = name.text(); // this converts html escaped strings like "&amp;" back to "&"
li.append(name);
name.prepend($("<div>").addClass(css.item_type).text(data.id));
return li;
}
}
)
);
$.extend(
$.suggest.suggestP,
{
defaults: $.extend(
true,
{},
$.suggest.suggest.defaults, {
}
)
}
);
})();