diff --git a/app/assets/javascripts/editor.js.erb b/app/assets/javascripts/editor.js.erb index 0247841b..cff00332 100644 --- a/app/assets/javascripts/editor.js.erb +++ b/app/assets/javascripts/editor.js.erb @@ -1,15 +1,16 @@ $(function() { //Merge all editor components. OOP for the win. O rly. - //TODO CHange this. Otherwise it will fuck people up, + //TODO Change this. Otherwise it will fuck people up, //because it's really confusing if the variables and the code are //split over 6 files. - $.extend(CodeOceanEditor, CodeOceanEditorAJAX); - $.extend(CodeOceanEditor, CodeOceanEditorEvaluation); - $.extend(CodeOceanEditor, CodeOceanEditorFlowr); - $.extend(CodeOceanEditor, CodeOceanEditorSubmissions); - $.extend(CodeOceanEditor, CodeOceanEditorTurtle); - $.extend(CodeOceanEditor, CodeOceanEditorWebsocket); + $.extend(CodeOceanEditor, + CodeOceanEditorAJAX, + CodeOceanEditorEvaluation, + CodeOceanEditorFlowr, + CodeOceanEditorSubmissions, + CodeOceanEditorTurtle, + CodeOceanEditorWebsocket); if ($('#editor').isPresent() && CodeOceanEditor) { if (CodeOceanEditor.isBrowserSupported()) { diff --git a/app/assets/javascripts/editor/editor.js.erb b/app/assets/javascripts/editor/editor.js.erb index 62b40f51..825b1f88 100644 --- a/app/assets/javascripts/editor/editor.js.erb +++ b/app/assets/javascripts/editor/editor.js.erb @@ -51,7 +51,7 @@ var CodeOceanEditor = { configureEditors: function () { _.each(['modePath', 'themePath', 'workerPath'], function (attribute) { - this.ace.config.set(attribute, this.ACE_FILES_PATH); + ace.config.set(attribute, this.ACE_FILES_PATH); }.bind(this)); }, @@ -65,7 +65,7 @@ var CodeOceanEditor = { confirmReset: function (event) { event.preventDefault(); - if (confirm($(this).data('message-confirm'))) { + if (confirm($('#start-over').data('message-confirm'))) { this.resetCode(); } }, @@ -190,7 +190,7 @@ var CodeOceanEditor = { }, resetSaveTimer: function () { - this.clearTimeout(this.autosaveTimer); + clearTimeout(this.autosaveTimer); this.autosaveTimer = setTimeout(this.autosave, this.AUTOSAVE_INTERVAL); }, @@ -212,6 +212,7 @@ var CodeOceanEditor = { this.qa_api.executeCommand('syncEditor', [this.active_file, deltaObject]); }); } + var document = editor.getSession().getDocument(); // insert pre-existing code into editor. we have to use insertLines, otherwise the deltas are not properly added var file_id = $(element).data('file-id'); @@ -245,14 +246,14 @@ var CodeOceanEditor = { */ // editor itself - editor.on("paste", this.handlePasteEvent); - editor.on("copy", this.handleCopyEvent); + editor.on("paste", this.handlePasteEvent.bind(this)); + editor.on("copy", this.handleCopyEvent.bind(this)); // listener for autosave session.on("change", function (deltaObject) { this.resetSaveTimer(); }.bind(this)); - }); + }.bind(this)); }, initializeEventHandlers: function () { @@ -279,10 +280,10 @@ var CodeOceanEditor = { }, initializeFileTreeButtons: function () { - $('#create-file').on('click', this.showFileDialog); - $('#destroy-file').on('click', this.confirmDestroy); - $('#download').on('click', this.downloadCode); - $('#request-for-comments').on('click', this.requestComments); + $('#create-file').on('click', this.showFileDialog.bind(this)); + $('#destroy-file').on('click', this.confirmDestroy.bind(this)); + $('#download').on('click', this.downloadCode.bind(this)); + $('#request-for-comments').on('click', this.requestComments.bind(this)); }, initializeRegexes: function () { @@ -295,19 +296,18 @@ var CodeOceanEditor = { }, initializeWorkflowButtons: function () { - $('#start').on('click', this.showWorkspaceTab); - //$('#submit').on('click', confirmSubmission); - $('#submit').on('click', this.submitCode); + $('#start').on('click', this.showWorkspaceTab.bind(this)); + $('#submit').on('click', this.submitCode.bind(this)); }, initializeWorkspaceButtons: function () { - $('#assess').on('click', this.scoreCode); // todo - $('#dropdown-render, #render').on('click', this.renderCode); - $('#dropdown-run, #run').on('click', this.runCode); - $('#dropdown-stop, #stop').on('click', this.stopCode); // todo - $('#dropdown-test, #test').on('click', this.testCode); // todo - $('#save').on('click', this.saveCode); - $('#start-over').on('click', this.confirmReset); + $('#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)); + $('#start-over').on('click', this.confirmReset.bind(this)); }, initializeRequestForComments: function () { @@ -406,7 +406,7 @@ var CodeOceanEditor = { }, toggleButtonStates: function () { - $('#destroy-file').prop('disabled', active_frame.data('role') !== 'user_defined_file'); + $('#destroy-file').prop('disabled', this.active_frame.data('role') !== 'user_defined_file'); $('#dropdown-render').toggleClass('disabled', !this.isActiveFileRenderable()); $('#dropdown-run').toggleClass('disabled', !this.isActiveFileRunnable() || this.running); $('#dropdown-stop').toggleClass('disabled', !this.isActiveFileStoppable()); @@ -556,7 +556,7 @@ var CodeOceanEditor = { showFileDialog: function(event) { event.preventDefault(); - this.createSubmission(this, null, function(response) { + this.createSubmission('#create-file', null, function(response) { $('#code_ocean_file_context_id').val(response.id); $('#modal-file').modal('show'); }); diff --git a/app/assets/javascripts/editor/evaluation.js.erb b/app/assets/javascripts/editor/evaluation.js.erb index aa1933e4..8d877a77 100644 --- a/app/assets/javascripts/editor/evaluation.js.erb +++ b/app/assets/javascripts/editor/evaluation.js.erb @@ -1,27 +1,13 @@ CodeOceanEditorEvaluation = { chunkBuffer: [{streamedResponse: true}], - evaluateCode: function (url, streamed, callback) { - (streamed ? this.evaluateCodeWithStreamedResponse : this.evaluateCodeWithoutStreamedResponse)(url, callback); - }, - - evaluateCodeWithStreamedResponse: function (url, onmessageFunction) { + evaluateCode: function (url, onmessageFunction) { this.initWebsocketConnection(url, onmessageFunction); // TODO only init turtle when required this.initTurtle(); }, - evaluateCodeWithoutStreamedResponse: function (url, callback) { - var jqxhr = this.ajax({ - method: 'GET', - url: url - }); - jqxhr.always(this.hideSpinner); - jqxhr.done(callback); - jqxhr.fail(this.ajaxError); - }, - handleScoringResponse: function (websocket_event) { var results = JSON.parse(websocket_event.data); this.printScoringResults(results); @@ -83,7 +69,7 @@ CodeOceanEditorEvaluation = { _.each(response, function (result, index) { this.printOutput(result, false, index); this.printScoringResult(result, index); - }); + }.bind(this)); if (_.some(response, function (result) { return result.status === 'timeout'; @@ -119,26 +105,26 @@ CodeOceanEditorEvaluation = { else { $('.score').html(0 + '%'); } - this.renderProgressBar(score, maxium_score); + this.renderProgressBar(score, maximum_score); }, scoreCode: function (event) { event.preventDefault(); - runmode = this.SERVER_SEND_EVENT; - this.createSubmission(this, null, function (response) { - showSpinner($('#assess')); + this.runmode = this.SERVER_SEND_EVENT; + this.createSubmission('#assess', null, function (response) { + this.showSpinner($('#assess')); var url = response.score_url; - this.evaluateCode(url, true, this.handleScoringResponse); - }); + this.evaluateCode(url, this.handleScoringResponse.bind(this)); + }.bind(this)); }, stopCode: function (event) { event.preventDefault(); if ($('#stop').is(':visible')) { if (this.runmode == this.WEBSOCKET) { - killWebsocketAndContainer(); + this.killWebsocketAndContainer(); } else if (this.runmode == this.SERVER_SEND_EVENT) { - stopCodeServerSendEvent(event); + this.stopCodeServerSendEvent(event); } this.runmode = this.NONE; } @@ -207,11 +193,11 @@ CodeOceanEditorEvaluation = { initPrompt: function() { if ($('#run').isPresent()) { - $('#run').bind('click', this.hidePrompt); + $('#run').bind('click', this.hidePrompt.bind(this)); } if ($('#prompt').isPresent()) { - $('#prompt').on('keypress', this.handlePromptKeyPress); - $('#prompt-submit').on('click', this.submitPromptInput); + $('#prompt').on('keypress', this.handlePromptKeyPress.bind(this)); + $('#prompt-submit').on('click', this.submitPromptInput.bind(this)); } }, @@ -247,20 +233,6 @@ CodeOceanEditorEvaluation = { clearOutput: function() { $('#output pre').remove(); - }, - - printChunk: function(event) { - var output = JSON.parse(event.data); - if (output) { - this.printOutput(output, true, 0); - // send test response to QA - // we are expecting an array of outputs: - if (this.qa_api) { - this.chunkBuffer.push(output); - } - } else { - this.resetOutputTab(); - } - }, + } }; diff --git a/app/assets/javascripts/editor/flowr.js.erb b/app/assets/javascripts/editor/flowr.js.erb index 66b8fcda..57cc742b 100644 --- a/app/assets/javascripts/editor/flowr.js.erb +++ b/app/assets/javascripts/editor/flowr.js.erb @@ -54,7 +54,7 @@ CodeOceanEditorFlowr = { this.hideSpinner(); $.flash.success({text: $('#askForCommentsButton').data('message-success')}); }).error(this.ajaxError); - } + }; this.createSubmission($('.requestCommentsButton'), null, createRequestForComments); diff --git a/app/assets/javascripts/editor/submissions.js.erb b/app/assets/javascripts/editor/submissions.js.erb index eb1d3ab9..f2712f02 100644 --- a/app/assets/javascripts/editor/submissions.js.erb +++ b/app/assets/javascripts/editor/submissions.js.erb @@ -27,10 +27,10 @@ CodeOceanEditorSubmissions = { method: 'POST', url: $(initiator).data('url') || $('#editor').data('submissions-url') }); - jqxhr.always(this.hideSpinner); - jqxhr.done(this.createSubmissionCallback); - jqxhr.done(callback); - jqxhr.fail(this.ajaxError); + jqxhr.always(this.hideSpinner.bind(this)); + jqxhr.done(this.createSubmissionCallback.bind(this)); + jqxhr.done(callback.bind(this)); + jqxhr.fail(this.ajaxError.bind(this)); }, createSubmissionCallback: function(data){ @@ -76,7 +76,7 @@ CodeOceanEditorSubmissions = { downloadCode: function(event) { event.preventDefault(); - this.createSubmission(this, null,function(response) { + this.createSubmission('#download', null,function(response) { var url = response.download_url; // to download just a single file, use the following url @@ -98,14 +98,14 @@ CodeOceanEditorSubmissions = { return file.id === file_id; }); editor.setValue(file.content); - }); - }); + }.bind(this)); + }.bind(this)); }, renderCode: function(event) { event.preventDefault(); if ($('#render').is(':visible')) { - this.createSubmission(this, null, function (response) { + this.createSubmission('#render', null, function (response) { var url = response.render_url.replace(this.FILENAME_URL_PLACEHOLDER, this.active_file.filename); var pop_up_window = window.open(url); if (pop_up_window) { @@ -127,22 +127,21 @@ CodeOceanEditorSubmissions = { event.preventDefault(); if ($('#run').is(':visible')) { this.runmode = this.WEBSOCKET; - this.createSubmission(this, null, function(response) { - + this.createSubmission('#run', null, function(response) { //Run part starts here $('#stop').data('url', response.stop_url); this.running = true; this.showSpinner($('#run')); this.toggleButtonStates(); var url = response.run_url.replace(this.FILENAME_URL_PLACEHOLDER, this.active_file.filename); - this.evaluateCode(url, true, function(evt) { this.parseCanvasMessage(evt.data, true); }); - }); + this.evaluateCode(url, function(evt) { this.parseCanvasMessage(evt.data, true); }.bind(this)); + }.bind(this)); } }, saveCode: function(event) { event.preventDefault(); - this.createSubmission(this, null, function() { + this.createSubmission('#save', null, function() { $.flash.success({ text: $('#save').data('message-success') }); @@ -152,11 +151,11 @@ CodeOceanEditorSubmissions = { testCode: function(event) { event.preventDefault(); if ($('#test').is(':visible')) { - this.createSubmission(this, null, function(response) { + this.createSubmission('#test', null, function(response) { this.showSpinner($('#test')); var url = response.test_url.replace(this.FILENAME_URL_PLACEHOLDER, this.active_file.filename); - this.evaluateCode(url, true, this.handleTestResponse); - }); + this.evaluateCode(url, this.handleTestResponse.bind(this)); + }.bind(this)); } }, diff --git a/app/assets/javascripts/editor/websocket.js.erb b/app/assets/javascripts/editor/websocket.js.erb index 6024549b..ee6928d7 100644 --- a/app/assets/javascripts/editor/websocket.js.erb +++ b/app/assets/javascripts/editor/websocket.js.erb @@ -6,13 +6,13 @@ CodeOceanEditorWebsocket = { this.websocket = new WebSocket('<%= DockerClient.config['ws_client_protocol'] %>' + window.location.hostname + ':' + window.location.port + url); this.websocket.onopen = function (evt) { this.resetOutputTab(); - }; // todo show some kind of indicator for established connection + }.bind(this); // todo show some kind of indicator for established connection this.websocket.onclose = function (evt) { /* expected at some point */ - }; + }.bind(this); this.websocket.onmessage = onmessageFunction; this.websocket.onerror = function (evt) { this.showWebsocketError(); - }; + }.bind(this); this.websocket.flush = function () { this.send('\n'); }