Replaced custom Element class methods with native versions

Changelog.md

@@ -51,6 +51,7 @@
 - Updated `pdfjs-dist` to v5.6.205 (#7942)
 - Switched SCSS files to use `@use` instead of `@import` to reduce bundle size (#7943)
 - Fixed flaky git-hooks tests (#7950)
+- Replaced custom `HTMLElement` class methods with native versions and removed `application.js` (#7951)
 
 ## [v2.9.6]
 

app/assets/javascripts/Annotations/image_annotation_manager.js

@@ -67,9 +67,9 @@ class ImageAnnotationManager extends AnnotationManager {
       if (holder === null) {
         holder = document.createElement("div");
         holder.id = "annotation_holder_" + annotation_id;
-        holder.addClass("annotation_holder");
+        holder.classList.add("annotation_holder");
         if (this.annotations[annotation_id].is_remark) {
-          holder.addClass("remark");
+          holder.classList.add("remark");
         }
         holder.onmousemove = this.check_for_annotations.bind(this);
         if (this.enable_annotations) {

app/assets/javascripts/Annotations/pdf_annotation_manager.js

@@ -53,7 +53,7 @@
 
       let $control = document.createElement("div");
       $control.id = "sel_box";
-      $control.addClass("annotation-holder-active");
+      $control.classList.add("annotation-holder-active");
       $control.style.display = "none";
 
       // append $control before the first annotation_holder but after the annotationLayer
@@ -219,9 +219,9 @@
 
       let $control = document.createElement("div");
       $control.id = "annotation_holder_" + annotation_id;
-      $control.addClass("annotation_holder");
+      $control.classList.add("annotation_holder");
       if (this.annotations[annotation_id].is_remark) {
-        $control.addClass("remark");
+        $control.classList.add("remark");
       }
       $control.style.top = (newCoords.y1 / COORDINATE_MULTIPLIER) * 100 + "%";
       $control.style.left = (newCoords.x1 / COORDINATE_MULTIPLIER) * 100 + "%";

app/assets/javascripts/Annotations/source_code_line.js

@@ -87,9 +87,9 @@ class SourceCodeLine {
           newGlowDepth = (parseInt(glowDepth, 10) + 1).toString();
         }
         parent.setAttribute("data-annotationDepth", newGlowDepth);
-        parent.addClass("source-code-glowing-" + newGlowDepth);
+        parent.classList.add("source-code-glowing-" + newGlowDepth);
         if (is_remark) {
-          parent.addClass("remark");
+          parent.classList.add("remark");
         }
         parent.addEventListener("mouseover", hoverOnFunction);
         parent.addEventListener("mouseout", hoverOffFunction);
@@ -131,7 +131,7 @@ class SourceCodeLine {
         startNode.textContent = startNode.textContent.substr(startNodeOffset);
 
         // Maintain events
-        if (startSpanPlain.hasClass("source-code-glowing-1")) {
+        if (startSpanPlain.classList.contains("source-code-glowing-1")) {
           startSpanPlain.addEventListener("mouseover", hoverOnFunction);
           startSpanPlain.addEventListener("mouseout", hoverOffFunction);
         }
@@ -196,9 +196,9 @@ class SourceCodeLine {
     }
     spanGlow.setAttribute("data-annotationDepth", newGlowDepth);
     spanGlow.setAttribute("data-annotationID" + annotationId, annotationId);
-    spanGlow.addClass("source-code-glowing-" + newGlowDepth);
+    spanGlow.classList.add("source-code-glowing-" + newGlowDepth);
     if (is_remark) {
-      spanGlow.addClass("remark");
+      spanGlow.classList.add("remark");
     }
     spanGlow.addEventListener("mouseover", hoverOnFunction);
     spanGlow.addEventListener("mouseout", hoverOffFunction);
@@ -233,7 +233,7 @@ class SourceCodeLine {
         let glowDepth = parseInt(parent.getAttribute("data-annotationDepth"), 10);
         parent.setAttribute("data-annotationDepth", (glowDepth - 1).toString());
 
-        parent.removeClass("source-code-glowing-" + glowDepth);
+        parent.classList.remove("source-code-glowing-" + glowDepth);
 
         // Remove mouse listeners if no longer glowing
         if (glowDepth === 1) {

app/javascript/Components/Result/image_viewer.jsx

@@ -188,10 +188,10 @@ export class ImageViewer extends React.PureComponent {
     let picture = document.getElementById("image_preview");
 
     if (this.state.rotation > 0) {
-      picture.addClass("rotate" + this.state.rotation.toString());
-      picture.removeClass("rotate" + (this.state.rotation - 90).toString());
+      picture.classList.add("rotate" + this.state.rotation.toString());
+      picture.classList.remove("rotate" + (this.state.rotation - 90).toString());
     } else {
-      picture.removeClass("rotate270");
+      picture.classList.remove("rotate270");
     }
   };
 

app/javascript/common/theme_colors.js

@@ -65,5 +65,5 @@ export function set_theme(theme) {
       document.documentElement.style.setProperty("--" + color, themes.light[color]);
     });
   }
-  document.body.addClass("color-" + theme);
+  document.body.classList.add("color-" + theme);
 }

app/views/layouts/assignment_content.html.erb

@@ -4,7 +4,6 @@
   <%= render partial: 'layouts/head' %>
   <title><%= t(:markus) + ' - ' + (content_for?(:html_title) ? yield(:html_title) : controller.action_name.titleize) %></title>
   <%= javascript_include_tag 'application_webpack', nonce: true %>
-  <%= javascript_include_tag 'application', nonce: true %>
   <% unless session[:auth_type] == 'remote' %>
     <%= javascript_include_tag 'check_timeout', nonce: true %>
   <% end %>

app/views/layouts/content.html.erb

@@ -4,7 +4,6 @@
   <%= render partial: 'layouts/head' %>
   <title><%= t(:markus) %> - <%= controller.action_name.titleize %></title>
   <%= javascript_include_tag 'application_webpack', nonce: true %>
-  <%= javascript_include_tag 'application', nonce: true %>
   <% unless session[:auth_type] == 'remote' %>
     <%= javascript_include_tag 'check_timeout', nonce: true %>
   <% end %>

app/views/layouts/no_menu_header.html.erb

@@ -4,7 +4,6 @@
   <%= render partial: 'layouts/head' %>
   <title><%= t(:markus) %> - <%= controller.action_name %></title>
   <%= javascript_include_tag 'application_webpack', nonce: true %>
-  <%= javascript_include_tag 'application', nonce: true %>
   <%= javascript_include_tag 'menu', nonce: true %>
   <% unless session[:auth_type] == 'remote' %>
     <%= javascript_include_tag 'check_timeout', nonce: true %>

app/views/layouts/result_content.erb

@@ -4,7 +4,6 @@
   <%= render partial: 'layouts/head' %>
   <title><%= t(:markus) %> - <%= controller.action_name.titleize %></title>
   <%= javascript_include_tag 'application_webpack', nonce: true %>
-  <%= javascript_include_tag 'application', nonce: true %>
   <% unless session[:auth_type] == 'remote' %>
     <%= javascript_include_tag 'check_timeout', nonce: true %>
   <% end %>