From d3ffefabfada0b7f33c6165413afeb12706dfd3e Mon Sep 17 00:00:00 2001 From: Matchu Date: Sun, 16 May 2010 16:37:55 -0400 Subject: [PATCH] preview pet type selection, data loading --- app/helpers/items_helper.rb | 2 +- app/stylesheets/items/_show.scss | 26 +++++++++++++------ public/javascripts/items/show.js | 36 ++++++++++++++++++++++++-- public/stylesheets/compiled/screen.css | 28 +++++++++++++++----- 4 files changed, 74 insertions(+), 18 deletions(-) diff --git a/app/helpers/items_helper.rb b/app/helpers/items_helper.rb index cac4db38..67553d0f 100644 --- a/app/helpers/items_helper.rb +++ b/app/helpers/items_helper.rb @@ -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 diff --git a/app/stylesheets/items/_show.scss b/app/stylesheets/items/_show.scss index 60061bed..b89f577f 100644 --- a/app/stylesheets/items/_show.scss +++ b/app/stylesheets/items/_show.scss @@ -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; - } } diff --git a/public/javascripts/items/show.js b/public/javascripts/items/show.js index abaab6a5..08e43ecf 100644 --- a/public/javascripts/items/show.js +++ b/public/javascripts/items/show.js @@ -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(); +}); diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index 567c32be..ffc36e6d 100644 --- a/public/stylesheets/compiled/screen.css +++ b/public/stylesheets/compiled/screen.css @@ -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%; +}