preview pet type selection, data loading

This commit is contained in:
Emi Matchu 2010-05-16 16:37:55 -04:00
parent 108fe9f2dd
commit d3ffefabfa
4 changed files with 74 additions and 18 deletions

View file

@ -9,7 +9,7 @@ module ItemsHelper
pet_type.species = species
pet_type.color = color
src = sprintf(StandardSpeciesImageFormat, pet_type.image_hash)
html + image_tag(src, 'data-color-id' => color.id, 'data-species-id' => species.id, 'data-species-name' => species.name)
html + link_to(image_tag(src), '#', 'data-color-id' => color.id, 'data-species-id' => species.id, 'data-species-name' => species.name)
end)
end
end

View file

@ -19,17 +19,27 @@ body.show {
margin-top: 1em;
}
#item-preview div {
#item-preview {
div {
float: left;
width: 50%;
}
a, img {
height: 50px;
width: 50px;
}
a {
@include inline-block;
&.current {
background: $module_background_color;
outline: 1px solid $module_border_color;
}
}
}
#item-preview-swf {
height: 50%;
}
#item-preview img {
height: 50px;
width: 50px;
}
}

View file

@ -1,12 +1,44 @@
var PREVIEW_SWF_ID = 'item-preview-swf';
var PREVIEW_SWF_ID = 'item-preview-swf',
speciesList = $('#item-preview a');
function PetType() {}
PetType.prototype.load = function () {
var url = '/species/' + this.species_id + '/color/' + this.color_id + '/pet_type.json';
$.getJSON(url, function (data) {
console.log(data);
});
}
PetType.prototype.setAsCurrent = function () {
PetType.current = this;
speciesList.filter('.current').removeClass('current');
this.link.addClass('current');
this.load();
}
PetType.create_from_link = function (link) {
var pet_type = new PetType();
pet_type.color_id = link.attr('data-color-id');
pet_type.species_id = link.attr('data-species-id');
pet_type.link = link;
return pet_type;
}
swfobject.embedSWF(
'http://impress.openneo.net/assets/swf/preview.swf', // URL
PREVIEW_SWF_ID, // ID
400, // width
400, // height
9, // required version
'9', // required version
'http://impress.openneo.net/assets/js/swfobject/expressInstall.swf', // express install URL
{'swf_assets_path': '/assets'}, // flashvars
{'wmode': 'transparent'} // params
)
PetType.create_from_link(speciesList.eq(Math.floor(Math.random()*speciesList.length))).setAsCurrent();
speciesList.click(function (e) {
e.preventDefault();
PetType.create_from_link($(this)).setAsCurrent();
});

View file

@ -567,17 +567,31 @@ body.show #item-name {
*vertical-align: auto;
margin-top: 1em;
}
/* line 22, ../../../app/stylesheets/items/_show.scss */
/* line 23, ../../../app/stylesheets/items/_show.scss */
body.show #item-preview div {
float: left;
width: 50%;
}
/* line 27, ../../../app/stylesheets/items/_show.scss */
body.show #item-preview-swf {
height: 50%;
}
/* line 31, ../../../app/stylesheets/items/_show.scss */
body.show #item-preview img {
/* line 28, ../../../app/stylesheets/items/_show.scss */
body.show #item-preview a, body.show #item-preview img {
height: 50px;
width: 50px;
}
/* line 33, ../../../app/stylesheets/items/_show.scss */
body.show #item-preview a {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: middle;
*display: inline;
*vertical-align: auto;
}
/* line 35, ../../../app/stylesheets/items/_show.scss */
body.show #item-preview a.current {
background: #66a3d2;
outline: 1px solid #033e6b;
}
/* line 42, ../../../app/stylesheets/items/_show.scss */
body.show #item-preview-swf {
height: 50%;
}