Refactor web editor

4 files changed, 29 insertions, 83 deletions

diff --git a/app/views/projects/_blob_editor.html.haml b/app/views/projects/_blob_editor.html.haml
deleted file mode 100644
index 1fb74b55c41..00000000000
--- a/app/views/projects/_blob_editor.html.haml
+++ /dev/null
@@ -1,15 +0,0 @@
-.file-holder.file
-  .file-title
-    %i.icon-file
-    %span.file_name
-      %span.monospace.light #{ref}
-      - if local_assigns[:path]
-        = ': ' + local_assigns[:path]
-  .file-content.code
-    %pre.js-edit-mode-pane#editor
-      = params[:content] || local_assigns[:blob_data]
-    - if local_assigns[:path]
-      .js-edit-mode-pane#preview.hide
-        .center
-          %h2
-            %i.icon-spinner.icon-spin
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
new file mode 100644
index 00000000000..a0d9ea57b1c
--- /dev/null
+++ b/app/views/projects/blob/_editor.html.haml
@@ -0,0 +1,25 @@
+.file-holder.file
+  .file-title
+    .editor-ref
+      %i.fa.fa-code-fork
+      = ref
+    %span.editor-file-name
+      - if @path
+        %span.monospace
+          = @path
+
+      - if current_action?(:new) || current_action?(:create)
+        \/
+        = text_field_tag 'file_name', params[:file_name], placeholder: "sample.rb",
+          required: true, class: 'form-control new-file-name'
+        .pull-right
+          = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'form-control'
+
+  .file-content.code
+    %pre.js-edit-mode-pane#editor
+      = params[:content] || local_assigns[:blob_data]
+    - if local_assigns[:path]
+      .js-edit-mode-pane#preview.hide
+        .center
+          %h2
+            %i.icon-spinner.icon-spin
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index 883845c03f5..c0734d9f476 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -11,7 +11,7 @@
         = editing_preview_title(@blob.name)
 
   = form_tag(project_update_blob_path(@project, @id), method: :put, class: "form-horizontal") do
-    = render 'projects/blob_editor', ref: @ref, path: @path, blob_data: @blob.data
+    = render 'projects/blob/editor', ref: @ref, path: @path, blob_data: @blob.data
     = render 'shared/commit_message_container', params: params,
              placeholder: "Update #{@blob.name}"
     = hidden_field_tag 'last_commit', @last_commit
@@ -21,42 +21,4 @@
               cancel_path: @after_edit_path
 
 :javascript
-  ace.config.set("modePath", gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}/ace")
-  ace.config.loadModule("ace/ext/searchbox");
-  var ace_mode = "#{@blob.language.try(:ace_mode)}";
-  var editor = ace.edit("editor");
-  if (ace_mode) {
-    editor.getSession().setMode('ace/mode/' + ace_mode);
-  }
-
-  disableButtonIfEmptyField("#commit_message", ".js-commit-button");
-
-  $(".js-commit-button").click(function(){
-    $("#file-content").val(editor.getValue());
-    $(".file-editor form").submit();
-  });
-
-  var editModePanes = $('.js-edit-mode-pane'),
-      editModeLinks = $('.js-edit-mode a');
-
-  editModeLinks.click(function(event) {
-    event.preventDefault();
-
-    var currentLink = $(this),
-        paneId = currentLink.attr('href'),
-        currentPane = editModePanes.filter(paneId);
-
-    editModeLinks.parent().removeClass('active hover');
-    currentLink.parent().addClass('active hover');
-    editModePanes.hide();
-
-    if (paneId == '#preview') {
-      currentPane.fadeIn(200);
-      $.post(currentLink.data('preview-url'), { content: editor.getValue() }, function(response) {
-        currentPane.empty().append(response);
-      })
-    } else {
-      currentPane.fadeIn(200);
-      editor.focus()
-    }
-  })
+  new EditBlob(gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}", "#{@blob.language.try(:ace_mode)}")
diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml
index 57e830d5c56..70f52332cc7 100644
--- a/app/views/projects/blob/new.html.haml
+++ b/app/views/projects/blob/new.html.haml
@@ -1,25 +1,7 @@
 %h3.page-title New file
-%hr
 .file-editor
   = form_tag(project_create_blob_path(@project, @id), method: :post, class: 'form-horizontal form-new-file') do
-    .form-group.commit_message-group
-      = label_tag 'file_name', class: 'control-label' do
-        File name
-      .col-sm-10
-        .input-group
-          %span.input-group-addon
-            = @path[-1] == "/" ? @path : @path + "/"
-          = text_field_tag 'file_name', params[:file_name], placeholder: "sample.rb", required: true, class: 'form-control'
-          %span.input-group-addon
-            on
-            %span= @ref
-
-    .form-group.commit_message-group
-      = label_tag :encoding, class: "control-label" do
-        Encoding
-      .col-sm-10
-        = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'form-control'
-    = render 'projects/blob_editor', ref: @ref
+    = render 'projects/blob/editor', ref: @ref
     = render 'shared/commit_message_container', params: params,
              placeholder: 'Add new file'
     = hidden_field_tag 'content', '', id: 'file-content'
@@ -27,12 +9,4 @@
               cancel_path: project_tree_path(@project, @id)
 
 :javascript
-  ace.config.set("modePath", gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}/ace-src-noconflict")
-  var editor = ace.edit("editor");
-
-  disableButtonIfAnyEmptyField($('.form-new-file'), '.form-control', '.btn-create')
-
-  $(".js-commit-button").click(function(){
-    $("#file-content").val(editor.getValue());
-    $(".file-editor form").submit();
-  });
+  new NewBlob(gon.relative_url_root + "#{Gitlab::Application.config.assets.prefix}", null)