consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow toggling the column selector with a keyboard

Browse Source 
Using a button tag, it's possible for every user to "click" the element.
Besides, we don't need to call the `preventDefault` function, because
buttons with type "button" don't do anything by default.
This commit is contained in:
Javi Martín
2021-02-05 13:38:25 +01:00
parent 945d723fef
commit 00dfa95902
3 changed files with 9 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/javascripts/columns_selector.js
View File

@@ -33,8 +33,7 @@
$("#js-columns-selector-wrapper").append(item); $("#js-columns-selector-wrapper").append(item);
}); });
}, },
toggleOptions: function(event) { toggleOptions: function() {
event.preventDefault();
$("#js-columns-selector").toggleClass("hollow"); $("#js-columns-selector").toggleClass("hollow");
$("#js-columns-selector-wrapper").toggleClass("hidden"); $("#js-columns-selector-wrapper").toggleClass("hidden");
}, },
@@ -73,8 +72,8 @@
App.ColumnsSelector.initChecks(); App.ColumnsSelector.initChecks();
App.ColumnsSelector.initColumns(); App.ColumnsSelector.initColumns();
$("#js-columns-selector").on({ $("#js-columns-selector").on({
click: function(event) { click: function() {
App.ColumnsSelector.toggleOptions(event); App.ColumnsSelector.toggleOptions();
} }
}); });
$(".column-selector-item input").on({ $(".column-selector-item input").on({

4
app/views/admin/shared/_columns_selector.html.erb
View File

@@ -1,7 +1,7 @@
<span class="button columns-selector hollow" id="js-columns-selector" data-cookie="<%= cookie %>" data-default="<%= default.join(",") %>"> <button type="button" class="button columns-selector hollow" id="js-columns-selector" data-cookie="<%= cookie %>" data-default="<%= default.join(",") %>">
<span class="icon-banner"> </span> <span class="icon-banner"> </span>
<strong><%= t("admin.budget_investments.index.columns") %></strong> <strong><%= t("admin.budget_investments.index.columns") %></strong>
</span> </button>
<div class="hidden columns-selector-wrapper" id="js-columns-selector-wrapper"> <div class="hidden columns-selector-wrapper" id="js-columns-selector-wrapper">
<div class="hidden column-selector-item" id="column_selector_item_template"> <div class="hidden column-selector-item" id="column_selector_item_template">

14
spec/system/admin/budget_investments_spec.rb
View File

@@ -1825,9 +1825,7 @@ describe "Admin budget investments", :admin do
scenario "Use column selector to display visible columns", :js do scenario "Use column selector to display visible columns", :js do
visit admin_budget_budget_investments_path(budget) visit admin_budget_budget_investments_path(budget)
within("#js-columns-selector") do click_button "Columns"
find("strong", text: "Columns").click
end
within("#js-columns-selector-wrapper") do within("#js-columns-selector-wrapper") do
selectable_columns.each do |column| selectable_columns.each do |column|
@@ -1857,9 +1855,7 @@ describe "Admin budget investments", :admin do
scenario "Cookie will be updated after change columns selection", :js do scenario "Cookie will be updated after change columns selection", :js do
visit admin_budget_budget_investments_path(budget) visit admin_budget_budget_investments_path(budget)
within("#js-columns-selector") do click_button "Columns"
find("strong", text: "Columns").click
end
within("#js-columns-selector-wrapper") do within("#js-columns-selector-wrapper") do
uncheck "Title" uncheck "Title"
@@ -1889,7 +1885,7 @@ describe "Admin budget investments", :admin do
investment.update!(title: "Don't display me, please!") investment.update!(title: "Don't display me, please!")
visit admin_budget_budget_investments_path(budget) visit admin_budget_budget_investments_path(budget)
within("#js-columns-selector") { find("strong", text: "Columns").click } click_button "Columns"
within("#js-columns-selector-wrapper") { uncheck "Title" } within("#js-columns-selector-wrapper") { uncheck "Title" }
within("#budget_investment_#{investment.id}") do within("#budget_investment_#{investment.id}") do
@@ -1909,9 +1905,7 @@ describe "Admin budget investments", :admin do
go_back go_back
within("#js-columns-selector") do click_button "Columns"
find("strong", text: "Columns").click
end
within("#js-columns-selector-wrapper") do within("#js-columns-selector-wrapper") do
selectable_columns.each do |column| selectable_columns.each do |column|