Fixed flickering problem of progress/undo panel.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@2396 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2011-12-01 22:15:08 +00:00
parent a7e2704655
commit 4ecd83bcf8
2 changed files with 56 additions and 48 deletions

View File

@ -40,6 +40,9 @@ function ProcessPanel(div) {
this._onDones = [];
this._latestHistoryEntry = null;
this._div.html(DOM.loadHTML("core", "scripts/project/progress-panel.html"));
this._elmts = DOM.bind(this._div);
var self = this;
$(window).keypress(function(evt) {
if (evt.charCode == 26 || (evt.charCode == 122 && (evt.ctrlKey || evt.metaKey))) { // ctrl-z or meta-z
@ -91,16 +94,16 @@ ProcessPanel.prototype.showUndo = function(historyEntry) {
this._latestHistoryEntry = historyEntry;
this._div.stop(true,false)
.empty()
.html('<div id="notification"><span bind="description"></span> <span class="notification-action"><a href="javascript:{}" bind="undo">Undo</a></span></div>')
.fadeIn(200)
.delay(7500)
.fadeOut(200);
var elmts = DOM.bind(this._div);
this._div.stop(true, false);
this._elmts.progressDiv.hide();
this._elmts.undoDiv.show();
this._elmts.undoDescription.text(historyEntry.description);
this._elmts.undoLink.unbind().click(function() { self.undo(); });
elmts.description.text(historyEntry.description);
elmts.undo.click(function() { self.undo(); });
this._div
.fadeIn(200)
.delay(10000)
.fadeOut(200);
};
ProcessPanel.prototype.undo = function() {
@ -130,54 +133,44 @@ ProcessPanel.prototype._cancelAll = function() {
ProcessPanel.prototype._render = function(newData) {
var self = this;
var newProcessMap = {};
var processes = newData.processes;
this._div.stop(true, false).empty();
this._div.stop(true, false);
if (!newData.processes.length) {
if (!processes.length) {
Refine.setTitle();
this._div.fadeOut(200);
} else {
this._div.fadeIn(200);
var cancelmessage = "Cancel";
var noticeDiv = $('<div id="notification"></div>').appendTo(this._div);
var descriptionSpan = $('<span></span>').appendTo(noticeDiv);
var statusDiv = $('<div></div>').appendTo(noticeDiv);
$('<img src="images/small-spinner.gif" />')
.addClass("notification-loader")
.appendTo(statusDiv);
var progressSpan = $('<span></span>').appendTo(statusDiv);
var countSpan = $('<span></span>').appendTo(statusDiv);
var renderProcess = function(process) {
if (process.status != "pending") {
Refine.setTitle(process.progress + "% complete");
descriptionSpan.text(process.description);
progressSpan.text(process.progress + '% complete');
}
};
var renderProcessCount = function(count) {
var pendingcount = count - 1;
countSpan.text(', ' + pendingcount + ' pending processes');
};
var processes = newData.processes;
if (processes.length >> 1) {
cancelmessage = "Cancel All";
renderProcessCount(processes.length);
}
this._elmts.undoDiv.hide();
this._elmts.progressDiv.show();
for (var i = 0; i < processes.length; i++) {
var process = processes[i];
renderProcess(process);
if (process.status != "pending") {
Refine.setTitle(process.progress + "% complete");
this._elmts.progressDescription.text(process.description);
this._elmts.progressSpan.text(process.progress + '% complete');
}
if ("onDone" in process) {
newProcessMap[process.id] = process;
}
}
$('<a href="javascript:{}"></a>')
.addClass("notification-action")
.text(cancelmessage)
if (processes.length > 1) {
var pending = processes.length - 1;
this._elmts.countSpan.text('(' + pending + (pending > 1 ? ' other pending processes)' : ' other pending process)'));
} else {
this._elmts.countSpan.empty();
}
this._elmts.cancelLink
.unbind()
.text(processes.length > 1 ? "Cancel All" : "Cancel")
.click(function() {
self._cancelAll();
$(this).text("Canceling...").unbind();
})
.appendTo(statusDiv);
this._div.fadeIn(200);
}
if ((this._data) && this._data.processes.length > 0) {

View File

@ -0,0 +1,15 @@
<div id="notification">
<div bind="progressDiv">
<span bind="progressDescription"></span>
<div bind="progressStatus">
<img src="images/small-spinner.gif" class="notification-loader" />
<span bind="progressSpan"></span>
<span bind="countSpan"></span>
<a href="javascript:{}" class="notification-action" bind="cancelLink"></a>
</div>
</div>
<div bind="undoDiv">
<span bind="undoDescription"></span>
<span class="notification-action"><a href="javascript:{}" bind="undoLink">Undo</a></span>
</div>
</div>