Merge pull request #1959 from OpenRefine/issue1943
Show reconciliation previews on hover of reconciliation candidates
This commit is contained in:
Antonin Delpeuch
GitHub
commit
79394b9c0e
@ -41,6 +41,23 @@ function DataTableCellUI(dataTableView, cell, rowIndex, cellIndex, td) {
|
||||
this._render();
|
||||
}
|
||||
|
||||
DataTableCellUI.previewMatchedCells = true;
|
||||
|
||||
(function() {
|
||||
|
||||
$.ajax({
|
||||
url: "command/core/get-preference?" + $.param({
|
||||
name: "cell-ui.previewMatchedCells"
|
||||
}),
|
||||
success: function(data) {
|
||||
if (data.value && data.value == "false") {
|
||||
DataTableCellUI.previewMatchedCells = false;
|
||||
}
|
||||
},
|
||||
dataType: "json",
|
||||
});
|
||||
})();
|
||||
|
||||
DataTableCellUI.prototype._render = function() {
|
||||
var self = this;
|
||||
var cell = this._cell;
|
||||
@ -108,6 +125,10 @@ DataTableCellUI.prototype._render = function() {
|
||||
a.attr("href", encodeURI(service.view.url.replace("{{id}}", match.id)));
|
||||
}
|
||||
|
||||
if (DataTableCellUI.previewMatchedCells) {
|
||||
self._previewOnHover(service, match, a, a, false);
|
||||
}
|
||||
|
||||
$('<span> </span>').appendTo(divContent);
|
||||
$('<a href="javascript:{}"></a>')
|
||||
.text($.i18n('core-views/choose-match'))
|
||||
@ -125,18 +146,19 @@ DataTableCellUI.prototype._render = function() {
|
||||
var candidates = r.c;
|
||||
var renderCandidate = function(candidate, index) {
|
||||
var li = $('<div></div>').addClass("data-table-recon-candidate").appendTo(ul);
|
||||
var liSpan = $('<span></span>').appendTo(li);
|
||||
|
||||
$('<a href="javascript:{}"> </a>')
|
||||
.addClass("data-table-recon-match-similar")
|
||||
.attr("title", $.i18n('core-views/match-all-cells'))
|
||||
.appendTo(li).click(function(evt) {
|
||||
.appendTo(liSpan).click(function(evt) {
|
||||
self._doMatchTopicToSimilarCells(candidate);
|
||||
});
|
||||
|
||||
$('<a href="javascript:{}"> </a>')
|
||||
.addClass("data-table-recon-match")
|
||||
.attr("title", $.i18n('core-views/match-this-cell') )
|
||||
.appendTo(li).click(function(evt) {
|
||||
.appendTo(liSpan).click(function(evt) {
|
||||
self._doMatchTopicToOneCell(candidate);
|
||||
});
|
||||
|
||||
@ -144,26 +166,13 @@ DataTableCellUI.prototype._render = function() {
|
||||
.addClass("data-table-recon-topic")
|
||||
.attr("target", "_blank")
|
||||
.text(_.unescape(candidate.name)) // TODO: only use of _.unescape - consolidate
|
||||
.appendTo(li);
|
||||
.appendTo(liSpan);
|
||||
|
||||
if ((service) && (service.view) && (service.view.url)) {
|
||||
a.attr("href", encodeURI(service.view.url.replace("{{id}}", candidate.id)));
|
||||
}
|
||||
|
||||
var preview = null;
|
||||
if ((service) && (service.preview)) {
|
||||
preview = service.preview;
|
||||
}
|
||||
|
||||
if (preview) {
|
||||
a.click(function(evt) {
|
||||
if (!evt.metaKey && !evt.ctrlKey) {
|
||||
self._previewCandidateTopic(candidate, this, preview);
|
||||
evt.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
self._previewOnHover(service, candidate, liSpan.parent(), liSpan, true);
|
||||
|
||||
var score;
|
||||
if (candidate.score < 1) {
|
||||
@ -171,7 +180,7 @@ DataTableCellUI.prototype._render = function() {
|
||||
} else {
|
||||
score = Math.round(candidate.score);
|
||||
}
|
||||
$('<span></span>').addClass("data-table-recon-score").text("(" + score + ")").appendTo(li);
|
||||
$('<span></span>').addClass("data-table-recon-score").text("(" + score + ")").appendTo(liSpan);
|
||||
};
|
||||
|
||||
for (var i = 0; i < candidates.length; i++) {
|
||||
@ -431,24 +440,18 @@ DataTableCellUI.prototype._postProcessSeveralCells = function(command, params, b
|
||||
);
|
||||
};
|
||||
|
||||
// TODO delete this
|
||||
DataTableCellUI.internalPreview = {
|
||||
srchurl: 'https://www.googleapis.com/freebase/v1/search?filter=(all mid:${id})'
|
||||
+ '&output=(notable:/client/summary (description citation provenance) type)'
|
||||
+ '&key='+CustomSuggest.FREEBASE_API_KEY+'&callback=?',
|
||||
imgurl : 'https://www.googleapis.com/freebase/v1/image${id}?maxwidth=75&errorid=/freebase/no_image_png&key='+CustomSuggest.FREEBASE_API_KEY,
|
||||
width: 430,
|
||||
height: 300
|
||||
};
|
||||
|
||||
DataTableCellUI.prototype._previewCandidateTopic = function(candidate, elmt, preview) {
|
||||
DataTableCellUI.prototype._previewCandidateTopic = function(candidate, elmt, preview, showActions) {
|
||||
var self = this;
|
||||
var id = candidate.id;
|
||||
var fakeMenu = MenuSystem.createMenu();
|
||||
var fakeMenu = $('<div></div>')
|
||||
.addClass("menu-container");
|
||||
fakeMenu
|
||||
.width(preview.width?preview.width:414)
|
||||
.addClass('data-table-topic-popup')
|
||||
.html(DOM.loadHTML("core", "scripts/views/data-table/cell-recon-preview-popup-header.html"));
|
||||
.addClass('data-table-topic-popup');
|
||||
if (showActions) {
|
||||
fakeMenu
|
||||
.html(DOM.loadHTML("core", "scripts/views/data-table/cell-recon-preview-popup-header.html"));
|
||||
}
|
||||
|
||||
if (preview && preview.url) { // Service has a preview URL associated with it
|
||||
var url = encodeURI(preview.url.replace("{{id}}", id));
|
||||
@ -457,37 +460,63 @@ DataTableCellUI.prototype._previewCandidateTopic = function(candidate, elmt, pre
|
||||
.height(preview.height)
|
||||
.attr("src", url)
|
||||
.appendTo(fakeMenu);
|
||||
} else { // Otherwise use our internal preview
|
||||
var url = encodeURI(DataTableCellUI.internalPreview.srchurl.replace("\${id}", id));
|
||||
$.ajax(url,{dataType:"jsonp"}).done(function(searchResponse) {
|
||||
var data = searchResponse.result[0];
|
||||
var html = $.suggest.suggest.create_flyout(data, preview.imgurl);
|
||||
var container = $('<div></div>').css({fontSize:16}); // Suggest assumes this as a base font size
|
||||
container.append(html);
|
||||
fakeMenu.append(container);
|
||||
});
|
||||
} else {
|
||||
return; // no preview service available
|
||||
}
|
||||
|
||||
MenuSystem.showMenu(fakeMenu, function(){});
|
||||
MenuSystem.positionMenuLeftRight(fakeMenu, $(elmt));
|
||||
fakeMenu.appendTo(elmt);
|
||||
|
||||
var elmts = DOM.bind(fakeMenu);
|
||||
|
||||
elmts.matchButton.html($.i18n('core-views/match-cell'));
|
||||
elmts.matchSimilarButton.html($.i18n('core-views/match-identical'));
|
||||
elmts.cancelButton.html($.i18n('core-buttons/cancel'));
|
||||
|
||||
elmts.matchButton.click(function() {
|
||||
self._doMatchTopicToOneCell(candidate);
|
||||
MenuSystem.dismissAll();
|
||||
});
|
||||
elmts.matchSimilarButton.click(function() {
|
||||
self._doMatchTopicToSimilarCells(candidate);
|
||||
MenuSystem.dismissAll();
|
||||
});
|
||||
elmts.cancelButton.click(function() {
|
||||
MenuSystem.dismissAll();
|
||||
});
|
||||
var dismissMenu = function() {
|
||||
fakeMenu.remove();
|
||||
fakeMenu.unbind();
|
||||
};
|
||||
|
||||
if (showActions) {
|
||||
var elmts = DOM.bind(fakeMenu);
|
||||
|
||||
elmts.matchButton.html($.i18n('core-views/match-cell'));
|
||||
elmts.matchSimilarButton.html($.i18n('core-views/match-identical'));
|
||||
elmts.cancelButton.html($.i18n('core-buttons/cancel'));
|
||||
|
||||
elmts.matchButton.click(function() {
|
||||
self._doMatchTopicToOneCell(candidate);
|
||||
dismissMenu();
|
||||
});
|
||||
elmts.matchSimilarButton.click(function() {
|
||||
self._doMatchTopicToSimilarCells(candidate);
|
||||
dismissMenu();
|
||||
});
|
||||
elmts.cancelButton.click(function() {
|
||||
dismissMenu();
|
||||
});
|
||||
}
|
||||
return dismissMenu;
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets up a preview widget to appear when hovering the given DOM element.
|
||||
*/
|
||||
DataTableCellUI.prototype._previewOnHover = function(service, candidate, hoverElement, coreElement, showActions) {
|
||||
var self = this;
|
||||
var preview = null;
|
||||
if ((service) && (service.preview)) {
|
||||
preview = service.preview;
|
||||
}
|
||||
|
||||
if (preview) {
|
||||
var dismissCallback = null;
|
||||
hoverElement.hover(function(evt) {
|
||||
if (!evt.metaKey && !evt.ctrlKey) {
|
||||
dismissCallback = self._previewCandidateTopic(candidate, coreElement, preview, showActions);
|
||||
evt.preventDefault();
|
||||
}
|
||||
}, function(evt) {
|
||||
if(dismissCallback !== null) {
|
||||
dismissCallback();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
DataTableCellUI.prototype._startEdit = function(elmt) {
|
||||
|
||||
@ -298,6 +298,13 @@ a.data-table-flag-off {
|
||||
padding: @padding_tight;
|
||||
.rounded_corners();
|
||||
}
|
||||
|
||||
.data-table-topic-popup {
|
||||
z-index: 1010;
|
||||
position: fixed;
|
||||
line-height: 1;
|
||||
white-space: initial;
|
||||
}
|
||||
|
||||
.data-table-topic-popup-header {
|
||||
padding: 0 0 5px;
|
||||
@ -353,4 +360,4 @@ ul.sorting-dialog-blank-error-positions > li {
|
||||
margin: 2px;
|
||||
cursor: move;
|
||||
.rounded_corners(3px);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user