From 20ab73de5248b3418bbbad27850e3d3e093c473c Mon Sep 17 00:00:00 2001 From: cash Date: Mon, 2 Jan 2012 12:45:16 -0500 Subject: added photo tagging - but not displaying or deleting tags yet --- views/default/forms/photos/image/tag.php | 33 +++++++++++++++ views/default/js/photos/tagging.php | 73 ++++++++++++++++++++++++++++++++ views/default/object/image/full.php | 4 +- views/default/photos/css.php | 56 ++++++++++++++++++++++-- views/default/photos/tagging/help.php | 19 +++++++++ views/default/photos/tagging/select.php | 16 +++++++ 6 files changed, 196 insertions(+), 5 deletions(-) create mode 100644 views/default/forms/photos/image/tag.php create mode 100644 views/default/js/photos/tagging.php create mode 100644 views/default/photos/tagging/help.php create mode 100644 views/default/photos/tagging/select.php (limited to 'views') diff --git a/views/default/forms/photos/image/tag.php b/views/default/forms/photos/image/tag.php new file mode 100644 index 000000000..31869be9e --- /dev/null +++ b/views/default/forms/photos/image/tag.php @@ -0,0 +1,33 @@ +'; + +echo elgg_view('input/autocomplete', array( + 'name' => 'username', + 'match_on' => 'friends', +)); + +echo elgg_view('input/hidden', array( + 'name' => 'guid', + 'value' => $vars['entity']->getGUID(), +)); + +echo elgg_view('input/hidden', array( + 'name' => 'coordinates', +)); + +echo ''; + +echo '
'; +echo elgg_view('input/submit', array( + 'value' => elgg_echo('tidypics:actiontag'), +)); +echo '
'; diff --git a/views/default/js/photos/tagging.php b/views/default/js/photos/tagging.php new file mode 100644 index 000000000..f831200e7 --- /dev/null +++ b/views/default/js/photos/tagging.php @@ -0,0 +1,73 @@ + + +elgg.provide('elgg.tidypics.tagging'); + +elgg.tidypics.tagging.init = function() { + $('[rel=photo-tagging]').click(elgg.tidypics.tagging.start); + + $('#tidypics-tagging-quit').click(elgg.tidypics.tagging.stop); +} + +/** + * Start a tagging session + */ +elgg.tidypics.tagging.start = function(event) { + + $('.tidypics-photo').imgAreaSelect({ + disable : false, + hide : false, + classPrefix : 'tidypics-tagging', + onSelectEnd : elgg.tidypics.tagging.startSelect, + onSelectStart: function() { + $('#tidypics-tagging-select').hide(); + } + }); + + $('.tidypics-photo').css({"cursor" : "crosshair"}); + + $('#tidypics-tagging-help').toggle(); + + event.preventDefault(); +} + +/** + * Stop tagging + * + * A tagging session could be completed or the user could have quit. + */ +elgg.tidypics.tagging.stop = function(event) { + $('#tidypics-tagging-help').toggle(); + $('#tidypics-tagging-select').hide(); + + $('.tidypics-photo').imgAreaSelect({hide: true, disable: true}); + $('.tidypics-photo').css({"cursor" : "pointer"}); + + event.preventDefault(); +} + +/** + * Start the selection stage of tagging + */ +elgg.tidypics.tagging.startSelect = function(img, selection) { + + var coords = '"x1":"' + selection.x1 + '",'; + coords += '"y1":"' + selection.y1 + '",'; + coords += '"width":"' + selection.width + '",'; + coords += '"height":"' + selection.height + '"'; + $("input[name=coordinates]").val(coords); + + $('#tidypics-tagging-select').show().css({ + 'top' : selection.y2 + 10, + 'left' : selection.x2 + }); +} + +elgg.register_hook_handler('init', 'system', elgg.tidypics.tagging.init); diff --git a/views/default/object/image/full.php b/views/default/object/image/full.php index e3a2c7003..33ba49739 100644 --- a/views/default/object/image/full.php +++ b/views/default/object/image/full.php @@ -51,8 +51,8 @@ echo $summary; echo '
'; echo elgg_view('object/image/navigation', $vars); -//echo elgg_view('tidypics/tagging/help'); -//echo elgg_view('tidypics/tagging/select', array('photo' => $photo)); +echo elgg_view('photos/tagging/help', $vars); +echo elgg_view('photos/tagging/select', $vars); echo $img; echo '
'; diff --git a/views/default/photos/css.php b/views/default/photos/css.php index 18f225131..31e3d9b53 100644 --- a/views/default/photos/css.php +++ b/views/default/photos/css.php @@ -1,9 +1,15 @@ +/* *************************************** + TIDYPICS +*************************************** */ .elgg-module-tidypics-album, .elgg-module-tidypics-image { width: 161px; @@ -23,6 +29,10 @@ display: block; } +.tidypics-wrapper-photo { + position: relative; +} + .tidypics-heading { color: #0054A7; } @@ -66,6 +76,46 @@ vertical-align: top; } +/* *************************************** + Tagging +*************************************** */ +.tidypics-tagging-border1 { + border: solid 2px white; +} + +.tidypics-tagging-border1, .tidypics-tagging-border2, +.tidypics-tagging-border3, .tidypics-tagging-border4 { + filter: alpha(opacity=50); + opacity: 0.5; +} + +.tidypics-tagging-handle { + background-color: #fff; + border: solid 1px #000; + filter: alpha(opacity=50); + opacity: 0.5; +} + +.tidypics-tagging-outer { + background-color: #000; + filter: alpha(opacity=50); + opacity: 0.5; +} + +.tidypics-tagging-help { + position: absolute; + left: 50%; + top: -25px; + width: 250px; + margin-left: -125px; + text-align: center; +} + +.tidypics-tagging-select { + position: absolute; + max-width: 300px; +} + diff --git a/views/default/photos/tagging/help.php b/views/default/photos/tagging/help.php new file mode 100644 index 000000000..a7f437e51 --- /dev/null +++ b/views/default/photos/tagging/help.php @@ -0,0 +1,19 @@ + elgg_echo('quit'), + 'href' => '#', + 'id' => 'tidypics-tagging-quit', +)); + +$instructions = elgg_echo('tidypics:taginstruct', array($button)); +?> + diff --git a/views/default/photos/tagging/select.php b/views/default/photos/tagging/select.php new file mode 100644 index 000000000..8894af63a --- /dev/null +++ b/views/default/photos/tagging/select.php @@ -0,0 +1,16 @@ + 'tidypics-tagging-select pam hidden', + 'id' => 'tidypics-tagging-select', +)); -- cgit v1.2.3