design mockup for autofilter; no new behavior yet

This commit is contained in:
Emi Matchu 2014-04-05 17:16:35 -05:00
parent a375707e40
commit acbec2ad5e
4 changed files with 25 additions and 24 deletions

View file

@ -1089,7 +1089,6 @@ View.Search = function (wardrobe) {
var form = $('form.item-search'),
item_set = new Partial.ItemSet(wardrobe, '#preview-search-results'),
input_el = form.find('input[name=query]'),
clear_el = $('#preview-search-form-clear'),
error_el = $('#preview-search-form-error'),
help_el = $('#preview-search-form-help'),
loading_el = $('#preview-search-form-loading'),
@ -1170,12 +1169,6 @@ View.Search = function (wardrobe) {
loadPage(1);
});
clear_el.click(function (e) {
e.preventDefault();
input_el.val('');
form.submit();
});
wardrobe.search.bind('startRequest', function () {
loading_el.delay(1000).show('slow');
});
@ -1204,7 +1197,6 @@ View.Search = function (wardrobe) {
var human_query = typeof current_query === 'string' ? current_query : '';
input_el.val(human_query);
no_results_span.text(human_query);
clear_el.toggle(!!request.query && request.query.length > 0);
});
wardrobe.search.bind('updatePagination', function (current_page, total_pages) {
@ -1304,25 +1296,32 @@ View.Search = function (wardrobe) {
wrapper.find('li.must-log-in input').removeAttr('disabled');
}
var speciesNamesById = null;
var namesById = null;
function updateCurrentSpeciesName() {
if (speciesNamesById !== null) {
var speciesId = wardrobe.outfits.getPetType().species_id;
var speciesName = speciesNamesById[speciesId];
function updatePetAttributes() {
if (namesById !== null) {
var petType = wardrobe.outfits.getPetType();
var speciesName = namesById.species[petType.species_id];
$('label[for=advanced-search-species] span').text(speciesName);
$('label[for=preview-search-autofilter] .species').text(speciesName);
var colorName = namesById.color[petType.color_id];
$('label[for=preview-search-autofilter] .color').text(colorName);
}
}
wardrobe.pet_attributes.bind('update', function(petAttributes) {
speciesNamesById = {};
petAttributes.species.forEach(function(species) {
speciesNamesById[species.id] = species.name;
namesById = {};
["species", "color"].forEach(function(key) {
namesById[key] = {};
petAttributes[key].forEach(function(attr) {
namesById[key][attr.id] = attr.name;
});
});
updateCurrentSpeciesName();
updatePetAttributes();
});
wardrobe.outfits.bind('updatePetType', updateCurrentSpeciesName);
wardrobe.outfits.bind('updatePetType', updatePetAttributes);
}
View.PrankColorMessage = function(wardrobe) {

View file

@ -306,7 +306,8 @@ body.outfits-edit
li:first-child
margin-bottom: .75em
#preview-search-advanced-link
#preview-search-advanced-link, label[for=preview-search-autofilter]
+inline-block
font-size: 85%
margin-right: 1em
.preview-search-form-your-items
@ -321,9 +322,6 @@ body.outfits-edit
margin: 0 .25em
.current
font-weight: bold
#preview-search-form-clear
display: none
font-size: 85%
#preview-search-form-loading
display: none
font:

View file

@ -101,7 +101,11 @@
%input{:name => "query", :type => "search", autofocus: true}/
%input{:type => "submit", :value => t('.search.form.submit')}/
%a#preview-search-advanced-link{href: 'javascript:void(0)'}= t '.search.advanced.header'
%a#preview-search-form-clear{:href => "#"}= t '.search.form.clear'
%label{for: 'preview-search-autofilter'}
%input#preview-search-autofilter{type: 'checkbox', checked: true}
= t('.search.autofilter_html',
color: content_tag('span', '', :class => 'color'),
species: content_tag('span', '', :class => 'species'))
#preview-search-form-pagination
#preview-search-basic-main
#preview-search-form-loading= t '.search.loading'

View file

@ -615,9 +615,9 @@ en:
header: Add an item
form:
submit: Search
clear: clear
loading: Loading…
no_results_html: No results for "%{query}"
autofilter_html: Fits the %{color} %{species}
advanced:
header: Advanced Search
submit: Search, advancedly!