diff options
-rw-r--r-- | classes/TidypicsImage.php | 14 | ||||
-rw-r--r-- | views/default/js/photos/tagging.php | 74 | ||||
-rw-r--r-- | views/default/object/image/full.php | 1 | ||||
-rw-r--r-- | views/default/photos/css.php | 6 | ||||
-rw-r--r-- | views/default/photos/tagging/tag.php | 24 | ||||
-rw-r--r-- | views/default/photos/tagging/tags.php | 11 |
6 files changed, 120 insertions, 10 deletions
diff --git a/classes/TidypicsImage.php b/classes/TidypicsImage.php index 49585fd0c..7eca2f7c3 100644 --- a/classes/TidypicsImage.php +++ b/classes/TidypicsImage.php @@ -341,15 +341,16 @@ class TidypicsImage extends ElggFile { * @return array of json representations of the tags and the tag link text */ public function getPhotoTags() { - global $CONFIG; - // get tags as annotations - $photo_tags = get_annotations($this->getGUID(), 'object', 'image', 'phototag'); - if (!$photo_tags) { - // no tags or user doesn't have permission to tags, so return - return false; + $tags = array(); + $annotations = get_annotations($this->getGUID(), 'object', 'image', 'phototag'); + foreach ($annotations as $annotation) { + $tags[] = unserialize($annotation->value); } + return $tags; + + /* $photo_tags_json = "["; foreach ($photo_tags as $p) { $photo_tag = unserialize($p->value); @@ -385,6 +386,7 @@ class TidypicsImage extends ElggFile { $ret_data = array('json' => $photo_tags_json, 'links' => $photo_tag_links); return $ret_data; + */ } /** diff --git a/views/default/js/photos/tagging.php b/views/default/js/photos/tagging.php index f831200e7..b00200e74 100644 --- a/views/default/js/photos/tagging.php +++ b/views/default/js/photos/tagging.php @@ -11,16 +11,27 @@ elgg.provide('elgg.tidypics.tagging'); elgg.tidypics.tagging.init = function() { + elgg.tidypics.tagging.active = false; $('[rel=photo-tagging]').click(elgg.tidypics.tagging.start); $('#tidypics-tagging-quit').click(elgg.tidypics.tagging.stop); -} + + $('.tidypics-tag').each(elgg.tidypics.tagging.position); + + elgg.tidypics.tagging.tag_hover = false; + elgg.tidypics.tagging.toggleTagHover(); +}; /** * Start a tagging session */ elgg.tidypics.tagging.start = function(event) { + if (elgg.tidypics.tagging.active) { + elgg.tidypics.tagging.stop(event); + return; + } + $('.tidypics-photo').imgAreaSelect({ disable : false, hide : false, @@ -31,12 +42,16 @@ elgg.tidypics.tagging.start = function(event) { } }); + elgg.tidypics.tagging.toggleTagHover(); + $('.tidypics-photo').css({"cursor" : "crosshair"}); $('#tidypics-tagging-help').toggle(); + elgg.tidypics.tagging.active = true; + event.preventDefault(); -} +}; /** * Stop tagging @@ -50,8 +65,11 @@ elgg.tidypics.tagging.stop = function(event) { $('.tidypics-photo').imgAreaSelect({hide: true, disable: true}); $('.tidypics-photo').css({"cursor" : "pointer"}); + elgg.tidypics.tagging.active = false; + elgg.tidypics.tagging.toggleTagHover(); + event.preventDefault(); -} +}; /** * Start the selection stage of tagging @@ -68,6 +86,54 @@ elgg.tidypics.tagging.startSelect = function(img, selection) { 'top' : selection.y2 + 10, 'left' : selection.x2 }); -} +}; + +/** + * Position the tags over the image + */ +elgg.tidypics.tagging.position = function() { + var tag_left = parseInt($(this).data('x1')); + var tag_top = parseInt($(this).data('y1')); + var tag_width = parseInt($(this).data('width')); + var tag_height = parseInt($(this).data('height')); + + // add image offset + var image_pos = $('.tidypics-photo').position(); + tag_left += image_pos.left; + tag_top += image_pos.top; + + $(this).css({ + left: tag_left + 'px', + top: tag_top + 'px', + width: tag_width + 'px', + height: tag_height + 'px' + }); +}; + +/** + * Toggle whether tags are shown on hover over the image + */ +elgg.tidypics.tagging.toggleTagHover = function() { + if (elgg.tidypics.tagging.tag_hover == false) { + $('.tidypics-photo').hover( + function() { + $('.tidypics-tag').show(); + }, + function() { + $('.tidypics-tag').hide(); + } + ); + } else { + $('.tidypics-photo').hover( + function() { + $('.tidypics-tag').hide(); + }, + function() { + $('.tidypics-tag').hide(); + } + ); + } + elgg.tidypics.tagging.tag_hover = !elgg.tidypics.tagging.tag_hover; +}; 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 33ba49739..e12e96806 100644 --- a/views/default/object/image/full.php +++ b/views/default/object/image/full.php @@ -54,6 +54,7 @@ echo elgg_view('object/image/navigation', $vars); echo elgg_view('photos/tagging/help', $vars); echo elgg_view('photos/tagging/select', $vars); echo $img; +echo elgg_view('photos/tagging/tags', $vars); echo '</div>'; if ($photo->description) { diff --git a/views/default/photos/css.php b/views/default/photos/css.php index 31e3d9b53..23926adbc 100644 --- a/views/default/photos/css.php +++ b/views/default/photos/css.php @@ -116,6 +116,12 @@ max-width: 300px; } +.tidypics-tag { + display: none; + position: absolute; + border: 2px solid white; +} + <?php return true; ?> diff --git a/views/default/photos/tagging/tag.php b/views/default/photos/tagging/tag.php new file mode 100644 index 000000000..4d3affeb6 --- /dev/null +++ b/views/default/photos/tagging/tag.php @@ -0,0 +1,24 @@ +<?php +/** + * Photo tag view + * + * @uses $vars['tag'] Tag object + */ + +$coords = json_decode('{' . $vars['tag']->coords . '}'); + +$attributes = elgg_format_attributes(array( + 'class' => 'tidypics-tag', + 'data-x1' => $coords->x1, + 'data-y1' => $coords->y1, + 'data-width' => $coords->width, + 'data-height' => $coords->height, +)); + +//var_dump($vars['tag']); +//$text = "This is a something"; + +echo <<<HTML +<div $attributes> +</div> +HTML; diff --git a/views/default/photos/tagging/tags.php b/views/default/photos/tagging/tags.php new file mode 100644 index 000000000..7a4aa3a59 --- /dev/null +++ b/views/default/photos/tagging/tags.php @@ -0,0 +1,11 @@ +<?php +/** + * View the tags for this image + * + * @uses $vars['entity'] + */ + +$tags = $vars['entity']->getPhotoTags(); +foreach ($tags as $tag) { + echo elgg_view('photos/tagging/tag', array('tag' => $tag)); +} |