switch to use localize to replace jquery localize

.rvmrc

@@ -1 +1 @@
-rvm use --create "ruby-1.9.2@arthritiscompaign"
+rvm use --create "ruby-1.9.2@arthritiscampaign"

Gemfile

@@ -9,6 +9,7 @@ gem 'mini_magick', '~> 3.4'
 gem 'rake', '~> 0.9.2'
 gem 'newrelic_rpm'
 gem 'xml-simple'
+gem 'localize'
 
 group :development, :test do
   gem 'pry'

Gemfile.lock

@@ -15,6 +15,7 @@ GEM
     httpclient (2.2.4)
     i18n (0.6.0)
     json (1.6.5)
+    localize (0.2)
     metaclass (0.0.1)
     method_source (0.7.1)
     mini_magick (3.4)
@@ -62,6 +63,7 @@ DEPENDENCIES
   fb_graph (~> 2.4.7)
   flickraw (~> 0.9.5)
   haml (~> 3.1.3)
+  localize
   mini_magick (~> 3.4)
   mocha
   newrelic_rpm

README.md

@@ -266,16 +266,9 @@ You can add an URL parameter to set user language. For example, use "http://you_
 **Once you set language through URL parameter, server will set a cookie to keep the setting on client side. The user language setting will be kept until you set the language through URL parameter again.**
 
 ### Translate static text
-We are using [JQuery localize plugin](https://github.com/coderifous/jquery-localize) to translate static text on webpages.
+We are using [Ruby localize](https://github.com/Aejis/localize) to translate static text.
 
-The file "static/localization/app-fr.json" is a json data file which contains all the phrases' French translation: 
-
-	{
-  	"we_have_arthritis": "Nous avons l'arthrite!",
- 	 "join_the_arthritis_society_": "Rejoignez la campagne spéciale La Société d'arthrite pour sensibiliser sur l'impact de la maladie sur 4,6 millions de Canadiens vivant avec l'arthrite. L'arthrite peut toucher n'importe qui, il affecte les bébés et grondé, ainsi que les personnes dans la fleur de leur vie. Près de trois personnes sur cinq atteintes d'arthrite sont en âge de travailler (moins de 65 ans).",
-    	….
-
-Please note that sharing messages are not translated in this file but in the "lib/helpers/application_helper.rb".
+The files "static/localization/fr.yml" and "static/localization/en.yml" are the translation files.
 
 ###Translation images
 We localize the images by dynamically change the img.src directly in the view using Ruby code. 
@@ -299,17 +292,7 @@ If the resouce pointed by the "/images/manifesto.jpg" need a French translation,
 
 **Note: The ruby variable settings.language_suffix will be empty if user language is English, but '-fr' for French.**
 
-###Translate video
-Since the URLs of English video and French video are not following the pattern of "url/url-fr", a custom HTML property and Javascript are used to set the url based on user language setting. In the file, views/layout.haml:
-
-	  %iframe#video{ :src => "http://player.vimeo.com/video/42697821", 'src-fr' => "http://player.vimeo.com/video/42697820"}
-
-custom property 'src-fr' is the video URL for French. 
 
-	 if(language == 'fr'){
-          $("#video").attr("src", $("#video").attr("src-fr"));
-        }
-In the same file the embeded Javascript will reset src property based on the language setting.
 
 ##Credits & Licensing
 Copyright 2012 Arthritis Society.

app.rb

@@ -4,6 +4,8 @@
 require 'sinatra'
 require 'haml'
 require 'sass'
+require 'localize'
+require 'localize/sinatra'
 require 'helpers/application_helper'
 require 'helpers/image_helper'
 require 'helpers/url_helper'
@@ -26,7 +28,8 @@
   set :fb_app_secret, ENV['FB_APP_SECRET']
   set :google_api_key, ENV['GOOGLE_API_KEY']
 
-
+  Localize.location = 'static/localization/'
+  Localize.store = :yaml
 end
 
 
@@ -35,6 +38,7 @@
   puts "***user language is #{language}"
   set :language, language
   set :language_suffix, language == 'en' ? '' : "-#{language}"
+  Localize.locale = language.to_sym
 end
 
 after do

static/localization/en.yml

@@ -0,0 +1,28 @@
+text:
+  we_have_arthritis: "We Have Arthritis!"
+  arthritis_does_not_have_us: "Arthritis doesn’t have us."
+  join_the_arthritis_society_: "Join The Arthritis Society’s special campaign to raise awareness about the impact of the disease on 4.6 million Canadian living with the arthritis. Arthritis can affect anyone; it affects babies and children, as well as people in the prime of their lives. Nearly three of every five people with arthritis are of working age (under 65)."
+  add_picture_to_show_support_: "Add your picture to show your support!"
+  create_and_share_photo_: "Create and share your photo using the tool below. Your photo will be posted on our Flickr online gallery, and you will also be able to share it on Facebook, Twitter and Tumblr."
+  i_agree_to_allow_: "I agree to allow The Arthritis Society to use my photograph as mentioned in the statement linked to this checkbox:*"
+  required_fields: "* required field"
+  user_permission_release: "User permission release"
+  upload_your_photo: "Upload Your Photo"
+  flickr_gallery: "Flickr Gallery"
+  get_on_the_map: "Get on the map!"
+  watch_our_video: "Watch Our Video"
+  video_source: "http://player.vimeo.com/video/42697821"
+  view_our_manifesto: "View Our Manifesto"
+  pick_your_message: "Pick your message"
+  generate_your_image: "Generate your image!"
+  share_your_image: "Share your image"
+  share_on_facebook: "Share on Facebook"
+  share_on_twitter: "Share on Twitter" 
+  share_on_tumblr: "Share on Tumblr"
+  please_add_message_for_sharing_: "Please add message for sharing the image on Facebook:"
+  continue: "Continue"
+  cancel: "Cancel"
+  picture_posted_on_facebook: "Your picture has been posted on your Facebook profile."
+  close_window: "Close Window"
+  window_will_be_closed_in_seconds: This window will be closed in seconds..."
+formats:

static/localization/fr.yml

@@ -0,0 +1,28 @@
+text:
+  we_have_arthritis: "Nous sommes atteints d’arthrite!" 
+  arthritis_does_not_have_us: "L’arthrite n’atteint pas notre courage."
+  join_the_arthritis_society_: "Joignez-vous à la campagne spéciale de la Société de l’arthrite pour sensibiliser davantage les gens à l’égard de cette maladie qui touche 4,6 millions de Canadiens. L’arthrite peut affliger tout le monde : les bébés, les enfants et les gens dans la fleur de l’âge. Près de trois personnes sur cinq aux prises avec l’arthrite sont en âge de travailler (moins de 65 ans)."
+  add_picture_to_show_support_: "Joignez votre photo pour démontrer votre appui"
+  create_and_share_photo_: "Téléchargez et partagez votre photo au moyen de l’outil ci-dessous. Elle sera affichée sur notre galerie Flickr en ligne et vous pourrez également la partager sur Facebook, Twitter et Tumblr."
+  i_agree_to_allow_: "J’accepte que la Société de l’arthrite utilise ma photo comme il est mentionné dans l’énoncé accessible à partir de ce lien* :"
+  required_fields: "* Champs obligatoires"
+  user_permission_release: "Autorisation de publication de l’utilisateu"
+  upload_your_photo: "Téléchargez votre photo"
+  flickr_gallery: "Galerie Flickr"
+  get_on_the_map: "Affichez-vous!"
+  watch_our_video: "Regardez notre vidéo"
+  video_source: "http://player.vimeo.com/video/42697820"
+  view_our_manifesto: "Lisez notre manifeste"
+  pick_your_message: "Choisissez votre message"
+  generate_your_image: "Créez votre image!"
+  share_your_image: "Partager une photo"
+  share_on_facebook: "Partager sur Facebook"
+  share_on_twitter: "Partager sur Twitter" 
+  share_on_tumblr: "Partager sur Tumblr"
+  please_add_message_for_sharing_: "Veuillez ajouter un message pour accompagner la photo à partager sur Facebook :"
+  continue: "Poursuivre"
+  cancel: "Annuler"
+  picture_posted_on_facebook: "Votre photo s'affiche maintenant dans votre profil Facebook."
+  close_window: "Fermer la fenêtre"
+  window_will_be_closed_in_seconds: "Cette fenêtre est en cours de fermeture..."
+formats:

views/facebook_layout.haml

@@ -12,10 +12,4 @@
     #facebook-content
       = yield
 
-:javascript
-  //localization
-  $(document).ready(function(){
-    language = "#{settings.language}";
-    $("[data-localize]").localize("app", { language: language, pathPrefix:"/localization" ,skipLanguage: /^en/ });
-  });
 

views/facebook_message.haml

@@ -1,11 +1,11 @@
 %form#facebook-form{:method => 'get', :action =>"/share/facebook/#{photo_id}"}
   #share_facebook
     %center
-      %h3{'data-localize' => 'share_on_facebook'}  Share on Facebook
-      %p{'data-localize' => 'please_add_message_for_sharing_'}  Please add message for sharing the image on Facebook:
-      %textarea#facebook-message{:name => 'message', :col => 35, :row => 3, 'data-localize' => 'please_support_million_canadians'}=facebook_message
-      %input.btn.btn-primary#continue{ :href => "#", :type => 'submit', :value => 'Continue', 'data-localize' => 'continue'} 
-      %input.btn#cancel{ :href => "#", :type => 'button', :value => 'Cancel', 'data-localize' => 'cancel'} 
+      %h3= t.share_on_facebook
+      %p= t.please_add_message_for_sharing_
+      %textarea#facebook-message{:name => 'message', :col => 35, :row => 3}=facebook_message
+      %input.btn.btn-primary#continue{ :href => "#", :type => 'submit', :value => "#{t.continue}"} 
+      %input.btn#cancel{ :href => "#", :type => 'button', :value => "#{t.cancel}"} 
 
 :javascript
   $(document).ready(function() {

views/facebook_shared.haml

@@ -1,8 +1,7 @@
 %center
-  %h3.alert.alert-success#facebook-confirm{'data-localize' =>'picture_posted_on_facebook'} Your picture has been posted on your Facebook profile.
-  %a{:href =>"", :OnClick => "window.close()", 'data-localize' => 'close_window'}Close Window
+  %h3.alert.alert-success#facebook-confirm= t.picture_posted_on_facebook
+  %a{:href =>"", :OnClick => "window.close()"}= t.close_window
   %br
-  %dev{'data-localize' =>"window_will_be_closed_in_seconds"} This window will be closed in seconds...
-
+  %dev= t.window_will_be_closed_in_seconds
 :javascript
   setTimeout("self.close();",5000);

views/index.haml

@@ -2,23 +2,23 @@
   .modal.hide#upload-photo-container
     .modal-header
       %button.close{ :type => "button", 'data-dismiss' =>"modal"}×
-      %h3{'data-localize' => 'upload_your_photo'}  Upload your photo
+      %h3= t.upload_your_photo
     .modal-body
       .choose-picture
         %input#choose-picture{ :type => 'file', :name => 'photo'}
         #editor-canvas
           #banner
           #picture
       .banner-picker
-        %h4.title{'data-localize' => 'pick_your_message'}Pick your message
+        %h4.title= t.pick_your_message
         %center.controls
           %img.active{:src => "/images/banners/no-padding/banner1#{settings.language_suffix}.png", :banner => "banner1#{settings.language_suffix}"}
           %img{:src => "/images/banners/no-padding/banner2#{settings.language_suffix}.png", :banner => "banner2#{settings.language_suffix}"}
           %img.round{:src => "/images/banners/no-padding/banner3-small#{settings.language_suffix}.png", :banner => "banner3-small#{settings.language_suffix}"}
         %input{:type => "hidden", :value => "banner1#{settings.language_suffix}", :name => "banner"}
     .modal-footer.generate
       %center
-        %button.btn.btn-primary.btn-large#generate-btn{ :type => 'submit', :disabled => "disabled", 'data-localize' => 'generate_your_image' } Generate your image!
+        %button.btn.btn-primary.btn-large#generate-btn{ :type => 'submit', :disabled => "disabled"}= t.generate_your_image 
 %script{ :type => 'text/javascript', :src => '/javascripts/picture-loader.js' }
 :javascript
   $(document).ready(function() {

views/layout.haml

@@ -27,11 +27,11 @@
       #header
         #left-side-header
           #left-container
-            %h1{'data-localize' => 'we_have_arthritis'}We Have Arthritis!
-            %h1{'data-localize' => 'arthritis_does_not_have_us'}Arthritis doesn’t have us.
-            %p{'data-localize' => 'join_the_arthritis_society_'}Join The Arthritis Society’s special campaign to raise awareness about the impact of the disease on 4.6 million Canadian living with the arthritis. Arthritis can affect anyone; it affects babies and children, as well as people in the prime of their lives. Nearly three of every five people with arthritis are of working age (under 65).
-            %h2{'data-localize' => 'add_picture_to_show_support_'}Add your picture to show your support!
-            %p{'data-localize' => 'create_and_share_photo_'}Create and share your photo using the tool below. Your photo will be posted on our Flickr online gallery, and you will also be able to share it on Facebook, Twitter and Tumblr.
+            %h1= t.we_have_arthritis
+            %h1= t.arthritis_does_not_have_us
+            %p= t.join_the_arthritis_society_
+            %h2= t.add_picture_to_show_support_
+            %p= t.create_and_share_photo_
             #sample-images.clear
               %img.sample{:src => "/images/banners/no-padding/banner1#{settings.language_suffix}.png"}
               %img.sample{:src => "/images/banners/no-padding/banner2#{settings.language_suffix}.png"}
@@ -40,23 +40,23 @@
 
             #disclaimer.clear
               #disclaimer-description
-                %p{'data-localize' =>'i_agree_to_allow_'}I agree to allow The Arthritis Society to use my photograph as mentioned in the statement linked to this checkbox:*
-                %p.hint{ 'data-localize' => 'required_fields'}* required field
+                %p= t.i_agree_to_allow_
+                %p.hint= t.required_fields
               #agree-check-container
                 %input#agree-check{ :type => 'checkbox', :value => 'yes', :name => "agree-check"}
-                %a#agree-doc{:href => "/doc/PermissionIsRequired#{settings.language_suffix}.pdf", 'data-localize' => 'user_permission_release', :target => '_blank'} User permission release
+                %a#agree-doc{:href => "/doc/PermissionIsRequired#{settings.language_suffix}.pdf", :target => '_blank'}= t.user_permission_release
             %center.clear
-              %button.btn.btn-large.btn-primary#upload-photo{:disabled => 'disabled', 'data-localize' => 'upload_your_photo'} Upload Your Photo
+              %button.btn.btn-large.btn-primary#upload-photo{:disabled => 'disabled' }= t.upload_your_photo
         #right-side-header
           #right-container
-            %h2{ 'data-localize' => 'flickr_gallery'}Flickr Gallery
+            %h2= t.flickr_gallery
             #flickr-ss
-            %h2{ 'data-localize' => 'get_on_the_map'}Get on the map!
+            %h2= t.get_on_the_map
             #map-canvas
-            %h2{ 'data-localize' => 'watch_our_video'}Watch Our Video
-            %iframe#video{ :src => "http://player.vimeo.com/video/42697821", 'src-fr' => "http://player.vimeo.com/video/42697820"}
+            %h2= t.watch_our_video
+            %iframe#video{ :src => "#{t.video_source}"}
             %a#view-manifesto{ :href => "/images/manifesto#{settings.language_suffix}.jpg", :target =>"_blank"}
-              %h2{'data-localize' => 'view_our_manifesto'}View Our Manifesto
+              %h2= t.view_our_manifesto
               %center
                 %img{:src => "/images/manifesto-thumb#{settings.language_suffix}.jpg"}
       #facebook-content
@@ -72,18 +72,6 @@
         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
       })();
-
-      //localization
-      $(document).ready(function(){
-        language = "#{settings.language}";
-        $("[data-localize]").localize("app", { language: language, pathPrefix:"/localization" ,skipLanguage: /^en/ });
-
-        if(language == 'fr'){
-          $("#video").attr("src", $("#video").attr("src-fr"));
-        }
-      });
-
-
 
       //slide show
       flickrshow('flickr-ss', { user: "#{settings.flickr_user_id}", tags: "#{settings.campaign}", autoplay: true, license: '' }); 

views/show.haml

@@ -1,17 +1,16 @@
 .modal.hide#share-image-container
   .modal-header
     %button.close{ :type => "button", 'data-dismiss' =>"modal"}×
-    %h3{ 'data-localize' => 'share_your_image'} Share your image
+    %h3= t.share_your_image
   .modal-body
     - if session[:sharing_success]
       .alert.alert-success= session[:sharing_success]
     %img.user-image.row-fluid{ :src => photo_url }
   .modal-footer#share-box
     %center
-      %a.btn.btn-large.btn-primary#launch_share_fb{'data-localize' => 'share_on_facebook'} Share on Facebook
-      %a.btn.btn-large.btn-primary{ :onclick => "window.open('#{share_to_twitter_url(photo_url)}', 't', 'toolbar=0,resizable=0,status=1,width=450,height=430')", 'data-localize' => 'share_on_twitter' } Share on Twitter
-      %a.btn.btn-large.btn-primary{ :onclick => "window.open('#{share_to_tumblr_url(photo_url)}', 't', 'toolbar=0,resizable=0,status=1,width=450,height=430')", 'data-localize' => 'share_on_tumblr' } Share on Tumblr
-
+      %a.btn.btn-large.btn-primary#launch_share_fb= t.share_on_facebook
+      %a.btn.btn-large.btn-primary{ :onclick => "window.open('#{share_to_twitter_url(photo_url)}', 't', 'toolbar=0,resizable=0,status=1,width=450,height=430')"}= t.share_on_twitter
+      %a.btn.btn-large.btn-primary{ :onclick => "window.open('#{share_to_tumblr_url(photo_url)}', 't', 'toolbar=0,resizable=0,status=1,width=450,height=430')"}= t.share_on_tumblr    
 
 
 :javascript