showing tags and making the browser easier to navigate

git-svn-id: http://svn.barleysodas.com/barleysodas/trunk@110 0f7b21a7-9e3a-4941-bbeb-ce5c7c368fa7

app/controllers/galleries_controller.rb

@@ -73,6 +73,7 @@ class GalleriesController < ApplicationController
   protected
   
   def fetch_image
-    @image = Image.find(params[:id])
+    @image = Image.find(params[:id], :include => [ 'tag_images' ])
+    @tag_images = @image.tag_images
   end
 end

app/views/galleries/index.rhtml

@@ -1,4 +1,6 @@
-<%= render :partial => 'image', :collection => @images, :locals => { :version => :thumbnail } %>
+<% for image in @images do -%>
+<div class="people_image"><%= link_to(image_tag(image.filename_for_version(:thumbnail), :alt => image.original), gallery_url(image)) -%><br /><%= h(image.original) -%></div>
+<% end -%>
 
 <%= render :partial => 'shared/pagination_links' %>
 

app/views/galleries/show.rhtml

@@ -1,4 +1,7 @@
-<%= render :partial => 'image', :locals => { :image => @image } %>
+<h3 class="author">Uploaded by <%= link_to(@image.people.title, galleries_url(:id => @image.people_id)) -%></h3>
+
+<%= render :partial => 'tag_images/taggable_image_for_page', :locals => { :read_only => true } %>
+
 <br />
 
 <% content_for :sidebar do -%>

app/views/tag_images/_tag_images.rhtml

@@ -2,6 +2,8 @@
   <strong>Tagged items:</strong>
   <% if @tag_images.empty? -%>
     None.
+  <% elsif (read_only ||= false) -%>
+    <%= @tag_images.collect { |t| "<span onmouseover=\"show_tag_at(#{t.x}, #{t.y})\" onmouseout=\"hide_tag_box()\">#{t.tagged.title} (<em>#{t.tagged_type}</em>)</span>" } %>
   <% else -%>
     <%= @tag_images.collect { |t| "<span onmouseover=\"show_tag_at(#{t.x}, #{t.y})\" onmouseout=\"hide_tag_box()\">#{t.tagged.title} (<em>#{t.tagged_type}</em> | #{link_to_remote('Remove', :url => tag_image_path(t), :update => 'tag_images', :method => :delete)})</span>" }.join(', ') -%>
   <% end -%>

app/views/tag_images/_taggable_image_for_page.rhtml

@@ -0,0 +1,77 @@
+<% content_for :stylesheet do -%>
+#image_block {
+  z-index: 0;
+  border: 1px solid black;
+  padding: 0px;
+  width: <%= @image.screen_width -%>px;
+  height: <%= @image.screen_height -%>px;
+  background-image: url('/images/<%= @image.filename_for_version -%>');
+  background-repeat: no-repeat;
+}
+#image_block_container {
+  margin: 10px <%= (605 - @image.screen_width) / 2 -%>px 20px <%= (605 - @image.screen_width) / 2 -%>px;
+}
+#image_tag_box {
+  position: relative;
+  z-index: 2;
+  width: 100px;
+  height: 100px;
+  border: 5px solid #db3333;
+  left: 0;
+  top: 0;
+  display: none;
+}
+<% end -%>
+
+<% content_for :script do -%>
+function show_tag_at(xcoord, ycoord)
+{
+  $('image_tag_box').style.top = (ycoord - 50) + 'px';
+  $('image_tag_box').style.left = (xcoord - 50) + 'px';
+  $('image_tag_box').style.display = 'block';
+}
+
+function hide_tag_box()
+{
+  $('image_tag_box').style.display = 'none';
+}
+
+function set_coordinates(event)
+{
+  xcoord = (event.offsetX ? event.offsetX : (event.pageX - $('image_block').offsetLeft));
+  ycoord = (event.offsetY ? event.offsetY : (event.pageY - $('image_block').offsetTop));
+  show_tag_at(xcoord, ycoord);
+  lightboxes['taggedContentDialog'].open();
+}
+
+function set_taggable_item(id, title, type)
+{
+  $('tag_image_tagged_id').value = id;
+  $('tag_image_title').innerHTML = title;
+  $('tag_image_tagged_type').value = type;
+}
+
+if(!window.after_opens)
+  after_opens = {};
+if(!window.before_closes)
+  before_closes = {};
+after_opens['taggedContentDialog'] = function(){
+  $('tag_image_x').value = xcoord;
+  $('tag_image_y').value = ycoord;
+  $('tag_image_image_id').value = <%= params[:id] -%>;
+  $('search').focus();
+}
+before_closes['taggedContentDialog'] = function(){
+  hide_tag_box();
+}
+<% end -%>
+
+<div id="image_block_container" class="centered">
+  <div id="image_block" onclick='set_coordinates(event);'>
+    <div id="image_tag_box" style="display: none;"></div>
+  </div>
+  <br />
+  <div id="tag_images">
+    <%= render :partial => 'tag_images/tag_images', :locals => { :read_only => (read_only ||= false) } %>
+  </div>
+</div>

app/views/tag_images/show.rhtml

@@ -1,82 +1,6 @@
 <%= javascript_include_tag 'control.modal.js' %>
 
-<% content_for :stylesheet do -%>
+<%= render :partial => 'taggable_image_for_page' %>
-#image_block {
-  z-index: 0;
-  border: 1px solid black;
-  padding: 0px;
-  width: <%= @image.screen_width -%>px;
-  height: <%= @image.screen_height -%>px;
-  background-image: url('/images/<%= @image.filename_for_version -%>');
-  background-repeat: no-repeat;
-}
-#image_block_container {
-  margin: 10px <%= (605 - @image.screen_width) / 2 -%>px 20px <%= (605 - @image.screen_width) / 2 -%>px;
-}
-#image_tag_box {
-  position: relative;
-  z-index: 2;
-  width: 100px;
-  height: 100px;
-  border: 5px solid #db3333;
-  left: 0;
-  top: 0;
-  display: none;
-}
-<% end -%>
-
-<% content_for :script do -%>
-function show_tag_at(xcoord, ycoord)
-{
-  $('image_tag_box').style.top = (ycoord - 50) + 'px';
-  $('image_tag_box').style.left = (xcoord - 50) + 'px';
-  $('image_tag_box').style.display = 'block';
-}
-
-function hide_tag_box()
-{
-  $('image_tag_box').style.display = 'none';
-}
-
-function set_coordinates(event)
-{
-  xcoord = (event.offsetX ? event.offsetX : (event.pageX - $('image_block').offsetLeft));
-  ycoord = (event.offsetY ? event.offsetY : (event.pageY - $('image_block').offsetTop));
-  show_tag_at(xcoord, ycoord);
-  lightboxes['taggedContentDialog'].open();
-}
-
-function set_taggable_item(id, title, type)
-{
-  $('tag_image_tagged_id').value = id;
-  $('tag_image_title').innerHTML = title;
-  $('tag_image_tagged_type').value = type;
-}
-
-if(!window.after_opens)
-  after_opens = {};
-if(!window.before_closes)
-  before_closes = {};
-after_opens['taggedContentDialog'] = function(){
-  $('tag_image_x').value = xcoord;
-  $('tag_image_y').value = ycoord;
-  $('tag_image_image_id').value = <%= params[:id] -%>;
-  $('search').focus();
-}
-before_closes['taggedContentDialog'] = function(){
-  hide_tag_box();
-}
-<% end -%>
-
-<div id="image_block_container" class="centered">
-  <div id="image_block" onclick='set_coordinates(event);'>
-    <div id="image_tag_box" style="display: none;"></div>
-  </div>
-  <br />
-  <div id="tag_images">
-    <%= render :partial => 'tag_images' %>
-  </div>
-</div>
 
 <% lightbox :title => 'Search for a taggable item', :window_id => 'taggedContentDialog' do -%>
   <div id="tag_image_errors" class="errorExplanation"></div>

public/stylesheets/content.css

@@ -188,7 +188,6 @@
   color: #fff;
 }
 
-
 /* Comments and Trackbacks */
 #content ol.discussions, li.discussion {
   list-style-type: none;
@@ -260,20 +259,12 @@
 #content .people_image {
   border: 1px solid #DDD;
   background-color: #F2F2F2;
-}
+  float: left;
-
+  margin: 15px;
-#content .people_image .author {
+  padding: 5px;
-  margin: 0 2.5em 0.5em 0.5em;
-}
-
-#content .people_image .meta {
   text-align: center;
 }
 
-.people_image img {
-  margin: 10px;
-}
-
 /*--------------------------------------------------------------
  Sidebar
  --------------------------------------------------------------*/