From 5e151f4a77041cb32085f8dc795d2854113291bf Mon Sep 17 00:00:00 2001 From: Coleman Date: Wed, 13 Aug 2008 15:12:58 -0500 Subject: [PATCH] adding album navigation via the photo page and allowing tags to be shown by mouseover the image --- app/controllers/photos.rb | 3 + app/models/album.rb | 4 +- app/views/albums/show.html.erb | 2 +- app/views/photo_tags/_photo_tags.html.erb | 5 +- app/views/photos/show.html.erb | 91 +++++++++++++++++++++-- 5 files changed, 96 insertions(+), 9 deletions(-) diff --git a/app/controllers/photos.rb b/app/controllers/photos.rb index f32f2a5..4472e24 100644 --- a/app/controllers/photos.rb +++ b/app/controllers/photos.rb @@ -12,6 +12,9 @@ class Photos < Application @width = img.columns rescue 150 @height = img.rows rescue 150 + @album_photos = @photo.album.photos.find :all, :order => 'filename ASC' + @max_index = @album_photos.size - 1 + @current_index = @album_photos.index(@photo) render end diff --git a/app/models/album.rb b/app/models/album.rb index cff7338..2b5f0b4 100644 --- a/app/models/album.rb +++ b/app/models/album.rb @@ -3,7 +3,7 @@ class Album < ActiveRecord::Base validates_uniqueness_of :name validates_format_of :name, :with => /^[\w ]+$/ has_and_belongs_to_many :tags, :order => 'tags.name ASC' - has_many :photos + has_many :photos, :order => 'filename ASC' after_create :save_tags belongs_to :album_thumbnail, :class_name => 'Photo' @@ -40,4 +40,4 @@ class Album < ActiveRecord::Base def save_tags self.tags.each { |x| x.save } end -end \ No newline at end of file +end diff --git a/app/views/albums/show.html.erb b/app/views/albums/show.html.erb index 1bc256a..850f40b 100644 --- a/app/views/albums/show.html.erb +++ b/app/views/albums/show.html.erb @@ -19,7 +19,7 @@ <% end -%> <% end -%> -
+

<%= @album.name -%>

<%= partial 'photos', :photos => @photos %> diff --git a/app/views/photo_tags/_photo_tags.html.erb b/app/views/photo_tags/_photo_tags.html.erb index 0fa7310..7b1bf9e 100644 --- a/app/views/photo_tags/_photo_tags.html.erb +++ b/app/views/photo_tags/_photo_tags.html.erb @@ -5,10 +5,13 @@ None. <% else -%> <%= @photo.photo_tags.collect { |t| - str = "#{t.tag.name}" + str = "#{t.tag.name}" if @editable str += " ( Remove)" end str += "" }.join(', ') %> <% end -%> +

diff --git a/app/views/photos/show.html.erb b/app/views/photos/show.html.erb index bd9e56c..cbaf9ac 100644 --- a/app/views/photos/show.html.erb +++ b/app/views/photos/show.html.erb @@ -153,18 +153,23 @@ function toggle_photo_tag_editor(direction) } ); - // transition in editor - new Effect.BlindDown('photo_tag_editor', {duration: 1.5}); + // transition editor and navigation + new Effect.Fade('pagination_links'); + new Effect.Appear('photo_tag_editor'); } else { + // remove box if shown + hide_tag_box(); + // toggle buttons $('show_photo_tag_editor').show(); $('hide_photo_tag_editor').hide(); block_box = true; - // transition out editable blocks - new Effect.BlindUp('photo_tag_editor', {duration: 1.5}); + // transition out editable blocks and navigation + new Effect.Fade('photo_tag_editor'); + new Effect.Appear('pagination_links'); // update tags to read only new Ajax.Updater( @@ -180,6 +185,76 @@ function toggle_photo_tag_editor(direction) } } +function highlight_tag(tag_id) +{ + +} + +var last_x = 0; +var last_y = 0; +function check_for_tag_mouseovers(event) +{ + // skip this if you are editing + if(!block_box) + return; + + // figure out the real coordinates + var xcoord = (event.offsetX ? event.offsetX : (event.pageX - $('photo_block').offsetLeft)); + var ycoord = (event.offsetY ? event.offsetY : (event.pageY - $('photo_block').offsetTop)); + + // save coordinates for cop-out later + if(xcoord == last_x && ycoord == last_y) + return; + last_x = xcoord; + last_y = ycoord; + + // figure out the box area here + var min_x = xcoord - 50; + if(min_x < 0) + min_x = 0 + var max_x = xcoord + 50; + if(max_x > <%= @width -%>) + max_x = <%= @width -%>; + var min_y = ycoord - 50; + if(min_y < 0) + min_y = 0; + var max_y = ycoord + 50; + if(max_y > <%= @height -%>) + max_y = <%= @height -%>; + + // remove the box, in case there is no match... + hide_tag_box(); + + // remove tag highlighting + unhighlight_tags(); + + // find all in the area, show the box then highlight the tags + tag_array.select(function(entry){ + return entry[0] >= min_x && entry[0] <= max_x && entry[1] >= min_y && entry[1] <= max_y; + }).each(function(entry){ + show_tag_at(entry[0], entry[1]); + // show which tag, too + highlight_tag(entry[2]); + }); +} + +function unhighlight_tags() +{ + $$('.photo_tags_for_mouseover').each(function(entry){ + entry.style.fontWeight = 'normal'; + }); +} + +function unhighlight_tag(tag_id) +{ + $('photo_tag_' + tag_id).style.fontWeight = 'normal'; +} + +function highlight_tag(tag_id) +{ + $('photo_tag_' + tag_id).style.fontWeight = 'bold'; +} + <% end -%> +<% if @current_index and @max_index and @photo.album -%> + +<% end -%> +
-
+