diff --git a/app/views/outfits/new.html.haml b/app/views/outfits/new.html.haml index c5c0f229..e5b59621 100644 --- a/app/views/outfits/new.html.haml +++ b/app/views/outfits/new.html.haml @@ -87,11 +87,18 @@ - @newest_items.each do |item| = link_to image_tag(item.thumbnail_url), item -- localized_cache :action_suffix => 'pet_query_notice' do +- localized_cache :action_suffix => 'templates' do %script#pet-query-notice-template{:type => 'text/x-jquery-tmpl'} .success %img.inline-image{:src => '${pet_image_url}'} = t '.pet_query.notice_html', :pet_name => '${pet_name}' + + %script#preview-pet-type-not-found-template{:type => 'text/x-jquery-tmpl'} + = t '.preview.pet_type_not_found', :color_name => '${color_name}', + :species_name => '${species_name}' + + %script#preview-pet-not-found-template{:type => 'text/x-jquery-tmpl'} + = t '.preview.pet_not_found' - 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 f4070d2c..3012c48e 100644 --- a/config/locales/en-meep.yml +++ b/config/locales/en-meep.yml @@ -590,6 +590,10 @@ en-meep: new: tagline: Meeps made meepy! + preview: + pet_type_not_found: + We haven't meeped a %{color_name} %{species_name}. Meep? + pet_not_found: Pet not meeped. load_pet: legend: Enter your pet's meep submit: Meep my outfit! diff --git a/config/locales/en.yml b/config/locales/en.yml index 61d9aca5..cf34f8e4 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -609,6 +609,10 @@ en: new: tagline: Neopets wearables made easy! + preview: + pet_type_not_found: + We haven't seen a %{color_name} %{species_name}. Have you? + pet_not_found: Pet not found. load_pet: legend: Enter your pet's name submit: Plan my outfit! diff --git a/public/javascripts/outfits/new.js b/public/javascripts/outfits/new.js index 5889262d..4a1f29fb 100644 --- a/public/javascripts/outfits/new.js +++ b/public/javascripts/outfits/new.js @@ -19,9 +19,13 @@ var Preview = { preview_el.addClass('loading'); response_el.text('Loading...'); }, - notFound: function (str) { + failed: function () { preview_el.addClass('hidden'); - response_el.text(str); + }, + notFound: function (key, options) { + Preview.failed(); + response_el.empty(); + $('#preview-' + key + '-template').tmpl(options).appendTo(response_el); }, updateWithName: function () { var name = name_el.val(), job; @@ -107,19 +111,19 @@ $(function () { }).error(function () { if(Preview.Job.current.loading) { Preview.Job.loading = false; - Preview.notFound('Pet not found.'); + Preview.notFound('pet-not-found'); } }); var selectFields = $('#species, #color'); selectFields.change(function () { - var type = {}, name = []; + var type = {}, nameComponents = {}; selectFields.each(function () { - var el = $(this), selectedEl = el.children(':selected'); - type[el.attr('id')] = selectedEl.val(); - name.push(selectedEl.text()); + var el = $(this), selectedEl = el.children(':selected'), key = el.attr('id'); + type[key] = selectedEl.val(); + nameComponents[key] = selectedEl.text(); }); - name = name.join(' '); + name = nameComponents.color + ' ' + nameComponents.species; Preview.displayLoading(); $.ajax({ url: '/species/' + type.species + '/color/' + type.color + '/pet_type.json', @@ -134,11 +138,11 @@ $(function () { job.name = name; job.setAsCurrent(); } else { - Preview.notFound("We haven't seen a " + name + ". Have you?"); + Preview.notFound('pet-type-not-found', { + color_name: nameComponents.color, + species_name: nameComponents.species + }); } - }, - error: function () { - Preview.notFound("Error fetching preview. Try again?"); } }); });