From 9b0cf8b59710e3c785266fc62f9971c50cc2b14a Mon Sep 17 00:00:00 2001 From: Matchu Date: Sat, 13 Nov 2010 17:26:14 -0500 Subject: [PATCH] show outfit page --- app/controllers/outfits_controller.rb | 10 ++++-- app/models/outfit.rb | 21 +++++++++++ app/stylesheets/_layout.sass | 2 +- app/stylesheets/outfits/_show.sass | 29 +++++++++++++++ .../partials/clean/_constants.sass | 2 ++ app/stylesheets/screen.sass | 1 + app/views/outfits/edit.html.haml | 2 +- app/views/outfits/show.html.haml | 16 +++++++++ config/assets.yml | 4 +++ public/javascripts/outfits/show.js | 10 ++++++ public/javascripts/wardrobe.js | 35 ++++++++++++------- public/stylesheets/compiled/screen.css | 35 +++++++++++++++++++ 12 files changed, 150 insertions(+), 17 deletions(-) create mode 100644 app/stylesheets/outfits/_show.sass create mode 100644 app/views/outfits/show.html.haml create mode 100644 public/javascripts/outfits/show.js diff --git a/app/controllers/outfits_controller.rb b/app/controllers/outfits_controller.rb index 0d5c02e9..80566046 100644 --- a/app/controllers/outfits_controller.rb +++ b/app/controllers/outfits_controller.rb @@ -1,5 +1,5 @@ class OutfitsController < ApplicationController - before_filter :find_outfit, :only => [:show, :update, :destroy] + before_filter :find_authorized_outfit, :only => [:update, :destroy] def create if user_signed_in? @@ -31,7 +31,11 @@ class OutfitsController < ApplicationController end def show - render :json => @outfit + @outfit = Outfit.find(params[:id]) + respond_to do |format| + format.html { render } + format.json { render :json => @outfit } + end end def update @@ -48,7 +52,7 @@ class OutfitsController < ApplicationController end end - def find_outfit + def find_authorized_outfit raise ActiveRecord::RecordNotFound unless user_signed_in? @outfit = current_user.outfits.find(params[:id]) end diff --git a/app/models/outfit.rb b/app/models/outfit.rb index 828b7e80..04f31d36 100644 --- a/app/models/outfit.rb +++ b/app/models/outfit.rb @@ -1,5 +1,8 @@ class Outfit < ActiveRecord::Base has_many :item_outfit_relationships, :dependent => :destroy + has_many :worn_item_outfit_relationships, :class_name => 'ItemOutfitRelationship', + :conditions => {:is_worn => true} + has_many :worn_items, :through => :worn_item_outfit_relationships, :source => :item belongs_to :pet_state belongs_to :user @@ -13,6 +16,10 @@ class Outfit < ActiveRecord::Base :methods => [:color_id, :species_id, :worn_and_unworn_item_ids] end + def closet_item_ids + item_outfit_relationships.map(&:item_id) + end + def color_id pet_state.pet_type.color_id end @@ -21,6 +28,16 @@ class Outfit < ActiveRecord::Base pet_state.pet_type.species_id end + def to_query + { + :closet => closet_item_ids, + :color => color_id, + :objects => worn_item_ids, + :species => species_id, + :state => pet_state_id + }.to_query + end + def worn_and_unworn_item_ids {:worn => [], :unworn => []}.tap do |output| item_outfit_relationships.each do |rel| @@ -43,4 +60,8 @@ class Outfit < ActiveRecord::Base end self.item_outfit_relationships = new_rels end + + def worn_item_ids + worn_and_unworn_item_ids[:worn] + end end diff --git a/app/stylesheets/_layout.sass b/app/stylesheets/_layout.sass index 253603a1..a690dcc0 100644 --- a/app/stylesheets/_layout.sass +++ b/app/stylesheets/_layout.sass @@ -67,7 +67,7 @@ $container_width: 800px #container margin: 1em auto - padding-top: 3em + padding-top: $container-top-padding position: relative width: $container_width diff --git a/app/stylesheets/outfits/_show.sass b/app/stylesheets/outfits/_show.sass new file mode 100644 index 00000000..fbe19a02 --- /dev/null +++ b/app/stylesheets/outfits/_show.sass @@ -0,0 +1,29 @@ +body.outfits-show + #title + float: left + + #outfit-wardrobe-link + float: left + font-size: 85% + margin: + left: 2em + top: .75em + + #outfit-user + float: right + margin-top: 1em + + #preview-wrapper + clear: both + height: 400px + margin: 0 auto 1em + position: relative + width: 400px + + #preview-swf + left: 0 + position: absolute + top: 0 + + #outfit-items + text-align: center diff --git a/app/stylesheets/partials/clean/_constants.sass b/app/stylesheets/partials/clean/_constants.sass index 831feba5..877b5b2f 100644 --- a/app/stylesheets/partials/clean/_constants.sass +++ b/app/stylesheets/partials/clean/_constants.sass @@ -26,3 +26,5 @@ $object-img-size: 80px $object-width: 100px $object-padding: 6px $nc-icon-size: 16px + +$container-top-padding: 3em diff --git a/app/stylesheets/screen.sass b/app/stylesheets/screen.sass index 92707640..fe72525f 100644 --- a/app/stylesheets/screen.sass +++ b/app/stylesheets/screen.sass @@ -12,6 +12,7 @@ @import items/show @import outfits/edit @import outfits/new +@import outfits/show @import pets/bulk @import static/terms @import users/top_contributors diff --git a/app/views/outfits/edit.html.haml b/app/views/outfits/edit.html.haml index 36fb89e2..341dbfde 100644 --- a/app/views/outfits/edit.html.haml +++ b/app/views/outfits/edit.html.haml @@ -95,7 +95,7 @@ %button.outfit-delete × .outfit-star %h4 ${name} - %input.outfit-url{:type => 'text', :value => 'http://impress.openneo.net/outfits/FIXME'} + %input.outfit-url{:type => 'text', :value => "http://#{request.host}/outfits/${id}"} .outfit-delete-confirmation %span Delete forever? %a.outfit-delete-confirmation-yes{:href => '#'} yes diff --git a/app/views/outfits/show.html.haml b/app/views/outfits/show.html.haml new file mode 100644 index 00000000..1e730f1d --- /dev/null +++ b/app/views/outfits/show.html.haml @@ -0,0 +1,16 @@ +- title @outfit.name +%a.button#outfit-wardrobe-link{:href => wardrobe_path(:anchor => @outfit.to_query)} + Edit a copy +#outfit-user + Created by + == #{link_to @outfit.user.name, user_contributions_path(@outfit.user)}, + %span{:title => @outfit.created_at}= time_ago_in_words @outfit.created_at + ago +#preview-wrapper + #preview-swf +#outfit-items= render @outfit.worn_items +- content_for :javascripts do + :javascript + var INITIAL_OUTFIT_DATA = #{@outfit.to_json}; + = include_javascript_libraries :jquery, :swfobject + = include_javascripts :show_outfit_package diff --git a/config/assets.yml b/config/assets.yml index 6b4d07a9..9d1087d9 100644 --- a/config/assets.yml +++ b/config/assets.yml @@ -13,3 +13,7 @@ javascripts: new_outfit_package: - public/javascripts/pet_query.js - public/javascripts/outfits/new.js + + show_outfit_package: + - public/javascripts/wardrobe.js + - public/javascripts/outfits/show.js diff --git a/public/javascripts/outfits/show.js b/public/javascripts/outfits/show.js new file mode 100644 index 00000000..99e081e7 --- /dev/null +++ b/public/javascripts/outfits/show.js @@ -0,0 +1,10 @@ +var main_wardrobe = new Wardrobe(), View = Wardrobe.getStandardView({ + Preview: { + swf_url: '/swfs/preview.swf?v=0.12', + wrapper: $('#preview-wrapper'), + placeholder: $('#preview-swf') + } +}); +main_wardrobe.registerViews(View); +main_wardrobe.initialize(); +main_wardrobe.outfit.loadData(INITIAL_OUTFIT_DATA); diff --git a/public/javascripts/wardrobe.js b/public/javascripts/wardrobe.js index ffe1ba77..4e2de5ce 100644 --- a/public/javascripts/wardrobe.js +++ b/public/javascripts/wardrobe.js @@ -705,9 +705,12 @@ function Wardrobe() { this.events = {}; function fireEvent(event_name, subarguments) { - $.each(controller.events[event_name], function () { - this.apply(controller, subarguments); - }); + var events = controller.events[event_name]; + if(typeof events !== 'undefined') { + for(var i = 0; i < events.length; i++) { + events[i].apply(controller, subarguments); + } + } } this.bind = function (event, callback) { @@ -739,6 +742,18 @@ function Wardrobe() { this.in_transaction = false; + function setFullOutfit(new_outfit) { + outfit = new_outfit; + controller.in_transaction = true; + controller.setPetTypeByColorAndSpecies(outfit.color_id, outfit.species_id); + controller.setPetStateById(outfit.pet_state_id); + controller.setClosetItemsByIds(outfit.getClosetItemIds()); + controller.setWornItemsByIds(outfit.getWornItemIds()); + controller.events.trigger('setOutfit', outfit); + controller.in_transaction = false; + controller.events.trigger('loadOutfit', outfit); + } + function setOutfitIdentity(new_outfit) { new_outfit.cloneAttributesFrom(outfit); outfit = new_outfit; @@ -773,18 +788,14 @@ function Wardrobe() { this.load = function (new_outfit_id) { Outfit.find(new_outfit_id, function (new_outfit) { - outfit = new_outfit.clone(); - controller.in_transaction = true; - controller.setPetTypeByColorAndSpecies(outfit.color_id, outfit.species_id); - controller.setPetStateById(outfit.pet_state_id); - controller.setClosetItemsByIds(outfit.getClosetItemIds()); - controller.setWornItemsByIds(outfit.getWornItemIds()); - controller.events.trigger('setOutfit', outfit); - controller.in_transaction = false; - controller.events.trigger('loadOutfit', outfit); + setFullOutfit(new_outfit.clone()); }); } + this.loadData = function (new_outfit_data) { + setFullOutfit(new Outfit(new_outfit_data)); + } + this.create = function (attributes) { if(attributes) { outfit.starred = attributes.starred; diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index 149b8179..04c1eba9 100644 --- a/public/stylesheets/compiled/screen.css +++ b/public/stylesheets/compiled/screen.css @@ -1879,6 +1879,41 @@ body.outfits-new #tell-the-world img { width: 16px; } +/* line 2, ../../../app/stylesheets/outfits/_show.sass */ +body.outfits-show #title { + float: left; +} +/* line 5, ../../../app/stylesheets/outfits/_show.sass */ +body.outfits-show #outfit-wardrobe-link { + float: left; + font-size: 85%; + margin-left: 2em; + margin-top: 0.75em; +} +/* line 12, ../../../app/stylesheets/outfits/_show.sass */ +body.outfits-show #outfit-user { + float: right; + margin-top: 1em; +} +/* line 16, ../../../app/stylesheets/outfits/_show.sass */ +body.outfits-show #preview-wrapper { + clear: both; + height: 400px; + margin: 0 auto 1em; + position: relative; + width: 400px; +} +/* line 23, ../../../app/stylesheets/outfits/_show.sass */ +body.outfits-show #preview-wrapper #preview-swf { + left: 0; + position: absolute; + top: 0; +} +/* line 28, ../../../app/stylesheets/outfits/_show.sass */ +body.outfits-show #outfit-items { + text-align: center; +} + /* line 1, ../../../app/stylesheets/pets/_bulk.sass */ body.pets-bulk { text-align: center;