239 lines
7.1 KiB
Plaintext
239 lines
7.1 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 in editor
|
|
new Effect.BlindDown('photo_tag_editor', {duration: 1.5});
|
|
}
|
|
else
|
|
{
|
|
// 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});
|
|
|
|
// update tags to read only
|
|
new Ajax.Updater(
|
|
'photo_tags',
|
|
'/photo_tags/<%= @photo.id -%>',
|
|
{
|
|
method: 'get',
|
|
onSuccess: function() {
|
|
photo_tag_effect();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
<% 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>
|
|
|
|
<div id="photo_block_container">
|
|
<div id="photo_block" onclick='set_coordinates_from_event(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/image-x-generic.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 -%>
|