From c1ceefbdcf9a215651c6bbc166de4cc3da111299 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <bengfort@mpib-berlin.mpg.de>
Date: Tue, 23 Jun 2020 17:07:05 +0200
Subject: [PATCH 1/7] split subject_form.js

---
 .../static/js/{subject_form.js => consent.js}   | 17 -----------------
 castellum/subjects/static/js/notes.js           | 17 +++++++++++++++++
 .../subjects/subject_additional_info_form.html  |  2 +-
 .../subjects/subject_data_protection_form.html  |  2 +-
 4 files changed, 19 insertions(+), 19 deletions(-)
 rename castellum/subjects/static/js/{subject_form.js => consent.js} (71%)
 create mode 100644 castellum/subjects/static/js/notes.js

diff --git a/castellum/subjects/static/js/subject_form.js b/castellum/subjects/static/js/consent.js
similarity index 71%
rename from castellum/subjects/static/js/subject_form.js
rename to castellum/subjects/static/js/consent.js
index 3a8a58c00..644097d65 100644
--- a/castellum/subjects/static/js/subject_form.js
+++ b/castellum/subjects/static/js/consent.js
@@ -44,21 +44,4 @@ $(function() {
             $consentCheckbox.prop('disabled', false);
         }
     });
-
-
-    var $totalForms = $('#id_form-TOTAL_FORMS');
-    var $notes_container = $('#notes-container');
-
-    $(document).on('click', '[data-js="note-add"]', function() {
-        var $template = $('#note-data-template');
-        var html = $template.html().replace(/{prefix}/g, 'form-' + $totalForms.val());
-        var $fieldset = $(html);
-        $notes_container.append($fieldset);
-        $totalForms.val(parseInt($totalForms.val(), 10) + 1);
-    });
-
-    $(document).on('click', '[data-js="note-delete"]', function(event) {
-        var $delete = $('#' + event.target.id.slice(0, -6));
-        $delete.val(event.target.checked ? '' : 'on');
-    });
 });
diff --git a/castellum/subjects/static/js/notes.js b/castellum/subjects/static/js/notes.js
new file mode 100644
index 000000000..ff018581a
--- /dev/null
+++ b/castellum/subjects/static/js/notes.js
@@ -0,0 +1,17 @@
+$(function() {
+    var $totalForms = $('#id_form-TOTAL_FORMS');
+    var $notes_container = $('#notes-container');
+
+    $(document).on('click', '[data-js="note-add"]', function() {
+        var $template = $('#note-data-template');
+        var html = $template.html().replace(/{prefix}/g, 'form-' + $totalForms.val());
+        var $fieldset = $(html);
+        $notes_container.append($fieldset);
+        $totalForms.val(parseInt($totalForms.val(), 10) + 1);
+    });
+
+    $(document).on('click', '[data-js="note-delete"]', function(event) {
+        var $delete = $('#' + event.target.id.slice(0, -6));
+        $delete.val(event.target.checked ? '' : 'on');
+    });
+});
diff --git a/castellum/subjects/templates/subjects/subject_additional_info_form.html b/castellum/subjects/templates/subjects/subject_additional_info_form.html
index dce09a978..5edc7b40a 100644
--- a/castellum/subjects/templates/subjects/subject_additional_info_form.html
+++ b/castellum/subjects/templates/subjects/subject_additional_info_form.html
@@ -92,5 +92,5 @@
 
 {% block extra_scripts %}
     <script src="{% static 'js/availability.js' %}"></script>
-    <script src="{% static 'js/subject_form.js' %}"></script>
+    <script src="{% static 'js/notes.js' %}"></script>
 {% endblock %}
diff --git a/castellum/subjects/templates/subjects/subject_data_protection_form.html b/castellum/subjects/templates/subjects/subject_data_protection_form.html
index dbb710a79..cfb3659fc 100644
--- a/castellum/subjects/templates/subjects/subject_data_protection_form.html
+++ b/castellum/subjects/templates/subjects/subject_data_protection_form.html
@@ -55,5 +55,5 @@
 {% endblock %}
 
 {% block extra_scripts %}
-    <script src="{% static 'js/subject_form.js' %}"></script>
+    <script src="{% static 'js/consent.js' %}"></script>
 {% endblock %}
-- 
GitLab


From 87b7fb69c356af84ce1f4f69e5c44a569c76e557 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <bengfort@mpib-berlin.mpg.de>
Date: Tue, 23 Jun 2020 11:45:11 +0200
Subject: [PATCH 2/7] avoid $.ready()

---
 castellum/contacts/static/js/availability.js  |  4 +-
 castellum/contacts/static/js/guardians.js     |  4 +-
 .../recruitment/static/js/answer_declined.js  |  4 +-
 castellum/recruitment/static/js/contact.js    |  4 +-
 castellum/recruitment/static/js/filters.js    |  4 +-
 castellum/static/js/calendar.js               | 74 +++++++++----------
 castellum/static/js/unsaved-changes.js        |  4 +-
 castellum/static/js/utils.js                  |  4 +-
 castellum/studies/static/js/study_sessions.js |  4 +-
 castellum/subjects/static/js/consent.js       |  4 +-
 castellum/subjects/static/js/notes.js         |  4 +-
 11 files changed, 56 insertions(+), 58 deletions(-)

diff --git a/castellum/contacts/static/js/availability.js b/castellum/contacts/static/js/availability.js
index d53dec76c..5f1899db2 100644
--- a/castellum/contacts/static/js/availability.js
+++ b/castellum/contacts/static/js/availability.js
@@ -1,4 +1,4 @@
-$(function() {
+(function() {
     var setCheckbox = function($wrapper, $checkbox) {
         if ($wrapper.find('option:selected').length === 0) {
             $checkbox.prop('checked', false);
@@ -72,4 +72,4 @@ $(function() {
 
     // set initial state of week checkbox
     setCheckbox($availability, $wholeWeek);
-});
+})();
diff --git a/castellum/contacts/static/js/guardians.js b/castellum/contacts/static/js/guardians.js
index f4547d59e..f3731c191 100644
--- a/castellum/contacts/static/js/guardians.js
+++ b/castellum/contacts/static/js/guardians.js
@@ -1,4 +1,4 @@
-$(function() {
+(function() {
     $(document).on('change', '[name="guardians_pane"]', function() {
         ['self', 'guardians'].forEach(function(id) {
             var $pane = $('#contact-' + id);
@@ -89,4 +89,4 @@ $(function() {
 
     $(document).on('click', '[data-js="guardian-use"]', use);
     $('[data-js="guardian-use-auto"]').each(use);
-});
+})();
diff --git a/castellum/recruitment/static/js/answer_declined.js b/castellum/recruitment/static/js/answer_declined.js
index d76012d6b..efccf900e 100644
--- a/castellum/recruitment/static/js/answer_declined.js
+++ b/castellum/recruitment/static/js/answer_declined.js
@@ -1,4 +1,4 @@
-$(function() {
+(function() {
     var disableInput = function(event) {
         var $answer_declined = $(event.target);
         var $target = $('#' + $answer_declined.data('target'));
@@ -10,4 +10,4 @@ $(function() {
     $('[data-js="answer-declined"]').each(function(i, element) {
         disableInput({target: element});
     });
-});
+})();
diff --git a/castellum/recruitment/static/js/contact.js b/castellum/recruitment/static/js/contact.js
index 3bcea9fd4..3961a273b 100644
--- a/castellum/recruitment/static/js/contact.js
+++ b/castellum/recruitment/static/js/contact.js
@@ -1,4 +1,4 @@
-$(function() {
+(function() {
     var setVisibility = function() {
         var $status = $('[name="status"]');
         var $followupInputs = $('[name="followup_date"]');
@@ -60,4 +60,4 @@ $(function() {
             event.preventDefault();
         }
     });
-});
+})();
diff --git a/castellum/recruitment/static/js/filters.js b/castellum/recruitment/static/js/filters.js
index ba8f1d9cc..b7f82d718 100644
--- a/castellum/recruitment/static/js/filters.js
+++ b/castellum/recruitment/static/js/filters.js
@@ -1,4 +1,4 @@
-$(function() {
+(function() {
     var $totalForms = $('#id_form-TOTAL_FORMS');
     var $container = $('#filter-forms');
 
@@ -20,4 +20,4 @@ $(function() {
         $formrow.attr('hidden', true);
         $formrow.find('input').trigger('change');
     });
-});
+})();
diff --git a/castellum/static/js/calendar.js b/castellum/static/js/calendar.js
index aef316125..9f9d8fce8 100644
--- a/castellum/static/js/calendar.js
+++ b/castellum/static/js/calendar.js
@@ -1,43 +1,41 @@
-$(function() {
-    $('[data-js="calendar"]').each(function(i, el) {
-        var layout = $(el).data('layout');
-        var calendar = new FullCalendar.Calendar(el, {
-            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
-            plugins: ['dayGrid', 'timeGrid', 'bootstrap', 'timeline'],
-            themeSystem: 'bootstrap',
-            locale: $('html').attr('lang'),
-            events: location.search ? (location.search + '&events') : '?events',
-            eventSourceSuccess: function(raw) {
-                return raw.events;
+$('[data-js="calendar"]').each(function(i, el) {
+    var layout = $(el).data('layout');
+    var calendar = new FullCalendar.Calendar(el, {
+        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
+        plugins: ['dayGrid', 'timeGrid', 'bootstrap', 'timeline'],
+        themeSystem: 'bootstrap',
+        locale: $('html').attr('lang'),
+        events: location.search ? (location.search + '&events') : '?events',
+        eventSourceSuccess: function(raw) {
+            return raw.events;
+        },
+        height: function() {
+            return $(window).height() - $(el).offset().top - parseInt($(el).css('margin-bottom'), 10);
+        },
+        header: {
+            left: layout === 'year' ? 'timelineMonth,timelineYear' : 'timeGridWeek,dayGridMonth',
+            center: 'title',
+            right: 'prev,next',
+        },
+        defaultView: layout === 'year' ? 'timelineMonth' : 'timeGridWeek',
+        views: {
+            timelineMonth: {
+                duration: {months: 1},
+                slotDuration: {days: 1},
             },
-            height: function() {
-                return $(window).height() - $(el).offset().top - parseInt($(el).css('margin-bottom'), 10);
+            timelineYear: {
+                duration: {years: 1},
+                slotDuration: {weeks: 1},
             },
-            header: {
-                left: layout === 'year' ? 'timelineMonth,timelineYear' : 'timeGridWeek,dayGridMonth',
-                center: 'title',
-                right: 'prev,next',
+            timeGridWeek: {
+                allDaySlot: false,
+                slotDuration: '00:30:00',
+                scrollTime: '08:00:00',
             },
-            defaultView: layout === 'year' ? 'timelineMonth' : 'timeGridWeek',
-            views: {
-                timelineMonth: {
-                    duration: {months: 1},
-                    slotDuration: {days: 1},
-                },
-                timelineYear: {
-                    duration: {years: 1},
-                    slotDuration: {weeks: 1},
-                },
-                timeGridWeek: {
-                    allDaySlot: false,
-                    slotDuration: '00:30:00',
-                    scrollTime: '08:00:00',
-                },
-            },
-        });
-        setInterval(function() {
-            calendar.refetchEvents();
-        }, 5000);
-        calendar.render();
+        },
     });
+    setInterval(function() {
+        calendar.refetchEvents();
+    }, 5000);
+    calendar.render();
 });
diff --git a/castellum/static/js/unsaved-changes.js b/castellum/static/js/unsaved-changes.js
index 5cca2dd06..7f1709c55 100644
--- a/castellum/static/js/unsaved-changes.js
+++ b/castellum/static/js/unsaved-changes.js
@@ -1,4 +1,4 @@
-$(function() {
+(function() {
     var unsavedForms = [];
 
     var registerBeforeUnload = function() {
@@ -35,4 +35,4 @@ $(function() {
     $(document).on('click', '[data-js="cancel"]', function() {
         unsavedForms = [];
     });
-});
+})();
diff --git a/castellum/static/js/utils.js b/castellum/static/js/utils.js
index 05a36a57a..637a49c4a 100644
--- a/castellum/static/js/utils.js
+++ b/castellum/static/js/utils.js
@@ -1,4 +1,4 @@
-$(function() {
+(function() {
     var preventDoubleClick = false;
     $(document).on('submit', 'form', function(event) {
         if (preventDoubleClick) {
@@ -53,4 +53,4 @@ $(function() {
         var win = window.open(event.target.href, null, config);
         win.focus();
     });
-});
+})();
diff --git a/castellum/studies/static/js/study_sessions.js b/castellum/studies/static/js/study_sessions.js
index d228486d3..804ae6ac3 100644
--- a/castellum/studies/static/js/study_sessions.js
+++ b/castellum/studies/static/js/study_sessions.js
@@ -1,4 +1,4 @@
-$(function() {
+(function() {
     var $totalForms = $('#id_form-TOTAL_FORMS');
     var $sessions_container = $('#sessions-container');
 
@@ -18,4 +18,4 @@ $(function() {
         $fieldset.append($('<input type="hidden" name="form-' + $fieldset.index() + '-DELETE" value="on">'));
         $fieldset.attr('hidden', true);
     });
-});
+})();
diff --git a/castellum/subjects/static/js/consent.js b/castellum/subjects/static/js/consent.js
index 644097d65..0c582e4b5 100644
--- a/castellum/subjects/static/js/consent.js
+++ b/castellum/subjects/static/js/consent.js
@@ -1,4 +1,4 @@
-$(function() {
+(function() {
     var $consentHidden = $('#id_consent_status_hidden');
     var $consentCheckbox = $('#id_consent_status');
     var $consentConfirm = $('[data-js="consent-confirm"]');
@@ -44,4 +44,4 @@ $(function() {
             $consentCheckbox.prop('disabled', false);
         }
     });
-});
+})();
diff --git a/castellum/subjects/static/js/notes.js b/castellum/subjects/static/js/notes.js
index ff018581a..15c5e93b5 100644
--- a/castellum/subjects/static/js/notes.js
+++ b/castellum/subjects/static/js/notes.js
@@ -1,4 +1,4 @@
-$(function() {
+(function() {
     var $totalForms = $('#id_form-TOTAL_FORMS');
     var $notes_container = $('#notes-container');
 
@@ -14,4 +14,4 @@ $(function() {
         var $delete = $('#' + event.target.id.slice(0, -6));
         $delete.val(event.target.checked ? '' : 'on');
     });
-});
+})();
-- 
GitLab


From 2fa7b2fcbe8e1de024462c58c05b4286ea323981 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <bengfort@mpib-berlin.mpg.de>
Date: Tue, 23 Jun 2020 11:51:33 +0200
Subject: [PATCH 3/7] avoid event.target

---
 castellum/contacts/static/js/availability.js       | 12 ++++++------
 castellum/recruitment/static/js/answer_declined.js |  4 ++--
 castellum/recruitment/static/js/filters.js         |  8 ++++----
 castellum/static/js/utils.js                       | 10 +++++-----
 castellum/studies/static/js/study_sessions.js      |  4 ++--
 castellum/subjects/static/js/notes.js              |  6 +++---
 6 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/castellum/contacts/static/js/availability.js b/castellum/contacts/static/js/availability.js
index 5f1899db2..006abef7b 100644
--- a/castellum/contacts/static/js/availability.js
+++ b/castellum/contacts/static/js/availability.js
@@ -32,19 +32,19 @@
     generateCheckboxes();
     var $wholeWeek = $('[data-js="toggle-all"]');
 
-    $availability.on('change', 'select', function(event) {
+    $availability.on('change', 'select', function() {
         // hours --> day
-        var $wrapperDay = $(event.target);
-        var $wholeDay = $(event.target).closest('.form-group').find('[data-js="toggle-day"]');
+        var $wrapperDay = $(this);
+        var $wholeDay = $(this).closest('.form-group').find('[data-js="toggle-day"]');
         setCheckbox($wrapperDay, $wholeDay);
 
         // hours --> week
         setCheckbox($availability, $wholeWeek);
     });
 
-    $availability.on('change', '[data-js="toggle-day"]', function(event) {
+    $availability.on('change', '[data-js="toggle-day"]', function() {
         // day --> hours
-        var $wholeDay = $(event.target);
+        var $wholeDay = $(this);
         var $select = $wholeDay.closest('.form-group').find('select');
         $select.find('option').prop('selected', $wholeDay.prop('checked'));
 
@@ -54,7 +54,7 @@
 
     $availability.on('change', '[data-js="toggle-all"]', function() {
         // week --> hours
-        var $wholeWeek = $(event.target);
+        var $wholeWeek = $(this);
         $availability.find('option').prop('selected', $wholeWeek.prop('checked'));
 
         // week --> days
diff --git a/castellum/recruitment/static/js/answer_declined.js b/castellum/recruitment/static/js/answer_declined.js
index efccf900e..0ef73d2c2 100644
--- a/castellum/recruitment/static/js/answer_declined.js
+++ b/castellum/recruitment/static/js/answer_declined.js
@@ -1,6 +1,6 @@
 (function() {
-    var disableInput = function(event) {
-        var $answer_declined = $(event.target);
+    var disableInput = function() {
+        var $answer_declined = $(this);
         var $target = $('#' + $answer_declined.data('target'));
         $target.prop('disabled', $answer_declined.prop('checked'));
     };
diff --git a/castellum/recruitment/static/js/filters.js b/castellum/recruitment/static/js/filters.js
index b7f82d718..da9e72c99 100644
--- a/castellum/recruitment/static/js/filters.js
+++ b/castellum/recruitment/static/js/filters.js
@@ -2,8 +2,8 @@
     var $totalForms = $('#id_form-TOTAL_FORMS');
     var $container = $('#filter-forms');
 
-    $(document).on('click', '[data-js="filter-add"]', function(event) {
-        var pk = event.target.form.description.value;
+    $(document).on('click', '[data-js="filter-add"]', function() {
+        var pk = this.form.description.value;
         var $template = $('#template-' + pk);
         if ($template.length) {
             var html = $template.html().replace(/{prefix}/g, 'form-' + $totalForms.val());
@@ -13,8 +13,8 @@
         }
     });
 
-    $(document).on('click', '[data-js="filter-delete"]', function(event) {
-        var $formrow = $(event.target).closest('.form-row');
+    $(document).on('click', '[data-js="filter-delete"]', function() {
+        var $formrow = $(this).closest('.form-row');
         $formrow.find('[name^="form-' + $formrow.index() + '-value"]').remove();
         $formrow.append($('<input type="hidden" name="form-' + $formrow.index() + '-DELETE" value="on">'));
         $formrow.attr('hidden', true);
diff --git a/castellum/static/js/utils.js b/castellum/static/js/utils.js
index 637a49c4a..e383868cf 100644
--- a/castellum/static/js/utils.js
+++ b/castellum/static/js/utils.js
@@ -28,15 +28,15 @@
         }
     });
 
-    $(document).on('click', '[data-multi-reset]', function(event) {
-        var $target = $($(event.target).data('multi-reset'));
+    $(document).on('click', '[data-multi-reset]', function() {
+        var $target = $($(this).data('multi-reset'));
         $target.find('option').each(function(i, element) {
             $(element).prop('selected', false);
         });
     });
 
-    $(document).on('click', '[data-clipboard]', function(event) {
-        var $target = $($(event.target).data('clipboard'));
+    $(document).on('click', '[data-clipboard]', function() {
+        var $target = $($(this).data('clipboard'));
         if (navigator.clipboard) {
             navigator.clipboard.writeText($target.val());
         } else {
@@ -50,7 +50,7 @@
         event.preventDefault();
         // copied from django
         var config = 'height=500,width=800,resizable=yes,scrollbars=yes';
-        var win = window.open(event.target.href, null, config);
+        var win = window.open(this.href, null, config);
         win.focus();
     });
 })();
diff --git a/castellum/studies/static/js/study_sessions.js b/castellum/studies/static/js/study_sessions.js
index 804ae6ac3..176c34c32 100644
--- a/castellum/studies/static/js/study_sessions.js
+++ b/castellum/studies/static/js/study_sessions.js
@@ -10,8 +10,8 @@
         $totalForms.val(parseInt($totalForms.val(), 10) + 1);
     });
 
-    $(document).on('click', '[data-js="session-delete"]', function(event) {
-        var $fieldset = $(event.target).closest('fieldset');
+    $(document).on('click', '[data-js="session-delete"]', function() {
+        var $fieldset = $(this).closest('fieldset');
         $fieldset.find('[name="form-' + $fieldset.index() + '-name"]').remove();
         $fieldset.find('[name="form-' + $fieldset.index() + '-duration"]').remove();
         $fieldset.find('[name="form-' + $fieldset.index() + '-resource"]').remove();
diff --git a/castellum/subjects/static/js/notes.js b/castellum/subjects/static/js/notes.js
index 15c5e93b5..f221981bb 100644
--- a/castellum/subjects/static/js/notes.js
+++ b/castellum/subjects/static/js/notes.js
@@ -10,8 +10,8 @@
         $totalForms.val(parseInt($totalForms.val(), 10) + 1);
     });
 
-    $(document).on('click', '[data-js="note-delete"]', function(event) {
-        var $delete = $('#' + event.target.id.slice(0, -6));
-        $delete.val(event.target.checked ? '' : 'on');
+    $(document).on('click', '[data-js="note-delete"]', function() {
+        var $delete = $('#' + this.id.slice(0, -6));
+        $delete.val(this.checked ? '' : 'on');
     });
 })();
-- 
GitLab


From dd8485c936c2c2820e3e7476cfe2b4a856e7308b Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <bengfort@mpib-berlin.mpg.de>
Date: Tue, 23 Jun 2020 11:47:39 +0200
Subject: [PATCH 4/7] replace $(document).on()

---
 castellum/contacts/static/js/guardians.js     | 14 ++++++-------
 .../recruitment/static/js/answer_declined.js  |  2 +-
 castellum/recruitment/static/js/contact.js    |  8 +++----
 castellum/recruitment/static/js/filters.js    |  4 ++--
 castellum/static/js/unsaved-changes.js        |  8 +++----
 castellum/static/js/utils.js                  | 21 ++++++++++++++-----
 castellum/studies/static/js/study_sessions.js |  4 ++--
 castellum/subjects/static/js/notes.js         |  4 ++--
 8 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/castellum/contacts/static/js/guardians.js b/castellum/contacts/static/js/guardians.js
index f3731c191..1de40aa5a 100644
--- a/castellum/contacts/static/js/guardians.js
+++ b/castellum/contacts/static/js/guardians.js
@@ -1,5 +1,5 @@
 (function() {
-    $(document).on('change', '[name="guardians_pane"]', function() {
+    $$.on(document, 'change', '[name="guardians_pane"]', function() {
         ['self', 'guardians'].forEach(function(id) {
             var $pane = $('#contact-' + id);
             var $radio = $('[name="guardians_pane"][value="' + id + '"]');
@@ -7,7 +7,7 @@
         });
     });
 
-    $(document).on('submit', '[data-js="contact-completeness"]', function(event) {
+    $$.on(document, 'submit', '[data-js="contact-completeness"]', function(event) {
         var complete = false;
         if ($('[name="guardians_pane"][value="guardians"]').prop('checked')) {
             complete = (
@@ -44,11 +44,11 @@
         }
     };
 
-    $(document).on('click', '[data-js="guardian-remove"]', function() {
+    $$.on(document, 'click', '[data-js="guardian-remove"]', function() {
         toggleGuardian(this, true);
     });
 
-    $(document).on('click', '[data-js="guardian-restore"]', function() {
+    $$.on(document, 'click', '[data-js="guardian-restore"]', function() {
         toggleGuardian(this, false);
     });
 
@@ -63,7 +63,7 @@
         $button.before($el);
     };
 
-    $(document).on('click', '[data-js="guardian-add"]', function() {
+    $$.on(document, 'click', '[data-js="guardian-add"]', function() {
         // copied from django
         var config = 'height=500,width=800,resizable=yes,scrollbars=yes';
         var win = window.open('/subjects/guardians/', 'guardian-add', config);
@@ -78,7 +78,7 @@
         win.close();
     };
 
-    $(document).on('click', '[data-js="guardian-dismiss"]', function() {
+    $$.on(document, 'click', '[data-js="guardian-dismiss"]', function() {
         window.close();
     });
 
@@ -87,6 +87,6 @@
         opener.closeGuardianPopup(window, data);
     };
 
-    $(document).on('click', '[data-js="guardian-use"]', use);
+    $$.on(document, 'click', '[data-js="guardian-use"]', use);
     $('[data-js="guardian-use-auto"]').each(use);
 })();
diff --git a/castellum/recruitment/static/js/answer_declined.js b/castellum/recruitment/static/js/answer_declined.js
index 0ef73d2c2..af20847bb 100644
--- a/castellum/recruitment/static/js/answer_declined.js
+++ b/castellum/recruitment/static/js/answer_declined.js
@@ -5,7 +5,7 @@
         $target.prop('disabled', $answer_declined.prop('checked'));
     };
 
-    $(document).on('change', '[data-js="answer-declined"]', disableInput);
+    $$.on(document, 'change', '[data-js="answer-declined"]', disableInput);
 
     $('[data-js="answer-declined"]').each(function(i, element) {
         disableInput({target: element});
diff --git a/castellum/recruitment/static/js/contact.js b/castellum/recruitment/static/js/contact.js
index 3961a273b..1538ca106 100644
--- a/castellum/recruitment/static/js/contact.js
+++ b/castellum/recruitment/static/js/contact.js
@@ -14,7 +14,7 @@
         }
     };
 
-    $(document).on('change', '[name="status"]', setVisibility);
+    $$.on(document, 'change', '[name="status"]', setVisibility);
     setVisibility();
 
     var $invited = $('[name="status"] [value="3"]');
@@ -27,11 +27,11 @@
             $alert.prop('hidden', !needsCheck);
         };
 
-        $(document).on('change', '[name="exclusion_criteria_checked"]', setInvitedDisabled);
+        $$.on(document, 'change', '[name="exclusion_criteria_checked"]', setInvitedDisabled);
         setInvitedDisabled();
     }
 
-    $(document).on('change', '[name="exclusion_criteria_checked"]', function() {
+    $$.on(document, 'change', '[name="exclusion_criteria_checked"]', function() {
         $('#criteria-tab .fa-exclamation-triangle').prop('hidden', this.checked);
     });
 
@@ -44,7 +44,7 @@
         return s ? new Date(s) : null;
     };
 
-    $(document).on('submit', 'form', function(event) {
+    $$.on(document, 'submit', 'form', function(event) {
         var start = getDate('#sessions-start');
         var end = getDate('#sessions-end');
         var warn = false;
diff --git a/castellum/recruitment/static/js/filters.js b/castellum/recruitment/static/js/filters.js
index da9e72c99..18b75eae1 100644
--- a/castellum/recruitment/static/js/filters.js
+++ b/castellum/recruitment/static/js/filters.js
@@ -2,7 +2,7 @@
     var $totalForms = $('#id_form-TOTAL_FORMS');
     var $container = $('#filter-forms');
 
-    $(document).on('click', '[data-js="filter-add"]', function() {
+    $$.on(document, 'click', '[data-js="filter-add"]', function() {
         var pk = this.form.description.value;
         var $template = $('#template-' + pk);
         if ($template.length) {
@@ -13,7 +13,7 @@
         }
     });
 
-    $(document).on('click', '[data-js="filter-delete"]', function() {
+    $$.on(document, 'click', '[data-js="filter-delete"]', function() {
         var $formrow = $(this).closest('.form-row');
         $formrow.find('[name^="form-' + $formrow.index() + '-value"]').remove();
         $formrow.append($('<input type="hidden" name="form-' + $formrow.index() + '-DELETE" value="on">'));
diff --git a/castellum/static/js/unsaved-changes.js b/castellum/static/js/unsaved-changes.js
index 7f1709c55..eacf316df 100644
--- a/castellum/static/js/unsaved-changes.js
+++ b/castellum/static/js/unsaved-changes.js
@@ -12,7 +12,7 @@
         });
     };
 
-    $(document).on('click', 'a:not([data-js="cancel"]):not([href^="#"])', function(event){
+    $$.on(document, 'click', 'a:not([data-js="cancel"]):not([href^="#"])', function(event){
         if (unsavedForms.length) {
             event.preventDefault();
             var $modal = $('#unsaved-changes-modal');
@@ -21,18 +21,18 @@
         }
     });
 
-    $(document).on('change', 'form[method="post"]', function() {
+    $$.on(document, 'change', 'form[method="post"]', function() {
         // beforeunload prevents caching, so only register it when necessary
         registerBeforeUnload();
         if (!unsavedForms.includes(this)) {
             unsavedForms.push(this);
         }
     });
-    $(document).on('submit', 'form', function() {
+    $$.on(document, 'submit', 'form', function() {
         unsavedForms = unsavedForms.filter(f => f !== this);
     });
 
-    $(document).on('click', '[data-js="cancel"]', function() {
+    $$.on(document, 'click', '[data-js="cancel"]', function() {
         unsavedForms = [];
     });
 })();
diff --git a/castellum/static/js/utils.js b/castellum/static/js/utils.js
index e383868cf..9834c9896 100644
--- a/castellum/static/js/utils.js
+++ b/castellum/static/js/utils.js
@@ -1,6 +1,17 @@
 (function() {
+    window.$$ = {
+        on: function(el, eventName, selector, fn) {
+            el.addEventListener(eventName, function(event) {
+                var target = event.target.closest(selector);
+                if (target) {
+                    fn.call(target, event);
+                }
+            });
+        },
+    };
+
     var preventDoubleClick = false;
-    $(document).on('submit', 'form', function(event) {
+    $$.on(document, 'submit', 'form', function(event) {
         if (preventDoubleClick) {
             event.preventDefault();
         } else {
@@ -11,7 +22,7 @@
         }
     });
 
-    $(document).on('change', '[data-js="confirm-delete"]', function() {
+    $$.on(document, 'change', '[data-js="confirm-delete"]', function() {
         $(this.form).find('[type="submit"],button:not([type])').prop('disabled', !this.checked);
     });
 
@@ -28,14 +39,14 @@
         }
     });
 
-    $(document).on('click', '[data-multi-reset]', function() {
+    $$.on(document, 'click', '[data-multi-reset]', function() {
         var $target = $($(this).data('multi-reset'));
         $target.find('option').each(function(i, element) {
             $(element).prop('selected', false);
         });
     });
 
-    $(document).on('click', '[data-clipboard]', function() {
+    $$.on(document, 'click', '[data-clipboard]', function() {
         var $target = $($(this).data('clipboard'));
         if (navigator.clipboard) {
             navigator.clipboard.writeText($target.val());
@@ -46,7 +57,7 @@
         }
     });
 
-    $(document).on('click', '[data-js="popup"]', function(event) {
+    $$.on(document, 'click', '[data-js="popup"]', function(event) {
         event.preventDefault();
         // copied from django
         var config = 'height=500,width=800,resizable=yes,scrollbars=yes';
diff --git a/castellum/studies/static/js/study_sessions.js b/castellum/studies/static/js/study_sessions.js
index 176c34c32..ed210d97a 100644
--- a/castellum/studies/static/js/study_sessions.js
+++ b/castellum/studies/static/js/study_sessions.js
@@ -2,7 +2,7 @@
     var $totalForms = $('#id_form-TOTAL_FORMS');
     var $sessions_container = $('#sessions-container');
 
-    $(document).on('click', '[data-js="session-add"]', function() {
+    $$.on(document, 'click', '[data-js="session-add"]', function() {
         var $template = $('#session-data-template');
         var html = $template.html().replace(/{prefix}/g, 'form-' + $totalForms.val());
         var $fieldset = $(html);
@@ -10,7 +10,7 @@
         $totalForms.val(parseInt($totalForms.val(), 10) + 1);
     });
 
-    $(document).on('click', '[data-js="session-delete"]', function() {
+    $$.on(document, 'click', '[data-js="session-delete"]', function() {
         var $fieldset = $(this).closest('fieldset');
         $fieldset.find('[name="form-' + $fieldset.index() + '-name"]').remove();
         $fieldset.find('[name="form-' + $fieldset.index() + '-duration"]').remove();
diff --git a/castellum/subjects/static/js/notes.js b/castellum/subjects/static/js/notes.js
index f221981bb..85d0d83d0 100644
--- a/castellum/subjects/static/js/notes.js
+++ b/castellum/subjects/static/js/notes.js
@@ -2,7 +2,7 @@
     var $totalForms = $('#id_form-TOTAL_FORMS');
     var $notes_container = $('#notes-container');
 
-    $(document).on('click', '[data-js="note-add"]', function() {
+    $$.on(document, 'click', '[data-js="note-add"]', function() {
         var $template = $('#note-data-template');
         var html = $template.html().replace(/{prefix}/g, 'form-' + $totalForms.val());
         var $fieldset = $(html);
@@ -10,7 +10,7 @@
         $totalForms.val(parseInt($totalForms.val(), 10) + 1);
     });
 
-    $(document).on('click', '[data-js="note-delete"]', function() {
+    $$.on(document, 'click', '[data-js="note-delete"]', function() {
         var $delete = $('#' + this.id.slice(0, -6));
         $delete.val(this.checked ? '' : 'on');
     });
-- 
GitLab


From 03f68cc39f574c18fb3a91a34e02d250faa37ccd Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <bengfort@mpib-berlin.mpg.de>
Date: Tue, 23 Jun 2020 17:19:23 +0200
Subject: [PATCH 5/7] port js code to vanilla

---
 castellum/contacts/static/js/availability.js  | 88 ++++++++++---------
 castellum/contacts/static/js/guardians.js     | 54 ++++++------
 .../recruitment/static/js/answer_declined.js  | 10 +--
 castellum/recruitment/static/js/contact.js    | 42 ++++-----
 castellum/recruitment/static/js/filters.js    | 37 +++++---
 castellum/static/js/calendar.js               |  8 +-
 castellum/static/js/unsaved-changes.js        |  8 +-
 castellum/static/js/utils.js                  | 25 ++++--
 castellum/studies/static/js/study_sessions.js | 34 ++++---
 castellum/subjects/static/js/consent.js       | 51 ++++++-----
 castellum/subjects/static/js/notes.js         | 19 ++--
 11 files changed, 204 insertions(+), 172 deletions(-)

diff --git a/castellum/contacts/static/js/availability.js b/castellum/contacts/static/js/availability.js
index 006abef7b..d7e85986d 100644
--- a/castellum/contacts/static/js/availability.js
+++ b/castellum/contacts/static/js/availability.js
@@ -1,75 +1,81 @@
 (function() {
-    var setCheckbox = function($wrapper, $checkbox) {
-        if ($wrapper.find('option:selected').length === 0) {
-            $checkbox.prop('checked', false);
-            $checkbox.prop('indeterminate', false);
-        } else if ($wrapper.find('option:selected').length < $wrapper.find('option').length) {
-            $checkbox.prop('checked', false);
-            $checkbox.prop('indeterminate', true);
+    var setCheckbox = function(wrapper, checkbox) {
+        var options = wrapper.querySelectorAll('option');
+        if (Array.prototype.every.call(options, o => !o.selected)) {
+            checkbox.checked = false;
+            checkbox.indeterminate = false;
+        } else if (!Array.prototype.every.call(options, o => o.selected)) {
+            checkbox.checked = false;
+            checkbox.indeterminate = true;
         } else {
-            $checkbox.prop('checked', true);
-            $checkbox.prop('indeterminate', false);
+            checkbox.checked = true;
+            checkbox.indeterminate = false;
         }
     };
 
     var generateCheckboxes = function() {
         // whole week
-        var $label = $('<label class="form-check mb-0">');
-        $label.append($('<input type="checkbox" class="form-check-input" data-js="toggle-all">'));
-        $label.append($('<span class="form-check-label">' + django.gettext('All week') + '</span>'));
-        $availability.append($label);
+        var label = document.createElement('label');
+        label.className = 'form-check mb-0';
+        label.innerHTML = '<input type="checkbox" class="form-check-input" data-js="toggle-all">' +
+            '<span class="form-check-label"></span>';
+        label.querySelector('span').textContent = django.gettext('All week');
+        availability.append(label);
 
         // whole days
-        $availability.find('select').each(function(i, select) {
-            var $label = $('<label class="d-block mb-0 mt-n1">');
-            $label.append($('<input type="checkbox" data-js="toggle-day">'));
-            $label.append($('<span class="sr-only">' + django.gettext('All day') + '</span>'));
-            $label.insertBefore(select);
+        availability.querySelectorAll('select').forEach(function(select) {
+            var label = document.createElement('label');
+            label.className = 'd-block mb-0 mt-n1';
+            label.innerHTML = '<input type="checkbox" data-js="toggle-day">' +
+                '<span class="sr-only"></span>';
+            label.querySelector('span').textContent = django.gettext('All day');
+            select.before(label);
         });
     };
 
-    var $availability = $('[data-js="availability"]');
+    var availability = document.querySelector('[data-js="availability"]');
     generateCheckboxes();
-    var $wholeWeek = $('[data-js="toggle-all"]');
+    var wholeWeek = document.querySelector('[data-js="toggle-all"]');
 
-    $availability.on('change', 'select', function() {
+    $$.on(availability, 'change', 'select', function() {
         // hours --> day
-        var $wrapperDay = $(this);
-        var $wholeDay = $(this).closest('.form-group').find('[data-js="toggle-day"]');
-        setCheckbox($wrapperDay, $wholeDay);
+        var wholeDay = this.closest('.form-group').querySelector('[data-js="toggle-day"]');
+        setCheckbox(this, wholeDay);
 
         // hours --> week
-        setCheckbox($availability, $wholeWeek);
+        setCheckbox(availability, wholeWeek);
     });
 
-    $availability.on('change', '[data-js="toggle-day"]', function() {
+    $$.on(availability, 'change', '[data-js="toggle-day"]', function() {
         // day --> hours
-        var $wholeDay = $(this);
-        var $select = $wholeDay.closest('.form-group').find('select');
-        $select.find('option').prop('selected', $wholeDay.prop('checked'));
+        var select = this.closest('.form-group').querySelector('select');
+        select.querySelectorAll('option').forEach(option => {
+            option.selected = this.checked;
+        });
 
         // day --> week
-        setCheckbox($availability, $wholeWeek);
+        setCheckbox(availability, wholeWeek);
     });
 
-    $availability.on('change', '[data-js="toggle-all"]', function() {
+    $$.on(availability, 'change', '[data-js="toggle-all"]', function() {
         // week --> hours
-        var $wholeWeek = $(this);
-        $availability.find('option').prop('selected', $wholeWeek.prop('checked'));
+        availability.querySelectorAll('option').forEach(option => {
+            option.selected = this.checked;
+        });
 
         // week --> days
-        var $wholeDay = $availability.find('[data-js="toggle-day"]');
-        $wholeDay.prop('checked', $wholeWeek.prop('checked'));
-        $wholeDay.prop('indeterminate', false);
+        availability.querySelectorAll('[data-js="toggle-day"]').forEach(wholeDay => {
+            wholeDay.checked = this.checked;
+            wholeDay.indeterminate = false;
+        });
     });
 
     // set initial state of day checkboxes
-    $('[data-js="toggle-day"]').each(function(i, wholeDay) {
-        var $wholeDay = $(wholeDay);
-        var $select = $wholeDay.closest('.form-group').find('select');
-        setCheckbox($select, $wholeDay);
+    document.querySelectorAll('[data-js="toggle-day"]').forEach(function(wholeDay) {
+        var select = wholeDay.closest('.form-group').querySelector('select');
+        setCheckbox(select, wholeDay);
     });
 
     // set initial state of week checkbox
-    setCheckbox($availability, $wholeWeek);
+    setCheckbox(availability, wholeWeek);
 })();
diff --git a/castellum/contacts/static/js/guardians.js b/castellum/contacts/static/js/guardians.js
index 1de40aa5a..244e7ec3c 100644
--- a/castellum/contacts/static/js/guardians.js
+++ b/castellum/contacts/static/js/guardians.js
@@ -1,24 +1,24 @@
 (function() {
     $$.on(document, 'change', '[name="guardians_pane"]', function() {
         ['self', 'guardians'].forEach(function(id) {
-            var $pane = $('#contact-' + id);
-            var $radio = $('[name="guardians_pane"][value="' + id + '"]');
-            $pane.prop('hidden', !$radio.prop('checked'));
+            var pane = document.getElementById('contact-' + id);
+            var radio = document.querySelector('[name="guardians_pane"][value="' + id + '"]');
+            pane.hidden = !radio.checked;
         });
     });
 
     $$.on(document, 'submit', '[data-js="contact-completeness"]', function(event) {
         var complete = false;
-        if ($('[name="guardians_pane"][value="guardians"]').prop('checked')) {
+        if (document.querySelector('[name="guardians_pane"][value="guardians"]').checked) {
             complete = (
-                $('[name="guardians_remove"]:disabled').length ||
-                $('[name="guardians_add"]:not(:disabled)').length
+                document.querySelector('[name="guardians_remove"]:disabled') ||
+                document.querySelector('[name="guardians_add"]:not(:disabled)')
             );
         } else {
             complete = (
-                $('[name="email"]').val() ||
-                $('[name="phone_number"]').val() ||
-                $('[name="street"]').val()
+                document.querySelector('[name="email"]').value ||
+                document.querySelector('[name="phone_number"]').value ||
+                document.querySelector('[name="street"]').value
             );
         }
         if (!complete) {
@@ -29,18 +29,18 @@
     });
 
     var toggleGuardian = function(el, removed) {
-        var $wrapper = $(el).closest('[data-js="guardian-wrapper"]');
-        var $remove = $wrapper.find('[data-js="guardian-remove"]');
-        var $restore = $wrapper.find('[data-js="guardian-restore"]');
-        var $input = $wrapper.find('input');
+        var wrapper = el.closest('[data-js="guardian-wrapper"]');
+        var remove = wrapper.querySelector('[data-js="guardian-remove"]');
+        var restore = wrapper.querySelector('[data-js="guardian-restore"]');
+        var input = wrapper.querySelector('input');
 
-        $wrapper.toggleClass('text-muted', removed);
-        $remove.prop('hidden', removed);
-        $restore.prop('hidden', !removed);
-        if ($input.attr('name') === 'guardians_remove') {
-            $input.prop('disabled', !removed);
+        wrapper.classList.toggle('text-muted', removed);
+        remove.hidden = removed;
+        restore.hidden = !removed;
+        if (input.name === 'guardians_remove') {
+            input.disabled = !removed;
         } else {
-            $input.prop('disabled', removed);
+            input.disabled = removed;
         }
     };
 
@@ -53,14 +53,14 @@
     });
 
     var addGuardian = function(name, pk) {
-        var $template = $('#guardian-template');
-        var $button = $('[data-js="guardian-add"]');
+        var template = document.getElementById('guardian-template');
+        var button = document.querySelector('[data-js="guardian-add"]');
 
-        var html = $template.html().replace(/{pk}/g, pk);
-        var $el = $(html);
-        $el.find('label').text(name);
+        var wrapper = document.createElement('div');
+        wrapper.innerHTML = template.innerHTML.replace(/{pk}/g, pk);
+        wrapper.querySelector('label').textContent = name;
 
-        $button.before($el);
+        button.before(wrapper.children[0]);
     };
 
     $$.on(document, 'click', '[data-js="guardian-add"]', function() {
@@ -83,10 +83,10 @@
     });
 
     var use = function() {
-        var data = JSON.stringify($(this).data());
+        var data = JSON.stringify(this.dataset);
         opener.closeGuardianPopup(window, data);
     };
 
     $$.on(document, 'click', '[data-js="guardian-use"]', use);
-    $('[data-js="guardian-use-auto"]').each(use);
+    document.querySelectorAll('[data-js="guardian-use-auto"]').forEach(use);
 })();
diff --git a/castellum/recruitment/static/js/answer_declined.js b/castellum/recruitment/static/js/answer_declined.js
index af20847bb..c60fd94c0 100644
--- a/castellum/recruitment/static/js/answer_declined.js
+++ b/castellum/recruitment/static/js/answer_declined.js
@@ -1,13 +1,13 @@
 (function() {
     var disableInput = function() {
-        var $answer_declined = $(this);
-        var $target = $('#' + $answer_declined.data('target'));
-        $target.prop('disabled', $answer_declined.prop('checked'));
+        var targetId = this.dataset.target;
+        var target = document.getElementById(targetId);
+        target.disabled = this.checked;
     };
 
     $$.on(document, 'change', '[data-js="answer-declined"]', disableInput);
 
-    $('[data-js="answer-declined"]').each(function(i, element) {
-        disableInput({target: element});
+    document.querySelectorAll('[data-js="answer-declined"]').forEach(function(element) {
+        disableInput.call(element);
     });
 })();
diff --git a/castellum/recruitment/static/js/contact.js b/castellum/recruitment/static/js/contact.js
index 1538ca106..3d713c74f 100644
--- a/castellum/recruitment/static/js/contact.js
+++ b/castellum/recruitment/static/js/contact.js
@@ -1,30 +1,30 @@
 (function() {
     var setVisibility = function() {
-        var $status = $('[name="status"]');
-        var $followupInputs = $('[name="followup_date"]');
-        var $followup = $followupInputs.closest('.form-row');
+        var status = document.querySelector('[name="status"]');
+        var followupInput = document.querySelector('[name="followup_date"]');
+        var followup = followupInput.closest('.form-row');
 
-        if ($status.val() === '4') {
-            $followup.prop('hidden', false);
-            $followupInputs.prop('required', true);
+        if (status.value === '4') {
+            followup.hidden = false;
+            followupInput.required = true;
         } else {
-            $followup.prop('hidden', true);
-            $followupInputs.prop('required', false);
-            $followupInputs.val('');
+            followup.hidden = true;
+            followupInput.required = false;
+            followupInput.value = '';
         }
     };
 
     $$.on(document, 'change', '[name="status"]', setVisibility);
     setVisibility();
 
-    var $invited = $('[name="status"] [value="3"]');
-    var $alert = $('[data-js="blocking_invitation_alert"]');
-    if (!$invited.prop('disabled')) {
+    var invited = document.querySelector('[name="status"] [value="3"]');
+    var alert = document.querySelector('[data-js="blocking_invitation_alert"]');
+    if (!invited.disabled) {
         var setInvitedDisabled = function() {
-            var $checked = $('[name="exclusion_criteria_checked"]');
-            var needsCheck = $checked.length && !$checked.prop('checked');
-            $invited.prop('disabled', needsCheck);
-            $alert.prop('hidden', !needsCheck);
+            var checked = document.querySelector('[name="exclusion_criteria_checked"]');
+            var needsCheck = checked && !checked.checked;
+            invited.disabled = needsCheck;
+            alert.hidden = !needsCheck;
         };
 
         $$.on(document, 'change', '[name="exclusion_criteria_checked"]', setInvitedDisabled);
@@ -32,23 +32,23 @@
     }
 
     $$.on(document, 'change', '[name="exclusion_criteria_checked"]', function() {
-        $('#criteria-tab .fa-exclamation-triangle').prop('hidden', this.checked);
+        document.querySelector('#criteria-tab .fa-exclamation-triangle').hidden = this.checked;
     });
 
-    if ($('#appointments .is-invalid').length) {
+    if (document.querySelector('#appointments .is-invalid')) {
         $('#appointments-tab').tab('show');
     }
 
     var getDate = function(selector) {
-        var s = $(selector).prop('dateTime');
-        return s ? new Date(s) : null;
+        var el = document.querySelector(selector);
+        return (el && el.dateTime) ? new Date(el.dateTime) : null;
     };
 
     $$.on(document, 'submit', 'form', function(event) {
         var start = getDate('#sessions-start');
         var end = getDate('#sessions-end');
         var warn = false;
-        $('[name^="appointment"][type="date"]').each(function(i, el) {
+        document.querySelectorAll('[name^="appointment"][type="date"]').forEach(function(el) {
             if (el.value) {
                 var date = new Date(el.value)
                 if ((start && date < start) || (end && date > end)) {
diff --git a/castellum/recruitment/static/js/filters.js b/castellum/recruitment/static/js/filters.js
index 18b75eae1..f1082e258 100644
--- a/castellum/recruitment/static/js/filters.js
+++ b/castellum/recruitment/static/js/filters.js
@@ -1,23 +1,34 @@
 (function() {
-    var $totalForms = $('#id_form-TOTAL_FORMS');
-    var $container = $('#filter-forms');
+    var totalForms = document.getElementById('id_form-TOTAL_FORMS');
+    var container = document.getElementById('filter-forms');
 
     $$.on(document, 'click', '[data-js="filter-add"]', function() {
         var pk = this.form.description.value;
-        var $template = $('#template-' + pk);
-        if ($template.length) {
-            var html = $template.html().replace(/{prefix}/g, 'form-' + $totalForms.val());
-            var $formrow = $('<div class="form-row mb-3">').html(html);
-            $container.append($formrow);
-            $totalForms.val(parseInt($totalForms.val(), 10) + 1).trigger('change');
+        var template = document.getElementById('template-' + pk);
+        if (template) {
+            var formrow = document.createElement('div');
+            formrow.className = 'form-row mb-3';
+            formrow.innerHTML = template.innerHTML.replace(/{prefix}/g, 'form-' + totalForms.value);
+            container.append(formrow);
+            totalForms.value = parseInt(totalForms.value, 10) + 1;
+            $$.trigger(totalForms, 'change');
         }
     });
 
     $$.on(document, 'click', '[data-js="filter-delete"]', function() {
-        var $formrow = $(this).closest('.form-row');
-        $formrow.find('[name^="form-' + $formrow.index() + '-value"]').remove();
-        $formrow.append($('<input type="hidden" name="form-' + $formrow.index() + '-DELETE" value="on">'));
-        $formrow.attr('hidden', true);
-        $formrow.find('input').trigger('change');
+        var formrow = this.closest('.form-row');
+        var index = Array.prototype.indexOf.call(formrow.parentElement.children, formrow);
+
+        formrow.querySelector('[name^="form-' + index + '-value"]').remove();
+
+        var hidden = document.createElement('input');
+        hidden.type = 'hidden';
+        hidden.name = 'form-' + index + '-DELETE';
+        hidden.value = 'on';
+
+        formrow.append(hidden);
+        formrow.hidden = true;
+
+        $$.trigger(formrow.querySelector('input'), 'change');
     });
 })();
diff --git a/castellum/static/js/calendar.js b/castellum/static/js/calendar.js
index 9f9d8fce8..446ffdd16 100644
--- a/castellum/static/js/calendar.js
+++ b/castellum/static/js/calendar.js
@@ -1,16 +1,16 @@
-$('[data-js="calendar"]').each(function(i, el) {
-    var layout = $(el).data('layout');
+document.querySelectorAll('[data-js="calendar"]').forEach(function(el) {
+    var layout = el.dataset.layout;
     var calendar = new FullCalendar.Calendar(el, {
         schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
         plugins: ['dayGrid', 'timeGrid', 'bootstrap', 'timeline'],
         themeSystem: 'bootstrap',
-        locale: $('html').attr('lang'),
+        locale: document.documentElement.lang,
         events: location.search ? (location.search + '&events') : '?events',
         eventSourceSuccess: function(raw) {
             return raw.events;
         },
         height: function() {
-            return $(window).height() - $(el).offset().top - parseInt($(el).css('margin-bottom'), 10);
+            return window.innerHeight - el.offsetTop - parseInt(getComputedStyle(el).marginBottom, 10);
         },
         header: {
             left: layout === 'year' ? 'timelineMonth,timelineYear' : 'timeGridWeek,dayGridMonth',
diff --git a/castellum/static/js/unsaved-changes.js b/castellum/static/js/unsaved-changes.js
index eacf316df..d2acb0c82 100644
--- a/castellum/static/js/unsaved-changes.js
+++ b/castellum/static/js/unsaved-changes.js
@@ -2,7 +2,7 @@
     var unsavedForms = [];
 
     var registerBeforeUnload = function() {
-        $(window).on('beforeunload', function(event) {
+        window.addEventListener('beforeunload', function(event) {
             if (unsavedForms.length) {
                 event.preventDefault();
                 // Chrome requires returnValue to be set.
@@ -15,9 +15,9 @@
     $$.on(document, 'click', 'a:not([data-js="cancel"]):not([href^="#"])', function(event){
         if (unsavedForms.length) {
             event.preventDefault();
-            var $modal = $('#unsaved-changes-modal');
-            $modal.find('[data-js="cancel"]').prop('href', this.href);
-            $modal.modal('show');
+            var modal = document.querySelector('#unsaved-changes-modal');
+            modal.querySelector('[data-js="cancel"]').href = this.href;
+            $(modal).modal('show');
         }
     });
 
diff --git a/castellum/static/js/utils.js b/castellum/static/js/utils.js
index 9834c9896..ff8390e3a 100644
--- a/castellum/static/js/utils.js
+++ b/castellum/static/js/utils.js
@@ -8,6 +8,11 @@
                 }
             });
         },
+        trigger: function(el, eventName) {
+            var event = document.createEvent('HTMLEvents');
+            event.initEvent(eventName, true, false);
+            el.dispatchEvent(event);
+        },
     };
 
     var preventDoubleClick = false;
@@ -23,10 +28,10 @@
     });
 
     $$.on(document, 'change', '[data-js="confirm-delete"]', function() {
-        $(this.form).find('[type="submit"],button:not([type])').prop('disabled', !this.checked);
+        this.form.querySelector('[type="submit"],button:not([type])').disabled = !this.checked;
     });
 
-    $('[type="date"]').each(function(i, e) {
+    document.querySelectorAll('[type="date"]').forEach(function(e) {
         if (e.type !== 'date') {
             $(e).datepicker({
                 format: 'yyyy-mm-dd',
@@ -40,19 +45,21 @@
     });
 
     $$.on(document, 'click', '[data-multi-reset]', function() {
-        var $target = $($(this).data('multi-reset'));
-        $target.find('option').each(function(i, element) {
-            $(element).prop('selected', false);
+        var targetId = this.dataset.multiReset;
+        var target = document.getElementById(targetId);
+        target.querySelectorAll('option').forEach(function(element) {
+            element.selected = false;
         });
     });
 
     $$.on(document, 'click', '[data-clipboard]', function() {
-        var $target = $($(this).data('clipboard'));
+        var targetId = this.dataset.clipboard;
+        var target = document.getElementById(targetId);
         if (navigator.clipboard) {
-            navigator.clipboard.writeText($target.val());
+            navigator.clipboard.writeText(target.value);
         } else {
-            $target.focus();
-            $target[0].setSelectionRange(0, 1000);
+            target.focus();
+            target.setSelectionRange(0, 1000);
             document.execCommand('copy');
         }
     });
diff --git a/castellum/studies/static/js/study_sessions.js b/castellum/studies/static/js/study_sessions.js
index ed210d97a..3a501ff65 100644
--- a/castellum/studies/static/js/study_sessions.js
+++ b/castellum/studies/static/js/study_sessions.js
@@ -1,21 +1,29 @@
 (function() {
-    var $totalForms = $('#id_form-TOTAL_FORMS');
-    var $sessions_container = $('#sessions-container');
+    var totalForms = document.getElementById('id_form-TOTAL_FORMS');
+    var sessionsContainer = document.getElementById('sessions-container');
 
     $$.on(document, 'click', '[data-js="session-add"]', function() {
-        var $template = $('#session-data-template');
-        var html = $template.html().replace(/{prefix}/g, 'form-' + $totalForms.val());
-        var $fieldset = $(html);
-        $sessions_container.append($fieldset);
-        $totalForms.val(parseInt($totalForms.val(), 10) + 1);
+        var template = document.getElementById('session-data-template');
+        var wrapper = document.createElement('div');
+        wrapper.innerHTML = template.innerHTML.replace(/{prefix}/g, 'form-' + totalForms.value);
+        sessionsContainer.append(wrapper.children[0]);
+        totalForms.value = parseInt(totalForms.value, 10) + 1;
     });
 
     $$.on(document, 'click', '[data-js="session-delete"]', function() {
-        var $fieldset = $(this).closest('fieldset');
-        $fieldset.find('[name="form-' + $fieldset.index() + '-name"]').remove();
-        $fieldset.find('[name="form-' + $fieldset.index() + '-duration"]').remove();
-        $fieldset.find('[name="form-' + $fieldset.index() + '-resource"]').remove();
-        $fieldset.append($('<input type="hidden" name="form-' + $fieldset.index() + '-DELETE" value="on">'));
-        $fieldset.attr('hidden', true);
+        var fieldset = this.closest('fieldset');
+        var index = Array.prototype.indexOf.call(fieldset.parentElement.children, fieldset);
+
+        fieldset.querySelector('[name="form-' + index + '-name"]').remove();
+        fieldset.querySelector('[name="form-' + index + '-duration"]').remove();
+        fieldset.querySelector('[name="form-' + index + '-resource"]').remove();
+
+        var hidden = document.createElement('input');
+        hidden.type = 'hidden';
+        hidden.name = 'form-' + index + '-DELETE';
+        hidden.value = 'on';
+        fieldset.appendChild(hidden);
+
+        fieldset.hidden = true;
     });
 })();
diff --git a/castellum/subjects/static/js/consent.js b/castellum/subjects/static/js/consent.js
index 0c582e4b5..22be1c1c2 100644
--- a/castellum/subjects/static/js/consent.js
+++ b/castellum/subjects/static/js/consent.js
@@ -1,47 +1,46 @@
 (function() {
-    var $consentHidden = $('#id_consent_status_hidden');
-    var $consentCheckbox = $('#id_consent_status');
-    var $consentConfirm = $('[data-js="consent-confirm"]');
+    var consentHidden = document.getElementById('id_consent_status_hidden');
+    var consentCheckbox = document.getElementById('id_consent_status');
+    var consentConfirm = document.querySelector('[data-js="consent-confirm"]');
 
     var setConsent = function(value) {
         if (value === 'waiting') {
-            $consentCheckbox.prop('indeterminate', true);
-            $consentCheckbox.prop('checked', false);
-            $consentConfirm.prop('hidden', false);
+            consentCheckbox.indeterminate = true;
+            consentCheckbox.checked = false;
+            consentConfirm.hidden = false;
         } else if (value === 'confirmed') {
-            $consentCheckbox.prop('indeterminate', false);
-            $consentCheckbox.prop('checked', true);
-            $consentConfirm.prop('hidden', true);
+            consentCheckbox.indeterminate = false;
+            consentCheckbox.checked = true;
+            consentConfirm.hidden = true;
         } else {
-            $consentCheckbox.prop('indeterminate', false);
-            $consentCheckbox.prop('checked', false);
-            $consentConfirm.prop('hidden', true);
+            consentCheckbox.indeterminate = false;
+            consentCheckbox.checked = false;
+            consentConfirm.hidden = true;
         }
-        if (value !== $consentHidden.val()) {
-            $consentHidden.val(value);
-            $consentHidden.trigger('change');
+        if (value !== consentHidden.value) {
+            consentHidden.value = value;
+            $$.trigger(consentHidden, 'change');
         }
     };
 
-    $consentCheckbox.on('change', function() {
-        setConsent($consentHidden.val() ? '' : 'waiting');
+    $$.on(document, 'change', '#id_consent_status', function() {
+        setConsent(consentHidden.value ? '' : 'waiting');
     });
-    $consentConfirm.on('click', 'button', function() {
+    $$.on(document, 'click', '[data-js="consent-confirm"] button', function() {
         setConsent('confirmed');
     });
-    setConsent($consentHidden.val());
+    setConsent(consentHidden.value);
 
 
-    var $toBeDeleted = $('#id_to_be_deleted');
-    var oldConsentValue = $consentHidden.val();
-    $toBeDeleted.on('change', function() {
-        if ($toBeDeleted.prop('checked')) {
-            oldConsentValue = $consentHidden.val();
+    var oldConsentValue = consentHidden.value;
+    $$.on(document, 'change', '#id_to_be_deleted', function() {
+        if (this.checked) {
+            oldConsentValue = consentHidden.value;
             setConsent('');
-            $consentCheckbox.prop('disabled', true);
+            consentCheckbox.disabled = true;
         } else {
             setConsent(oldConsentValue);
-            $consentCheckbox.prop('disabled', false);
+            consentCheckbox.disabled = false;
         }
     });
 })();
diff --git a/castellum/subjects/static/js/notes.js b/castellum/subjects/static/js/notes.js
index 85d0d83d0..7d554480e 100644
--- a/castellum/subjects/static/js/notes.js
+++ b/castellum/subjects/static/js/notes.js
@@ -1,17 +1,18 @@
 (function() {
-    var $totalForms = $('#id_form-TOTAL_FORMS');
-    var $notes_container = $('#notes-container');
+    var totalForms = document.getElementById('id_form-TOTAL_FORMS');
+    var notesContainer = document.getElementById('notes-container');
 
     $$.on(document, 'click', '[data-js="note-add"]', function() {
-        var $template = $('#note-data-template');
-        var html = $template.html().replace(/{prefix}/g, 'form-' + $totalForms.val());
-        var $fieldset = $(html);
-        $notes_container.append($fieldset);
-        $totalForms.val(parseInt($totalForms.val(), 10) + 1);
+        var template = document.getElementById('note-data-template');
+        var wrapper = document.createElement('div');
+        wrapper.innerHTML = template.innerHTML.replace(/{prefix}/g, 'form-' + totalForms.value);
+        notesContainer.append(wrapper.children[0]);
+        totalForms.value = parseInt(totalForms.value, 10) + 1;
+        $$.trigger(totalForms, 'change');
     });
 
     $$.on(document, 'click', '[data-js="note-delete"]', function() {
-        var $delete = $('#' + this.id.slice(0, -6));
-        $delete.val(this.checked ? '' : 'on');
+        var target = document.getElementById(this.id.slice(0, -6));
+        target.value = this.checked ? '' : 'on';
     });
 })();
-- 
GitLab


From 1f676dbcafa12d5b3e4cbd4f065409ad1f82d4f3 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <bengfort@mpib-berlin.mpg.de>
Date: Tue, 23 Jun 2020 17:38:04 +0200
Subject: [PATCH 6/7] adapt eslint config

---
 .eslintrc.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 75d7c09a5..6f55cdb57 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
     "extends": "eslint:recommended",
     "globals": {
         "$": "readonly",
+        "$$": "readonly",
         "django": "readonly",
         "FullCalendar": "readonly"
     }
-- 
GitLab


From da249e94179331ce706530dd8a9f86409faf9d75 Mon Sep 17 00:00:00 2001
From: Tobias Bengfort <bengfort@mpib-berlin.mpg.de>
Date: Mon, 6 Jul 2020 12:22:01 +0200
Subject: [PATCH 7/7] fixup

---
 castellum/recruitment/static/js/contact.js    | 4 +++-
 castellum/static/js/utils.js                  | 8 ++++----
 castellum/studies/static/js/study_sessions.js | 5 ++++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/castellum/recruitment/static/js/contact.js b/castellum/recruitment/static/js/contact.js
index 3d713c74f..878f4d4a2 100644
--- a/castellum/recruitment/static/js/contact.js
+++ b/castellum/recruitment/static/js/contact.js
@@ -24,7 +24,9 @@
             var checked = document.querySelector('[name="exclusion_criteria_checked"]');
             var needsCheck = checked && !checked.checked;
             invited.disabled = needsCheck;
-            alert.hidden = !needsCheck;
+            if (alert) {
+                alert.hidden = !needsCheck;
+            }
         };
 
         $$.on(document, 'change', '[name="exclusion_criteria_checked"]', setInvitedDisabled);
diff --git a/castellum/static/js/utils.js b/castellum/static/js/utils.js
index ff8390e3a..098b19717 100644
--- a/castellum/static/js/utils.js
+++ b/castellum/static/js/utils.js
@@ -45,16 +45,16 @@
     });
 
     $$.on(document, 'click', '[data-multi-reset]', function() {
-        var targetId = this.dataset.multiReset;
-        var target = document.getElementById(targetId);
+        var targetSelector = this.dataset.multiReset;
+        var target = document.querySelector(targetSelector);
         target.querySelectorAll('option').forEach(function(element) {
             element.selected = false;
         });
     });
 
     $$.on(document, 'click', '[data-clipboard]', function() {
-        var targetId = this.dataset.clipboard;
-        var target = document.getElementById(targetId);
+        var targetSelector = this.dataset.clipboard;
+        var target = document.querySelector(targetSelector);
         if (navigator.clipboard) {
             navigator.clipboard.writeText(target.value);
         } else {
diff --git a/castellum/studies/static/js/study_sessions.js b/castellum/studies/static/js/study_sessions.js
index 3a501ff65..a739b6366 100644
--- a/castellum/studies/static/js/study_sessions.js
+++ b/castellum/studies/static/js/study_sessions.js
@@ -16,7 +16,10 @@
 
         fieldset.querySelector('[name="form-' + index + '-name"]').remove();
         fieldset.querySelector('[name="form-' + index + '-duration"]').remove();
-        fieldset.querySelector('[name="form-' + index + '-resource"]').remove();
+        var resourceInput = fieldset.querySelector('[name="form-' + index + '-resource"]');
+        if (resourceInput) {
+            resourceInput.remove();
+        }
 
         var hidden = document.createElement('input');
         hidden.type = 'hidden';
-- 
GitLab