From ea662849bcf703ae2e64f4458408917ac7ed8af7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gina=20H=C3=A4u=C3=9Fge?= Date: Mon, 17 Aug 2015 16:41:12 +0200 Subject: [PATCH] Construct message/confirmation dialogs programmatically 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. --- .../static/js/softwareupdate.js | 9 ++- src/octoprint/static/js/app/helpers.js | 78 ++++++++++++++----- .../static/js/app/viewmodels/control.js | 7 +- .../static/js/app/viewmodels/navigation.js | 7 +- .../static/js/app/viewmodels/printerstate.js | 12 +-- .../templates/dialogs/confirmation.jinja2 | 14 ---- .../templates/dialogs/message.jinja2 | 12 --- src/octoprint/templates/index.jinja2 | 2 - 8 files changed, 79 insertions(+), 62 deletions(-) delete mode 100644 src/octoprint/templates/dialogs/confirmation.jinja2 delete mode 100644 src/octoprint/templates/dialogs/message.jinja2 diff --git a/src/octoprint/plugins/softwareupdate/static/js/softwareupdate.js b/src/octoprint/plugins/softwareupdate/static/js/softwareupdate.js index 36cc7657..f9044536 100644 --- a/src/octoprint/plugins/softwareupdate/static/js/softwareupdate.js +++ b/src/octoprint/plugins/softwareupdate/static/js/softwareupdate.js @@ -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); + } }); } diff --git a/src/octoprint/static/js/app/helpers.js b/src/octoprint/static/js/app/helpers.js index e0b75cc7..1a3db435 100644 --- a/src/octoprint/static/js/app/helpers.js +++ b/src/octoprint/static/js/app/helpers.js @@ -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 = $('

' + title + '

'); + var modalBody = $(message); + var modalFooter = $(''); - messageDialog.modal("show"); + var modal = $('
') + .addClass('modal hide fade') + .append($('
').addClass('modal-header').append(modalHeader)) + .append($('
').addClass('modal-body').append(modalBody)) + .append($('
').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 = $('

' + title + '

'); + var modalBody = $('

' + message + '

' + question + '

'); - var confirmationDialogAck = $(".confirmation_dialog_acknowledge", confirmationDialog); - confirmationDialogAck.text(proceed); - confirmationDialogAck.unbind("click"); - confirmationDialogAck.bind("click", function (e) { + var cancelButton = $('' + cancel + '') + .attr("data-dismiss", "modal") + .attr("aria-hidden", "true"); + var proceedButton = $('' + proceed + '') + .addClass("btn-" + proceedClass); + + var modal = $('
') + .addClass('modal hide fade') + .append($('
').addClass('modal-header').append(modalHeader)) + .append($('
').addClass('modal-body').append(modalBody)) + .append($('
').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) { diff --git a/src/octoprint/static/js/app/viewmodels/control.js b/src/octoprint/static/js/app/viewmodels/control.js index 7b76895f..20bb9787 100644 --- a/src/octoprint/static/js/app/viewmodels/control.js +++ b/src/octoprint/static/js/app/viewmodels/control.js @@ -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); diff --git a/src/octoprint/static/js/app/viewmodels/navigation.js b/src/octoprint/static/js/app/viewmodels/navigation.js index c9f3b9b1..736fc949 100644 --- a/src/octoprint/static/js/app/viewmodels/navigation.js +++ b/src/octoprint/static/js/app/viewmodels/navigation.js @@ -37,8 +37,11 @@ $(function() { }) }; if (action.confirm) { - showConfirmationDialog(action.confirm, function (e) { - callback(); + showConfirmationDialog({ + message: action.confirm, + onproceed: function(e) { + callback(); + } }); } else { callback(); diff --git a/src/octoprint/static/js/app/viewmodels/printerstate.js b/src/octoprint/static/js/app/viewmodels/printerstate.js index 00a7b67e..e764a003 100644 --- a/src/octoprint/static/js/app/viewmodels/printerstate.js +++ b/src/octoprint/static/js/app/viewmodels/printerstate.js @@ -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"] ]); -}); \ No newline at end of file +}); diff --git a/src/octoprint/templates/dialogs/confirmation.jinja2 b/src/octoprint/templates/dialogs/confirmation.jinja2 deleted file mode 100644 index cb90cf2b..00000000 --- a/src/octoprint/templates/dialogs/confirmation.jinja2 +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/src/octoprint/templates/dialogs/message.jinja2 b/src/octoprint/templates/dialogs/message.jinja2 deleted file mode 100644 index 9eab0930..00000000 --- a/src/octoprint/templates/dialogs/message.jinja2 +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/src/octoprint/templates/index.jinja2 b/src/octoprint/templates/index.jinja2 index d216fe8c..3538f39e 100644 --- a/src/octoprint/templates/index.jinja2 +++ b/src/octoprint/templates/index.jinja2 @@ -124,8 +124,6 @@ - {% include 'dialogs/confirmation.jinja2' %} - {% include 'dialogs/message.jinja2' %} {% include 'dialogs/firstrun.jinja2' %} {% include 'dialogs/settings.jinja2' %} {% include 'dialogs/slicing.jinja2' %}