From d6c384c20f3798fffd0481cd758700a27bebd44f Mon Sep 17 00:00:00 2001 From: Robert Speicher <rspeicher@gmail.com> Date: Mon, 10 Sep 2012 02:09:55 -0400 Subject: [PATCH] Reduce the amount of JavaScript written in views Seeing `:javascript` all over Views feels like a code smell. This goes a long way towards reducing the amount of JS in views, but there's still plenty to be done on that front. --- app/assets/javascripts/main.js.coffee | 3 +++ app/views/admin/projects/_form.html.haml | 3 +-- app/views/admin/projects/show.html.haml | 18 ++---------------- app/views/admin/team_members/_form.html.haml | 13 +------------ app/views/admin/users/show.html.haml | 18 ++---------------- app/views/commits/_head.html.haml | 7 +------ app/views/issues/_form.html.haml | 4 ++-- app/views/issues/edit.html.haml | 7 ------- app/views/issues/new.html.haml | 7 ------- app/views/merge_requests/_form.html.haml | 13 +++---------- app/views/milestones/edit.html.haml | 6 ------ app/views/projects/_refs.html.haml | 7 +------ app/views/protected_branches/index.html.haml | 5 +---- app/views/refs/_head.html.haml | 2 +- app/views/refs/_tree.html.haml | 3 --- app/views/refs/blame.html.haml | 5 ----- app/views/snippets/_form.html.haml | 10 +--------- app/views/team_members/_form.html.haml | 13 +++---------- 18 files changed, 22 insertions(+), 122 deletions(-) diff --git a/app/assets/javascripts/main.js.coffee b/app/assets/javascripts/main.js.coffee index a01b3932323..86b191626b3 100644 --- a/app/assets/javascripts/main.js.coffee +++ b/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) diff --git a/app/views/admin/projects/_form.html.haml b/app/views/admin/projects/_form.html.haml index 87d212e5710..4848e7391a3 100644 --- a/app/views/admin/projects/_form.html.haml +++ b/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(); }) diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml index 65d888f572b..639874109eb 100644 --- a/app/views/admin/projects/show.html.haml +++ b/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(); diff --git a/app/views/admin/team_members/_form.html.haml b/app/views/admin/team_members/_form.html.haml index 6a128de94b2..9cd94fdd30f 100644 --- a/app/views/admin/team_members/_form.html.haml +++ b/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(); diff --git a/app/views/admin/users/show.html.haml b/app/views/admin/users/show.html.haml index 4d2b983277a..731916e97de 100644 --- a/app/views/admin/users/show.html.haml +++ b/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(); diff --git a/app/views/commits/_head.html.haml b/app/views/commits/_head.html.haml index a211329f349..5a09d82aa61 100644 --- a/app/views/commits/_head.html.haml +++ b/app/views/commits/_head.html.haml @@ -1,7 +1,7 @@ %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(); - }); diff --git a/app/views/issues/_form.html.haml b/app/views/issues/_form.html.haml index 23de7e8ed15..813ecab2d19 100644 --- a/app/views/issues/_form.html.haml +++ b/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 diff --git a/app/views/issues/edit.html.haml b/app/views/issues/edit.html.haml index 3c9877f842f..b1bc3ba0eba 100644 --- a/app/views/issues/edit.html.haml +++ b/app/views/issues/edit.html.haml @@ -1,8 +1 @@ = render "form" - -:javascript - $(function(){ - $('select#issue_assignee_id').chosen(); - $('select#issue_milestone_id').chosen(); - }); - diff --git a/app/views/issues/new.html.haml b/app/views/issues/new.html.haml index 3c9877f842f..b1bc3ba0eba 100644 --- a/app/views/issues/new.html.haml +++ b/app/views/issues/new.html.haml @@ -1,8 +1 @@ = render "form" - -:javascript - $(function(){ - $('select#issue_assignee_id').chosen(); - $('select#issue_milestone_id').chosen(); - }); - diff --git a/app/views/merge_requests/_form.html.haml b/app/views/merge_requests/_form.html.haml index d5271ed08c4..96692c0f93d 100644 --- a/app/views/merge_requests/_form.html.haml +++ b/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() }); }); }); - diff --git a/app/views/milestones/edit.html.haml b/app/views/milestones/edit.html.haml index af975a84a49..b1bc3ba0eba 100644 --- a/app/views/milestones/edit.html.haml +++ b/app/views/milestones/edit.html.haml @@ -1,7 +1 @@ = render "form" - -:javascript - $(function(){ - $('select#issue_assignee_id').chosen(); - }); - diff --git a/app/views/projects/_refs.html.haml b/app/views/projects/_refs.html.haml index 804b852340e..dc1f3a282d8 100644 --- a/app/views/projects/_refs.html.haml +++ b/app/views/projects/_refs.html.haml @@ -1,8 +1,3 @@ = 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(); - }) diff --git a/app/views/protected_branches/index.html.haml b/app/views/protected_branches/index.html.haml index 33bb448a544..43884de1db5 100644 --- a/app/views/protected_branches/index.html.haml +++ b/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(); diff --git a/app/views/refs/_head.html.haml b/app/views/refs/_head.html.haml index d51602de9b7..94603f0a42a 100644 --- a/app/views/refs/_head.html.haml +++ b/app/views/refs/_head.html.haml @@ -1,7 +1,7 @@ %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") }"} diff --git a/app/views/refs/_tree.html.haml b/app/views/refs/_tree.html.haml index 297a3b5f60a..83e73280666 100644 --- a/app/views/refs/_tree.html.haml +++ b/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 diff --git a/app/views/refs/blame.html.haml b/app/views/refs/blame.html.haml index 34478d4b491..eb66f59760b 100644 --- a/app/views/refs/blame.html.haml +++ b/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(); - }); diff --git a/app/views/snippets/_form.html.haml b/app/views/snippets/_form.html.haml index b8d8c09849d..e61e61a7e5e 100644 --- a/app/views/snippets/_form.html.haml +++ b/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(); - }); - diff --git a/app/views/team_members/_form.html.haml b/app/views/team_members/_form.html.haml index 192f273579e..3736bfea005 100644 --- a/app/views/team_members/_form.html.haml +++ b/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(); -- 2.30.9