From 909d2d8b3144f5b25652547758aa237474e5b4a2 Mon Sep 17 00:00:00 2001 From: Connor Shea Date: Fri, 15 Jul 2016 11:04:53 -0600 Subject: [PATCH 1/4] Remove inline JavaScript for Search autocomplete. --- app/assets/javascripts/search_autocomplete.js | 38 +++++++++++++++++++ app/views/layouts/_search.html.haml | 24 ++---------- 2 files changed, 41 insertions(+), 21 deletions(-) diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js index 227e8c696b4..6445a8018c2 100644 --- a/app/assets/javascripts/search_autocomplete.js +++ b/app/assets/javascripts/search_autocomplete.js @@ -367,4 +367,42 @@ })(); + $(function() { + if ($('.js-search-project-options').length) { + var projectOptionsDataEl = $('.js-search-project-options'); + + gl.projectOptions = gl.projectOptions || {}; + + var projectPath = projectOptionsDataEl.data('project-path'); + + gl.projectOptions[projectPath] = { + name: projectOptionsDataEl.data('name'), + issuesPath: projectOptionsDataEl.data('issues-path'), + mrPath: projectOptionsDataEl.data('mr-path') + }; + } + + if ($('.js-search-group-options').length) { + var groupOptionsDataEl = $('.js-search-group-options'); + + gl.groupOptions = gl.groupOptions || {}; + + var groupPath = groupOptionsDataEl.data('group-path'); + + gl.groupOptions[groupPath] = { + name: groupOptionsDataEl.data('name'), + issuesPath: groupOptionsDataEl.data('issues-path'), + mrPath: groupOptionsDataEl.data('mr-path') + }; + } + + if ($('.js-search-dashboard-options').length) { + var dashboardOptionsDataEl = $('.js-search-dashboard-options'); + gl.dashboardOptions = { + issuesPath: dashboardOptionsDataEl.data('issues-path'), + mrPath: dashboardOptionsDataEl.data('mr-path') + }; + } + }); + }).call(this); diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml index f7580f00159..ca9d7ac8a60 100644 --- a/app/views/layouts/_search.html.haml +++ b/app/views/layouts/_search.html.haml @@ -36,30 +36,12 @@ - else = hidden_field_tag :search_code, true - :javascript - gl.projectOptions = gl.projectOptions || {}; - gl.projectOptions["#{j(@project.path)}"] = { - issuesPath: "#{namespace_project_issues_path(@project.namespace, @project)}", - mrPath: "#{namespace_project_merge_requests_path(@project.namespace, @project)}", - name: "#{j(@project.name)}" - }; + .js-search-project-options{ data: { project_path: "#{j(@project.path)}", name: "#{j(@project.name)}", issues_path: "#{namespace_project_issues_path(@project.namespace, @project)}", mr_path: "#{namespace_project_merge_requests_path(@project.namespace, @project)}" } } - if @group && @group.persisted? && @group.path - :javascript - gl.groupOptions = gl.groupOptions || {}; - gl.groupOptions["#{j(@group.path)}"] = { - name: "#{j(@group.name)}", - issuesPath: "#{issues_group_path(j(@group.path))}", - mrPath: "#{merge_requests_group_path(j(@group.path))}" - }; - - - :javascript - gl.dashboardOptions = { - issuesPath: "#{issues_dashboard_url}", - mrPath: "#{merge_requests_dashboard_url}" - }; + .js-search-group-options{ data: { group_path: "#{j(@group.path)}", name: "#{j(@group.name)}", issues_path: "#{issues_group_path(j(@group.path))}", mr_path: "#{merge_requests_group_path(j(@group.path))}" } } + .js-search-dashboard-options{ data: { issues_path: "#{issues_dashboard_url}", mr_path: "#{merge_requests_dashboard_url}" } } - if @snippet || @snippets = hidden_field_tag :snippets, true From 33af01f3670bbed069135f50950633eb23ccb988 Mon Sep 17 00:00:00 2001 From: Connor Shea Date: Tue, 26 Jul 2016 15:49:26 -0600 Subject: [PATCH 2/4] Move data attribute information to relevant elements. --- app/views/layouts/_search.html.haml | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml index ca9d7ac8a60..ff4aac0092d 100644 --- a/app/views/layouts/_search.html.haml +++ b/app/views/layouts/_search.html.haml @@ -2,6 +2,10 @@ - label = 'This group' - if controller.controller_path =~ /^projects/ && @project.persisted? - label = 'This project' +- if @group && @group.persisted? && @group.path + - group_data_attrs = { group_path: "#{j(@group.path)}", name: "#{j(@group.name)}", issues_path: "#{issues_group_path(j(@group.path))}", mr_path: "#{merge_requests_group_path(j(@group.path))}" } +- if @project && @project.persisted? + - project_data_attrs = { project_path: "#{j(@project.path)}", name: "#{j(@project.name)}", issues_path: "#{namespace_project_issues_path(@project.namespace, @project)}", mr_path: "#{namespace_project_merge_requests_path(@project.namespace, @project)}" } .search.search-form{class: "#{'has-location-badge' if label.present?}"} = form_tag search_path, method: :get, class: 'navbar-form' do |f| @@ -9,8 +13,8 @@ - if label.present? .location-badge= label .search-input-wrap - .dropdown{ data: {url: search_autocomplete_path } } - = search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off', data: { toggle: 'dropdown' } + .dropdown{ data: { url: search_autocomplete_path } } + = search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle js-search-dashboard-options", spellcheck: false, tabindex: "1", autocomplete: 'off', data: { toggle: 'dropdown', issues_path: "#{issues_dashboard_url}", mr_path: "#{merge_requests_dashboard_url}" } .dropdown-menu.dropdown-select = dropdown_content do %ul @@ -21,8 +25,9 @@ %i.search-icon %i.clear-icon.js-clear-input - = hidden_field_tag :group_id, @group.try(:id) - = hidden_field_tag :project_id, @project && @project.persisted? ? @project.id : '', id: 'search_project_id' + = hidden_field_tag :group_id, @group.try(:id), class: 'js-search-group-options', data: group_data_attrs + + = hidden_field_tag :project_id, @project && @project.persisted? ? @project.id : '', id: 'search_project_id', class: 'js-search-project-options', data: project_data_attrs - if @project && @project.persisted? - if current_controller?(:issues) @@ -36,13 +41,6 @@ - else = hidden_field_tag :search_code, true - .js-search-project-options{ data: { project_path: "#{j(@project.path)}", name: "#{j(@project.name)}", issues_path: "#{namespace_project_issues_path(@project.namespace, @project)}", mr_path: "#{namespace_project_merge_requests_path(@project.namespace, @project)}" } } - - - if @group && @group.persisted? && @group.path - .js-search-group-options{ data: { group_path: "#{j(@group.path)}", name: "#{j(@group.name)}", issues_path: "#{issues_group_path(j(@group.path))}", mr_path: "#{merge_requests_group_path(j(@group.path))}" } } - - .js-search-dashboard-options{ data: { issues_path: "#{issues_dashboard_url}", mr_path: "#{merge_requests_dashboard_url}" } } - - if @snippet || @snippets = hidden_field_tag :snippets, true = hidden_field_tag :repository_ref, @ref From bf5a853e51a48a3113ccbba7cc8e62ca7999396f Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Thu, 25 Aug 2016 19:11:06 -0500 Subject: [PATCH 3/4] Fix dropdown vertical position --- app/assets/stylesheets/pages/search.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index c9d436d72ba..cae8063396f 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -103,7 +103,7 @@ // Custom dropdown positioning .dropdown-menu { - top: 30px; + top: 37px; left: -5px; padding: 0; From 4b720875a1a9a3a925398fdc669e42ed8ec8e62c Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Thu, 25 Aug 2016 19:17:17 -0500 Subject: [PATCH 4/4] Tidy up the code a bit --- app/assets/javascripts/search_autocomplete.js | 35 +++++++++---------- app/views/layouts/_search.html.haml | 7 ++-- 2 files changed, 20 insertions(+), 22 deletions(-) diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js index 6445a8018c2..9c59108f2ab 100644 --- a/app/assets/javascripts/search_autocomplete.js +++ b/app/assets/javascripts/search_autocomplete.js @@ -368,39 +368,38 @@ })(); $(function() { - if ($('.js-search-project-options').length) { - var projectOptionsDataEl = $('.js-search-project-options'); + var $projectOptionsDataEl = $('.js-search-project-options'); + var $groupOptionsDataEl = $('.js-search-group-options'); + var $dashboardOptionsDataEl = $('.js-search-dashboard-options'); + if ($projectOptionsDataEl.length) { gl.projectOptions = gl.projectOptions || {}; - var projectPath = projectOptionsDataEl.data('project-path'); + var projectPath = $projectOptionsDataEl.data('project-path'); gl.projectOptions[projectPath] = { - name: projectOptionsDataEl.data('name'), - issuesPath: projectOptionsDataEl.data('issues-path'), - mrPath: projectOptionsDataEl.data('mr-path') + name: $projectOptionsDataEl.data('name'), + issuesPath: $projectOptionsDataEl.data('issues-path'), + mrPath: $projectOptionsDataEl.data('mr-path') }; } - - if ($('.js-search-group-options').length) { - var groupOptionsDataEl = $('.js-search-group-options'); - + + if ($groupOptionsDataEl.length) { gl.groupOptions = gl.groupOptions || {}; - var groupPath = groupOptionsDataEl.data('group-path'); + var groupPath = $groupOptionsDataEl.data('group-path'); gl.groupOptions[groupPath] = { - name: groupOptionsDataEl.data('name'), - issuesPath: groupOptionsDataEl.data('issues-path'), - mrPath: groupOptionsDataEl.data('mr-path') + name: $groupOptionsDataEl.data('name'), + issuesPath: $groupOptionsDataEl.data('issues-path'), + mrPath: $groupOptionsDataEl.data('mr-path') }; } - if ($('.js-search-dashboard-options').length) { - var dashboardOptionsDataEl = $('.js-search-dashboard-options'); + if ($dashboardOptionsDataEl.length) { gl.dashboardOptions = { - issuesPath: dashboardOptionsDataEl.data('issues-path'), - mrPath: dashboardOptionsDataEl.data('mr-path') + issuesPath: $dashboardOptionsDataEl.data('issues-path'), + mrPath: $dashboardOptionsDataEl.data('mr-path') }; } }); diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml index ff4aac0092d..d7386105b7d 100644 --- a/app/views/layouts/_search.html.haml +++ b/app/views/layouts/_search.html.haml @@ -3,10 +3,9 @@ - if controller.controller_path =~ /^projects/ && @project.persisted? - label = 'This project' - if @group && @group.persisted? && @group.path - - group_data_attrs = { group_path: "#{j(@group.path)}", name: "#{j(@group.name)}", issues_path: "#{issues_group_path(j(@group.path))}", mr_path: "#{merge_requests_group_path(j(@group.path))}" } + - group_data_attrs = { group_path: j(@group.path), name: @group.name, issues_path: issues_group_path(j(@group.path)), mr_path: merge_requests_group_path(j(@group.path)) } - if @project && @project.persisted? - - project_data_attrs = { project_path: "#{j(@project.path)}", name: "#{j(@project.name)}", issues_path: "#{namespace_project_issues_path(@project.namespace, @project)}", mr_path: "#{namespace_project_merge_requests_path(@project.namespace, @project)}" } - + - project_data_attrs = { project_path: j(@project.path), name: j(@project.name), issues_path: namespace_project_issues_path(@project.namespace, @project), mr_path: namespace_project_merge_requests_path(@project.namespace, @project) } .search.search-form{class: "#{'has-location-badge' if label.present?}"} = form_tag search_path, method: :get, class: 'navbar-form' do |f| .search-input-container @@ -14,7 +13,7 @@ .location-badge= label .search-input-wrap .dropdown{ data: { url: search_autocomplete_path } } - = search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle js-search-dashboard-options", spellcheck: false, tabindex: "1", autocomplete: 'off', data: { toggle: 'dropdown', issues_path: "#{issues_dashboard_url}", mr_path: "#{merge_requests_dashboard_url}" } + = search_field_tag 'search', nil, placeholder: 'Search', class: 'search-input dropdown-menu-toggle js-search-dashboard-options', spellcheck: false, tabindex: '1', autocomplete: 'off', data: { toggle: 'dropdown', issues_path: issues_dashboard_url, mr_path: merge_requests_dashboard_url } .dropdown-menu.dropdown-select = dropdown_content do %ul