Add progressive enhancement JS for active_language

This commit is contained in:
maddiebaka 2023-10-27 17:27:21 -04:00
parent 3ba4a49a26
commit 60f37ece67
5 changed files with 26 additions and 4 deletions

View File

@ -47,3 +47,7 @@ a:hover {
display: inline;
}
#active_language_submit_tag {
display: none;
}

View File

@ -3,6 +3,6 @@ module ActiveLanguageHelper
def active_language_select_tag
languages = Language.all.to_a.delete_if {|language| language.name == "English" }
options = options_from_collection_for_select(languages, "id", "name", cookies[:active_language_id] || 1)
select_tag "active_language_id", options
select_tag "active_language_id", options, { id: "active_language_select_tag" }
end
end

View File

@ -1,3 +1,10 @@
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
let switchLanguageForm = document.querySelector("#active_language_form");
let switchLanguageSelectTag = document.querySelector("#active_language_select_tag");
switchLanguageSelectTag.addEventListener("change", (event) => {
switchLanguageForm.submit();
});

View File

@ -8,6 +8,14 @@
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<noscript>
<style type="text/css">
#active_language_submit_tag {
display: inline !important;
}
</style>
</noscript>
</head>
<body>
@ -19,9 +27,9 @@
<pre style="display: inline;">|</pre>
<%= link_to "Languages", admin_languages_path %>
<pre style="display: inline;">|</pre>
<%= form_tag '/set_active_language', class: "d-inline" do %>
<%= form_tag '/set_active_language', class: "d-inline", id: "active_language_form" do %>
<%= active_language_select_tag %>
<%= submit_tag "Switch Language" %>
<%= submit_tag "Switch Language", id: "active_language_submit_tag" %>
<% end %>
<% end %>
</div>

View File

@ -25,7 +25,10 @@ RSpec.describe ActiveLanguageHelper, type: :helper do
it "should not contain an English option" do
expect(@tag).to_not include("English")
end
it "should include css id #active_language_select_tag" do
expect(@tag).to have_selector(%(select[id="active_language_select_tag"]))
end
end
end