From a97b56f36f7a9ce0dd53831faa976322a3729259 Mon Sep 17 00:00:00 2001
From: Sebastian Serth <Sebastian.Serth@hpi.de>
Date: Sun, 2 Apr 2023 18:15:24 +0200
Subject: [PATCH] Allow removing all event handles in JavaScript

This is useful to remove any handlers, e.g., when submitting an exercise. Hopefully, we will see less Javascript errors due to cumbersome behavior with these changes...

Also, I am cleaning up unused event handlers. The `showOutput` method doesn't seem to be used, we should observe this in the future.

Closes CODEOCEAN-KQ
---
 app/assets/javascripts/editor/editor.js.erb  | 44 ++++++++++++++++----
 app/assets/javascripts/editor/submissions.js |  4 +-
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/editor/editor.js.erb b/app/assets/javascripts/editor/editor.js.erb
index 5fe1c174..dfdd3927 100644
--- a/app/assets/javascripts/editor/editor.js.erb
+++ b/app/assets/javascripts/editor/editor.js.erb
@@ -373,6 +373,15 @@ var CodeOceanEditor = {
         this.initializeRequestForComments()
     },
 
+    teardownEventHandlers: function () {
+        $(document).unbind('click');
+        $(document).unbind('keydown');
+        this.teardownWorkspaceButtons();
+        this.teardownRequestForComments();
+        bootstrap.Modal.getInstance($('#comment-modal'))?.hide();
+        this.teardownFileTreeButtons();
+    },
+
     updateEditorModeToFileTypeID: function (editor, fileTypeID) {
         var newMode = 'ace/mode/text'
 
@@ -413,7 +422,13 @@ var CodeOceanEditor = {
         $('#destroy-file').on('click', this.confirmDestroy.bind(this));
         $('#destroy-file-collapsed').on('click', this.confirmDestroy.bind(this));
         $('#download').on('click', this.downloadCode.bind(this));
-        $('#request-for-comments').on('click', this.requestComments.bind(this));
+    },
+
+    teardownFileTreeButtons: function () {
+        $('#create-file').unbind('click');
+        $('#destroy-file').unbind('click');
+        $('#destroy-file-collapsed').unbind('click');
+        $('#download').unbind('click');
     },
 
     initializeSideBarCollapse: function () {
@@ -446,16 +461,23 @@ var CodeOceanEditor = {
     initializeWorkspaceButtons: function () {
         $('#submit').one('click', this.submitCode.bind(this));
         $('#assess').on('click', this.scoreCode.bind(this));
-        $('#dropdown-render, #render').on('click', this.renderCode.bind(this));
-        $('#dropdown-run, #run').on('click', this.runCode.bind(this));
-        $('#dropdown-stop, #stop').on('click', this.stopCode.bind(this));
-        $('#dropdown-test, #test').on('click', this.testCode.bind(this));
-        $('#save').on('click', this.saveCode.bind(this));
+        $('#render').on('click', this.renderCode.bind(this));
+        $('#run').on('click', this.runCode.bind(this));
+        $('#stop').on('click', this.stopCode.bind(this));
+        $('#test').on('click', this.testCode.bind(this));
         $('#start-over').on('click', this.confirmReset.bind(this));
-        $('#start-over-collapsed').on('click', this.confirmReset.bind(this));
         $('#start-over-active-file').on('click', this.confirmResetActiveFile.bind(this));
-        $('#start-over-active-file-collapsed').on('click', this.confirmResetActiveFile.bind(this));
+    },
 
+    teardownWorkspaceButtons: function () {
+        $('#submit').unbind('click');
+        $('#assess').unbind('click');
+        $('#render').unbind('click');
+        $('#run').unbind('click');
+        $('#stop').unbind('click');
+        $('#test').unbind('click');
+        $('#start-over').unbind('click');
+        $('#start-over-active-file').unbind('click');
     },
 
     initializeRequestForComments: function () {
@@ -483,6 +505,12 @@ var CodeOceanEditor = {
         }.bind(this), this.REQUEST_FOR_COMMENTS_DELAY);
     },
 
+    teardownRequestForComments: function () {
+        $('#requestComments').unbind('click');
+        $('#askForCommentsButton').unbind('click');
+        $('#closeAskForCommentsButton').unbind('click');
+    },
+
     isActiveFileRenderable: function () {
         if (this.active_frame.data() === undefined) {
             return false;
diff --git a/app/assets/javascripts/editor/submissions.js b/app/assets/javascripts/editor/submissions.js
index 19b92265..c225cee4 100644
--- a/app/assets/javascripts/editor/submissions.js
+++ b/app/assets/javascripts/editor/submissions.js
@@ -202,6 +202,7 @@ CodeOceanEditorSubmissions = {
 
   submitCode: function(event) {
     const button = $(event.target) || $('#submit');
+    this.teardownEventHandlers();
     this.createSubmission(button, null, function (response) {
       if (response.redirect) {
         this.autosaveIfChanged();
@@ -211,13 +212,12 @@ CodeOceanEditorSubmissions = {
         Turbolinks.visit(response.redirect);
       } else if (response.status === 'container_depleted') {
           this.showContainerDepletedMessage();
-          button.one('click', this.submitCode.bind(this));
       } else if (response.message) {
           $.flash.danger({
               text: response.message
           });
-          button.one('click', this.submitCode.bind(this));
       }
+      this.initializeEventHandlers();
     })
   },