function HistoryWidget(div) {
this._div = div;
this.update();
}
HistoryWidget.prototype.update = function(onDone) {
var self = this;
Ajax.chainGetJSON(
"/command/get-history?" + $.param({ project: theProject.id }), null,
function(data) {
self._data = data;
self._render();
if (onDone) {
onDone();
}
}
);
};
HistoryWidget.prototype._render = function() {
var self = this;
this._div.empty();
this._div.unbind();
$('
Undo/Redo History
').appendTo(this._div);
var bodyDiv = $('').addClass("history-panel-body").appendTo(this._div);
bodyDiv.mouseenter(function(evt) {
bodyDiv.addClass("history-panel-body-expanded");
});
this._div.mouseenter(function(evt) {
if (self._timerID != null) {
window.clearTimeout(self._timerID);
self._timerID = null;
}
}).mouseleave(function(evt) {
self._timerID = window.setTimeout(function() {
self._timerID = null;
bodyDiv.removeClass("history-panel-body-expanded");
autoscroll();
}, 1000);
});
var renderEntry = function(container, entry, lastDoneID, title) {
var a = $('').appendTo(container);
a.addClass("history-entry").html(entry.description).attr("title", title).click(function(evt) {
return self._onClickHistoryEntry(evt, entry, lastDoneID);
});
return a;
};
var divPast = $('').addClass("history-past").appendTo(bodyDiv);
if (this._data.past.length == 0) {
$('').addClass("history-panel-message").text("No change to undo").appendTo(divPast);
} else {
for (var i = 0; i < this._data.past.length; i++) {
var entry = this._data.past[i];
renderEntry(divPast, entry, i == 0 ? 0 : this._data.past[i - 1].id, "Undo to here");
}
}
var divNow = $('').text("done upto here").addClass("history-now").appendTo(bodyDiv);
var divFuture = $('').addClass("history-future").appendTo(bodyDiv);
if (this._data.future.length == 0) {
$('').addClass("history-panel-message").text("No change to redo").appendTo(divFuture);
} else {
for (var i = 0; i < this._data.future.length; i++) {
var entry = this._data.future[i];
renderEntry(divFuture, entry, entry.id, "Redo to here");
}
}
var autoscroll = function() {
bodyDiv[0].scrollTop = divNow[0].offsetTop + divNow[0].offsetHeight - bodyDiv[0].offsetHeight;
};
autoscroll();
var footerDiv = $('').addClass("history-panel-footer").appendTo(this._div);
$('').text("extract").appendTo(footerDiv).click(function() {
self._extractOperations();
});
$(' • ').appendTo(footerDiv);
$('').text("apply").appendTo(footerDiv).click(function() {
self._showApplyOperationsDialog();
});
};
HistoryWidget.prototype._onClickHistoryEntry = function(evt, entry, lastDoneID) {
var self = this;
Gridworks.postProcess(
"undo-redo",
{ lastDoneID: lastDoneID },
null,
{ everythingChanged: true }
);
};
HistoryWidget.prototype._extractOperations = function() {
var self = this;
$.getJSON(
"/command/get-operations?" + $.param({ project: theProject.id }),
null,
function(data) {
if ("entries" in data) {
self._showExtractOperationsDialog(data);
}
},
"jsonp"
);
};
HistoryWidget.prototype._showExtractOperationsDialog = function(json) {
var self = this;
var frame = DialogSystem.createDialog();
frame.width("800px");
var header = $('').addClass("dialog-header").text("Extract Operations").appendTo(frame);
var body = $('').addClass("dialog-body").appendTo(frame);
var footer = $('').addClass("dialog-footer").appendTo(frame);
$('').text(
"The following JSON code encodes the operations you have done that can be abstracted. " +
"You can copy and save it in order to apply the same operations in the future.").appendTo(body);
var table = $('')
.addClass("extract-operation-dialog-layout")
.appendTo(body)[0];
var leftColumn = table.rows[0].insertCell(0);
var rightColumn = table.rows[0].insertCell(1);
$(leftColumn).width("50%");
$(rightColumn).width("50%").css("padding-left", "20px");
var entryDiv = $('').addClass("extract-operation-dialog-entries").appendTo(leftColumn);
var entryTable = $('
').appendTo(entryDiv)[0];
var createEntry = function(entry) {
var tr = entryTable.insertRow(entryTable.rows.length);
var td0 = tr.insertCell(0);
var td1 = tr.insertCell(1);
td0.width = "1%";
if ("operation" in entry) {
entry.selected = true;
$('
').appendTo(td0).click(function() {
entry.selected = !entry.selected;
updateJson();
});
$('
').text(entry.operation.description).appendTo(td1);
} else {
$('').text(entry.description).css("color", "#888").appendTo(td1);
}
};
for (var i = 0; i < json.entries.length; i++) {
createEntry(json.entries[i]);
}
var textarea = $('')
.attr("wrap", "off")
.addClass("extract-operation-dialog-textarea")
.appendTo(rightColumn);
var updateJson = function() {
var a = [];
for (var i = 0; i < json.entries.length; i++) {
var entry = json.entries[i];
if ("operation" in entry && entry.selected) {
a.push(entry.operation);
}
}
textarea.text(JSON.stringify(a, null, 2));
};
updateJson();
$('').text("Done").click(function() {
DialogSystem.dismissUntil(level - 1);
}).appendTo(footer);
var level = DialogSystem.showDialog(frame);
textarea[0].select();
};
HistoryWidget.prototype._showApplyOperationsDialog = function(json) {
var self = this;
var frame = DialogSystem.createDialog();
frame.width("800px");
var header = $('').addClass("dialog-header").text("Apply Operations").appendTo(frame);
var body = $('').addClass("dialog-body").appendTo(frame);
var footer = $('').addClass("dialog-footer").appendTo(frame);
$('').text(
"Paste the JSON code encoding the operations to perform.").appendTo(body);
var textarea = $('')
.attr("wrap", "off")
.css("white-space", "pre")
.css("font-family", "monospace")
.width("100%")
.height("400px")
.appendTo(body);
textarea.text(JSON.stringify(json, null, 2));
$('').text("Apply").click(function() {
try {
var json = JSON.parse(textarea[0].value);
} catch (e) {
alert("The JSON you pasted is invalid.");
return;
}
Gridworks.postProcess(
"apply-operations",
{},
{ operations: JSON.stringify(json) },
{ everythingChanged: true },
{
onDone: function(o) {
if (o.code == "pending") {
// Something might have already been done and so it's good to update
Gridworks.update({ everythingChanged: true });
}
}
}
);
DialogSystem.dismissUntil(level - 1);
}).appendTo(footer);
$('').text("Cancel").click(function() {
DialogSystem.dismissUntil(level - 1);
}).appendTo(footer);
var level = DialogSystem.showDialog(frame);
textarea[0].focus();
};