preview pet type selection, data loading
This commit is contained in:
parent
108fe9f2dd
commit
d3ffefabfa
4 changed files with 74 additions and 18 deletions
|
@ -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
|
||||
|
|
|
@ -19,17 +19,27 @@ body.show {
|
|||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#item-preview div {
|
||||
float: left;
|
||||
width: 50%;
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue