Refactor js behaviours helpers

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/javascripts/behaviors/details_behavior.coffee

 $ ->
   $("body").on "click", ".js-details-target", ->
     container = $(@).closest(".js-details-container")
-
     container.toggleClass("open")
+
+  # Show details content. Hides link after click.
+  #
+  # %div
+  #   %a.js-details-expand
+  #   %div.js-details-content
+  #
+  $("body").on "click", ".js-details-expand", (e) ->
+    $(@).next('.js-details-content').removeClass("hide")
+    $(@).hide()
+    e.preventDefault()

app/assets/javascripts/behaviors/toggler_behavior.coffee

 $ ->
   $("body").on "click", ".js-toggler-target", ->
     container = $(@).closest(".js-toggler-container")
-
     container.toggleClass("on")
 
-  $("body").on "click", ".js-toggle-visibility-link", (e) ->
+  # Toggle button. Show/hide content inside parent container.
+  # Button does not change visibility. If button has icon - it changes chevron style.
+  #
+  # %div.js-toggle-container
+  #   %a.js-toggle-button
+  #   %div.js-toggle-content
+  #
+  $("body").on "click", ".js-toggle-button", (e) ->
     $(@).find('i').
       toggleClass('icon-chevron-down').
       toggleClass('icon-chevron-up')
-    container = $(".js-toggle-visibility-container")
-    container.toggleClass("hide")
-    e.preventDefault()
-
-  $("body").on "click", ".js-toggle-button", (e) ->
     $(@).closest(".js-toggle-container").find(".js-toggle-content").toggle()
     e.preventDefault()

app/assets/javascripts/main.js.coffee

@@ -62,11 +62,6 @@ $ ->
   $('.remove-row').bind 'ajax:success', ->
     $(this).closest('li').fadeOut()
 
-  # Click a .appear-link, appear-data fadeout
-  $(".appear-link").on 'click', (e) ->
-    $('.appear-data').fadeIn()
-    e.preventDefault()
-
   # Initialize select2 selects
   $('select.select2').select2(width: 'resolve', dropdownAutoWidth: true)
 
@@ -121,10 +116,6 @@ $ ->
     $(@).next('table').show()
     $(@).remove()
 
-  $(".diff-content").on "click", ".js-details-expand", ->
-    $(@).next('.js-details-contain').removeClass("hide")
-    $(@).remove()
-
 (($) ->
   # Disable an element and add the 'disabled' Bootstrap class
   $.fn.extend disable: ->

app/assets/stylesheets/generic/common.scss

@@ -298,10 +298,6 @@ img.emoji {
   width: 20px;
 }
 
-.appear-data {
-  display: none;
-}
-
 .chart {
   overflow: hidden;
   height: 220px;

app/views/groups/members.html.haml

@@ -9,7 +9,7 @@
 
 %hr
 
-.clearfix
+.clearfix.js-toggle-container
   = form_tag members_group_path(@group), method: :get, class: 'form-inline member-search-form'  do
     .form-group
       = search_field_tag :search, params[:search], { placeholder: 'Find member by name', class: 'form-control search-text-input input-mn-300' }
@@ -17,11 +17,11 @@
 
   - if current_user && current_user.can?(:manage_group, @group)
     .pull-right
-      = link_to '#', class: 'btn btn-new js-toggle-visibility-link' do
+      = link_to '#', class: 'btn btn-new js-toggle-button' do
         Add members
         %i.icon-chevron-down
 
-    .js-toggle-visibility-container.hide.new-group-member-holder
+    .js-toggle-content.hide.new-group-member-holder
       = render "new_group_member"
 
 .ui-box.prepend-top-20

app/views/projects/commit/_commit_box.html.haml

@@ -47,7 +47,7 @@
       - if @branches.any?
         and in
         = link_to("#{pluralize(@branches.count, "other branch")}", "#", class: "js-details-expand")
-        %span.js-details-contain.hide
+        %span.js-details-content.hide
           = commit_branches_links(@project, @branches)
 
 .commit-box

app/views/projects/edit.html.haml

@@ -93,17 +93,18 @@
 
 
 
+    .danger-settings.js-toggle-container
       .centered-light-block
         %h3
           %i.icon-warning-sign
           Dangerous settings
 
         %p Project settings below may result in data loss!
-      = link_to '#', class: 'btn js-toggle-visibility-link' do
+        = link_to '#', class: 'btn js-toggle-button' do
           Show it to me
           %i.icon-chevron-down
 
-    .js-toggle-visibility-container.hide
+      .js-toggle-content.hide
         - if can? current_user, :archive_project, @project
           .ui-box.ui-box-danger
             .title

app/views/projects/merge_requests/show/_mr_accept.html.haml

@@ -15,12 +15,13 @@
             = link_to "click here", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
           for instructions.
 
-          %br
+
+        .js-toggle-container
+          %p
             If you want to modify merge commit message -
             %strong
-            = link_to "click here", "#", class: "modify-merge-commit-link js-toggle-visibility-link", title: "Modify merge commit message"
-
-        .js-toggle-visibility-container.hide
+              = link_to "click here", "#", class: "modify-merge-commit-link js-toggle-button", title: "Modify merge commit message"
+          .js-toggle-content.hide
             .form-group
               = label_tag :merge_commit_message, "Commit message", class: 'control-label'
               .col-sm-10

app/views/projects/new.html.haml

@@ -9,18 +9,6 @@
           %strong Project name
         .col-sm-10
           = f.text_field :name, placeholder: "Example Project", class: "form-control", tabindex: 1, autofocus: true
-          .help-inline
-            = link_to "#", class: 'js-toggle-visibility-link' do
-              %span Customize repository name?
-
-      .form-group.js-toggle-visibility-container.hide
-        = f.label :path, class: 'control-label' do
-          %span Repository name
-        .col-sm-10
-          .input-group
-            = f.text_field :path, class: 'form-control'
-            %span.input-group-addon .git
-
 
       - if current_user.can_select_namespace?
         .form-group
@@ -29,19 +17,39 @@
           .col-sm-10
             = f.select :namespace_id, namespaces_options(params[:namespace_id] || :current_user), {}, {class: 'select2', tabindex: 2}
 
+      %hr
+      .js-toggle-container
+        .form-group
+          .col-sm-2
+          .col-sm-10
+            = link_to "#", class: 'js-toggle-button' do
+              %span Customize repository name?
+        .js-toggle-content.hide
+          .form-group
+            = f.label :path, class: 'control-label' do
+              %span Repository name
+            .col-sm-10
+              .input-group
+                = f.text_field :path, class: 'form-control'
+                %span.input-group-addon .git
+
+      .js-toggle-container
         .form-group
           .col-sm-2
           .col-sm-10
-          = link_to "#", class: 'appear-link' do
+            = link_to "#", class: 'js-toggle-button' do
               %i.icon-upload-alt
               %span Import existing repository?
-      .form-group.appear-data.import-url-data
+        .js-toggle-content.hide
+          .form-group.import-url-data
             = f.label :import_url, class: 'control-label' do
               %span Import existing repo
             .col-sm-10
               = f.text_field :import_url, class: 'form-control', placeholder: 'https://github.com/randx/six.git'
               .light
                 URL must be cloneable
+      %hr
+
       .form-group
         = f.label :description, class: 'control-label' do
           Description