diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index d58279b98..ec5c173d5 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -13,28 +13,6 @@ //= require rails-timeago //= require locales/jquery.timeago.de.js // -// lib/assets -//= require flash -//= require color_mode_picker -// -// app/assets -// --> Include some assets first, as they are used by other assets. -// --> Hence, the order specified here is important. -// -// 1. Some common base functions and monkey patches -//= 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" -//= 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 . -// // Finally, we dispatch a custom event to signal that all assets are loaded. // This is used by our custom migration for Turbo to trigger the `turbo-migration:load` event const sprocketsLoad = new Event('sprockets:load'); diff --git a/lib/assets/stylesheets/flash.css.scss b/app/assets/stylesheets/flash.css.scss similarity index 100% rename from lib/assets/stylesheets/flash.css.scss rename to app/assets/stylesheets/flash.css.scss diff --git a/app/javascript/application.js b/app/javascript/application.js index daaf6b697..2ddc7bcfd 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -88,3 +88,11 @@ window.ace = ace; // Publish ace in global namespace // Turbo import '@hotwired/turbo-rails'; import './turbo-migration'; + +// ActionCable +import "@rails/actioncable" +import "./channels" + +// Import of Rails sprocket assets with minimal changes. After the initial migration these files should +// be moved to an appropriate place after some adjustments to fit modern Rails JS. +import 'sprocket_asset_import'; diff --git a/app/javascript/channels/consumer.js b/app/javascript/channels/consumer.js new file mode 100644 index 000000000..8ec3aad3a --- /dev/null +++ b/app/javascript/channels/consumer.js @@ -0,0 +1,6 @@ +// Action Cable provides the framework to deal with WebSockets in Rails. +// You can generate new channels where WebSocket features live using the `bin/rails generate channel` command. + +import { createConsumer } from "@rails/actioncable" + +export default createConsumer() diff --git a/app/javascript/channels/index.js b/app/javascript/channels/index.js new file mode 100644 index 000000000..7067ab4b7 --- /dev/null +++ b/app/javascript/channels/index.js @@ -0,0 +1,3 @@ +// Import all the channels to be used by Action Cable +const channels = require.context(".", true, /_channel\.js$/) +channels.keys().forEach(channels) diff --git a/app/assets/javascripts/channels/la_exercises.js b/app/javascript/channels/la_exercises_channel.js similarity index 99% rename from app/assets/javascripts/channels/la_exercises.js rename to app/javascript/channels/la_exercises_channel.js index ceef0135e..1aec29265 100644 --- a/app/assets/javascripts/channels/la_exercises.js +++ b/app/javascript/channels/la_exercises_channel.js @@ -1,3 +1,5 @@ +import consumer from "./consumer" + $(document).on('turbo-migration:load', function() { if ($.isController('exercises') && $('.teacher_dashboard').isPresent()) { @@ -18,7 +20,7 @@ $(document).on('turbo-migration:load', function() { const specific_channel = { channel: "LaExercisesChannel", exercise_id: exercise_id, study_group_id: study_group_id }; - App.la_exercise = App.cable.subscriptions.create(specific_channel, { + consumer.subscriptions.create(specific_channel, { connected: function () { // Called when the subscription is ready for use on the server }, diff --git a/app/assets/javascripts/channels/pg_matching_channel.js b/app/javascript/channels/pg_matching_channel.js similarity index 93% rename from app/assets/javascripts/channels/pg_matching_channel.js rename to app/javascript/channels/pg_matching_channel.js index 445cc5b59..d9900061b 100644 --- a/app/assets/javascripts/channels/pg_matching_channel.js +++ b/app/javascript/channels/pg_matching_channel.js @@ -1,3 +1,5 @@ +import consumer from "./consumer"; + $(document).on('turbo-migration:load', function () { if ($.isController('programming_groups') && window.location.pathname.includes('programming_groups/new')) { @@ -5,7 +7,7 @@ $(document).on('turbo-migration:load', function () { const exercise_id = matching_page.data('exercise-id'); const specific_channel = { channel: "PgMatchingChannel", exercise_id: exercise_id}; - App.pg_matching = App.cable.subscriptions.create(specific_channel, { + consumer.subscriptions.create(specific_channel, { connected() { // Called when the subscription is ready for use on the server }, diff --git a/app/assets/javascripts/channels/synchronized_editor_channel.js b/app/javascript/channels/synchronized_editor_channel.js similarity index 90% rename from app/assets/javascripts/channels/synchronized_editor_channel.js rename to app/javascript/channels/synchronized_editor_channel.js index 0a54c4fcc..974ac2a09 100644 --- a/app/assets/javascripts/channels/synchronized_editor_channel.js +++ b/app/javascript/channels/synchronized_editor_channel.js @@ -1,3 +1,7 @@ +import consumer from "./consumer" +import ProgrammingGroups from '../sprocket_asset_import/programming_groups'; +import CodeOceanEditor from '../sprocket_asset_import/editor/evaluation'; + $(document).on('turbo-migration:load', function () { if (window.location.pathname.includes('/implement')) { @@ -6,7 +10,7 @@ $(document).on('turbo-migration:load', function () { if ($.isController('exercises') && ProgrammingGroups.is_other_user(current_contributor)) { - App.synchronized_editor = App.cable.subscriptions.create({ + consumer.subscriptions.create({ channel: "SynchronizedEditorChannel", exercise_id: exercise_id }, { connected() { @@ -70,7 +74,7 @@ $(document).on('turbo-migration:load', function () { }, is_connected() { - return App.cable.subscriptions.findAll(App.synchronized_editor.identifier).length > 0 + return consumer.subscriptions.findAll(App.synchronized_editor.identifier).length > 0 }, disconnect() { diff --git a/app/assets/javascripts/base.js b/app/javascript/sprocket_asset_import/base.js similarity index 100% rename from app/assets/javascripts/base.js rename to app/javascript/sprocket_asset_import/base.js diff --git a/app/assets/javascripts/bootstrap-dropdown-submenu.js b/app/javascript/sprocket_asset_import/bootstrap-dropdown-submenu.js similarity index 100% rename from app/assets/javascripts/bootstrap-dropdown-submenu.js rename to app/javascript/sprocket_asset_import/bootstrap-dropdown-submenu.js diff --git a/app/assets/javascripts/codeharbor_link.js b/app/javascript/sprocket_asset_import/codeharbor_link.js similarity index 100% rename from app/assets/javascripts/codeharbor_link.js rename to app/javascript/sprocket_asset_import/codeharbor_link.js diff --git a/lib/assets/javascripts/color_mode_picker.js b/app/javascript/sprocket_asset_import/color_mode_picker.js similarity index 100% rename from lib/assets/javascripts/color_mode_picker.js rename to app/javascript/sprocket_asset_import/color_mode_picker.js diff --git a/app/assets/javascripts/community_solution.js b/app/javascript/sprocket_asset_import/community_solution.js similarity index 100% rename from app/assets/javascripts/community_solution.js rename to app/javascript/sprocket_asset_import/community_solution.js diff --git a/app/assets/javascripts/dashboard.js b/app/javascript/sprocket_asset_import/dashboard.js similarity index 100% rename from app/assets/javascripts/dashboard.js rename to app/javascript/sprocket_asset_import/dashboard.js diff --git a/app/assets/javascripts/editor.js b/app/javascript/sprocket_asset_import/editor.js similarity index 100% rename from app/assets/javascripts/editor.js rename to app/javascript/sprocket_asset_import/editor.js diff --git a/app/assets/javascripts/editor/ajax.js b/app/javascript/sprocket_asset_import/editor/ajax.js similarity index 93% rename from app/assets/javascripts/editor/ajax.js rename to app/javascript/sprocket_asset_import/editor/ajax.js index 127944f63..816018915 100644 --- a/app/assets/javascripts/editor/ajax.js +++ b/app/javascript/sprocket_asset_import/editor/ajax.js @@ -1,4 +1,4 @@ -CodeOceanEditorAJAX = { +window.CodeOceanEditorAJAX = { ajax: function(options) { return $.ajax(_.extend({ dataType: 'json', diff --git a/app/assets/javascripts/editor/editor.js b/app/javascript/sprocket_asset_import/editor/editor.js similarity index 99% rename from app/assets/javascripts/editor/editor.js rename to app/javascript/sprocket_asset_import/editor/editor.js index 5ee0937ec..2e7ee83b6 100644 --- a/app/assets/javascripts/editor/editor.js +++ b/app/javascript/sprocket_asset_import/editor/editor.js @@ -1,4 +1,4 @@ -var CodeOceanEditor = { +window.CodeOceanEditor = { THEME: window.getCurrentTheme() === 'dark' ? 'ace/theme/tomorrow_night' : 'ace/theme/tomorrow', //Color-Encoding for Percentages in Progress Bars (For submissions) @@ -28,8 +28,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 +389,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 +668,7 @@ var CodeOceanEditor = { publishCodeOceanEvent: function (payload) { if (this.sendEvents) { - $.ajax(this.eventURL, { + $.ajax(this.eventURL(), { type: 'POST', cache: false, dataType: 'JSON', diff --git a/app/assets/javascripts/editor/evaluation.js b/app/javascript/sprocket_asset_import/editor/evaluation.js similarity index 98% rename from app/assets/javascripts/editor/evaluation.js rename to app/javascript/sprocket_asset_import/editor/evaluation.js index a5ea6ef0e..a669c0264 100644 --- a/app/assets/javascripts/editor/evaluation.js +++ b/app/javascript/sprocket_asset_import/editor/evaluation.js @@ -1,4 +1,8 @@ -CodeOceanEditorEvaluation = { +<<<<<<< HEAD +window.CodeOceanEditorEvaluation = { +======= +const CodeOceanEditorEvaluation = { +>>>>>>> 787f0509 (refactor: Move Sprocket JS files to Webpack) // 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, @@ -295,3 +299,5 @@ CodeOceanEditorEvaluation = { } } }; + +export default CodeOceanEditor; diff --git a/app/assets/javascripts/editor/execution.js b/app/javascript/sprocket_asset_import/editor/execution.js similarity index 99% rename from app/assets/javascripts/editor/execution.js rename to app/javascript/sprocket_asset_import/editor/execution.js index d727c63cb..c6ceae212 100644 --- a/app/assets/javascripts/editor/execution.js +++ b/app/javascript/sprocket_asset_import/editor/execution.js @@ -1,4 +1,4 @@ -CodeOceanEditorWebsocket = { +window.CodeOceanEditorWebsocket = { 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], diff --git a/app/javascript/sprocket_asset_import/editor/index.js b/app/javascript/sprocket_asset_import/editor/index.js new file mode 100644 index 000000000..175f8eb2f --- /dev/null +++ b/app/javascript/sprocket_asset_import/editor/index.js @@ -0,0 +1,10 @@ +import './ajax'; +import './editor'; +import './evaluation'; +import './execution'; +import './participantsupport'; +import './prompt'; +import './submissions'; +import './turtle'; +import './websocket'; + diff --git a/app/assets/javascripts/editor/participantsupport.js b/app/javascript/sprocket_asset_import/editor/participantsupport.js similarity index 98% rename from app/assets/javascripts/editor/participantsupport.js rename to app/javascript/sprocket_asset_import/editor/participantsupport.js index bc78cc03e..bce8e999e 100644 --- a/app/assets/javascripts/editor/participantsupport.js +++ b/app/javascript/sprocket_asset_import/editor/participantsupport.js @@ -1,4 +1,4 @@ -CodeOceanEditorFlowr = { +window.CodeOceanEditorFlowr = { flowrResultHtml: '
' + '