replace jquery code with plain javascript

Author: fkusei

pretalx_halfnarp/static/pretalx_halfnarp/frontend.js

@@ -1,65 +1,81 @@
-jQuery(function () {
-    const $submissions = $('.submissions');
-    configureCsrf($("[name=csrfmiddlewaretoken]").val());
+document.addEventListener('DOMContentLoaded', function () {
+    const submissionsContainers = document.querySelectorAll('.submissions');
 
-    $submissions.on('click', '.submission', function () {
-        $(this).toggleClass('preferred');
-    }).on('click', '.submission', deduplicate(savePreferredTalks));
+    const csrfInput = document.querySelector("[name=csrfmiddlewaretoken]");
+    const csrfToken = csrfInput ? csrfInput.value : '';
+
+    const saveHandler = deduplicate(savePreferredTalks);
+
+    submissionsContainers.forEach(container => {
+        container.addEventListener('click', function (e) {
+            const submissionEl = e.target.closest('.submission');
+
+            if (submissionEl && container.contains(submissionEl)) {
+                submissionEl.classList.toggle('preferred');
+                saveHandler();
+            }
+        });
+    });
 
     function savePreferredTalks() {
-        const preferredTalkIds = $submissions.find('.submission.preferred').map(function () {
-            return $(this).data('id')
-        }).get();
-        console.log('start save', 'preferredTalkIds=', preferredTalkIds)
+        const allSubmissions = document.querySelectorAll('.submissions .submission.preferred');
+
+        const preferredTalkIds = Array.from(allSubmissions).map(function (el) {
+            return parseInt(el.dataset.id, 10);
+        });
 
-        return jQuery.ajax(window.location.href + 'my-preferences/', {
+        console.log('start save', 'preferredTalkIds=', preferredTalkIds);
+
+        const cleanPath = window.location.pathname.replace(/\/?$/, '/');
+        const url = window.location.origin + cleanPath + 'my-preferences/';
+
+        return fetch(url, {
             method: 'POST',
-            dataType: 'json',
-            data: JSON.stringify({
+            headers: {
+                'Content-Type': 'application/json',
+                'X-CSRFToken': csrfToken
+            },
+            body: JSON.stringify({
                 preferred_submissions: preferredTalkIds
-            }),
-            contentType: 'application/json',
-        })
+            })
+        }).then(async response => {
+            if (!response.ok) {
+                const text = await response.text();
+                throw new Error(`Server returned ${response.status}: ${text}`);
+            }
+            return response.json();
+        });
     }
 
-})
+    function deduplicate(action) {
+        let actionInProgress = false;
+        let actionPending = false;
 
-function configureCsrf(csrfToken) {
-    const csrfSafeMethods = ['GET', 'HEAD', 'OPTIONS', 'TRACE'];
-
-    $.ajaxSetup({
-        beforeSend: function (xhr, settings) {
-            if (!csrfSafeMethods.includes(settings.type) && !this.crossDomain) {
-                xhr.setRequestHeader("X-CSRFToken", csrfToken);
+        return async function applyActionOrSetFlag() {
+            if (actionInProgress) {
+                console.log('action still running, setting pending flag');
+                actionPending = true;
+                return;
             }
-        }
-    });
-}
 
-function deduplicate(action) {
-    let actionInProgress = false, actionPending = false;
+            actionInProgress = true;
+            console.log('apply action');
 
-    return function applyActionOrSetFlag() {
-        if (actionInProgress) {
-            console.log('action still running, setting pending flag')
-            actionPending = true;
-            return;
-        }
+            try {
+                await action();
+                console.log('action done');
+                actionInProgress = false;
 
-        actionInProgress = true;
-        console.log('apply action')
-        action().then(function () {
-            console.log('action done')
-            actionInProgress = false;
-            if (actionPending) {
-                console.log('pending flag set, re-run action')
-                applyActionOrSetFlag();
+                if (actionPending) {
+                    console.log('pending flag set, re-run action');
+                    actionPending = false;
+                    applyActionOrSetFlag();
+                }
+            } catch (error) {
+                console.error('Save failed:', error);
                 actionPending = false;
+                actionInProgress = false;
             }
-        }).catch(function () {
-            console.log('action failed')
-            actionPending = false;
-            actionInProgress = false;
-        })
+        };
     }
-}
+});

pretalx_halfnarp/templates/pretalx_halfnarp/frontend.html

@@ -6,7 +6,6 @@
 
 {% block custom_header %}
     <link rel="stylesheet" type="text/css" href="{% static "pretalx_halfnarp/frontend.css" %}"/>
-    <script defer src="{% static "js/jquery.js" %}"></script>
     <script defer src="{% static "pretalx_halfnarp/frontend.js" %}"></script>
 {% endblock %}