/**
* Render view.
*
* @return string
*/
public function content()
{
ob_start();
echo '<figure>', HTML::image($this->image->get_url(Model_Image::SIZE_THUMBNAIL)), '</figure>';
// Tagged people
$notes = $this->image->notes();
if (count($notes)) {
$names = array();
/** @var Model_Image_Note $note */
foreach ($notes as $note) {
$user = $note->user();
$names[] = $user ? HTML::user($user['username']) : HTML::chars($note->name);
}
echo implode(', ', $names);
}
// Copyright
if ($this->image->author_id) {
echo '<br />© ', HTML::user($this->image->author_id);
}
// Comments
if ($this->image->comment_count) {
echo '<span class="stats"><i class="icon-comment"></i> ' . $this->image->comment_count . '</span>';
}
return ob_get_clean();
}
/**
* Render notes.
*
* @return string
*/
public function notes()
{
$note_array = array();
$notes = $this->image->notes();
if (count($notes)) {
/** @var Model_Image_Note $note */
foreach ($notes as $note) {
$note_user = $note->user();
$note_array[] = array('id' => (int) $note->id, 'x' => (int) $note->x, 'y' => (int) $note->y, 'width' => (int) $note->width, 'height' => (int) $note->height, 'imageWidth' => (int) $this->image->width, 'imageHeight' => (int) $this->image->height, 'name' => $note_user ? $note_user['username'] : $note->name, 'url' => $note_user ? URL::site(URL::user($note_user)) : null);
}
}
// Add note section
if ($this->can_note || $note_array) {
ob_start();
?>
<ul class="unstyled notes">
<?php
// Add notes
if ($notes) {
$i = 0;
foreach ($notes as $note) {
$i++;
$note_user = $note->user();
$note_name = $note_user ? $note_user['username'] : $note->name;
echo '<li>';
// Add single note
if ($note_user) {
echo HTML::user($note_user, null, array('data-note-id' => $note->id));
} else {
echo '<span data-note-id="', $note->id, '">', HTML::chars($note_name), '</span>';
}
// Deletable?
if (Permission::has($note, Model_Image_Note::PERMISSION_DELETE)) {
echo ' ', HTML::anchor(Route::url('image_note', array('id' => $note->id, 'action' => 'unnote')), '×', array('class' => 'note-delete', 'data-confirm' => __('Delete note'), 'title' => __('Delete note')));
}
if ($i < count($notes)) {
echo ', ';
}
echo '</li>';
}
}
// Add note action
if ($this->can_note) {
echo '<li><a href="#" class="btn btn-default btn-xs note-add"><i class="fa fa-tag"></i> ', __('Tag people'), '</a></li>';
}
?>
</ul>
<?php
if ($this->can_note || $note_array) {
?>
<script>
head.ready('anqh', function() {
var
$image = $('a.image'),
$form = $('#form-note'),
imageWidth = $image.width(),
imageHeight = $image.height(),
formWidth = $form.outerWidth(),
formHeight = $form.outerHeight();
// Add notes
$image.notes(<?php
echo json_encode($note_array);
?>
);
// Autocomplete
$('input[name=name]').autocompleteUser();
// Cancel note edit
function cancelForm() {
$image.find('img').imgAreaSelect({ remove: true });
$form.hide();
return false;
}
// Update form location and contents
function updateForm(img, area) {
// Selection might be scaled
var
scaleX = imageWidth / <?php
echo $this->image->width;
?>
,
scaleY = imageHeight / <?php
echo $this->image->height;
?>
,
x = area.x1 * scaleX,
y = area.y1 * scaleY,
height = area.height * scaleY;
$form
.css({
left: ((x + formWidth) > imageWidth ? imageWidth - formWidth : x) + 'px',
top: ((y + height + 5 + formHeight) > imageHeight ? (y - 5 - formHeight) : (y + height + 5)) + 'px'
})
.show();
$form.find('input[name=x]').val(area.x1);
$form.find('input[name=y]').val(area.y1);
$form.find('input[name=width]').val(area.width);
$form.find('input[name=height]').val(area.height);
}
// Hook new note
$('a.note-add').on('click', function onNoteAdd() {
$image.find('img').imgAreaSelect({ remove: true });
$image.find('img').imgAreaSelect({
onInit: updateForm,
onSelectChange: updateForm,
handles: true,
persistent: true,
imageWidth: <?php
echo $this->image->width;
?>
,
imageHeight: <?php
echo $this->image->height;
?>
,
minWidth: 50,
minHeight: 50,
maxWidth: 150,
maxHeight: 150,
x1: parseInt(imageWidth / 2) - 50,
y1: parseInt(imageHeight / 2) - 50,
x2: parseInt(imageWidth / 2) + 50,
y2: parseInt(imageHeight / 2) + 50
});
return false;
});
$form.on('click', 'a.cancel', cancelForm);
});
</script>
<?php
}
}
return ob_get_clean();
}
/**
* Render notes.
*
* @return string
*/
public function notes()
{
$note_array = array();
$notes = $this->image->notes();
if (count($notes)) {
/** @var Model_Image_Note $note */
foreach ($notes as $note) {
$note_user = $note->user();
$note_array[] = array('id' => (int) $note->id, 'x' => (int) $note->x, 'y' => (int) $note->y, 'width' => (int) $note->width, 'height' => (int) $note->height, 'name' => $note_user ? $note_user['username'] : $note->name, 'url' => $note_user ? URL::base() . URL::user($note_user) : null);
}
}
// Add note section
if ($this->can_note || $note_array) {
ob_start();
?>
<ul class="unstyled notes">
<?php
// Add notes
if ($notes) {
$i = 0;
foreach ($notes as $note) {
$i++;
$note_user = $note->user();
$note_name = $note_user ? $note_user['username'] : $note->name;
echo '<li>';
// Add single note
if ($note_user) {
echo HTML::user($note_user, null, array('data-note-id' => $note->id));
} else {
echo '<span data-note-id="', $note->id, '">', HTML::chars($note_name), '</span>';
}
// Deletable?
if (Permission::has($note, Model_Image_Note::PERMISSION_DELETE, self::$_user)) {
echo ' ', HTML::anchor(Route::url('image_note', array('id' => $note->id, 'action' => 'unnote')), '×', array('class' => 'note-delete', 'data-confirm' => __('Delete note'), 'title' => __('Delete note')));
}
if ($i < count($notes)) {
echo ', ';
}
echo '</li>';
}
}
// Add note action
if ($this->can_note) {
echo '<li><a href="#" class="btn btn-inverse btn-mini note-add"><i class="icon-tag icon-white"></i> ', __('Tag people'), '</a></li>';
}
?>
</ul>
<?php
if ($this->can_note || $note_array) {
?>
<script>
head.ready('anqh', function() {
// Add notes
$('a.image').notes(<?php
echo json_encode($note_array);
?>
);
// Autocomplete
$('input[name=name]').autocompleteUser();
// Hook new note
$('a.note-add').on('click', function onNoteAdd() {
function updateForm(img, area) {
$('#form-note')
.css({
left: area.x1 + "px",
top: area.y1 + area.height + 5 + "px"
})
.show();
$('#form-note input[name=x]').val(area.x1);
$('#form-note input[name=y]').val(area.y1);
$('#form-note input[name=width]').val(area.width);
$('#form-note input[name=height]').val(area.height);
}
$('a.image img').imgAreaSelect({
onInit: updateForm,
onSelectChange: updateForm,
handles: true,
persistent: true,
minWidth: 50,
minHeight: 50,
maxWidth: 150,
maxHeight: 150,
x1: parseInt($('a.image').width() / 2) - 50,
y1: parseInt($('a.image').height() / 2) - 50,
x2: parseInt($('a.image').width() / 2) + 50,
y2: parseInt($('a.image').height() / 2) + 50
});
return false;
});
$('#form-note a.cancel').on('click', function onNoteCancel() {
$('a.image img').imgAreaSelect({ hide: true });
$('#form-note').hide();
return false;
});
});
</script>
<?php
}
}
return ob_get_clean();
}
