public/gallery3-contrib
Archived
1
0
Fork 0
Code Releases Activity

- Version 2

Browse Source 
- Implemented tag handling (tags can now be added while creating the face)
- When entering a tag the notes field is cleared and vice versa to avoid confusion
- Cancel confirmation dialog now uses jquery dialog
- Added helpers/photoannotation.php by tkott for XMP compatibility
- Fixed RTL positioning
- Fixed bug deleting annotations with the same tag
- Fixed annotation form positioning
This commit is contained in:
hukoeth 2010-08-31 23:12:25 +08:00 committed by Bharat Mediratta
parent b29606f840
commit 53872ea129
8 changed files with 214 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
modules/photoannotation/controllers/photoannotation.php
View File

@ -35,6 +35,23 @@ class photoannotation_Controller extends Controller {
$str_face_description = $_POST["desc"];
$redir_uri = url::abs_site("{$item->type}s/{$item->id}");
//Add tag to item, create tag if not exists
if ($tag_data != "") {
$tag = ORM::factory("tag")->where("name", "=", $tag_data)->find();
if (!$tag->loaded()) {
$tag->name = $tag_data;
$tag->count = 0;
}
$tag->add($item);
$tag->count++;
$tag->save();
$tag_data = $tag->id;
} else {
$tag_data = -1;
}
// Decide if we are saving a face or a note.
if ($noteid == "new") {
@ -150,7 +167,6 @@ class photoannotation_Controller extends Controller {
url::redirect($redir_uri);
return;
}
if ($notetype == "face") {
db::build()->delete("items_faces")->where("id", "=", $noteid)->execute();
message::success(t("Annotation deleted."));

11
modules/photoannotation/css/photoannotation.css
View File

@ -40,15 +40,19 @@
}
.image-annotate-edit {
display: none;
direction: ltr !important;
}
#image-annotate-edit-form {
background: #FFFFFF none repeat scroll 0 0;
border: 1px solid #000000;
height: 220px;
height: 230px;
padding: 7px;
position: absolute;
width: 250px;
}
.image-annotate-rtl form {
text-align: right !important;
}
#image-annotate-edit-form form {
clear: right;
margin: 0 !important;
@ -68,6 +72,7 @@
font-family: Verdana, Sans-Serif;
font-size: 12px;
width: 248px;
resize: none;
}
#image-annotate-edit-form fieldset {
background: transparent none repeat scroll 0 0;
@ -84,6 +89,10 @@
float: left;
margin: 3px 6px 3px 0;
}
.image-annotate-rtl a {
float: right !important;
margin: 3px 0 3px 6px !important;
}
.image-annotate-edit-area {
border: 1px solid black;
cursor: move;

91
modules/photoannotation/helpers/photoannotation.php Normal file
View File

@ -0,0 +1,91 @@
<?php defined("SYSPATH") or die("No direct script access.");
/**
* Gallery - a web based photo album viewer and editor
* Copyright (C) 2000-2010 Bharat Mediratta
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or (at
* your option) any later version.
*
* This program is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street - Fifth Floor, Boston, MA 02110-1301, USA.
*/
class photoannotation_Core {
static function add($item, $tag_title, $description, $x1, $y1, $x2, $y2, $bTag) {
if ( !$bTag && !empty($tag_title) ) {
try {
//we are trying to add a note
$newnote = ORM::factory("items_note");
$newnote->item_id = $item->id;
$newnote->x1 = $x1;
$newnote->y1 = $y1;
$newnote->x2 = $x2;
$newnote->y2 = $y2;
$newnote->title = $tag_title;
$newnote->description = $description;
$newnote->save();
} catch (Exception $e) {
Kohana_Log::add("error", "Error adding note annotation.\n" .
$e->getMessage() . "\n" . $e->getTraceAsString());
}
} elseif ( $bTag && !empty($tag_title) ) {
try {
//we are adding a tag
//first find the tag
$tag = ORM::factory("tag")->where("name", "=", $tag_title)->find();
//tag was not found
if (!$tag->loaded()) {
$tag->name = $tag_title;
$tag->count = 0;
}
$tag->add($item);
$tag->count++;
$tag->save();
//check if the tag is attached to the item
// if the tag isn't attached, attach it
//check if the face is already tagged
$existingFace = ORM::factory("items_face")
->where("tag_id", "=", $tag->id)
->where("item_id", "=", $item->id)
->find_all();
if (count($existingFace) == 0) {
// Save the new face to the database.
$newface = ORM::factory("items_face");
$newface->tag_id = $tag->id;
$newface->item_id = $item->id;
$newface->x1 = $x1;
$newface->y1 = $y1;
$newface->x2 = $x2;
$newface->y2 = $y2;
$newface->description = $description;
$newface->save();
} else {
// Update the coordinates of an existing face.
$updatedFace = ORM::factory("items_face", $existingFace[0]->id);
$updatedFace->x1 = $x1;
$updatedFace->y1 = $y1;
$updatedFace->x2 = $x2;
$updatedFace->y2 = $y2;
$updatedFace->description = $description;
$updatedFace->save();
}
} catch (Exception $e) {
Kohana_Log::add("error", "Error adding note annotation.\n" .
$e->getMessage() . "\n" . $e->getTraceAsString());
}
} else {
throw new exception("@todo MISSING_TAG_OR_DESCRIPTION");
}
}
}
?>

7
modules/photoannotation/helpers/photoannotation_installer.php
View File

@ -46,12 +46,13 @@ class photoannotation_installer {
DEFAULT CHARSET=utf8;");
// Set the module's version number.
module::set_version("photoannotation", 1);
module::set_version("photoannotation", 2);
}
static function upgrade($version) {
$db = Database::instance();
module::set_version("photoannotation", $version);
if ($version == 1) {
module::set_version("photoannotation", $version = 2);
}
}
static function deactivate() {

1
modules/photoannotation/helpers/photoannotation_theme.php
View File

@ -22,7 +22,6 @@ class photoannotation_theme_Core {
if ($theme->page_subtype == "photo") {
$theme->css("photoannotation.css");
$theme->script("jquery.annotate.js");
//Return "<script type=\"text/javascript\" src=\"/gallery3/modules/photoannotation/js/jquery.annotate.js\"></script>";
}
}

136
modules/photoannotation/js/jquery.annotate.js
View File

@ -24,6 +24,7 @@
this.labels = opts.labels;
this.csrf = opts.csrf;
this.cssaclass = opts.cssaclass;
this.rtlsupport = opts.rtlsupport;
// Add the canvas
this.canvas = $('<div class="image-annotate-canvas g-thumbnail"><div class="image-annotate-view"></div><div class="image-annotate-edit"><div class="image-annotate-edit-area"></div></div></div>');
@ -59,14 +60,14 @@
if (this.useAjax) {
$.fn.annotateImage.ajaxLoad(this);
} else {
$.fn.annotateImage.load(this, this.labels, this.editable, this.csrf, this.deleteUrl, this.tags, this.saveUrl, this.cssaclass);
$.fn.annotateImage.load(this, this.labels, this.editable, this.csrf, this.deleteUrl, this.tags, this.saveUrl, this.cssaclass, this.rtlsupport);
}
// Add the "Add a note" button
if ($('#g-photoannotation-link').length != 0) {
this.button = $('#g-photoannotation-link');
this.button.click(function() {
$.fn.annotateImage.add(image, opts.tags, opts.labels, opts.saveUrl, opts.csrf);
$.fn.annotateImage.add(image, opts.tags, opts.labels, opts.saveUrl, opts.csrf, opts.rtlsupport);
});
//this.canvas.after(this.button);
}
@ -111,13 +112,13 @@
});
};
$.fn.annotateImage.load = function(image, labels, editable, csrf, deleteUrl, tags, saveUrl, cssaclass) {
$.fn.annotateImage.load = function(image, labels, editable, csrf, deleteUrl, tags, saveUrl, cssaclass, rtlsupport) {
/// <summary>
/// Loads the annotations from the notes property passed in on the
/// options object.
/// </summary>
for (var i = 0; i < image.notes.length; i++) {
image.notes[image.notes[i]] = new $.fn.annotateView(image, image.notes[i], tags, labels, editable, csrf, deleteUrl, saveUrl, cssaclass);
image.notes[image.notes[i]] = new $.fn.annotateView(image, image.notes[i], tags, labels, editable, csrf, deleteUrl, saveUrl, cssaclass, rtlsupport);
}
};
@ -130,7 +131,7 @@
return now.getTime();
};
$.fn.annotateImage.add = function(image, tags, labels, saveUrl, csrf) {
$.fn.annotateImage.add = function(image, tags, labels, saveUrl, csrf, rtlsupport) {
/// <summary>
/// Adds a note to the image.
/// </summary>
@ -138,18 +139,18 @@
image.mode = 'edit';
// Create/prepare the editable note elements
var editable = new $.fn.annotateEdit(image, null, tags, labels, saveUrl, csrf);
var editable = new $.fn.annotateEdit(image, null, tags, labels, saveUrl, csrf, rtlsupport);
$.fn.annotateImage.createSaveButton(editable, image);
$.fn.annotateImage.createCancelButton(editable, image);
$.fn.annotateImage.createSaveButton(editable, image, null, rtlsupport);
$.fn.annotateImage.createCancelButton(editable, image, rtlsupport);
}
};
$.fn.annotateImage.createSaveButton = function(editable, image, note) {
$.fn.annotateImage.createSaveButton = function(editable, image, note, rtlsupport) {
/// <summary>
/// Creates a Save button on the editable note.
/// </summary>
var ok = $('<a class="image-annotate-edit-ok g-button ui-corner-all ui-icon-left ui-state-default">OK</a>');
var ok = $('<a class="image-annotate-edit-ok g-button ui-corner-all ui-icon-left ui-state-default ' + rtlsupport + '">OK</a>');
ok.click(function() {
var form = $('#image-annotate-edit-form form');
@ -164,11 +165,11 @@
editable.form.append(ok);
};
$.fn.annotateImage.createCancelButton = function(editable, image) {
$.fn.annotateImage.createCancelButton = function(editable, image, rtlsupport) {
/// <summary>
/// Creates a Cancel button on the editable note.
/// </summary>
var cancel = $('<a class="image-annotate-edit-close g-button ui-corner-all ui-icon-left ui-state-default">Cancel</a>');
var cancel = $('<a class="image-annotate-edit-close g-button ui-corner-all ui-icon-left ui-state-default ' + rtlsupport + '">Cancel</a>');
cancel.click(function() {
editable.destroy();
image.mode = 'view';
@ -194,7 +195,7 @@
return '&lt;input type="hidden" name="' + name + '" value="' + value + '" /&gt;<br />';
};
$.fn.annotateEdit = function(image, note, tags, labels, saveUrl, csrf) {
$.fn.annotateEdit = function(image, note, tags, labels, saveUrl, csrf, rtlsupport) {
/// <summary>
/// Defines an editable annotation area.
/// </summary>
@ -229,32 +230,44 @@
// Add the note (which we'll load with the form afterwards)
var selectedtag = "";
if (this.note.text == "" || this.note.notetype == "note")
{
selectedtag = " selected=\"selected\"";
}
var tagdropdown = labels[0] + '<select id="tagsList" class="dropdown" name="tagsList"><option value="-1"' + selectedtag + '>No Tag</option>';
if (tags)
{
for (var tag in tags)
{
var tagval = tags[tag];
selectedtag = "";
if (tagval.name == this.note.text && this.note.notetype == "face") {
selectedtag = " selected=\"selected\"";
}
tagdropdown += '<option value="' + tagval.id + '"' + selectedtag + '>' + tagval.name + '</option>';
}
}
tagdropdown += '</select>';
var notetitle = "";
if (this.note.notetype == "note") {
if (this.note.notetype == "face") {
selectedtag = this.note.text;
} else {
notetitle = this.note.text;
}
var form = $('<div id="image-annotate-edit-form"><form action="' + saveUrl + '" method="post"><input type="hidden" name="csrf" value="' + csrf + '" /><input type="hidden" name="noteid" value="' + this.note.noteid + '" /><input type="hidden" name="notetype" value="' + this.note.notetype + '" />' + tagdropdown + labels[1] + '<textarea id="image-annotate-text" name="text" rows="3" cols="30">' + notetitle + '</textarea>' + labels[2] + '<textarea id="image-annotate-desc" name="desc" rows="3" cols="30">' + this.note.description + '</textarea></form></div>');
var form = $('<div id="image-annotate-edit-form" class="' + rtlsupport + '"><form id="photoannotation-form" action="' + saveUrl + '" method="post"><input type="hidden" name="csrf" value="' + csrf + '" /><input type="hidden" name="noteid" value="' + this.note.noteid + '" /><input type="hidden" name="notetype" value="' + this.note.notetype + '" />' + labels[0] + '<input id="image-annotate-tag-text" type="text" name="tagsList" value="' + selectedtag + '" />' + '<strong>' + labels[4] + '</strong><br />' + labels[1] + '<textarea id="image-annotate-text" name="text" rows="3" cols="30">' + notetitle + '</textarea>' + labels[2] + '<textarea id="image-annotate-desc" name="desc" rows="3" cols="30">' + this.note.description + '</textarea></form></div>');
this.form = form;
$('body').append(this.form);
$("#photoannotation-form").ready(function() {
var url = tags;
$("input#image-annotate-tag-text").autocomplete(
url, {
max: 30,
multiple: false,
cacheLength: 1
}
);
});
$("input#image-annotate-tag-text").keyup(function() {
if ($("input#image-annotate-tag-text").val() != "") {
$("textarea#image-annotate-text").html("");
$("textarea#image-annotate-text").val("");
$("textarea#image-annotate-text").text("");
}
});
$("textarea#image-annotate-text").keyup(function() {
if ($("textarea#image-annotate-text").val() != "") {
$("input#image-annotate-tag-text").html("");
$("input#image-annotate-tag-text").val("");
$("input#image-annotate-tag-text").text("");
}
});
this.form.css('left', this.area.offset().left + 'px');
this.form.css('top', (parseInt(this.area.offset().top) + parseInt(this.area.height()) + 7) + 'px');
@ -265,18 +278,18 @@
stop: function(e, ui) {
form.css('left', area.offset().left + 'px');
form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 2) + 'px');
form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 7) + 'px');
}
})
.draggable({
containment: image.canvas,
drag: function(e, ui) {
form.css('left', area.offset().left + 'px');
form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 2) + 'px');
form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 7) + 'px');
},
stop: function(e, ui) {
form.css('left', area.offset().left + 'px');
form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 2) + 'px');
form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 7) + 'px');
}
});
return this;
@ -296,7 +309,7 @@
this.form.remove();
}
$.fn.annotateView = function(image, note, tags, labels, editable, csrf, deleteUrl, saveUrl, cssaclass) {
$.fn.annotateView = function(image, note, tags, labels, editable, csrf, deleteUrl, saveUrl, cssaclass, rtlsupport) {
/// <summary>
/// Defines a annotation area.
/// </summary>
@ -309,19 +322,27 @@
image.canvas.children('.image-annotate-view').prepend(this.area);
if (editable) {
this.delarea = $('<div id="photoannotation-del-' + this.note.noteid + '" class="image-annotate-area photoannotation-del-button"><div><form method="post" action="' + deleteUrl + '"><input type="hidden" name="notetype" value="' + this.note.notetype + '" /><input type="hidden" name="noteid" value="' + this.note.noteid + '" /><input type="hidden" name="csrf" value="' + csrf + '" /></form></div></div>');
this.delarea = $('<div class="image-annotate-area photoannotation-del-button"><div><form id="photoannotation-del-' + this.note.noteid + '" class="photoannotation-del-form" method="post" action="' + deleteUrl + '"><input type="hidden" name="notetype" value="' + this.note.notetype + '" /><input type="hidden" name="noteid" value="' + this.note.noteid + '" /><input type="hidden" name="csrf" value="' + csrf + '" /></form></div></div>');
this.editarea = $('<div id="photoannotation-edit-' + this.note.noteid + '" class="image-annotate-area photoannotation-edit-button"><div></div></div>');
image.canvas.children('.image-annotate-view').prepend(this.delarea);
image.canvas.children('.image-annotate-view').prepend(this.editarea);
this.delarea.bind('click',function () {
if (confirm(labels[3])) {
var alink = $(cssaclass);
alink.unbind();
alink.attr ('href', '#');
alink.removeAttr ('rel');
var delform = $(this).children('div').children('form');
delform.submit();
}
var alink = $(cssaclass);
alink.unbind();
alink.attr ('href', '#');
alink.removeAttr ('rel');
var confdialog = '<div id="image-annotate-conf-dialog" rel="' + $(this).find('form.photoannotation-del-form').attr('id') + '">' + labels[3] + '<div />';
$('body').append(confdialog);
var btns = {};
btns[labels[6]] = function(){ location.reload(); };
btns[labels[5]] = function(){ var delform = $(this).attr("rel"); $("form#" + delform).submit(); };
$('#image-annotate-conf-dialog').dialog({
modal: true,
resizable: false,
title: labels[7],
close: function(event, ui) { location.reload(); },
buttons: btns
});
})
var form = this;
this.editarea.bind('click',function () {
@ -329,7 +350,7 @@
alink.unbind();
alink.attr ('href', '#');
alink.removeAttr ('rel');
form.edit(tags, labels, saveUrl, csrf);
form.edit(tags, labels, saveUrl, csrf, rtlsupport);
})
this.delarea.hide();
this.editarea.hide();
@ -346,7 +367,7 @@
this.form.children('span.actions').hide();
// Set the position and size of the note
this.setPosition();
this.setPosition(rtlsupport);
// Add the behavior: hide/display the note when hovering the area
var annotation = this;
@ -392,7 +413,7 @@
}
};
$.fn.annotateView.prototype.setPosition = function() {
$.fn.annotateView.prototype.setPosition = function(rtlsupport) {
/// <summary>
/// Sets the position of an annotation.
/// </summary>
@ -406,11 +427,16 @@
if (this.delarea != undefined) {
this.delarea.children('div').height('14px');
this.delarea.children('div').width('14px');
this.delarea.css('left', (this.note.left + parseInt(this.note.width)) + 'px');
this.delarea.css('top', (this.note.top) + 'px');
this.editarea.children('div').height('14px');
this.editarea.children('div').width('14px');
this.editarea.css('left', (this.note.left + parseInt(this.note.width)) + 'px');
if (rtlsupport == '') {
this.delarea.css('left', (this.note.left + parseInt(this.note.width)) + 'px');
this.editarea.css('left', (this.note.left + parseInt(this.note.width)) + 'px');
} else {
this.delarea.css('left', (this.note.left - 16) + 'px');
this.editarea.css('left', (this.note.left - 16) + 'px');
}
this.editarea.css('top', (this.note.top + 16) + 'px');
}
};
@ -444,7 +470,7 @@
this.form.remove();
}
$.fn.annotateView.prototype.edit = function(tags, labels, saveUrl, csrf) {
$.fn.annotateView.prototype.edit = function(tags, labels, saveUrl, csrf, rtlsupport) {
/// <summary>
/// Edits the annotation.
/// </summary>
@ -453,9 +479,9 @@
var annotation = this;
// Create/prepare the editable note elements
var editable = new $.fn.annotateEdit(this.image, this.note, tags, labels, saveUrl, csrf);
$.fn.annotateImage.createSaveButton(editable, this.image, annotation);
$.fn.annotateImage.createCancelButton(editable, this.image);
var editable = new $.fn.annotateEdit(this.image, this.note, tags, labels, saveUrl, csrf, rtlsupport);
$.fn.annotateImage.createSaveButton(editable, this.image, annotation, rtlsupport);
$.fn.annotateImage.createCancelButton(editable, this.image, rtlsupport);
}
};

2
modules/photoannotation/module.info
View File

@ -1,3 +1,3 @@
name = "Photo Annotation"
description = "Allows you to assign tags and notes to areas on your photos. Fully compatible with TagFaces module by rWatcher but you cannot run both modules at the same time."
version = 1
version = 2

25
modules/photoannotation/views/photoannotation_highlight_block.html.php
View File

@ -7,6 +7,11 @@
$existingNotes = ORM::factory("items_note")
->where("item_id", "=", $item->id)
->find_all();
if (locales::is_rtl()) {
$rtl_support = "image-annotate-rtl";
} else {
$rtl_support = "";
}
$tags_arraystring = "";
$jscode = "";
$legend_faces = "";
@ -72,21 +77,10 @@
$legend_display = $legend_display ."<br />". $legend_notes;
}
}
$item_tags = ORM::factory("tag")
->join("items_tags", "tags.id", "items_tags.tag_id")
->where("items_tags.item_id", "=", $item->id)
->find_all();
$tags_arraystring = "tags: [ ";
foreach ($item_tags as $current_tag) {
$tags_arraystring .= "{'name':'". html::clean($current_tag->name) ."','id':'". $current_tag->id ."'},";
}
$tags_arraystring = trim($tags_arraystring, ",");
$tags_arraystring .= " ],";
$labels_arraystring = "labels: [ '". t("Tag:") ."','". t("Note Title:") ."','". t("Description (optional):") ."','". t("Are you sure you want to delete this annotation?") ."' ],";
$labels_arraystring = "labels: [ '". t("Tag:") ."','". t("Note Title:") ."','". t("Description (optional):") ."','". t("Are you sure you want to delete this annotation?") ."','". t("or") ."','". t("Yes") ."','". t("No") ."','". t("Confirm deletion") ."' ],";
?>
<script language="javascript">
$(document).ready(function() {
<script type="text/javascript">
$(document).ready(function() {
$("<?= $css_item_id ?>").annotateImage({
<? if ((access::can("view", $item)) && (access::can("edit", $item))): ?>
editable: true,
@ -95,9 +89,10 @@
<? endif ?>
saveUrl: '<?= url::site("photoannotation/save/". $item->id) ?>',
deleteUrl: '<?= url::site("photoannotation/delete/". $item->id) ?>',
<?= $tags_arraystring ?>
tags: '<?= url::site("tags/autocomplete") ?>',
<?= $labels_arraystring ?>
<?= $jscode ?>
rtlsupport: '<?= $rtl_support ?>',
useAjax: false,
cssaclass: '<?= $css_a_class ?>',
csrf: '<?= $csrf ?>'