i18n for pets#bulk

app/stylesheets/pets/_bulk.sass

@@ -83,6 +83,14 @@ body.pets-bulk
         margin: 0 auto
         min-width: 25%
         text-align: left
+        .waiting-message, .loading-message, .response
+          display: none
+          font:
+            size: 75%
+            style: italic
+          margin-left: 75px
+        &.waiting .waiting-message, &.loading .loading-message, &.loaded .response, &.failed .response
+          display: block
         &.loaded
           background: $notice-bg-color
         &.failed
@@ -92,13 +100,6 @@ body.pets-bulk
         float: left
         height: 50px
         width: 50px
-      span
-        display: block
-      .response
-        font:
-          size: 75%
-          style: italic
-        margin-left: 75px
 
   &.js
     .noscript

app/views/pets/bulk.html.haml

@@ -1,53 +1,45 @@
-- title 'Modeling Hub'
+- title t('modeling_hub')
 
 = form_tag load_pet_path, :id => 'needed-items-form' do
-  - cache :action_suffix => 'needed_items_content' do
+  - localized_cache :action_suffix => 'needed_items_content' do
-    %h3 Looking for ways to contribute?
+    %h3= t '.needed_items.header'
     
-    %p
+    %p= t '.needed_items.explanation'
-      Enter your pet's name below and we'll tell you what items you can help us
-      model. Thanks for your help!
     
     = origin_tag bulk_pets_path
     = destination_tag 'needed_items'
     
     %input#needed-items-pet-name-field{:type => "text", :name => "name"}/
-    %input{:type => "submit", :value => "Submit"}/
+    %input{:type => "submit", :value => t('.needed_items.submit')}/
     
     #needed-items-alert.alert
     
     #needed-items-pet.script-only
       %h4
         %img#needed-items-pet-thumbnail.inline-image
-        Items
+        %span#needed-items-pet-header
-        %span#needed-items-pet-name
+        %button#needed-items-reload= t '.needed_items.reload'
-        can model
-        
-        %button#needed-items-reload Reload
       
       %ul#needed-items-pet-items
 
 = form_tag load_pet_path, :id => 'bulk-pets-form' do
-  - cache :action_suffix => 'bulk_pets_content' do
+  - localized_cache :action_suffix => 'bulk_pets_content' do
-    %h3 Model pets in bulk
+    %h3= t '.bulk_pets.header'
     
-    %p
+    %p= t '.bulk_pets.explanation'
-      Got a lot of pets to model? Just keep typing them into the box below, or
-      even paste in a whole list of names, one name per line. Thanks for your
-      help!
     
     = origin_tag bulk_pets_path
    
     %div.noscript
       %input{:name => "name", :type => "text"}/
-      %input{:type => "submit", :value => "Load pet"}/
+      %input{:type => "submit", :value => t('.bulk_pets.submit')}/
     %div.script-only
       %textarea
-      %button#bulk-pets-form-add{:type => "button"} Add
+      %button#bulk-pets-form-add{:type => "button"}= t '.bulk_pets.add'
-      %button#bulk-pets-form-clear{:type => "button"} Clear
+      %button#bulk-pets-form-clear{:type => "button"}= t '.bulk_pets.clear'
       %ul
 
-- cache :action_suffix => 'item_template' do
+- localized_cache :action_suffix => 'templates' do
   %script#item-template{:type => 'text/x-jquery-tmpl'}
     %li{:class => 'object{{if owned}} owned{{/if}}'}
       = link_to item_path(':id').sub(':id', '${id}') do
@@ -68,9 +60,23 @@
         {{/if}}
       
       {{if owned}}
-      %span.object-owned You own this item
+      %span.object-owned= t '.needed_items.item_owned'
       {{/if}}
   
+  %script#needed-items-pet-header-template{:type => 'text/x-jquery/tmpl'}
+    = t '.needed_items.pet_header', :pet_name => '${pet_name}'
+  
+  %script#bulk-pets-submission-template{:type => 'text/x-jquery/tmpl'}
+    %li.waiting
+      %img{:src => 'http://pets.neopets.com/cpn/${pet_name}/1/1.png'}
+      %span.name ${pet_name}
+      %span.waiting-message= t '.bulk_pets.waiting'
+      %span.loading-message= t '.bulk_pets.loading'
+      %span.response
+    
+  %script#bulk-pets-submission-success-template{:type => 'text/x-jquery/tmpl'}
+    = t '.bulk_pets.submission_success', :points => '${points}'
+
 - content_for :javascripts do
   = include_javascript_libraries :jquery, :jquery_tmpl
   = include_javascripts :bulk_pets_package

config/locales/en-meep.yml

@@ -189,6 +189,30 @@ en-meep:
       clone: Meep a copy
       creation_summary_html: Meeped by %{user_link}, %{created_at_ago} ago
   
+  pets:
+    bulk:
+      needed_items:
+        header: Looking for ways to contreepute?
+        explanation:
+          Meep your pet's name below and we'll tell you what items you can
+          meep. Thanks for your meep!
+        submit: Meep
+        pet_header: Items %{pet_name} can meep
+        reload: Remeep
+        item_owned: You own this meepit
+      bulk_pets:
+        header: Meep pets in bulk
+        explanation:
+          Got a lot of pets to meep? Just keep meeping them into the box below,
+          or even meep in a whole list of names, one name per line. Thanks for
+          your meep!
+        submit: Meep pet
+        add: Meep
+        clear: Cleer
+        waiting: Weeting…
+        loading: Leeding…
+        submission_success: "%{points} peeps"
+  
   users:
     top_contributors:
       title: Top Conmeeputors

config/locales/en.yml

@@ -192,6 +192,30 @@ en:
       clone: Edit a copy
       creation_summary_html: Created by %{user_link}, %{created_at_ago} ago
   
+  pets:
+    bulk:
+      needed_items:
+        header: Looking for ways to contribute?
+        explanation:
+          Enter your pet's name below and we'll tell you what items you can
+          model. Thanks for your help!
+        submit: Submit
+        pet_header: Items %{pet_name} can model
+        reload: Reload
+        item_owned: You own this item
+      bulk_pets:
+        header: Model pets in bulk
+        explanation:
+          Got a lot of pets to model? Just keep typing them into the box below,
+          or even paste in a whole list of names, one name per line. Thanks for
+          your help!
+        submit: Load pet
+        add: Add
+        clear: Clear
+        waiting: Waiting…
+        loading: Loading…
+        submission_success: "%{points} points"
+  
   users:
     top_contributors:
       title: Top Contributors

public/javascripts/pets/bulk.js

@@ -1,4 +1,4 @@
-var DEBUG = (document.location.search == '?debug');
+var DEBUG = (document.location.search.substr(0, 6) == '?debug');
 
 /* Needed items form */
 (function () {
@@ -7,7 +7,7 @@ var DEBUG = (document.location.search == '?debug');
   UI.alert = $('#needed-items-alert');
   UI.pet_name_field = $('#needed-items-pet-name-field');
   UI.pet_thumbnail = $('#needed-items-pet-thumbnail');
-  UI.pet_name = $('#needed-items-pet-name');
+  UI.pet_header = $('#needed-items-pet-header');
   UI.reload = $('#needed-items-reload');
   UI.pet_items = $('#needed-items-pet-items');
   UI.item_template = $('#item-template');
@@ -24,6 +24,8 @@ var DEBUG = (document.location.search == '?debug');
   
   /* Pet */
   
+  var last_successful_pet_name = null;
+  
   function loadPet(pet_name) {
     // If there is a request in progress, kill it. Our new pet request takes
     // priority, and, if I submit a name while the previous name is loading, I
@@ -52,8 +54,11 @@ var DEBUG = (document.location.search == '?debug');
   }
   
   function petSuccess(data, pet_name) {
+    last_successful_pet_name = pet_name;
     UI.pet_thumbnail.attr('src', petThumbnailUrl(pet_name));
-    UI.pet_name.text(pet_name);
+    UI.pet_header.empty();
+    $('#needed-items-pet-header-template').tmpl({pet_name: pet_name}).
+      appendTo(UI.pet_header);
     loadItems(data.query);
   }
   
@@ -92,8 +97,9 @@ var DEBUG = (document.location.search == '?debug');
     loadPet(UI.pet_name_field.val());
   });
   
-  UI.reload.click(function () {
+  UI.reload.click(function (e) {
-    loadPet(UI.pet_name.text());
+    e.preventDefault();
+    loadPet(last_successful_pet_name);
   });
 })();
 
@@ -109,20 +115,15 @@ var DEBUG = (document.location.search == '?debug');
   $(document.body).addClass('js');
 
   bulk_load_queue = new (function BulkLoadQueue() {
-    var pets = [],
+    var pets = [], url = form.attr('action') + '.json';
-      standard_pet_el = $('<li/>'),
-      url = form.attr('action') + '.json';
-    standard_pet_el.append('<img/>').append($('<span/>', {'class': 'name'}))
-      .append($('<span/>', {'class': 'response', text: 'Waiting...'}));
     
     function Pet(name) {
-      var el = standard_pet_el.clone()
+      var el = $('#bulk-pets-submission-template').tmpl({pet_name: name}).
-        .children('img').attr('src', petImage('cpn/' + name, 1)).end()
+        appendTo(queue_el);
-        .children('span.name').text(name).end();
-      el.appendTo(queue_el);
       
       this.load = function () {
-        var response_el = el.children('span.response').text('Loading...');
+        el.removeClass('waiting').addClass('loading');
+        var response_el = el.find('span.response');
         $.ajax({
           complete: function (data) {
             pets.shift();
@@ -133,14 +134,14 @@ var DEBUG = (document.location.search == '?debug');
           data: {name: name},
           dataType: 'json',
           error: function (xhr) {
-            el.addClass('failed');
+            el.removeClass('loading').addClass('failed');
             response_el.text(xhr.responseText);
           },
           success: function (data) {
             var points = data.points;
-            var response = (points === true) ? 'Thanks!' : points + ' points';
+            el.removeClass('loading').addClass('loaded');
-            el.addClass('loaded');
+            $('#bulk-pets-submission-success-template').tmpl({points: points}).
-            response_el.text(response);
+              appendTo(response_el);
           },
           type: 'post',
           url: url

public/stylesheets/compiled/screen.css

@@ -4201,38 +4201,39 @@ body.pets-bulk #bulk-pets-form ul li {
   *display: inline;
 }
 /* line 86, ../../../app/stylesheets/pets/_bulk.sass */
+body.pets-bulk #bulk-pets-form ul li .waiting-message, body.pets-bulk #bulk-pets-form ul li .loading-message, body.pets-bulk #bulk-pets-form ul li .response {
+  display: none;
+  font-size: 75%;
+  font-style: italic;
+  margin-left: 75px;
+}
+/* line 92, ../../../app/stylesheets/pets/_bulk.sass */
+body.pets-bulk #bulk-pets-form ul li.waiting .waiting-message, body.pets-bulk #bulk-pets-form ul li.loading .loading-message, body.pets-bulk #bulk-pets-form ul li.loaded .response, body.pets-bulk #bulk-pets-form ul li.failed .response {
+  display: block;
+}
+/* line 94, ../../../app/stylesheets/pets/_bulk.sass */
 body.pets-bulk #bulk-pets-form ul li.loaded {
   background: #e6efc2;
 }
-/* line 88, ../../../app/stylesheets/pets/_bulk.sass */
+/* line 96, ../../../app/stylesheets/pets/_bulk.sass */
 body.pets-bulk #bulk-pets-form ul li.failed {
   background: #fbe3e4;
 }
-/* line 90, ../../../app/stylesheets/pets/_bulk.sass */
+/* line 98, ../../../app/stylesheets/pets/_bulk.sass */
 body.pets-bulk #bulk-pets-form ul img {
   float: left;
   height: 50px;
   width: 50px;
 }
-/* line 95, ../../../app/stylesheets/pets/_bulk.sass */
+/* line 105, ../../../app/stylesheets/pets/_bulk.sass */
-body.pets-bulk #bulk-pets-form ul span {
-  display: block;
-}
-/* line 97, ../../../app/stylesheets/pets/_bulk.sass */
-body.pets-bulk #bulk-pets-form ul .response {
-  font-size: 75%;
-  font-style: italic;
-  margin-left: 75px;
-}
-/* line 104, ../../../app/stylesheets/pets/_bulk.sass */
 body.pets-bulk.js .noscript {
   display: none;
 }
-/* line 106, ../../../app/stylesheets/pets/_bulk.sass */
+/* line 107, ../../../app/stylesheets/pets/_bulk.sass */
 body.pets-bulk.js .script-only {
   display: block;
 }
-/* line 109, ../../../app/stylesheets/pets/_bulk.sass */
+/* line 110, ../../../app/stylesheets/pets/_bulk.sass */
 body.pets-bulk .script-only {
   display: none;
 }