refactor: Move Sprocket JS files to Webpack (Part 2)

Code editor modules are moved and modularized for later removal from
global scope.

Relates to #3021

Author: arkirchner

app/assets/javascripts/application.js

@@ -21,12 +21,8 @@
 //= require base
 // 2. Programming groups are required by "channels/synchronized_editor_channel.js"
 //= require programming_groups
-// 3. The turtle library is required by "editor/turtle.js"
-//= require turtle
-// 4. Some channels are required by "editor/editor.js.erb"
+// 3. Some channels are required by "editor/editor.js.erb"
 //= require_tree ./channels
-// 5. Require the editor components, as needed by "./editor.js" and "./community_solution.js"
-//= require_tree ./editor
 //
 // All remaining assets are loaded in alphabetical order
 //= require_tree .

app/assets/javascripts/editor/ajax.js …ipt/sprocket-asset-import/editor/ajax.jsapp/assets/javascripts/editor/ajax.js renamed to app/javascript/sprocket-asset-import/editor/ajax.js app/assets/javascripts/editor/ajax.js renamed to app/javascript/sprocket-asset-import/editor/ajax.js

@@ -1,4 +1,4 @@
-CodeOceanEditorAJAX = {
+export default {
   ajax: function(options) {
     return $.ajax(_.extend({
       dataType: 'json',

app/assets/javascripts/editor/editor.js …t/sprocket-asset-import/editor/editor.jsapp/assets/javascripts/editor/editor.js renamed to app/javascript/sprocket-asset-import/editor/editor.js app/assets/javascripts/editor/editor.js renamed to app/javascript/sprocket-asset-import/editor/editor.js

@@ -1,4 +1,6 @@
-var CodeOceanEditor = {
+import { CodeOceanEditorTips }  from './participantsupport';
+
+const CodeOceanEditor = {
     THEME: window.getCurrentTheme() === 'dark' ? 'ace/theme/tomorrow_night' : 'ace/theme/tomorrow',
 
     //Color-Encoding for Percentages in Progress Bars (For submissions)
@@ -28,8 +30,8 @@ var CodeOceanEditor = {
     lastCopyText: null,
 
     sendEvents: null,
-    eventURL: Routes.events_path(),
-    fileTypeURL: Routes.file_types_path(),
+    eventURL: Routes.events_path,
+    fileTypeURL: Routes.file_types_path,
 
     confirmDestroy: function (event) {
         event.preventDefault();
@@ -389,7 +391,7 @@ var CodeOceanEditor = {
     updateEditorModeToFileTypeID: function (editor, fileTypeID) {
         var newMode = 'ace/mode/text'
 
-        $.ajax(this.fileTypeURL + '/' + fileTypeID, {
+        $.ajax(this.fileTypeURL() + '/' + fileTypeID, {
             dataType: 'json'
         }).done(function (data) {
             if (data['editor_mode'] !== null) {
@@ -668,7 +670,7 @@ var CodeOceanEditor = {
 
     publishCodeOceanEvent: function (payload) {
         if (this.sendEvents) {
-            $.ajax(this.eventURL, {
+            $.ajax(this.eventURL(), {
                 type: 'POST',
                 cache: false,
                 dataType: 'JSON',
@@ -1170,3 +1172,5 @@ var CodeOceanEditor = {
         CodeOceanEditor.editors = [];
     }
 };
+
+export default CodeOceanEditor;

…/assets/javascripts/editor/evaluation.js …rocket-asset-import/editor/evaluation.jsapp/assets/javascripts/editor/evaluation.js renamed to app/javascript/sprocket-asset-import/editor/evaluation.js app/assets/javascripts/editor/evaluation.js renamed to app/javascript/sprocket-asset-import/editor/evaluation.js

@@ -1,4 +1,4 @@
-CodeOceanEditorEvaluation = {
+export default {
     // A list of non-printable characters that are not allowed in the code output.
     // Taken from https://stackoverflow.com/a/69024306
     nonPrintableRegEx: /[\u0000-\u0008\u000B\u000C\u000F-\u001F\u007F-\u009F\u2000-\u200F\u2028-\u202F\u205F-\u206F\u3000\uFEFF]/g,

…p/assets/javascripts/editor/execution.js …procket-asset-import/editor/execution.jsapp/assets/javascripts/editor/execution.js renamed to app/javascript/sprocket-asset-import/editor/execution.js app/assets/javascripts/editor/execution.js renamed to app/javascript/sprocket-asset-import/editor/execution.js

@@ -1,4 +1,6 @@
-CodeOceanEditorWebsocket = {
+import CommandSocket from './websocket'
+
+export default {
   websocket: null,
   // Replace `http` with `ws` for the WebSocket connection. This also works with `https` and `wss`.
   webSocketProtocol: window.location.protocol.replace(/^http/, 'ws').split(':')[0],

app/javascript/sprocket-asset-import/editor/index.js

@@ -0,0 +1,19 @@
+import CodeOceanEditorAJAX from './ajax';
+import CodeOceanEditor from './editor';
+import CodeOceanEditorEvaluation from './evaluation';
+import CodeOceanEditorWebsocket from './execution';
+import { CodeOceanEditorFlowr, CodeOceanEditorRequestForComments }  from './participantsupport';
+import CodeOceanEditorPrompt from './prompt';
+import CodeOceanEditorSubmissions from './submissions';
+import CodeOceanEditorTurtle from './turtle';
+
+// TODO: Import explicitly in Part 3 of the asset migration.
+window.CodeOceanEditorAJAX = CodeOceanEditorAJAX;
+window.CodeOceanEditor = CodeOceanEditor;
+window.CodeOceanEditorEvaluation = CodeOceanEditorEvaluation;
+window.CodeOceanEditorWebsocket = CodeOceanEditorWebsocket;
+window.CodeOceanEditorFlowr = CodeOceanEditorFlowr;
+window.CodeOceanEditorPrompt = CodeOceanEditorPrompt;
+window.CodeOceanEditorRequestForComments = CodeOceanEditorRequestForComments;
+window.CodeOceanEditorSubmissions = CodeOceanEditorSubmissions;
+window.CodeOceanEditorTurtle = CodeOceanEditorTurtle;

…javascripts/editor/participantsupport.js …sset-import/editor/participantsupport.jsapp/assets/javascripts/editor/participantsupport.js renamed to app/javascript/sprocket-asset-import/editor/participantsupport.js app/assets/javascripts/editor/participantsupport.js renamed to app/javascript/sprocket-asset-import/editor/participantsupport.js

@@ -1,4 +1,4 @@
-CodeOceanEditorFlowr = {
+export const CodeOceanEditorFlowr = {
   flowrResultHtml:
     '<div class="card mb-2">' +
       '<div id="{{headingId}}" role="tab" class="card-header">' +
@@ -111,7 +111,7 @@ CodeOceanEditorFlowr = {
   }
 };
 
-CodeOceanEditorRequestForComments = {
+export const CodeOceanEditorRequestForComments = {
   requestComments: function () {
     const cause = $('#requestComments');
     this.newSentryTransaction(cause, async () => {
@@ -172,7 +172,7 @@ CodeOceanEditorRequestForComments = {
   }
 };
 
-CodeOceanEditorTips = {
+export const CodeOceanEditorTips = {
     initializeEventHandlers: function() {
         const card_headers = $('#tips .card-collapse');
         for (let tip of card_headers) {

app/assets/javascripts/editor/prompt.js …t/sprocket-asset-import/editor/prompt.jsapp/assets/javascripts/editor/prompt.js renamed to app/javascript/sprocket-asset-import/editor/prompt.js app/assets/javascripts/editor/prompt.js renamed to app/javascript/sprocket-asset-import/editor/prompt.js

@@ -1,4 +1,4 @@
-CodeOceanEditorPrompt = {
+export default {
     prompt: '#prompt',
 
     showPrompt: function(msg) {
@@ -42,4 +42,4 @@ CodeOceanEditorPrompt = {
             this.submitPromptInput();
         }
     }
-};
+};

…assets/javascripts/editor/submissions.js …ocket-asset-import/editor/submissions.jsapp/assets/javascripts/editor/submissions.js renamed to app/javascript/sprocket-asset-import/editor/submissions.js app/assets/javascripts/editor/submissions.js renamed to app/javascript/sprocket-asset-import/editor/submissions.js

@@ -1,4 +1,4 @@
-CodeOceanEditorSubmissions = {
+export default {
   AUTOSAVE_INTERVAL: 15 * 1000,
   autosaveTimer: null,
   autosaveLabel: "#statusbar #autosave",

app/assets/javascripts/editor/turtle.js …t/sprocket-asset-import/editor/turtle.jsapp/assets/javascripts/editor/turtle.js renamed to app/javascript/sprocket-asset-import/editor/turtle.js app/assets/javascripts/editor/turtle.js renamed to app/javascript/sprocket-asset-import/editor/turtle.js

@@ -1,4 +1,6 @@
-CodeOceanEditorTurtle = {
+import Turtle from '../turtle';
+
+export default {
   turtlecanvas: null,
   turtlescreen: null,
   resetTurtle: true,