320 lines
9.6 KiB
Plaintext
320 lines
9.6 KiB
Plaintext
<% throw_content :for_stylesheet do -%>
|
|
#photo_block {
|
|
z-index: 0;
|
|
border: 1px solid black;
|
|
padding: 0px;
|
|
width: <%= @width -%>px;
|
|
height: <%= @height -%>px;
|
|
<% if @photo.exist? -%>
|
|
background-image: url('/photos/screen/<%= @photo.id -%>');
|
|
<% else -%>
|
|
background-image: url('/images/image-missing.png');
|
|
<% end -%>
|
|
background-repeat: no-repeat;
|
|
}
|
|
#photo_block_container {
|
|
margin: 10px <%= (600 - @width) / 2 -%>px 20px <%= (600 - @width) / 2 -%>px;
|
|
}
|
|
#photo_tag_box {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 100px;
|
|
height: 100px;
|
|
border: 7px solid #6f9bdc;
|
|
left: 0;
|
|
top: 0;
|
|
display: none;
|
|
}
|
|
#inner_photo_tag_box {
|
|
border: 2px solid black;
|
|
width: 96px;
|
|
height: 96px;
|
|
}
|
|
#photo_tag_editor {
|
|
margin-bottom: 10px;
|
|
}
|
|
<% end -%>
|
|
|
|
<% throw_content :for_javascript do -%>
|
|
|
|
function show_tag_at(x, y)
|
|
{
|
|
$('photo_tag_box').style.top = (y - 50) + 'px';
|
|
$('photo_tag_box').style.left = (x - 50) + 'px';
|
|
$('photo_tag_box').style.display = 'block';
|
|
}
|
|
|
|
function hide_tag_box()
|
|
{
|
|
$('photo_tag_box').style.display = 'none';
|
|
}
|
|
|
|
function set_coordinates(x, y)
|
|
{
|
|
$('cartesian_x').innerHTML = x;
|
|
$('cartesian_y').innerHTML = y;
|
|
$('photo_tag[x]').value = x;
|
|
$('photo_tag[y]').value = y;
|
|
show_tag_at(x, y);
|
|
}
|
|
|
|
var block_box = true;
|
|
function set_coordinates_from_event(event)
|
|
{
|
|
if(block_box)
|
|
return;
|
|
var xcoord = (event.offsetX ? event.offsetX : (event.pageX - $('photo_block').offsetLeft));
|
|
var ycoord = (event.offsetY ? event.offsetY : (event.pageY - $('photo_block').offsetTop));
|
|
if(xcoord < 0)
|
|
xcoord = 0;
|
|
if(xcoord > <%= @width -%>)
|
|
xcoord = <%= @width -%>;
|
|
if(ycoord < 0)
|
|
ycoord = 0;
|
|
if(ycoord > <%= @height -%>)
|
|
ycoord = <%= @height -%>;
|
|
set_coordinates(xcoord, ycoord);
|
|
}
|
|
|
|
function update_tag_selection(tag_name)
|
|
{
|
|
var new_tag = tag_name.innerHTML.gsub(/\<[^>]+\>/, '');
|
|
var existing_tags = $('tags').value.gsub(/( |^)[^ ]+$/, '');
|
|
var plus_space = (existing_tags.length == 0 ? '' : ' ');
|
|
$('tags').value = existing_tags + plus_space + new_tag;
|
|
$('tags').focus();
|
|
}
|
|
|
|
function photo_tag_effect()
|
|
{
|
|
new Effect.Highlight('photo_tags', {duration: 2.0});
|
|
}
|
|
|
|
function save_new_tags()
|
|
{
|
|
$('save').disabled = true;
|
|
$('indicator').show();
|
|
|
|
new Ajax.Updater(
|
|
{ success: 'photo_tags', failure: 'photo_tag_errors' },
|
|
'<%= url(:photo_tag) -%>',
|
|
{
|
|
parameters: Form.serialize($('photo_tag_fields')),
|
|
asynchronous: false,
|
|
onSuccess: function() {
|
|
set_coordinates(0, 0);
|
|
hide_tag_box();
|
|
$('tags').value = '';
|
|
photo_tag_effect();
|
|
}
|
|
}
|
|
);
|
|
|
|
$('indicator').hide();
|
|
$('save').disabled = false;
|
|
}
|
|
|
|
function destroy_photo_tag(tag_id)
|
|
{
|
|
$('indicator').show();
|
|
new Ajax.Updater(
|
|
{ success: 'photo_tags', failure: 'photo_tag_errors' },
|
|
'/photo_tags/' + tag_id,
|
|
{
|
|
method: 'delete',
|
|
onSuccess: function() {
|
|
photo_tag_effect();
|
|
},
|
|
onComplete: function() {
|
|
$('indicator').hide();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
function toggle_photo_tag_editor(direction)
|
|
{
|
|
if(direction)
|
|
{
|
|
// swap buttons
|
|
$('hide_photo_tag_editor').show();
|
|
$('show_photo_tag_editor').hide();
|
|
block_box = false;
|
|
|
|
// update tags to editable mode
|
|
new Ajax.Updater(
|
|
'photo_tags',
|
|
'/photo_tags/<%= @photo.id -%>?editable=true',
|
|
{
|
|
method: 'get',
|
|
onSuccess: function() {
|
|
photo_tag_effect();
|
|
}
|
|
}
|
|
);
|
|
|
|
// 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 and navigation
|
|
new Effect.Fade('photo_tag_editor');
|
|
new Effect.Appear('pagination_links');
|
|
|
|
// update tags to read only
|
|
new Ajax.Updater(
|
|
'photo_tags',
|
|
'/photo_tags/<%= @photo.id -%>',
|
|
{
|
|
method: 'get',
|
|
onSuccess: function() {
|
|
photo_tag_effect();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
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 -%>
|
|
|
|
<div id="photo_tag_editor" style="display: none;">
|
|
<div id="photo_tag_errors" class="errorExplanation"></div>
|
|
|
|
<form id="photo_tag_fields" onsubmit="save_new_tags(); return false;">
|
|
<fieldset>
|
|
<legend>Tag a photo...</legend>
|
|
|
|
<%= hidden_field :name => 'photo_tag[x]', :id => 'photo_tag[x]' %>
|
|
<%= hidden_field :name => 'photo_tag[y]', :id => 'photo_tag[y]' %>
|
|
<%= hidden_field :name => 'photo_tag[photo_id]', :value => @photo.id %>
|
|
|
|
<h3 style="margin-top: 5px;">Select Tags (<span id="cartesian_x">0</span>, <span id="cartesian_y">0</span>)</h3>
|
|
|
|
<p><a href="#" onclick="$('tags').value = ''; return false;"><img src="/images/edit-clear.png" style="vertical-align: top;" /></a> <%= text_field :name => 'tags', :size => 30, :id => 'tags' -%> <input type="submit" value="Save" id="save" /> <img src="/images/ajax-loader.gif" style="display: none; margin-right: 5px;" id="indicator" /></p>
|
|
<div id="photo_tag_auto_complete" class="auto_complete"></div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
<% if @current_index and @max_index and @photo.album -%>
|
|
<div id="pagination_links">
|
|
<% if @current_index > 0 -%><a href="<%= url(:photo, @album_photos[0]) -%>"><img src="/images/go-first.png" /></a> <% end -%><% if @current_index > 1 -%><a href="<%= url(:photo, @album_photos[@current_index - 1]) -%>"><img src="/images/go-previous.png" /></a> <% end -%><%= @current_index + 1 -%> of <%= @max_index + 1 -%> <% if @current_index < @max_index - 1 -%><a href="<%= url(:photo, @album_photos[@current_index + 1]) -%>"><img src="/images/go-next.png" /></a> <% end -%><% if @current_index < @max_index -%><a href="<%= url(:photo, @album_photos[@max_index]) -%>"><img src="/images/go-last.png" /></a><% end -%>
|
|
</div>
|
|
<% end -%>
|
|
|
|
<div id="photo_block_container">
|
|
<div id="photo_block" onclick='set_coordinates_from_event(event);' onmousemove='check_for_tag_mouseovers(event)'>
|
|
<div id="photo_tag_box" style="display: none;"><div id="inner_photo_tag_box"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<% if @photo.exist? -%>
|
|
<div id="photo_tags">
|
|
<%= partial 'photo_tags/photo_tags' %>
|
|
</div>
|
|
<% end -%>
|
|
|
|
<script type="text/javascript">
|
|
//<![CDATA[
|
|
new Ajax.Autocompleter(
|
|
'tags',
|
|
'photo_tag_auto_complete',
|
|
'/tags/auto_complete',
|
|
{
|
|
paramName: 'id',
|
|
updateElement: update_tag_selection
|
|
}
|
|
);
|
|
//]]>
|
|
</script>
|
|
|
|
<% throw_content :for_sidebar do -%>
|
|
<a href="<%= url(:album, :id => @photo.album.name.gsub(/ /, '_')) -%>"><img src="/images/camera-photo.png" /> Back to <%= @photo.album.name -%></a><br />
|
|
<% if allowed_to?(:edit_album, @photo.album) and @photo.album.album_thumbnail_id != @photo.id -%><a href="<%= url(:action => :set_album_thumbnail, :id => @photo.id) -%>" rel="nofollow"><img src="/images/emblem-photos.png" /> Make album thumbnail</a><br /><% end -%>
|
|
<% if allowed_to?(:edit_photo, @photo) and @photo.exist? -%><a href="<%= url(:edit_photo, :id => @photo.id) -%>" rel="nofollow"><img src="/images/document-save.png" /> Edit photo</a><br /><% end %>
|
|
<% if allowed_to?(:delete_photo, @photo) -%><a href="<%= url(:delete_photo, :id => @photo.id) -%>" onclick="if(!confirm('Are you sure you want to delete this photo?')){return false;}" rel="nofollow"><img src="/images/edit-delete.png" /> Destroy photo</a><br /><% end -%>
|
|
<% if @photo.exist? -%><a href="<%= photo_url(@photo) -%>"><img src="/images/view-fullscreen.png" /> Download original</a><br /><% end -%>
|
|
<% if allowed_to?(:upload_images) -%><a href="<%= url(:new_photo, :photo => { :album_id => @photo.album_id }) -%>"><img src="/images/emblem-photos.png" /> Upload Image</a><br /><% end %>
|
|
<% if allowed_to?(:tag_photo) and @photo.exist? -%><span id="show_photo_tag_editor"><a href="#" onclick="toggle_photo_tag_editor(true)"><img src="/images/face-monkey.png" /> Tag Image</a></span><span id="hide_photo_tag_editor" style="display: none;"><a href="#" onclick="toggle_photo_tag_editor(false); return false;"><img src="/images/face-monkey.png" /> Done Tagging</a></span><br /><% end %>
|
|
<% end -%>
|