The first part of Pedro's tagging code

2 files changed, 342 insertions, 10 deletions

diff --git a/views/default/object/image.php b/views/default/object/image.php
index 3aa9bab8e..e4401a950 100644
--- a/views/default/object/image.php
+++ b/views/default/object/image.php
@@ -81,16 +81,147 @@
 			echo '<div id="tidypics_desc">' . autop($desc) . '</div>';		
 			echo '<div id="tidypics_image_full">';
 			echo '<div id="tidypics_image_nav">' . $back . $next . '</div>';	  
-			if ($next) echo '<a href="' . $vars['url'] . 'pg/photos/view/' . $_SESSION['image_sort'][$current+1] . '">';
-			echo '<img src="' . $vars['url'] . 'mod/tidypics/thumbnail.php?file_guid=' . $file_guid . '&size=large" border="0" alt="' . $title . '"/>';
-			if ($next) echo '</a>';
-			echo '</div>';
 ?>
-			<div id="tidypics_controls">
-<div class="tidypics_download"><p><a href="<?php echo $vars['url']; ?>action/tidypics/download?file_guid=<?php echo $file_guid; ?>"><?php echo elgg_echo("image:download"); ?></a></p></div>
-			</div>
+<div id='tagging_instructions'>
+	<table>
+		<tbody>
+			<tr>
+				<td width='375' align='center'><div id='instructions_default_message'><?php echo elgg_echo('image:doclickfortag'); ?></div></td>
+				<td valign='middle'><button class='submit_button' onclick='closeInfoTag()'><?php echo elgg_echo('image:finish_tagging'); ?></button></td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+
+<?php
+	$viewer = get_loggedin_user();
+	$friends = get_entities_from_relationship('friend', $viewer->getGUID(), false, 'user', '', 0);
 	
-		<div id="tidypics_info">
+?>
+<div id='cont-image'>
+	<div id="cont-menu">
+<?php
+	$content = "<input type='hidden' name='entity_guid' value='$file_guid' />";
+	$content .= "<ul id='phototagging-menu'>";
+	$content .= "<li class='owner'><a href='#' rel='{$viewer->getGUID()}'> {$viewer->name} (" . elgg_echo('me') . ")</a></li>";
+	
+	if($friends) foreach($friends as $friend)
+	{
+		$content .= "<li><a href='#' rel='{$friend->getGUID()}'>{$friend->name}</a></li>"; 
+	}
+	
+	$content .= "</ul>"; 
+
+	$content .= "
+		<fieldset>
+			<button class='submit_button' type='submit'>" . elgg_echo('image:actiontag') . "</button>
+		</fieldset>";
+	
+	echo elgg_view('input/form', array('internalid' => 'quicksearch', 'internalname' => 'form-phototagging', 'class' => 'quicksearch', 'action' => "{$vars['url']}action/tidypics/phototagging", 'body' => $content))
+?>
+	</div>
+<?php
+	$photo_tags = get_annotations($file_guid,'object','image','phototag');
+
+if ($photo_tags) foreach ($photo_tags as $photo_tag)
+{
+	$data_tag = unserialize($photo_tag->value);
+	
+	
+	if($data_tag->type == 'user')
+		$data_tag->data = get_entity($data_tag->value);
+	else
+		$data_tag->data = $data_tag->value;
+		
+	echo "<div class='phototag' rel='{$photo_tag->id}' style='margin-left:{$data_tag->x1}px; margin-top:{$data_tag->y1}px; width:{$data_tag->width}px;'>";
+	if($data_tag->type == 'user')
+		echo "<em>{$data_tag->data->name}</em>";
+	else
+		echo "<em>{$data_tag->data}</em>";
+	echo "<span style='width:" . ((int)$data_tag->width - 2) . "px; height:" . ((int)$data_tag->height - 2) . "px;'></span>";
+	echo "</div>";
+}else 
+{
+	echo "<div class='phototag'></div>";
+}	
+
+	if ($next)
+		$click =  "onclick='toggleLink()'";
+		
+	echo '<img ' . $click . ' src="' . $vars['url'] . 'mod/tidypics/thumbnail.php?file_guid=' . $file_guid . '&size=large" border="0" alt="' . $title . '"/>';
+
+?>
+</div>
+
+</div>
+
+<div id="tidypics_controls">
+<ul>
+	<li><a href="javascript:void(0)" onclick="showInfoTag()"><?= elgg_echo('image:tagthisphoto') ?></a></li>
+	<li><a href="<?php echo $vars['url']; ?>action/tidypics/download?file_guid=<?php echo $file_guid; ?>"><?php echo elgg_echo("image:download"); ?></a></li>
+</ul>
+</div>
+
+<?php	
+		$photo_tags = get_annotations($entity_guid,'object','image','phototag','',0,20,0);
+		
+		if ($photo_tags)
+		{
+?>	
+			<div id="tidypics_phototags">
+				<h3> <?= elgg_echo('image:inthisphoto') ?></h3>
+				<ul>
+<?php
+			$users = array();
+			$objects = array();
+			
+			if ($photo_tags) foreach ($photo_tags as $photo_tag)
+			{
+				$data_tag = unserialize($photo_tag->value);
+				
+				$name = "";
+				
+				$object = new stdClass();
+				
+				if($data_tag->type == 'user')
+				{
+					$data_tag->data = get_entity($data_tag->value);
+					$object->img = elgg_view("profile/icon",array('entity' => $data_tag->data, 'size' => 'topbar',  'override' => true));
+					$object->name = $data_tag->data->name;
+					$object->rel = $data_tag->data->getUrl();
+				}else
+				{
+					$data_tag->data = $data_tag->value;
+					$object->img = "<img border='0' title='object' src='{$vars['url']}mod/tidypics/graphics/tag_yellow.png' />";
+					$object->name = $data_tag->data;
+					$object->rel = "#";
+				}
+				
+				$object->html = "<li><a class='phototag-links' href='{$object->rel}' rel='{$photo_tag->id}'>$object->img<span>{$object->name}</span></a></li>";
+				
+				if($data_tag->type == 'user')
+					$users[] = $object;
+					
+				else
+					$objects[] = $object;
+			}
+			
+			if(!empty($users)) foreach ($users as $user)
+				echo $user->html;
+				
+			if(!empty($objects)) foreach ($objects as $object)
+				echo $object->html;
+			
+?>
+			</ul>
+		</div>
+<?php		
+		}
+
+?>
+
+
+<div id="tidypics_info">
 <?php
 			if (!is_null($tags)) {
 ?>
@@ -107,4 +238,164 @@
 		}
 	
 	} // end of tidypics image display
-?>
\ No newline at end of file
+?>
+	<script type="text/javascript" src="<?= $vars['url'] ?>/mod/tidypics/vendors/jquery.imgareaselect-0.6.2.js"></script>
+	<script type="text/javascript" src="<?= $vars['url'] ?>/mod/tidypics/vendors/jquery.quicksearch.js"></script>
+	 
+	<script type="text/javascript">
+	
+		var coordinates;
+	
+		jQuery(document).ready(function(){
+		   
+			jQuery('#cont-menu ul li').quicksearch({
+			  position: 'before',
+			  attached: '#cont-menu ul',
+			  loaderText: '',
+			  inputClass: 'input-filtro',
+			  labelText:"<p><?= elgg_echo('image:inserttag') ?></p>",
+			  delay: 100
+			})
+			
+			jQuery('#cont-menu ul').before("<p> o escoge a una persona:</p>");
+			
+			//avoid submit
+			jQuery('#quicksearch').submit( function () { addTag()});
+			
+			
+			setTimeout("fixContImage()",1000);
+			
+			//fix position
+			jQuery('#cont-image .phototag em').height()
+			
+			//Este evento lo que hace es que cuando hace foco en el input se desmarcan todos
+			jQuery('.input-filtro').focus(function(){jQuery("#cont-menu li a[class*='selected']").removeClass('selected');})
+	
+			});	
+			
+			
+			jQuery('#cont-menu li a').click(function(){
+				//Limpiamos todos
+				jQuery("#cont-menu li a[class*='selected']").removeClass('selected');
+	
+	        	jQuery(this).toggleClass('selected');
+			})
+			
+			
+		
+	
+		
+		var sUrl = "<?= $vars['url'] . 'pg/photos/view/' . $_SESSION['image_sort'][$current+1] ?>";
+		
+		function toggleLink()
+		{
+			if(jQuery('#tagging_instructions:hidden').length)
+				location.href = sUrl;
+		}
+		
+		function showInfoTag()
+		{
+			if(jQuery('#tagging_instructions:hidden').length)
+			{
+				jQuery('#tagging_instructions').show();
+				activeTagSystem();
+			}
+		}
+		
+		function closeInfoTag()
+		{
+			jQuery('#tagging_instructions').hide();
+			jQuery('div[class*=imgareaselect]').remove();
+			jQuery('#cont-menu').hide();
+			jQuery('#cont-image img').unbind('mousedown');
+		}
+		
+		function activeTagSystem()
+		{
+			jQuery('#image_full img').imgAreaSelect({selectionColor: 'white',
+					 									  maxWidth: 200, 
+														  maxHeight: 200,
+														  minWidth: 60, 
+														  minHeight: 60,
+														  borderWidth: 2,
+														  onSelectEnd: mostrarMenu,
+														  onSelectStart: ocultarMenu}); 
+		}
+	
+		function ocultarMenu()
+		{
+			jQuery('#cont-menu').hide();
+			coordinates = "";
+		}
+			
+		function mostrarMenu(oObject, oCoordenates)
+		{
+			constX = -70;
+			constY = 1;
+			//console.log(oCoordenates);
+			//Mostramos el menu
+			if (oCoordenates.width != 0 && oCoordenates.height != 0) {
+				coordinates = oCoordenates;
+				jQuery('#cont-menu').show().css({
+					"margin-top": oCoordenates.y2+constY + "px",
+					"margin-left": oCoordenates.x2+constX + "px"
+				});
+				jQuery(".input-filtro").focus();
+			}
+		}
+		
+		function addTag()
+		{
+			jQuery('#phototagging-menu li:hidden').find('a').removeClass('selected');
+			oForm = jQuery('#quicksearch');
+			oEl = jQuery('#quicksearch ul li:has(.selected)');
+			if(jQuery('#quicksearch ul li:has(.selected)').length == 1)
+				oForm.append("<input type='hidden' name='user_id' value='" + oEl.find('a').attr('rel') + "'")
+			else
+				oForm.append("<input type='hidden' name='word' value='" + oForm.find('input.input-filtro').val() + "'")
+				
+			if(coordinates.x1!=0)
+			{
+				sStr = "";
+				for (x in coordinates)
+				    sStr += x + ':' + coordinates[x] + '/';
+
+				oForm.append("<input type='hidden' name='coordinates' value='" + sStr + "' />");
+			
+			}
+		
+			//Show loading	
+			jQuery("#cont-menu label, #cont-menu input, #cont-menu p, #cont-menu span, #cont-menu button, #cont-menu ul, #cont-menu fieldset").hide();
+			jQuery("#cont-menu ").append('<div align="center" class="ajax_loader"></div>');		
+		
+			
+			return false;
+			//oForm.submit();
+		
+		}
+		
+		jQuery(".phototag span").hover(function() {
+			jQuery(this).prev("em").stop(true, true).animate({opacity: "show"}, "fast").css({'display':'block','-moz-border-radius-topleft':'2px','-moz-border-radius-topright':'2px','-moz-border-radius-bottomleft':'2px','-moz-border-radius-bottomright':'2px'});
+		}, function() {
+		jQuery(this).prev("em").animate({opacity: "hide"}, "fast");
+		});
+		
+		function fixContImage()
+		{
+			jQuery('#cont-image').width(jQuery('#cont-image img').width()); 
+			jQuery('#cont-image').height(jQuery('#cont-image img').height());
+			setTimeout("if(jQuery('#cont-image').width() < jQuery('#cont-image img').width()) setTimeout(\"fixContImage()\",500);",300);
+		}
+		
+		jQuery('a.phototag-links').hover(function() {
+			iRel = jQuery(this).attr('rel');
+			jQuery('div.phototag[rel*='+ iRel + ']').find("em").stop(true, true).animate({opacity: "show"}, "fast").css({'display':'block','-moz-border-radius-topleft':'2px','-moz-border-radius-topright':'2px','-moz-border-radius-bottomleft':'0px','-moz-border-radius-bottomright':'0px'});
+			jQuery('div.phototag[rel*='+ iRel + ']').find("span").css({'border':'1px solid white','border-top':'none'} );
+		}, function() {
+		iRel = jQuery(this).attr('rel');
+		jQuery('div.phototag[rel*='+ iRel + ']').find("em").animate({opacity: "hide"}, "fast");
+		jQuery('div.phototag[rel*='+ iRel + ']').find("span").css("border","none");
+		
+		});
+		
+	</script>
\ No newline at end of file
diff --git a/views/default/tidypics/css.php b/views/default/tidypics/css.php
index 6559ec5be..0f5b8baeb 100644
--- a/views/default/tidypics/css.php
+++ b/views/default/tidypics/css.php
@@ -23,6 +23,18 @@ margin-bottom:10px;
 margin:10px;
 }
 
+#tidypics_controls ul {
+list-style:none; 
+margin:0px; 
+padding:8px;
+}
+
+#tidypics_controls ul li {
+padding:2px 10px 2px 22px;
+margin:2px 0px; 
+display:inline;
+}
+/*
 .tidypics_download a {
 font:12px/100% Arial, Helvetica, sans-serif;
 font-weight:bold;
@@ -43,7 +55,7 @@ background:#0054a7;
 color:white;
 text-decoration:none;
 }
-
+*/
 .tidypics_album_images {
 float:left;
 width:153px; 
@@ -147,4 +159,33 @@ padding:0 0 5px;
 }
 .river_object_album_comment {
 	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_comment.gif) no-repeat left -1px;
+}
+
+/* ----------- tagging ---------------- */
+#tagging_instructions {
+background:#FFFBE2 none repeat scroll 0 0; 
+border:1px solid #FFE222; 
+margin:10px; 
+padding:10px;
+display:none;
+}
+
+#cont-image {
+margin:0px auto; 
+background:white none repeat scroll 0 0; 
+border:1px solid #DDDDDD; 
+padding:10px; 
+overflow:hidden;
+}
+
+#cont-menu {
+border:1px solid #3B5999; 
+width:200px; 
+position:absolute;
+z-index:10000; 
+display:none; 
+background:#fff; 
+padding:5px; 
+font-size:12px; 
+text-align:left;
 }
\ No newline at end of file