/** * 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(); }