Updated JavaScript

Added documentation.
Added new property for settings: credentials.

Author: aDramaQueen

bootstrap_modal_forms/static/js/bootstrap5.modal.forms.js

@@ -1,10 +1,15 @@
+'use strict';
 /*
 django-bootstrap-modal-forms
 version : 2.2.1
 Copyright (c) 2023 Marcel Rupp
 */
 
-// Open modal & load the form at formURL to the modalContent element
+/**
+ * Open modal & load the form as inner HTML from "formURL" to the "modalContent" element
+ *
+ * @param {Object} settings Configuration/Settings for associated modal
+ */
 const modalFormCallback = function (settings) {
     let modal = document.querySelector(settings.modalID);
     let content = modal.querySelector(settings.modalContent);
@@ -17,20 +22,31 @@ const modalFormCallback = function (settings) {
     }
 
     fetch(settings.formURL).then(res => {
+        // Get content from target URL
         return res.text();
     }).then(data => {
+        // Set content to inner HTML
         content.innerHTML = data;
     }).then(() => {
+        // Finally show the modal with new content
         modalInstance.show();
 
         let form = modal.querySelector(settings.modalForm);
         if (form) {
             form.action = settings.formURL;
-            addEventHandlers(modal, form, settings)
+            // Add handler for form validation
+            addEventHandlers(modal, form, settings);
         }
     });
 };
 
+/**
+ * Adds event handler for form validation cycle.
+ *
+ * @param {HTMLElement} modal The modal
+ * @param {HTMLElement} form The actual form, that should be evaluated by the server
+ * @param {Object} settings Configuration/Settings for associated modal
+ */
 const addEventHandlers = function (modal, form, settings) {
     form.addEventListener('submit', (event) => {
         if (settings.isDeleteForm === false) {
@@ -40,31 +56,41 @@ const addEventHandlers = function (modal, form, settings) {
         }
     });
 
-    modal.addEventListener('hidden.bs.modal', (event) => {
+    modal.addEventListener('hidden.bs.modal', () => {
         let content = modal.querySelector(settings.modalContent);
         while (content.lastChild) {
             content.removeChild(content.lastChild);
         }
     });
 };
 
-// Check if form.is_valid() & either show errors or submit it via callback
+/**
+ * Sends the form to the server & processes the result. If the form is valid the redirect from the
+ * form will be executed. If the form is invalid the errors are shown and no redirect will be executed.
+ *
+ * @param {Object} settings Configuration/Settings for associated modal
+ * @param {Function} callback Callback to break out of form validation cycle
+ */
 const isFormValid = function (settings, callback) {
     let modal = document.querySelector(settings.modalID);
     let form = modal.querySelector(settings.modalForm);
-    const headers = new Headers();
+    let headers = new Headers();
     headers.append('X-Requested-With', 'XMLHttpRequest');
 
     let btnSubmit = modal.querySelector('button[type="submit"]');
     btnSubmit.disabled = true;
+
     fetch(form.action, {
         headers: headers,
         method: form.method,
         body: new FormData(form),
+        credentials: settings.credentials,
     }).then(res => {
         return res.text();
     }).then(data => {
+        console.log(data)
         if (data.includes(settings.errorClass)) {
+            // Form is invalid, therefore set the returned form (with marked invalid fields) to new inner HTML
             modal.querySelector(settings.modalContent).innerHTML = data;
 
             form = modal.querySelector(settings.modalForm);
@@ -73,6 +99,7 @@ const isFormValid = function (settings, callback) {
                 return;
             }
 
+            // Start from the beginning
             form.action = settings.formURL;
             addEventHandlers(modal, form, settings)
         } else {
@@ -81,15 +108,19 @@ const isFormValid = function (settings, callback) {
     });
 };
 
-// Submit form callback function
+/**
+ * Submit form callback function
+ *
+ * @param {Object} settings Configuration/Settings for associated modal
+ */
 const submitForm = function (settings) {
     let modal = document.querySelector(settings.modalID);
     let form = modal.querySelector(settings.modalForm);
 
     if (!settings.asyncUpdate) {
         form.submit();
     } else {
-        let asyncSettingsValid = validateAsyncSettings(settings.asyncSettings);
+        const asyncSettingsValid = validateAsyncSettings(settings.asyncSettings);
         if (asyncSettingsValid) {
             let asyncSettings = settings.asyncSettings;
             // Serialize form data
@@ -155,9 +186,14 @@ const submitForm = function (settings) {
     }
 };
 
+/**
+ * Validates given settings/configuration for asynchronous calls.
+ *
+ * @param {Object} settings Configuration/Settings for associated modal
+ * @return {boolean} True if given configuration/settings is valid, false otherwise
+ */
 const validateAsyncSettings = function (settings) {
-    console.log(settings)
-    var missingSettings = [];
+    let missingSettings = [];
 
     if (!settings.successMessage) {
         missingSettings.push("successMessage");
@@ -179,15 +215,23 @@ const validateAsyncSettings = function (settings) {
         missingSettings.push("addModalFormFunction");
         console.error("django-bootstrap-modal-forms: 'addModalFormFunction' in asyncSettings is missing.");
     }
-
-    if (missingSettings.length > 0) {
-        return false;
-    }
-
-    return true;
+    return missingSettings.length < 1;
 };
 
-const modalForm = function(elem, options) {
+/**
+ * Adds click listener to given button. If button is clicked, associated
+ * modal makes a call to given URL("formURL") to load its inner HTML.
+ *
+ * credentials:
+ *      Prevent browser to share credentials (Cookies, Authorization headers & TLS client certificates for future
+ *      authentication) secrets with malicious 3rd parties. Defaults to "same-origin".
+ *      @see https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#sending_a_request_with_credentials_included
+ *
+ * @param {HTMLElement} trigger_btn Button that triggers the modal to open/close
+ * @param {Object} settings Configuration/Settings for this given modal
+ * @return {HTMLElement} The button with an event listener
+ */
+const modalForm = function (trigger_btn, settings) {
     // Default settings
     let defaults = {
         modalID: "#modal",
@@ -196,6 +240,7 @@ const modalForm = function(elem, options) {
         formURL: null,
         isDeleteForm: false,
         errorClass: "is-invalid",
+        credentials: 'same-origin', // Choices: omit, include, same-origin
         asyncUpdate: false,
         asyncSettings: {
             closeOnSubmit: false,
@@ -207,11 +252,11 @@ const modalForm = function(elem, options) {
         }
     };
 
-    let settings = {...defaults, ...options}
+    const replenished_settings = {...defaults, ...settings}
 
-    elem.addEventListener('click', () => {
-        modalFormCallback(settings);
+    trigger_btn.addEventListener('click', () => {
+        modalFormCallback(replenished_settings);
     })
 
-    return elem;
+    return trigger_btn;
 }