diff --git a/app/stylesheets/pets/_bulk.sass b/app/stylesheets/pets/_bulk.sass index a8de64ea..085d3448 100644 --- a/app/stylesheets/pets/_bulk.sass +++ b/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 diff --git a/app/views/pets/bulk.html.haml b/app/views/pets/bulk.html.haml index 966a2ac3..e47133d6 100644 --- a/app/views/pets/bulk.html.haml +++ b/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 - %h3 Looking for ways to contribute? + - localized_cache :action_suffix => 'needed_items_content' do + %h3= t '.needed_items.header' - %p - Enter your pet's name below and we'll tell you what items you can help us - model. Thanks for your help! + %p= t '.needed_items.explanation' = 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-name - can model - - %button#needed-items-reload Reload + %span#needed-items-pet-header + %button#needed-items-reload= t '.needed_items.reload' %ul#needed-items-pet-items = form_tag load_pet_path, :id => 'bulk-pets-form' do - - cache :action_suffix => 'bulk_pets_content' do - %h3 Model pets in bulk + - localized_cache :action_suffix => 'bulk_pets_content' do + %h3= t '.bulk_pets.header' - %p - 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! + %p= t '.bulk_pets.explanation' = 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-clear{:type => "button"} Clear + %button#bulk-pets-form-add{:type => "button"}= t '.bulk_pets.add' + %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,8 +60,22 @@ {{/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 diff --git a/config/locales/en-meep.yml b/config/locales/en-meep.yml index 8a1d1042..1e1bce72 100644 --- a/config/locales/en-meep.yml +++ b/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 diff --git a/config/locales/en.yml b/config/locales/en.yml index fdde6d37..995d5cfa 100644 --- a/config/locales/en.yml +++ b/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 diff --git a/public/javascripts/pets/bulk.js b/public/javascripts/pets/bulk.js index 7b9bd7dd..b3838659 100644 --- a/public/javascripts/pets/bulk.js +++ b/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 () { - loadPet(UI.pet_name.text()); + UI.reload.click(function (e) { + 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 = [], - standard_pet_el = $('
'), - url = form.attr('action') + '.json'; - standard_pet_el.append('').append($('', {'class': 'name'})) - .append($('', {'class': 'response', text: 'Waiting...'})); + var pets = [], url = form.attr('action') + '.json'; function Pet(name) { - var el = standard_pet_el.clone() - .children('img').attr('src', petImage('cpn/' + name, 1)).end() - .children('span.name').text(name).end(); - el.appendTo(queue_el); + var el = $('#bulk-pets-submission-template').tmpl({pet_name: name}). + 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.addClass('loaded'); - response_el.text(response); + el.removeClass('loading').addClass('loaded'); + $('#bulk-pets-submission-success-template').tmpl({points: points}). + appendTo(response_el); }, type: 'post', url: url diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index 2f7da97a..05c89052 100644 --- a/public/stylesheets/compiled/screen.css +++ b/public/stylesheets/compiled/screen.css @@ -4226,38 +4226,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 */ -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 */ +/* line 105, ../../../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; }