Merge pull request #1415 from tsigo/chosen_behavior

Reduce the amount of JavaScript written in views

app/assets/javascripts/main.js.coffee

@@ -24,6 +24,9 @@ $ ->
   # Click a .one_click_select field, select the contents
   $(".one_click_select").live 'click', -> $(this).select()
 
+  # Initialize chosen selects
+  $('select.chosen').chosen()
+
   # Disable form buttons while a form is submitting
   $('body').on 'ajax:complete, ajax:beforeSend, submit', 'form', (e) ->
     buttons = $('[type="submit"]', this)

app/views/admin/projects/_form.html.haml

@@ -32,7 +32,7 @@
     - unless project.new_record?
       .clearfix
         = f.label :owner_id
-        .input= f.select :owner_id, User.all.map { |user| [user.name, user.id] }
+        .input= f.select :owner_id, User.all.map { |user| [user.name, user.id] }, {}, {class: 'chosen'}
 
       - if project.repo_exists?
         .clearfix
@@ -69,7 +69,6 @@
 
 :javascript
   $(function(){
-    $('#project_owner_id').chosen();
     new Projects();
   })
 

app/views/admin/projects/show.html.haml

@@ -71,25 +71,11 @@
         %th Project Access:
 
     %tr
-      %td= select_tag :user_ids, options_from_collection_for_select(@users , :id, :name),  multiple: true
-      %td= select_tag :project_access, options_for_select(Project.access_options), class: "project-access-select"
+      %td= select_tag :user_ids, options_from_collection_for_select(@users , :id, :name), multiple: true, data: {placeholder: 'Select users'}, class: 'chosen span5'
+      %td= select_tag :project_access, options_for_select(Project.access_options), {class: "project-access-select chosen span3"}
 
     %tr
       %td= submit_tag 'Add', class: "btn primary"
       %td
         Read more about project permissions
         %strong= link_to "here", help_permissions_path, class: "vlink"
-
-:css
-  form select {
-    width:150px;
-  }
-
-  #user_ids {
-    width:300px;
-  }
-
-:javascript
-  $('select#user_ids').chosen();
-  $('select#repo_access').chosen();
-  $('select#project_access').chosen();

app/views/admin/team_members/_form.html.haml

@@ -8,20 +8,9 @@
   .clearfix
     %label Project Access:
     .input
-      = f.select :project_access, options_for_select(Project.access_options, @admin_team_member.project_access), {}, class: "project-access-select"
+      = f.select :project_access, options_for_select(Project.access_options, @admin_team_member.project_access), {}, class: "project-access-select chosen span3"
 
   %br
   .actions
     = f.submit 'Save', class: "btn primary"
     = link_to 'Cancel', :back, class: "btn"
-
-:css
-  form select {
-    width:300px;
-  }
-
-:javascript
-  $('select#team_member_user_id').chosen();
-  $('select#team_member_project_id').chosen();
-  $('select#team_member_repo_access').chosen();
-  $('select#team_member_project_access').chosen();

app/views/admin/users/show.html.haml

@@ -68,8 +68,8 @@
         %th Project Access:
 
     %tr
-      %td= select_tag :project_ids, options_from_collection_for_select(@projects , :id, :name),  multiple: true
-      %td= select_tag :project_access, options_for_select(Project.access_options), class: "project-access-select"
+      %td= select_tag :project_ids, options_from_collection_for_select(@projects , :id, :name),  multiple: true, data: {placeholder: 'Select projects'}, class: 'chosen span5'
+      %td= select_tag :project_access, options_for_select(Project.access_options), class: "project-access-select chosen span3"
 
     %tr
       %td= submit_tag 'Add', class: "btn primary"
@@ -97,17 +97,3 @@
         %td= select_tag :tm_project_access, options_for_select(Project.access_options, tm.project_access), class: "medium project-access-select", disabled: :disabled
         %td= link_to 'Edit Access', edit_admin_team_member_path(tm), class: "btn small"
         %td= link_to 'Remove from team', admin_team_member_path(tm), confirm: 'Are you sure?', method: :delete, class: "btn small danger"
-
-:css
-  form select {
-    width:150px;
-  }
-
-  #project_ids {
-    width:300px;
-  }
-
-:javascript
-  $('select#project_ids').chosen();
-  $('select#repo_access').chosen();
-  $('select#project_access').chosen();

app/views/commits/_head.html.haml

 %ul.nav.nav-tabs
   %li
     = form_tag switch_project_refs_path(@project), method: :get, class: "project-refs-form" do
-      = select_tag "ref", grouped_options_refs, onchange: "$(this.form).trigger('submit');", class: "project-refs-select"
+      = select_tag "ref", grouped_options_refs, onchange: "$(this.form).trigger('submit');", class: "project-refs-select chosen"
       = hidden_field_tag :destination, "commits"
 
   %li{class: "#{'active' if current_page?(project_commits_path(@project)) }"}
@@ -26,8 +26,3 @@
       %span.rss-icon
         = link_to project_commits_path(@project, :atom, { private_token: current_user.private_token, ref: @ref }), title: "Feed" do
           = image_tag "rss_ui.png", title: "feed"
-
-:javascript
-  $(function(){
-    $('.project-refs-select').chosen();
-  });

app/views/issues/_form.html.haml

@@ -18,12 +18,12 @@
           = f.label :assignee_id do
             %i.icon-user
             Assign to
-          .input= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { include_blank: "Select a user" })
+          .input= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { include_blank: "Select a user" }, {class: 'chosen'})
         .issue_milestone
           = f.label :milestone_id do
             %i.icon-time
             Milestone
-          .input= f.select(:milestone_id, @project.milestones.active.all.collect {|p| [ p.title, p.id ] }, { include_blank: "Select milestone" })
+          .input= f.select(:milestone_id, @project.milestones.active.all.collect {|p| [ p.title, p.id ] }, { include_blank: "Select milestone" }, {class: 'chosen'})
 
       .issue_description
         .clearfix

app/views/issues/edit.html.haml

 = render "form"
-
-:javascript
-  $(function(){
-    $('select#issue_assignee_id').chosen();
-    $('select#issue_milestone_id').chosen();
-  });
-

app/views/issues/new.html.haml

 = render "form"
-
-:javascript
-  $(function(){
-    $('select#issue_assignee_id').chosen();
-    $('select#issue_milestone_id').chosen();
-  });
-

app/views/merge_requests/_form.html.haml

@@ -16,7 +16,7 @@
           .padded
             = f.label :source_branch, "From", class: "control-label"
             .controls
-              = f.select(:source_branch, @project.heads.map(&:name), { include_blank: "Select branch" }, style: "width:250px")
+              = f.select(:source_branch, @project.heads.map(&:name), { include_blank: "Select branch" }, {class: 'chosen span3'})
       .mr_source_commit
 
     .span2
@@ -28,7 +28,7 @@
           .padded
             = f.label :target_branch, "To", class: "control-label"
             .controls
-              = f.select(:target_branch, @project.heads.map(&:name), { include_blank: "Select branch" }, style: "width:250px")
+              = f.select(:target_branch, @project.heads.map(&:name), { include_blank: "Select branch" }, {class: 'chosen span3'})
       .mr_target_commit
 
   %h4.cdark 2. Fill info
@@ -43,7 +43,7 @@
         = f.label :assignee_id do 
           %i.icon-user 
           Assign to
-        .input= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { include_blank: "Select user" }, style: "width:250px")
+        .input= f.select(:assignee_id, @project.users.all.collect {|p| [ p.name, p.id ] }, { include_blank: "Select user" }, {class: 'chosen span3'})
 
   .control-group
 
@@ -56,18 +56,12 @@
       = link_to project_merge_request_path(@project, @merge_request), class: "btn cancel-btn" do
         Cancel
 
-
-
 :javascript
   $(function(){
     disableButtonIfEmptyField("#merge_request_title", ".save-btn");
-    $('select#merge_request_assignee_id').chosen();
-    $('select#merge_request_source_branch').chosen();
-    $('select#merge_request_target_branch').chosen();
     var source_branch = $("#merge_request_source_branch");
     var target_branch = $("#merge_request_target_branch");
 
-    
     $.get("#{branch_from_project_merge_requests_path(@project)}", {ref: source_branch.val() });
     $.get("#{branch_to_project_merge_requests_path(@project)}", {ref: target_branch.val() });
 
@@ -79,4 +73,3 @@
       $.get("#{branch_to_project_merge_requests_path(@project)}", {ref: $(this).val() });
     });
   });
-

app/views/milestones/edit.html.haml

 = render "form"
-
-:javascript
-  $(function(){
-    $('select#issue_assignee_id').chosen();
-  });
-

app/views/projects/_refs.html.haml

 = form_tag switch_project_refs_path(@project), method: :get, class: "project-refs-form" do
-  = select_tag "ref", grouped_options_refs, onchange: "this.form.submit();", class: "project-refs-select"
+  = select_tag "ref", grouped_options_refs, onchange: "this.form.submit();", class: "project-refs-select chosen"
   = hidden_field_tag :destination, destination
-
-:javascript
-  $(function(){
-    $('.project-refs-select').chosen();
-  })

app/views/protected_branches/index.html.haml

@@ -19,7 +19,7 @@
     .entry.clearfix
       = f.label :name, "Branch"
       .span3
-        = f.select(:name, @project.open_branches.map { |br| [br.name, br.name] } , { include_blank: "-- Select branch" }, { class: "span3" })
+        = f.select(:name, @project.open_branches.map { |br| [br.name, br.name] } , {include_blank: "Select branch"}, {class: "chosen span3"})
        
       = f.submit 'Protect', class: "primary btn"
 
@@ -46,6 +46,3 @@
           %td
             - if can? current_user, :admin_project, @project
               = link_to 'Unprotect', [@project, branch], confirm: 'Are you sure?', method: :delete, class: "danger btn small"
-
-:javascript
-  $('select#protected_branch_name').chosen();

app/views/refs/_head.html.haml

 %ul.nav.nav-tabs
   %li
     = form_tag switch_project_refs_path(@project), method: :get, class: "project-refs-form", remote: true do
-      = select_tag "ref", grouped_options_refs, onchange: "$(this.form).trigger('submit');", class: "project-refs-select"
+      = select_tag "ref", grouped_options_refs, onchange: "$(this.form).trigger('submit');", class: "project-refs-select chosen"
       = hidden_field_tag :destination, "tree"
       = hidden_field_tag :path, params[:path]
   %li{class: "#{'active' if (controller.controller_name == "refs") }"}

app/views/refs/_tree.html.haml

@@ -47,10 +47,7 @@
 
 :javascript
   $(function(){
-    $('.project-refs-select').chosen();
-
     history.pushState({ path: this.path }, '', "#{@history_path}");
-
   });
 
   // Load last commit log for each file in tree

app/views/refs/blame.html.haml

@@ -38,8 +38,3 @@
               = preserve do
                 %pre
                   = Gitlab::Encode.utf8 lines.join("\n")
-
-:javascript
-  $(function(){
-    $('.project-refs-select').chosen();
-  });

app/views/snippets/_form.html.haml

@@ -16,7 +16,7 @@
       .input= f.text_field :file_name, placeholder: "example.rb"
     .clearfix
       = f.label "Lifetime"
-      .input= f.select :expires_at, lifetime_select_options, {}, style: "width:200px;"
+      .input= f.select :expires_at, lifetime_select_options, {}, {class: 'chosen span2'}
     .clearfix
       = f.label :content, "Code"
       .input= f.text_area :content, class: "span8"
@@ -26,11 +26,3 @@
     = link_to "Cancel", project_snippets_path(@project), class: " btn"
     - unless @snippet.new_record?
       .right= link_to 'Destroy', [@project, @snippet], confirm: 'Are you sure?', method: :delete, class: "btn right danger delete-snippet", id: "destroy_snippet_#{@snippet.id}"
-
-
-
-:javascript
-  $(function(){
-    $('select#snippet_expires_at').chosen();
-  });
-

app/views/team_members/_form.html.haml

@@ -10,21 +10,14 @@
 
   %h6 1. Choose people you want in the team
   .clearfix
-    = f.label :user_ids, "Peolpe"
-    .input= select_tag(:user_ids, options_from_collection_for_select(User.not_in_project(@project).all, :id, :name), { class: "xxlarge", multiple: true  })
-
+    = f.label :user_ids, "People"
+    .input= select_tag(:user_ids, options_from_collection_for_select(User.not_in_project(@project).all, :id, :name), {data: {placeholder: "Select users"}, class: "chosen xxlarge", multiple: true})
 
   %h6 2. Set access level for them
   .clearfix
     = f.label :project_access, "Project Access"
-    .input= select_tag :project_access, options_for_select(Project.access_options, @team_member.project_access), class: "project-access-select"
-
+    .input= select_tag :project_access, options_for_select(Project.access_options, @team_member.project_access), class: "project-access-select chosen"
 
   .actions
     = f.submit 'Save', class: "btn save-btn"
     = link_to "Cancel", team_project_path(@project), class: "btn cancel-btn"
-
-
-:javascript
-  $('select#user_ids').chosen();
-  $('select#project_access').chosen();