pingu_98/MrDraw
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Construct message/confirmation dialogs programmatically

Browse source 
No need to have templates here, we do it directly from the helper methods.
That also leaves us more options regarding callbacks, classes etc.

Helper methods now take an options dictionary (but still can fallback to the
old signature) containing messages, titles, callbacks etc instead of using
positional arguments for that. Switched code over to utilize that new
calling approach.
This commit is contained in:
Gina Häußge 2015-08-17 16:41:12 +02:00
parent 1238507806
commit ea662849bc
8 changed files with 79 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/octoprint/plugins/softwareupdate/static/js/softwareupdate.js
View file

@ -277,10 +277,11 @@ $(function() {
type: "error"
});
} else {
showConfirmationDialog(gettext("This will update your OctoPrint installation and restart the server."), function(e) {
e.preventDefault();
$("#confirmation_dialog").modal("hide");
self.performUpdate(force);
showConfirmationDialog({
message: gettext("This will update your OctoPrint installation and restart the server."),
onproceed: function(e) {
self.performUpdate(force);
}
});
}

78
src/octoprint/static/js/app/helpers.js
View file

@ -434,45 +434,81 @@ function hideOfflineOverlay() {
$("#offline_overlay").hide();
}
function showMessageDialog(message, options) {
function showMessageDialog(msg, options) {
options = options || {};
var messageDialog = $("#message_dialog");
if (_.isPlainObject(msg)) {
options = msg;
} else {
options.message = msg;
}
var title = options.title || "";
var message = options.message || "";
var close = options.close || gettext("Close");
var onclose = options.onclose || undefined;
$(".message_dialog_title", messageDialog).text(title);
$(".message_dialog_message", messageDialog).text(message);
$(".message_dialog_close", messageDialog).text(close);
var modalHeader = $('<a href="javascript:void(0)" class="close" data-dismiss="modal" aria-hidden="true">&times;</a><h3>' + title + '</h3>');
var modalBody = $(message);
var modalFooter = $('<a href="javascript:void(0)" class="btn" data-dismiss="modal" aria-hidden="true">' + close + '</a>');
messageDialog.modal("show");
var modal = $('<div></div>')
.addClass('modal hide fade')
.append($('<div></div>').addClass('modal-header').append(modalHeader))
.append($('<div></div>').addClass('modal-body').append(modalBody))
.append($('<div></div>').addClass('modal-footer').append(modalFooter));
modal.on("hidden", function() {
if (onclose && _.isFunction(onclose)) {
onclose();
}
});
modal.modal("show");
return modal;
}
function showConfirmationDialog(message, onacknowledge, options) {
function showConfirmationDialog(msg, onacknowledge, options) {
options = options || {};
var confirmationDialog = $("#confirmation_dialog");
if (_.isPlainObject(msg)) {
options = msg;
} else {
options.message = msg;
options.onproceed = onacknowledge;
}
var title = options.title || gettext("Are you sure?");
var message = options.message || "";
var question = options.question || gettext("Are you sure you want to proceed?");
var cancel = options.cancel || gettext("Cancel");
var proceed = options.proceed || gettext("Proceed");
var proceedClass = options.proceedClass || "danger";
var onproceed = options.onproceed || undefined;
$(".confirmation_dialog_message", confirmationDialog).text(message);
$(".confirmation_dialog_title", confirmationDialog).text(title);
$(".confirmation_dialog_question", confirmationDialog).text(question);
$(".confirmation_dialog_cancel", confirmationDialog).text(cancel);
var modalHeader = $('<a href="javascript:void(0)" class="close" data-dismiss="modal" aria-hidden="true">&times;</a><h3>' + title + '</h3>');
var modalBody = $('<p>' + message + '</p><p>' + question + '</p>');
var confirmationDialogAck = $(".confirmation_dialog_acknowledge", confirmationDialog);
confirmationDialogAck.text(proceed);
confirmationDialogAck.unbind("click");
confirmationDialogAck.bind("click", function (e) {
var cancelButton = $('<a href="javascript:void(0)" class="btn">' + cancel + '</a>')
.attr("data-dismiss", "modal")
.attr("aria-hidden", "true");
var proceedButton = $('<a href="javascript:void(0)" class="btn">' + proceed + '</a>')
.addClass("btn-" + proceedClass);
var modal = $('<div></div>')
.addClass('modal hide fade')
.append($('<div></div>').addClass('modal-header').append(modalHeader))
.append($('<div></div>').addClass('modal-body').append(modalBody))
.append($('<div></div>').addClass('modal-footer').append(cancelButton).append(proceedButton));
modal.modal("show");
proceedButton.click(function(e) {
e.preventDefault();
$("#confirmation_dialog").modal("hide");
onacknowledge(e);
modal.modal("hide");
if (onproceed && _.isFunction(onproceed)) {
onproceed(e);
}
});
confirmationDialog.modal("show");
return modal;
}
function commentableLinesToArray(lines) {

7
src/octoprint/static/js/app/viewmodels/control.js
View file

@ -236,8 +236,11 @@ $(function() {
}
if (data.confirm) {
showConfirmationDialog(data.confirm, function (e) {
callback(data);
showConfirmationDialog({
message: data.confirm,
onproceed: function (e) {
callback(data);
}
});
} else {
callback(data);

7
src/octoprint/static/js/app/viewmodels/navigation.js
View file

@ -37,8 +37,11 @@ $(function() {
})
};
if (action.confirm) {
showConfirmationDialog(action.confirm, function (e) {
callback();
showConfirmationDialog({
message: action.confirm,
onproceed: function(e) {
callback();
}
});
} else {
callback();

12
src/octoprint/static/js/app/viewmodels/printerstate.js
View file

@ -203,10 +203,12 @@ $(function() {
};
if (self.isPaused()) {
$("#confirmation_dialog .confirmation_dialog_message").text(gettext("This will restart the print job from the beginning."));
$("#confirmation_dialog .confirmation_dialog_acknowledge").unbind("click");
$("#confirmation_dialog .confirmation_dialog_acknowledge").click(function(e) {e.preventDefault(); $("#confirmation_dialog").modal("hide"); restartCommand(); });
$("#confirmation_dialog").modal("show");
showConfirmationDialog({
message: gettext("This will restart the print job from the beginning."),
onproceed: function(e) {
restartCommand();
}
});
} else {
self._jobCommand("start");
}
@ -242,4 +244,4 @@ $(function() {
["loginStateViewModel"],
["#state_wrapper", "#drop_overlay"]
]);
});
});

14
src/octoprint/templates/dialogs/confirmation.jinja2
View file

@ -1,14 +0,0 @@
<div id="confirmation_dialog" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 class="confirmation_dialog_title">{{ _('Are you sure?') }}</h3>
</div>
<div class="modal-body">
<p class="confirmation_dialog_message"></p>
<p class="confirmation_dialog_question">{{ _('Are you sure you want to proceed?') }}</p>
</div>
<div class="modal-footer">
<a href="#" class="confirmation_dialog_cancel btn" data-dismiss="modal" aria-hidden="true">{{ _('Cancel') }}</a>
<a href="#" class="confirmation_dialog_acknowledge btn btn-danger">{{ _('Proceed') }}</a>
</div>
</div>

12
src/octoprint/templates/dialogs/message.jinja2
View file

@ -1,12 +0,0 @@
<div id="message_dialog" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal" aria-hidden="true">&times;</a>
<h3 class="message_dialog_title"></h3>
</div>
<div class="modal-body">
<p class="message_dialog_message"></p>
</div>
<div class="modal-footer">
<a href="#" class="message_dialog_close btn" data-dismiss="modal" aria-hidden="true">{{ _('Close') }}</a>
</div>
</div>

2
src/octoprint/templates/index.jinja2
View file

@ -124,8 +124,6 @@
</div>
<!-- Dialogs -->
{% include 'dialogs/confirmation.jinja2' %}
{% include 'dialogs/message.jinja2' %}
{% include 'dialogs/firstrun.jinja2' %}
{% include 'dialogs/settings.jinja2' %}
{% include 'dialogs/slicing.jinja2' %}