Replace jQuery document load event handler with javascript native ver…

…sion (#6630) --------- Co-authored-by: David Liu <[email protected]>
MarkUsProject · Jul 12, 2023 · 0ba549f · 0ba549f
1 parent b9311ba
commit 0ba549f
Show file tree

Hide file tree

Showing 45 changed files with 522 additions and 410 deletions.
diff --git a/app/assets/javascripts/Components/groups_manager.jsx b/app/assets/javascripts/Components/groups_manager.jsx
@@ -25,18 +25,24 @@ class GroupsManager extends React.Component {
   componentDidMount() {
     this.fetchData();
     // TODO: Remove reliance on global modal
-    $(document).ready(() => {
-      $("#create_group_dialog form").on("ajax:success", () => {
-        modalCreate.close();
-        this.fetchData();
-      });
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", this.componentDidMountCB);
+    } else {
+      this.componentDidMountCB();
+    }
+  }
 
-      $("#rename_group_dialog form").on("ajax:success", () => {
-        modal_rename.close();
-        this.fetchData();
-      });
+  componentDidMountCB = () => {
+    $("#create_group_dialog form").on("ajax:success", () => {
+      modalCreate.close();
+      this.fetchData();
     });
-  }
+
+    $("#rename_group_dialog form").on("ajax:success", () => {
+      modal_rename.close();
+      this.fetchData();
+    });
+  };
 
   fetchData = () => {
     fetch(Routes.course_assignment_groups_path(this.props.course_id, this.props.assignment_id), {
@@ -89,14 +95,21 @@ class GroupsManager extends React.Component {
     } else {
       modalCreate.open();
       $("#new_group_name").val("");
-      $(function () {
-        $("#modal-create-close").click(function () {
-          modalCreate.close();
-        });
-      });
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", this.createGroupCB);
+      } else {
+        this.createGroupCB();
+      }
     }
   };
 
+  createGroupCB = () => {
+    $("#modal-create-close").click(function () {
+      modalCreate.close();
+    });
+  };
+
   createAllGroups = () => {
     $.get({
       url: Routes.create_groups_when_students_work_alone_course_assignment_groups_path(

diff --git a/app/assets/javascripts/Grader/marking.js b/app/assets/javascripts/Grader/marking.js
@@ -1,21 +1,29 @@
-$(document).ready(function () {
-  // Handle indenting in the new annotation textarea (2 spaces)
-  $("#new_annotation_content").keydown(function (e) {
-    var keyCode = e.keyCode || e.which;
+(function () {
+  const domContentLoadedCB = function () {
+    // Handle indenting in the new annotation textarea (2 spaces)
+    $("#new_annotation_content").keydown(function (e) {
+      var keyCode = e.keyCode || e.which;
 
-    if (keyCode == 9) {
-      e.preventDefault();
-      var start = this.selectionStart;
-      var end = this.selectionEnd;
+      if (keyCode == 9) {
+        e.preventDefault();
+        var start = this.selectionStart;
+        var end = this.selectionEnd;
 
-      // Add the 2 spaces
-      this.value = this.value.substring(0, start) + "  " + this.value.substring(end);
+        // Add the 2 spaces
+        this.value = this.value.substring(0, start) + "  " + this.value.substring(end);
 
-      // Put caret in correct position
-      this.selectionStart = this.selectionEnd = start + 2;
-    }
-  });
-});
+        // Put caret in correct position
+        this.selectionStart = this.selectionEnd = start + 2;
+      }
+    });
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", domContentLoadedCB);
+  } else {
+    domContentLoadedCB();
+  }
+})();
 
 // designate $next_criteria as the currently selected criteria
 function activeCriterion($next_criteria) {

diff --git a/app/assets/javascripts/Grader/tabs_boot.js b/app/assets/javascripts/Grader/tabs_boot.js
diff --git a/app/assets/javascripts/Groups/index.js b/app/assets/javascripts/Groups/index.js
@@ -2,9 +2,17 @@ var modalCreate,
   modalNotesGroup,
   modalAssignmentGroupReUse = null;
 
-$(document).ready(function () {
-  window.modal_rename = new ModalMarkus("#rename_group_dialog");
-  modalCreate = new ModalMarkus("#create_group_dialog");
-  modalNotesGroup = new ModalMarkus("#notes_dialog");
-  modalAssignmentGroupReUse = new ModalMarkus("#assignment_group_use_dialog");
-});
+(function () {
+  const domContentLoadedCB = function () {
+    window.modal_rename = new ModalMarkus("#rename_group_dialog");
+    modalCreate = new ModalMarkus("#create_group_dialog");
+    modalNotesGroup = new ModalMarkus("#notes_dialog");
+    modalAssignmentGroupReUse = new ModalMarkus("#assignment_group_use_dialog");
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", domContentLoadedCB);
+  } else {
+    domContentLoadedCB();
+  }
+})();
diff --git a/app/assets/javascripts/MathJax/mathjax_helpers.js b/app/assets/javascripts/MathJax/mathjax_helpers.js
@@ -20,8 +20,16 @@ function updatePreview(source, destination) {
   }
 }
 
-$(document).ready(function () {
-  $(document).on("keyup", "#new_annotation_content", function () {
-    updatePreview("new_annotation_content", "annotation_preview");
-  });
-});
+(function () {
+  const domContentLoadedCB = function () {
+    $(document).on("keyup", "#new_annotation_content", function () {
+      updatePreview("new_annotation_content", "annotation_preview");
+    });
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", domContentLoadedCB);
+  } else {
+    domContentLoadedCB();
+  }
+})();
diff --git a/app/assets/javascripts/Students/edit.js b/app/assets/javascripts/Students/edit.js
@@ -1,3 +1,11 @@
-$(document).ready(function () {
-  window.modal_add_section = new ModalMarkus("#add_new_section_dialog");
-});
+(function () {
+  const domContentLoadedCB = function () {
+    window.modal_add_section = new ModalMarkus("#add_new_section_dialog");
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", domContentLoadedCB);
+  } else {
+    domContentLoadedCB();
+  }
+})();
diff --git a/app/assets/javascripts/Students/index.js b/app/assets/javascripts/Students/index.js
@@ -1,5 +1,13 @@
 var modalNotesGroup = null;
 
-$(document).ready(function () {
-  modalNotesGroup = new ModalMarkus("#notes_dialog");
-});
+(function () {
+  const domContentLoadedCB = function () {
+    modalNotesGroup = new ModalMarkus("#notes_dialog");
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", domContentLoadedCB);
+  } else {
+    domContentLoadedCB();
+  }
+})();
diff --git a/app/assets/javascripts/Students/new.js b/app/assets/javascripts/Students/new.js
@@ -1,3 +1,3 @@
-$(document).ready(function () {
+document.addEventListener("DOMContentLoaded", function () {
   window.modal_add_section = new ModalMarkus("#add_new_section_dialog");
 });
diff --git a/app/assets/javascripts/Tags/text_updater.js b/app/assets/javascripts/Tags/text_updater.js
@@ -1,17 +1,25 @@
-$(document).ready(function () {
-  var MAX_SIZE = 120;
-  var current_char = 0;
+(function () {
+  const domContentLoadedCB = function () {
+    var MAX_SIZE = 120;
+    var current_char = 0;
 
-  // Gets the area where the char count is.
-  var char_count = $("#descript_amount");
-  char_count.html(current_char + "/" + MAX_SIZE);
+    // Gets the area where the char count is.
+    var char_count = $("#descript_amount");
+    char_count.html(current_char + "/" + MAX_SIZE);
 
-  //Sets the max size on the text field.
-  $("#description").attr("maxlength", MAX_SIZE.toString());
+    //Sets the max size on the text field.
+    $("#description").attr("maxlength", MAX_SIZE.toString());
 
-  // Now, on key up, we update.
-  $("#description").keyup(function () {
-    current_char = $("#description").val().length;
-    char_count.html(current_char + "/" + MAX_SIZE);
-  });
-});
+    // Now, on key up, we update.
+    $("#description").keyup(function () {
+      current_char = $("#description").val().length;
+      char_count.html(current_char + "/" + MAX_SIZE);
+    });
+  };
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", domContentLoadedCB);
+  } else {
+    domContentLoadedCB();
+  }
+})();
diff --git a/app/assets/javascripts/chart_config.js b/app/assets/javascripts/chart_config.js
@@ -1,45 +1,49 @@
-// Requires Chart.js to have been loaded.
-$(document).ready(function () {
-  let bars = document.documentElement.style.getPropertyValue("--primary_one");
-  let ticksColor = document.documentElement.style.getPropertyValue("--line");
-  let labelColor = document.documentElement.style.getPropertyValue("--line");
-  let gridLineColor = document.documentElement.style.getPropertyValue("--gridline");
-
-  Chart.defaults.color = labelColor;
-  Chart.defaults.borderColor = bars;
-  Chart.defaults.backgroundColor = bars;
-  Chart.defaults.elements.bar.backgroundColor = bars;
-  Chart.defaults.elements.bar.borderColor = bars;
-
-  Chart.overrides.bar.scales.y = {
-    grid: {
-      color: gridLineColor,
-    },
-    beginAtZero: true,
-    ticks: {
-      color: ticksColor,
-    },
-  };
+(function () {
+  // Requires Chart.js to have been loaded.
+  const domContentLoadedCB = function () {
+    let bars = document.documentElement.style.getPropertyValue("--primary_one");
+    let ticksColor = document.documentElement.style.getPropertyValue("--line");
+    let labelColor = document.documentElement.style.getPropertyValue("--line");
+    let gridLineColor = document.documentElement.style.getPropertyValue("--gridline");
+
+    Chart.defaults.color = labelColor;
+    Chart.defaults.borderColor = bars;
+    Chart.defaults.backgroundColor = bars;
+    Chart.defaults.elements.bar.backgroundColor = bars;
+    Chart.defaults.elements.bar.borderColor = bars;
+
+    Chart.overrides.bar.scales.y = {
+      grid: {
+        color: gridLineColor,
+      },
+      beginAtZero: true,
+      ticks: {
+        color: ticksColor,
+      },
+    };
 
-  Chart.defaults.type = "bar";
+    Chart.defaults.type = "bar";
 
-  Chart.overrides.bar.scales.x = {
-    ticks: {
-      type: "linear",
-      color: ticksColor,
-    },
-    grid: {
-      color: gridLineColor,
+    Chart.overrides.bar.scales.x = {
+      ticks: {
+        type: "linear",
+        color: ticksColor,
+      },
+      grid: {
+        color: gridLineColor,
+        offset: true,
+      },
       offset: true,
-    },
-    offset: true,
-  };
+    };
+
+    Chart.defaults.plugins.legend.display = false;
+    Chart.defaults.plugins.legend.labels.fontColor = labelColor;
 
-  Chart.defaults.plugins.legend.display = false;
-  Chart.defaults.plugins.legend.labels.fontColor = labelColor;
+    Chart.defaults.datasets.bar.barPercentage = 0.9;
+    Chart.defaults.datasets.bar.categoryPercentage = 0.8;
 
-  Chart.defaults.datasets.bar.barPercentage = 0.9;
-  Chart.defaults.datasets.bar.categoryPercentage = 0.8;
+    Chart.defaults.animation.duration = 0;
+  };
 
-  Chart.defaults.animation.duration = 0;
-});
+  document.addEventListener("DOMContentLoaded", domContentLoadedCB);
+})();
diff --git a/app/assets/javascripts/check_timeout.js b/app/assets/javascripts/check_timeout.js
@@ -1,5 +1,9 @@
-$(document).ready(() => {
-  setInterval(() => {
-    $.get(Routes.check_timeout_main_index_path());
-  }, 120000);
-});
+(function () {
+  const domContentLoadedCB = () => {
+    setInterval(() => {
+      $.get(Routes.check_timeout_main_index_path());
+    }, 120000);
+  };
+
+  document.addEventListener("DOMContentLoaded", domContentLoadedCB);
+})();