From a292ec8388f1b346ed16e33b256bf1e0175e0be6 Mon Sep 17 00:00:00 2001 From: Max Garin Date: Thu, 11 Mar 2021 10:33:56 -0500 Subject: [PATCH 1/8] Add JS to confirm leaving a page before submitting changed form --- ephios/core/templates/core/event_form.html | 5 +++++ ephios/core/templates/core/eventtype_form.html | 5 +++++ ephios/core/templates/core/group_form.html | 2 ++ ephios/core/templates/core/shift_form.html | 5 +++++ ephios/core/templates/core/userprofile_form.html | 5 +++++ 5 files changed, 22 insertions(+) diff --git a/ephios/core/templates/core/event_form.html b/ephios/core/templates/core/event_form.html index 50781a06a..ecf39c6a3 100644 --- a/ephios/core/templates/core/event_form.html +++ b/ephios/core/templates/core/event_form.html @@ -64,3 +64,8 @@

{% blocktranslate with title=eventtype.title %}Create new {{ title }}{% endb {% endblock %} + +{% block javascript %} + + +{% endblock %} diff --git a/ephios/core/templates/core/eventtype_form.html b/ephios/core/templates/core/eventtype_form.html index c5b864933..e7f0e845d 100644 --- a/ephios/core/templates/core/eventtype_form.html +++ b/ephios/core/templates/core/eventtype_form.html @@ -19,4 +19,9 @@ {% endif %} +{% endblock %} + +{% block javascript %} + + {% endblock %} \ No newline at end of file diff --git a/ephios/core/templates/core/group_form.html b/ephios/core/templates/core/group_form.html index da2cbcaad..e7ab2245e 100644 --- a/ephios/core/templates/core/group_form.html +++ b/ephios/core/templates/core/group_form.html @@ -24,4 +24,6 @@

{% trans "Create new group" %}

{% block javascript %} + + {% endblock %} diff --git a/ephios/core/templates/core/shift_form.html b/ephios/core/templates/core/shift_form.html index cfc2d6772..e11492b20 100644 --- a/ephios/core/templates/core/shift_form.html +++ b/ephios/core/templates/core/shift_form.html @@ -85,3 +85,8 @@
{% trans "Shift" %}
{% endblock %} + +{% block javascript %} + + +{% endblock %} \ No newline at end of file diff --git a/ephios/core/templates/core/userprofile_form.html b/ephios/core/templates/core/userprofile_form.html index d680c645a..358b58c8d 100644 --- a/ephios/core/templates/core/userprofile_form.html +++ b/ephios/core/templates/core/userprofile_form.html @@ -104,3 +104,8 @@

{% translate "Qualifications" %}

{% endblock %} + +{% block javascript %} + + +{% endblock %} \ No newline at end of file From a5285ba5024cd512736e3a992b2b24cb49265ebe Mon Sep 17 00:00:00 2001 From: Max Garin Date: Thu, 11 Mar 2021 10:34:42 -0500 Subject: [PATCH 2/8] Add areyousure plugin and setup for form checking --- ephios/static/areyousure/are-you-sure.js | 180 +++++++++++++++++++++ ephios/static/ephios/js/areyousure_form.js | 3 + 2 files changed, 183 insertions(+) create mode 100644 ephios/static/areyousure/are-you-sure.js create mode 100644 ephios/static/ephios/js/areyousure_form.js diff --git a/ephios/static/areyousure/are-you-sure.js b/ephios/static/areyousure/are-you-sure.js new file mode 100644 index 000000000..29d667dc4 --- /dev/null +++ b/ephios/static/areyousure/are-you-sure.js @@ -0,0 +1,180 @@ +(function($) { + + $.fn.areYouSure = function(options) { + + var settings = $.extend( + { + 'message' : 'You have unsaved changes!', + 'dirtyClass' : 'dirty', + 'change' : null, + 'silent' : false, + 'addRemoveFieldsMarksDirty' : false, + 'fieldEvents' : 'change keyup propertychange input', + 'fieldSelector': ":input:not(input[type=submit]):not(input[type=button])" + }, options); + + var getValue = function($field) { + if ($field.hasClass('ays-ignore') + || $field.hasClass('aysIgnore') + || $field.attr('data-ays-ignore') + || $field.attr('name') === undefined) { + return null; + } + + if ($field.is(':disabled')) { + return 'ays-disabled'; + } + + var val; + var type = $field.attr('type'); + if ($field.is('select')) { + type = 'select'; + } + + switch (type) { + case 'checkbox': + case 'radio': + val = $field.is(':checked'); + break; + case 'select': + val = ''; + $field.find('option').each(function(o) { + var $option = $(this); + if ($option.is(':selected')) { + val += $option.val(); + } + }); + break; + default: + val = $field.val(); + } + + return val; + }; + + var storeOrigValue = function($field) { + $field.data('ays-orig', getValue($field)); + }; + + var checkForm = function(evt) { + + var isFieldDirty = function($field) { + var origValue = $field.data('ays-orig'); + if (undefined === origValue) { + return false; + } + return (getValue($field) != origValue); + }; + + var $form = ($(this).is('form')) + ? $(this) + : $(this).parents('form'); + + // Test on the target first as it's the most likely to be dirty + if (isFieldDirty($(evt.target))) { + setDirtyStatus($form, true); + return; + } + + $fields = $form.find(settings.fieldSelector); + + if (settings.addRemoveFieldsMarksDirty) { + // Check if field count has changed + var origCount = $form.data("ays-orig-field-count"); + if (origCount != $fields.length) { + setDirtyStatus($form, true); + return; + } + } + + // Brute force - check each field + var isDirty = false; + $fields.each(function() { + var $field = $(this); + if (isFieldDirty($field)) { + isDirty = true; + return false; // break + } + }); + + setDirtyStatus($form, isDirty); + }; + + var initForm = function($form) { + var fields = $form.find(settings.fieldSelector); + $(fields).each(function() { storeOrigValue($(this)); }); + $(fields).unbind(settings.fieldEvents, checkForm); + $(fields).bind(settings.fieldEvents, checkForm); + $form.data("ays-orig-field-count", $(fields).length); + setDirtyStatus($form, false); + }; + + var setDirtyStatus = function($form, isDirty) { + var changed = isDirty != $form.hasClass(settings.dirtyClass); + $form.toggleClass(settings.dirtyClass, isDirty); + + // Fire change event if required + if (changed) { + if (settings.change) settings.change.call($form, $form); + + if (isDirty) $form.trigger('dirty.areYouSure', [$form]); + if (!isDirty) $form.trigger('clean.areYouSure', [$form]); + $form.trigger('change.areYouSure', [$form]); + } + }; + + var rescan = function() { + var $form = $(this); + var fields = $form.find(settings.fieldSelector); + $(fields).each(function() { + var $field = $(this); + if (!$field.data('ays-orig')) { + storeOrigValue($field); + $field.bind(settings.fieldEvents, checkForm); + } + }); + // Check for changes while we're here + $form.trigger('checkform.areYouSure'); + }; + + var reinitialize = function() { + initForm($(this)); + } + + if (!settings.silent && !window.aysUnloadSet) { + window.aysUnloadSet = true; + $(window).bind('beforeunload', function() { + $dirtyForms = $("form").filter('.' + settings.dirtyClass); + if ($dirtyForms.length == 0) { + return; + } + // Prevent multiple prompts - seen on Chrome and IE + if (navigator.userAgent.toLowerCase().match(/msie|chrome/)) { + if (window.aysHasPrompted) { + return; + } + window.aysHasPrompted = true; + window.setTimeout(function() {window.aysHasPrompted = false;}, 900); + } + return settings.message; + }); + } + + return this.each(function(elem) { + if (!$(this).is('form')) { + return; + } + var $form = $(this); + + $form.submit(function() { + $form.removeClass(settings.dirtyClass); + }); + $form.bind('reset', function() { setDirtyStatus($form, false); }); + // Add a custom events + $form.bind('rescan.areYouSure', rescan); + $form.bind('reinitialize.areYouSure', reinitialize); + $form.bind('checkform.areYouSure', checkForm); + initForm($form); + }); + }; + })(jQuery); \ No newline at end of file diff --git a/ephios/static/ephios/js/areyousure_form.js b/ephios/static/ephios/js/areyousure_form.js new file mode 100644 index 000000000..d44a4c542 --- /dev/null +++ b/ephios/static/ephios/js/areyousure_form.js @@ -0,0 +1,3 @@ +$(document).ready(function () { + $('form').areYouSure(); +}); \ No newline at end of file From c0fcdefd50e2fdaeed47573183cbc0c4ff9a5ee2 Mon Sep 17 00:00:00 2001 From: Max Garin Date: Thu, 11 Mar 2021 11:19:08 -0500 Subject: [PATCH 3/8] Add class for buttons that dynamically load forms --- ephios/core/templates/core/userprofile_form.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ephios/core/templates/core/userprofile_form.html b/ephios/core/templates/core/userprofile_form.html index 358b58c8d..77551920c 100644 --- a/ephios/core/templates/core/userprofile_form.html +++ b/ephios/core/templates/core/userprofile_form.html @@ -64,8 +64,8 @@

{% translate "Qualifications" %}

{% endfor %} - - From 361d2bbfbc61d82118147171cfec35cab3c3d529 Mon Sep 17 00:00:00 2001 From: Max Garin Date: Thu, 11 Mar 2021 11:20:08 -0500 Subject: [PATCH 4/8] Add listener for inputs that add forms and trigger a rescan --- ephios/static/ephios/js/areyousure_form.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ephios/static/ephios/js/areyousure_form.js b/ephios/static/ephios/js/areyousure_form.js index d44a4c542..2e0e8c6ca 100644 --- a/ephios/static/ephios/js/areyousure_form.js +++ b/ephios/static/ephios/js/areyousure_form.js @@ -1,3 +1,7 @@ $(document).ready(function () { $('form').areYouSure(); + // Listener for inputs that can dynamically add new forms and trigger a scan of the new form + $('.add-form').click(function() { + $('form').trigger('reinitialize.areYouSure'); + }); }); \ No newline at end of file From 10d33b40fdbe7b5f3f12dbb3d0a79c7390907a09 Mon Sep 17 00:00:00 2001 From: Max Garin Date: Thu, 11 Mar 2021 12:09:25 -0500 Subject: [PATCH 5/8] Move are you sure to main.js to be included by default --- ephios/core/templates/core/event_form.html | 4 ---- ephios/core/templates/core/eventtype_form.html | 4 ---- ephios/core/templates/core/group_form.html | 2 -- ephios/core/templates/core/shift_form.html | 4 ---- ephios/core/templates/core/userprofile_form.html | 4 ---- ephios/static/ephios/js/areyousure_form.js | 7 ------- ephios/static/ephios/js/main.js | 5 +++++ ephios/templates/base.html | 1 + 8 files changed, 6 insertions(+), 25 deletions(-) delete mode 100644 ephios/static/ephios/js/areyousure_form.js diff --git a/ephios/core/templates/core/event_form.html b/ephios/core/templates/core/event_form.html index ecf39c6a3..5771195e9 100644 --- a/ephios/core/templates/core/event_form.html +++ b/ephios/core/templates/core/event_form.html @@ -65,7 +65,3 @@

{% blocktranslate with title=eventtype.title %}Create new {{ title }}{% endb {% endblock %} -{% block javascript %} - - -{% endblock %} diff --git a/ephios/core/templates/core/eventtype_form.html b/ephios/core/templates/core/eventtype_form.html index e7f0e845d..612f1a30b 100644 --- a/ephios/core/templates/core/eventtype_form.html +++ b/ephios/core/templates/core/eventtype_form.html @@ -21,7 +21,3 @@ {% endblock %} -{% block javascript %} - - -{% endblock %} \ No newline at end of file diff --git a/ephios/core/templates/core/group_form.html b/ephios/core/templates/core/group_form.html index e7ab2245e..da2cbcaad 100644 --- a/ephios/core/templates/core/group_form.html +++ b/ephios/core/templates/core/group_form.html @@ -24,6 +24,4 @@

{% trans "Create new group" %}

{% block javascript %} - - {% endblock %} diff --git a/ephios/core/templates/core/shift_form.html b/ephios/core/templates/core/shift_form.html index e11492b20..8307db882 100644 --- a/ephios/core/templates/core/shift_form.html +++ b/ephios/core/templates/core/shift_form.html @@ -86,7 +86,3 @@
{% trans "Shift" %}
{% endblock %} -{% block javascript %} - - -{% endblock %} \ No newline at end of file diff --git a/ephios/core/templates/core/userprofile_form.html b/ephios/core/templates/core/userprofile_form.html index 77551920c..b1c1411e5 100644 --- a/ephios/core/templates/core/userprofile_form.html +++ b/ephios/core/templates/core/userprofile_form.html @@ -105,7 +105,3 @@

{% translate "Qualifications" %}

{% endblock %} -{% block javascript %} - - -{% endblock %} \ No newline at end of file diff --git a/ephios/static/ephios/js/areyousure_form.js b/ephios/static/ephios/js/areyousure_form.js deleted file mode 100644 index 2e0e8c6ca..000000000 --- a/ephios/static/ephios/js/areyousure_form.js +++ /dev/null @@ -1,7 +0,0 @@ -$(document).ready(function () { - $('form').areYouSure(); - // Listener for inputs that can dynamically add new forms and trigger a scan of the new form - $('.add-form').click(function() { - $('form').trigger('reinitialize.areYouSure'); - }); -}); \ No newline at end of file diff --git a/ephios/static/ephios/js/main.js b/ephios/static/ephios/js/main.js index 56284afb1..b1cf29b5b 100644 --- a/ephios/static/ephios/js/main.js +++ b/ephios/static/ephios/js/main.js @@ -40,6 +40,11 @@ $(document).ready(function () { $('#unloading-spinner').removeClass("d-none") }); } + $('form').areYouSure(); + // Listener for inputs that can dynamically add new forms and trigger a scan of the new form + $('.add-form').click(function() { + $('form').trigger('reinitialize.areYouSure'); + }); }) // Initialize the service worker diff --git a/ephios/templates/base.html b/ephios/templates/base.html index a8ee9699f..1b93bc402 100644 --- a/ephios/templates/base.html +++ b/ephios/templates/base.html @@ -55,6 +55,7 @@ + {% block javascript %}{% endblock %} {% endcompress %} From dc8fc71a1cfbcb06ce369e14f24de67440be1dda Mon Sep 17 00:00:00 2001 From: Max Garin Date: Thu, 11 Mar 2021 12:12:31 -0500 Subject: [PATCH 6/8] Document areyousure function --- ephios/static/ephios/js/main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ephios/static/ephios/js/main.js b/ephios/static/ephios/js/main.js index b1cf29b5b..1855dcf53 100644 --- a/ephios/static/ephios/js/main.js +++ b/ephios/static/ephios/js/main.js @@ -40,6 +40,8 @@ $(document).ready(function () { $('#unloading-spinner').removeClass("d-none") }); } + + // Confirm users wants to leave page with unsaved forms $('form').areYouSure(); // Listener for inputs that can dynamically add new forms and trigger a scan of the new form $('.add-form').click(function() { From c34a590e6658359603fb8bcf9fa31d75b5e24973 Mon Sep 17 00:00:00 2001 From: Max Garin Date: Thu, 11 Mar 2021 12:14:24 -0500 Subject: [PATCH 7/8] Fix formatting --- ephios/templates/base.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ephios/templates/base.html b/ephios/templates/base.html index 1b93bc402..dbc22985b 100644 --- a/ephios/templates/base.html +++ b/ephios/templates/base.html @@ -55,7 +55,7 @@ - + {% block javascript %}{% endblock %} {% endcompress %} From abcb27bc311d45d70dca674afd09c980fdca8834 Mon Sep 17 00:00:00 2001 From: Felix Rindt Date: Sun, 14 Mar 2021 13:58:02 +0100 Subject: [PATCH 8/8] refresh areyousure in handleForms() --- ephios/core/templates/core/userprofile_form.html | 2 +- ephios/static/ephios/js/main.js | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/ephios/core/templates/core/userprofile_form.html b/ephios/core/templates/core/userprofile_form.html index b1c1411e5..b28776439 100644 --- a/ephios/core/templates/core/userprofile_form.html +++ b/ephios/core/templates/core/userprofile_form.html @@ -65,7 +65,7 @@

{% translate "Qualifications" %}

{% endfor %} - diff --git a/ephios/static/ephios/js/main.js b/ephios/static/ephios/js/main.js index 1855dcf53..4910408bd 100644 --- a/ephios/static/ephios/js/main.js +++ b/ephios/static/ephios/js/main.js @@ -9,6 +9,7 @@ function handleForms(elem) { }).on("formAdded", "div", function (event) { handleForms($(event.target)); }); + $('form').trigger('reinitialize.areYouSure'); } $(document).ready(function () { @@ -43,10 +44,6 @@ $(document).ready(function () { // Confirm users wants to leave page with unsaved forms $('form').areYouSure(); - // Listener for inputs that can dynamically add new forms and trigger a scan of the new form - $('.add-form').click(function() { - $('form').trigger('reinitialize.areYouSure'); - }); }) // Initialize the service worker