Merge pull request #203 from AyuntamientoMadrid/select-language-switcher-155

Select language switcher

app/assets/javascripts/application.js

@@ -21,6 +21,7 @@
 //= require d3
 //= require c3
 //= require c3ext
+//= require qp
 //= require app
 //= require_tree .
 
@@ -30,6 +31,7 @@ var initialize_modules = function() {
   App.Votes.initialize();
   App.Tags.initialize();
   App.Stats.initialize();
+  App.LocaleSwitcher.initialize();
 };
 
 $(function(){

app/assets/javascripts/locale_switcher.js.coffee

@@ -0,0 +1,19 @@
+App.LocaleSwitcher =
+
+  href_with_params: (query_params) ->
+    loc = window.location
+
+    loc.protocol + "//" + loc.hostname +
+      (if loc.port then ':' + loc.port else '') +
+      loc.pathname +
+      loc.hash +
+      '?' + $.param(query_params)
+
+  initialize: ->
+    $('.js-locale-switcher').on 'change', ->
+      query_params = window.getQueryParameters()
+      query_params['locale'] = $(this).val()
+      window.location.assign(App.LocaleSwitcher.href_with_params(query_params))
+
+
+

app/assets/javascripts/qp.js

@@ -0,0 +1,12 @@
+/*
+ *  getQueryParameters.js
+ *  Copyright (c) 2014 Nicholas Ortenzio
+ *  The MIT License (MIT)
+ *
+ */
+
+window.getQueryParameters = function(str) {
+  str = (str || document.location.search).replace(/(^\?)/,'');
+  if(!str) { return {}; }
+  return str.split("&").reduce(function(o,n){n=n.split('=');o[n[0]]=n[1];return o},{});
+};

app/assets/stylesheets/participacion.scss

@@ -186,7 +186,7 @@ header {
     }
   }
 
-  .language {
+  .locale {
     float: none;
     text-align: center;
 
@@ -196,7 +196,7 @@ header {
   }
 
   .external-links {
-    @extend .language;
+    @extend .locale;
 
     @media (min-width: 480px) {
       float: right;

app/helpers/application_helper.rb

@@ -14,7 +14,13 @@ module ApplicationHelper
     home_page? ? '' : 'results'
   end
 
-  def available_locales_to_switch
-    I18n.available_locales - [I18n.locale]
+  def available_locale_options_for_select
+    options_for_select(available_locales_array, I18n.locale)
   end
+
+  private
+    def available_locales_array
+      I18n.available_locales.map { |loc| [I18n.t('locale', locale: loc), loc] }
+    end
+
 end

app/views/layouts/_admin_header.html.erb

@@ -1,15 +1,7 @@
 <header class="<%= header_css %>">
   <section class="top-links">
     <div class="row">
-      <div class="language">
-        <span id="locale-switcher">
-          <%= t("layouts.header.language") %>
-          [
-            <% available_locales_to_switch.each do |locale| %>
-              <%= link_to(locale, params.merge(locale: locale), id: "locale-link-#{locale}") %>
-            <% end %>
-          ]
-      </div>
+      <%= render 'shared/locale_switcher' %>
     </div>
   </section>
 

app/views/layouts/_header.html.erb

@@ -1,15 +1,7 @@
 <header class="<%= header_css %>">
   <section class="top-links">
     <div class="row">
-      <div class="language">
-        <span id="locale-switcher">
-          <%= t("layouts.header.language") %>
-          [
-            <% available_locales_to_switch.each do |locale| %>
-              <%= link_to(locale, params.merge(locale: locale), id: "locale-link-#{locale}", data: { no_turbolink: true }) %>
-            <% end %>
-          ]
-      </div>
+      <%= render 'shared/locale_switcher' %>
       <div class="external-links">
         <%= link_to t("layouts.header.participation"), root_path, class: "selected" %>&nbsp;|
         <%= link_to t("layouts.header.external_link_transparency"), "#" %>&nbsp;|

app/views/shared/_locale_switcher.html.erb

@@ -0,0 +1,10 @@
+<div class="locale">
+  <span>
+    <%= t("layouts.header.language") %>
+    <form>
+      <select class="js-locale-switcher" name='locale-switcher'>
+        <%= available_locale_options_for_select %>
+      </select>
+    </form>
+  </span>
+</div>

config/locales/en.yml

@@ -1,4 +1,5 @@
 en:
+  locale: English
   layouts:
     header:
       external_link_transparency: Transparency

config/locales/es.yml

@@ -1,4 +1,5 @@
 es:
+  locale: 'Español'
   layouts:
     header:
       external_link_transparency: Transparencia

spec/features/localization_spec.rb

@@ -9,19 +9,27 @@ feature 'Localization' do
     expect(page).to have_text('Estamos abriendo Madrid')
   end
 
-  scenario 'Changing locale' do
-    visit root_path(locale: :es)
-    locale_switcher = find('#locale-switcher')
+  scenario 'Available locales appear in the locale switcher' do
+    visit '/'
 
-    expect(page).to have_text('Estamos abriendo Madrid')
-    expect(locale_switcher).to have_text('en')
-    expect(locale_switcher).to_not have_text('es')
+    within('.js-locale-switcher') do
+      expect(page).to have_content 'Español'
+      expect(page).to have_content 'English'
+    end
+  end
 
-    find('#locale-link-en').click
-    locale_switcher = find('#locale-switcher')
+  scenario 'The current locale is selected' do
+    visit '/'
+    expect(page).to have_select('locale-switcher', selected: 'English')
+  end
 
-    expect(page).to have_text('We are opening Madrid')
-    expect(locale_switcher).to have_text('es')
-    expect(locale_switcher).to_not have_text('en')
+  scenario 'Changing the locale', :js do
+    visit '/'
+    expect(page).to have_content('Site language')
+
+    select('Español', from: 'locale-switcher')
+    expect(page).to have_content('Idioma de la página')
+    expect(page).to_not have_content('Site language')
+    expect(page).to have_select('locale-switcher', selected: 'Español')
   end
 end