diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 19f882d..6545a3a 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -694,4 +694,35 @@ ul.card__stack { .icon__container img:nth-child(4) { display: block; } -} \ No newline at end of file +} + +[data-locale] { + display: none; +} + +html[lang="en"] [data-locale='en'], +html[lang="zh"] [data-locale='zh'], +html[lang="hr"] [data-locale='hr'], +html[lang="cs"] [data-locale='cs'], +html[lang="da"] [data-locale='da'], +html[lang="nl"] [data-locale='nl'], +html[lang="fi"] [data-locale='fi'], +html[lang="fr"] [data-locale='fr'], +html[lang="fr-CA"] [data-locale='fr-CA'], +html[lang="de"] [data-locale='de'], +html[lang="hu"] [data-locale='hu'], +html[lang="it"] [data-locale='it'], +html[lang="ja"] [data-locale='ja'], +html[lang="ko"] [data-locale='ko'], +html[lang="nb"] [data-locale='nb'], +html[lang="pl"] [data-locale='pl'], +html[lang="pt"] [data-locale='pt'], +html[lang="ro"] [data-locale='ro'], +html[lang="sr"] [data-locale='sr'], +html[lang="sk"] [data-locale='sk'], +html[lang="sl"] [data-locale='sl'], +html[lang="es"] [data-locale='es'], +html[lang="sv"] [data-locale='sv'], +html[lang="uk"] [data-locale='uk'] { + display: revert; +} diff --git a/app/javascript/application.js b/app/javascript/application.js index d534173..7024fbc 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -80,6 +80,12 @@ function init() { shuffle_cards() }) + document.querySelectorAll('#language_select').forEach((language_select) => { + language_select.addEventListener('change', (e) => { + document.documentElement.lang = language_select.value + }) + }) + // Choose language confirmation button document.querySelectorAll('#confirm_btn').forEach((confirm_btn) => { confirm_btn.addEventListener('click', (e) => { diff --git a/app/views/languages/index.html.erb b/app/views/languages/index.html.erb index dbb3400..b9320a4 100644 --- a/app/views/languages/index.html.erb +++ b/app/views/languages/index.html.erb @@ -1,16 +1,22 @@ <%- content_for :title, t('project_name') %>
- <%= tag.h1 t('hello', locale: accept_language) %> + <% I18n.available_locales.each do |l| %> + <%= tag.h1 t('hello', locale: l), data: {locale: l} %> + <% end %> - <%= tag.div t('please_select_a_language_to_get_started', locale: accept_language) %> + <% I18n.available_locales.each do |l| %> + <%= tag.div t('please_select_a_language_to_get_started', locale: l), data: {locale: l} %> + <% end %>
<%= select_tag :language, options_for_select(languages_for_select, accept_language), id: 'language_select' %>
\ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index decf451..76fe161 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,5 +1,5 @@ - + <%= content_for?(:title) ? yield(:title) : t(:project_name) %> @@ -18,7 +18,13 @@
<%= link_to svg('ikea-foundation-logo'), root_url %>
- <%= t('can_you_spot_the_link').html_safe %> + <% if controller_name == 'languages' %> + <% I18n.available_locales.each do |l| %> + <%= tag.div t('can_you_spot_the_link', locale: l).html_safe, data: {locale: l} %> + <% end %> + <% else %> + <%= t('can_you_spot_the_link').html_safe %> + <% end %>