troodle-expcontent/global.js

document.addEventListener("DOMContentLoaded", function () {
  // Function to load a script into the DOM
  function loadScript(url, integrity, crossorigin) {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = url;
      script.integrity = integrity;
      script.crossOrigin = crossorigin;
      script.onload = () => resolve(script);
      script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
      document.head.appendChild(script);
    });
  }

  // Function to get URL parameters
  function getUrlParameter(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
    var results = regex.exec(location.search);
    return results === null
      ? ""
      : decodeURIComponent(results[1].replace(/\+/g, " "));
  }

  // Check if the 'embed' parameter is set to '1'
  if (getUrlParameter("embed") === "1") {
    // Apply custom CSS to hide Moodle interface elements
    var style = document.createElement("style");
    style.innerHTML = `
            body.path-mod {
                #header, #footer, .breadcrumb, .navbar, .side-pre, .side-post, .drawer, .drawer-toggler, .footer-popover, .navigation {
                    display: none !important;
                }
                #region-main {
                    margin: 0;
                    padding: 0;
                }
            }
        `;
    document.head.appendChild(style);

    loadScript(
      "https://code.jquery.com/jquery-3.7.1.min.js",
      "sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=",
      "anonymous"
    )
      .then(() => {
        console.log("jQuery loaded successfully");
        // Load Bootstrap after jQuery is loaded
        return loadScript(
          "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js",
          "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz",
          "anonymous"
        );
      })
      .then(() => {
        console.log("Bootstrap loaded successfully");
        $(document).ready(function () {
          // Set required attribute on inputs associated with labels containing <i title="Required field">
          $('label:has(i[title="Required field"])').each(function () {
            var inputId = $(this).attr("for");
            $("#" + inputId).attr("required", "required");
          });

          // Hide the modal if the 'cancel' button is clicked
          $("[name=cancel]").click(function () {
            hideContent();
          });

          $("form").each(function () {
            var form = $(this);

            form.submit(function (event) {
              event.preventDefault(); // Prevent the default form submission

              // Check if the form is valid
              if (!form[0].checkValidity()) {
                form[0].reportValidity();
                return;
              }

              // Serialize the form data
              var formData = form.serialize();

              // Add the submit button's data to formData
              var submitButton = form.find(
                'input[type="submit"][name="savevalues"]'
              );
              if (submitButton.length) {
                formData +=
                  "&" +
                  encodeURIComponent(submitButton.attr("name")) +
                  "=" +
                  encodeURIComponent(submitButton.val());
              }

              console.log(formData);

              // Perform the AJAX request
              $.ajax({
                url: form.attr("action"), // Use the form's action attribute
                type: form.attr("method"), // Use the form's method attribute
                data: formData,
                success: function (response) {
                  // Call the nextContent function upon successful submission
                  window.top.nextContent();
                },
                error: function (xhr, status, error) {
                  // Handle any errors that occur during the AJAX request
                  console.error(
                    "Form submission failed: " + status + " - " + error
                  );
                },
              });
            });
          });
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }
});