Change the way JS localization is done

Render a plain JS file and include it as a standard JS script instead of relying on an ajax call
This makes it available immediatly (before that there could be a slight delay), but more importantly, makes sure the response can be cached
Chrome wasn't caching XHR get responses (no matter what the header were)

public/js/vroom.js

@@ -36,10 +36,6 @@ $('.date-picker').datepicker({
   language: currentLang
 });
 
-// Strings we need translated
-var locale = {},
-    def_locale = {};
-
 // When pagination is done, how many item per page
 var itemPerPage = 20;
 
@@ -67,18 +63,6 @@ var peers = {
 // Mark current page link as active
 $('#lnk_' + page).addClass('active');
 
-// Localize the strings we need
-$.getJSON(rootUrl + 'localize/' + currentLang, function(data){
-  locale = data;
-});
-
-// If current locale isn't EN, retrieve EN locale as a fallback
-if (currentLang !== 'en'){
-  $.getJSON(rootUrl + 'localize/en' , function(data){
-    def_locale = data;
-  });
-}
-
 // Default ajax setup
 $.ajaxSetup({
   url: rootUrl + 'api',
@@ -99,8 +83,8 @@ function localize(string){
   if (locale[string]){
     return locale[string];
   }
-  else if (def_locale[string]){
+  else if (fallback_locale[string]){
-    return def_locale[string];
+    return fallback_locale[string];
   }
   return string;
 }

templates/default/js_common.html.ep

@@ -7,6 +7,7 @@
       var page = '<%= stash('page') ? stash('page') : "" %>';
       var roomName;
     </script>
+    <script type="text/javascript" src= "<%= $self->url_for('/locales/' . $self->languages . '.js') %>"></script>
     <%
       my @js = qw(jquery-1.11.3.js bootstrap.js notify-combined.js bootstrap-switch.js jquery.bootpag.js toc.js bootstrap-datepicker.js);
       # Load supported languages for datpicker, if they exists

vroom.pl

@@ -1572,17 +1572,35 @@ any [qw(GET POST)] => '/invitation/:token' => { token => '' } => sub {
   }
 };
 
-# Translation for JS resources
+# Create a json script which contains localization
-get '/localize/:lang' => { lang => 'en' } => sub {
+get '/locales/(:lang).js' => { lang => 'en' } => sub {
-  my $self = shift;
+  my $self = shift;
+  my $usr_lang = $self->languages;
+  my $req_lang = $self->stash('lang');
+  # Temporarily switch to the requested locale
+  # eg, we can be in en and ask for /locales/fr.js
+  $self->languages($req_lang);
   my $strings = {};
-  my $l = $self->languages;
+  my $fallback_strings = {};
-  $self->languages($self->stash('lang'));
   foreach my $string (keys %Vroom::I18N::fr::Lexicon){
+    next if $string eq '';
     $strings->{$string} = $self->l($string);
   }
-  $self->languages($l);
+  # If lang is not en, send also en as a fallback locale
-  return $self->render(json => $strings);
+  # useful if a locale is not complete
+  if ($req_lang ne 'en'){
+    $self->languages('en');
+    foreach my $string (keys %Vroom::I18N::fr::Lexicon){
+      next if $string eq '';
+      $fallback_strings->{$string} = $self->l($string);
+    }
+  }
+  # Set the user locale back
+  $self->languages($usr_lang);
+  my $res = 'locale = ' . Mojo::JSON::to_json($strings) . ';';
+  $res .= 'fallback_locale = ' . Mojo::JSON::to_json($fallback_strings) . ';';
+  # And send the response
+  $self->render(text => $res, format => 'application/javascript;charset=UTF-8');
 };
 
 # API requests handler