First import of gitignores

Add .gitignore dropdown when creating a new .gitignore file

Signed-off-by: Alfredo Sumaran <alfredo@gitlab.com>

4 files changed, 88 insertions, 3 deletions

diff --git a/app/assets/javascripts/api.js.coffee b/app/assets/javascripts/api.js.coffee
index dd1bbb37551..c654f8de208 100644
--- a/app/assets/javascripts/api.js.coffee
+++ b/app/assets/javascripts/api.js.coffee
@@ -6,6 +6,7 @@
   projects_path: "/api/:version/projects.json"
   labels_path: "/api/:version/projects/:id/labels"
   license_path: "/api/:version/licenses/:key"
+  gitignoretext_path: "/api/:version/gitignores/:key"
 
   group: (group_id, callback) ->
     url = Api.buildUrl(Api.group_path)
@@ -103,6 +104,12 @@
     ).done (license) ->
       callback(license)
 
+  gitIgnoreText: (key, callback) ->
+    url = Api.buildUrl(Api.gitignoretext_path).replace(':key', key)
+
+    $.get url, (gitignore) ->
+      callback(gitignore)
+
   buildUrl: (url) ->
     url = gon.relative_url_root + url if gon.relative_url_root?
     return url.replace(':version', gon.api_version)
diff --git a/app/assets/javascripts/blob/blob_gitignore_selector.js.coffee b/app/assets/javascripts/blob/blob_gitignore_selector.js.coffee
new file mode 100644
index 00000000000..b413f31da00
--- /dev/null
+++ b/app/assets/javascripts/blob/blob_gitignore_selector.js.coffee
@@ -0,0 +1,62 @@
+class @BlobGitIgnoreSelector
+  constructor: (opts) ->
+    {
+      @dropdown
+      @editor
+      @wrapper        = @dropdown.parents('.gitignore-selector')
+      @fileNameInput  = $('#file_name')
+      @data           = @dropdown.data('filenames')
+    } = opts
+
+    @dropdown.glDropdown(
+      data: @data,
+      filterable: true,
+      selectable: true,
+      search:
+        fields: ['text']
+      clicked: @onClick.bind(@)
+    )
+
+    @toggleGitIgnoreSelector()
+    @bindEvents()
+
+  bindEvents: ->
+    @fileNameInput
+      .on 'keyup blur', (e) =>
+        @toggleGitIgnoreSelector()
+
+  toggleGitIgnoreSelector: ->
+    filename = @fileNameInput.val() or $('.editor-file-name').text().trim()
+    @wrapper.toggleClass 'hidden', filename isnt '.gitignore'
+
+  onClick: (item) ->
+    @requestIgnoreFile(item.text)
+
+  requestIgnoreFile: (name) ->
+    Api.gitIgnoreText name, @requestIgnoreFileSuccess.bind(@)
+
+  requestIgnoreFileSuccess: (gitignore) ->
+    @editor.setValue(gitignore.content, -1)
+
+    # Move cursor position to end of file
+    row = @editor.session.getLength() - 1
+    column = @editor.session.getLine(row).length
+    @editor.gotoLine(row + 1, column)
+    @editor.focus()
+
+class @BlobGitIgnoreSelectors
+  constructor: (opts) ->
+    _this = @
+
+    {
+      @dropdowns = $('.js-gitignore-selector')
+      @editor
+    } = opts
+
+    @dropdowns.each ->
+      $dropdown = $(@)
+
+      new BlobGitIgnoreSelector(
+        dropdown: $dropdown,
+        editor: _this.editor
+      )
diff --git a/app/assets/javascripts/blob/edit_blob.js.coffee b/app/assets/javascripts/blob/edit_blob.js.coffee
index eea9aa972ee..f2efeb3960a 100644
--- a/app/assets/javascripts/blob/edit_blob.js.coffee
+++ b/app/assets/javascripts/blob/edit_blob.js.coffee
@@ -13,6 +13,7 @@ class @EditBlob
 
     @initModePanesAndLinks()
     new BlobLicenseSelector(@editor)
+    new BlobGitIgnoreSelectors(editor: @editor)
 
   initModePanesAndLinks: ->
     @$editModePanes = $(".js-edit-mode-pane")
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 8981f070a20..3030da4e6b2 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -23,7 +23,7 @@
   .file-title {
     @extend .monospace;
 
-    line-height: 42px;
+    line-height: 35px;
     padding-top: 7px;
     padding-bottom: 7px;
 
@@ -43,7 +43,7 @@
 
   .editor-file-name {
     @extend .monospace;
-    
+
     float: left;
     margin-right: 10px;
   }
@@ -59,7 +59,22 @@
   }
 
   .encoding-selector,
-  .license-selector {
+  .license-selector,
+  .gitignore-selector {
     display: inline-block;
+    vertical-align: top;
+    font-family: $regular_font;
+  }
+
+  .gitignore-selector {
+
+    .dropdown {
+      line-height: 21px;
+    }
+
+    .dropdown-menu-toggle{
+      vertical-align: top;
+      width: 220px;
+    }
   }
 }