Use custom lightweight editor and file-tree

app/assets/javascripts/submission_statistics.js

@@ -1,16 +1,62 @@
 $(function() {
 
+  var ACE_FILES_PATH = '/assets/ace/';
+  var THEME = 'ace/theme/textmate';
+
+  var active_file = undefined;
+
+  var showFirstFile = function() {
+    var frame = $('.frame[data-role="main_file"]').isPresent() ? $('.frame[data-role="main_file"]') : $('.frame').first();
+    var file_id = frame.find('.editor').data('file-id');
+    $('#files').jstree().select_node(file_id);
+    showFrame(frame);
+  };
+
+  var showFrame = function(frame) {
+    $('.frame').hide();
+    frame.show();
+  };
+
+  var initializeFileTree = function() {
+    $('#files').jstree($('#files').data('entries'));
+    $('#files').on('click', 'li.jstree-leaf', function() {
+      active_file = {
+        filename: $(this).text(),
+        id: parseInt($(this).attr('id'))
+      };
+      var frame = $('[data-file-id="' + active_file.id + '"]').parent();
+      showFrame(frame);
+    });
+  };
+
   if ($.isController('exercises') && $('#timeline').isPresent()) {
 
+    _.each(['modePath', 'themePath', 'workerPath'], function(attribute) {
+      ace.config.set(attribute, ACE_FILES_PATH);
+    });
+
     var editors = $('.editor');
     var slider = $('#slider>input');
     var submissions = $('#data').data('submissions');
     var files = $('#data').data('files');
 
-    editors.each(function(index, editor) {
+    editors.each(function(index, element) {
-      currentEditor = ace.edit(editor);
+      currentEditor = ace.edit(element);
+
+      var file_id = $(element).data('file-id');
+      var content = $('.editor-content[data-file-id=' + file_id + ']');
+
+      currentEditor.setShowPrintMargin(false);
+      currentEditor.setTheme(THEME);
       currentEditor.$blockScrolling = Infinity;
       currentEditor.setReadOnly(true);
+
+      var session = currentEditor.getSession();
+      session.setMode($(element).data('mode'));
+      session.setTabSize($(element).data('indent-size'));
+      session.setUseSoftTabs(true);
+      session.setUseWrapMode(true);
+      session.setValue(content.text());
     });
 
     slider.on('change', function(event) {
@@ -27,6 +73,8 @@ $(function() {
       });
     });
 
+    initializeFileTree();
+    showFirstFile();
   }
 
 });

app/views/exercises/external_users/statistics.html.slim

@@ -10,7 +10,7 @@ h1 = "#{@exercise} (external user #{@external_user})"
 
   .hidden#data data-submissions=ActiveSupport::JSON.encode(submissions) data-files=ActiveSupport::JSON.encode(all_files)
 
-  #editor.row
+  #stats-editor.row
     #files class=(@exercise.hide_file_tree ? 'hidden col-sm-3' : 'col-sm-3') data-entries=FileTree.new(initial_files).to_js_tree
     div id='frames' class=(@exercise.hide_file_tree ? 'col-sm-12' : 'col-sm-9')
       - initial_files.each do |file|