From d253222f742b74b8fd232fa39c81c6f39e9d6b9a Mon Sep 17 00:00:00 2001
From: Cash Costello <cash.costello@gmail.com>
Date: Sun, 17 May 2009 19:20:18 +0000
Subject: moved tagging from image.php to a view - make sure to refresh view
 cache when updating to this version

---
 views/default/js/tagging.php       | 250 +++++++++++++++++++++++++++++++++++++
 views/default/js/tidypics.php      | 250 -------------------------------------
 views/default/object/image.php     |  80 ++++--------
 views/default/tidypics/tagging.php |  57 +++++++++
 4 files changed, 330 insertions(+), 307 deletions(-)
 create mode 100644 views/default/js/tagging.php
 delete mode 100644 views/default/js/tidypics.php
 create mode 100644 views/default/tidypics/tagging.php

(limited to 'views')

diff --git a/views/default/js/tagging.php b/views/default/js/tagging.php
new file mode 100644
index 000000000..323c2bf57
--- /dev/null
+++ b/views/default/js/tagging.php
@@ -0,0 +1,250 @@
+<?php
+	$photo_tags_json = $vars['photo_tags_json'];
+?>
+<script type="text/javascript" src="<?= $vars['url'] ?>mod/tidypics/vendors/jquery.imgareaselect-0.7.js"></script>
+<script type="text/javascript" src="<?= $vars['url'] ?>mod/tidypics/vendors/jquery.quicksearch.js"></script>
+ 
+<script type="text/javascript">
+
+	var coordinates = "";
+	var user_id = 0;
+	var tagging = 0;
+
+	// add to DOM as soon as ready
+	$(document).ready(function () {
+			$('ul#phototagging-menu li').quicksearch({
+				position: 'before',
+				attached: 'ul#phototagging-menu',
+				loaderText: '',
+				inputClass: 'input-filter',
+				labelText: "<p><?php echo elgg_echo('tidypics:tagthisphoto'); ?></p>",
+				delay: 100
+			});
+
+			$('#quicksearch').submit( function () { addTag() } );
+		}
+	);
+
+	// images are loaded so process tags
+	$(window).load(function () {
+			$('#tidypics_image').setupTags();
+		}
+	);
+
+	// get tags over image ready for mouseover
+	$.fn.setupTags = function() 
+	{
+
+		image = this;
+
+		imgOffset = $(image).offset();
+
+		tags = <?php echo $photo_tags_json; ?>; 
+
+		$(tags).each(function(){
+			appendTag(imgOffset, this);
+		});
+		
+		$(image).hover(
+			function(){
+				$('.tidypics_tag').show();
+			},
+			function(){
+				$('.tidypics_tag').hide();
+			}
+		);
+
+		addTagEvents();
+		
+		$('.phototag-links').hover(
+			function(){
+				code = this.id.substr(7); // cut off taglink to get unique id
+				$('#tag'+code).show();
+			},
+			function(){
+				code = this.id.substr(7);
+				$('#tag'+code).hide();
+			}
+		);
+
+		// make sure we catch and handle when the browser is resized
+		$(window).resize(function () {
+			$('.tidypics_tag').remove();
+
+			imgOffset = $(image).offset();
+
+			$(tags).each(function(){
+				appendTag(imgOffset, this);
+			});
+
+			addTagEvents();
+		});
+	} 
+
+	function appendTag(offset, tag)
+	{
+		// catch for IE when no tags available
+		if (tag.id == undefined)
+			return;
+		
+		tag_top   = parseInt(imgOffset.top) + parseInt(tag.y1);
+		tag_left  = parseInt(imgOffset.left) + parseInt(tag.x1);
+
+		tag_div = $('<div class="tidypics_tag" id="tag'+tag.id+'"></div>').css({ left: tag_left + 'px', top: tag_top + 'px', width: tag.width + 'px', height: tag.height + 'px' });
+
+		tag_text_div = $('<div class="tidypics_tag_text">'+tag.text+'</div>').css({ left: tag_left + 'px', top: tag_top + 'px', width: tag.width + 'px', height: 20 + 'px' });
+
+		$('body').append(tag_div);
+		$('body').append(tag_text_div);
+	}
+
+	function addTagEvents() 
+	{
+		$('.tidypics_tag').hover(
+			function(){
+				$('.tidypics_tag').show();
+				$(this).next('.tidypics_tag_text').show();
+				$(this).next('.tidypics_tag_text').css("z-index", 10000);
+			},
+			function(){
+				$('.tidypics_tag').show();
+				$(this).next('.tidypics_tag_text').hide();
+				$(this).next('.tidypics_tag_text').css("z-index", 0);
+			}
+		);
+	}
+
+
+	function selectUser(id, name) 
+	{
+		user_id = id;
+		$("input.input-filter").val(name);
+	}
+
+	function startTagging() 
+	{
+		if (tagging != 0)
+		{
+			stopTagging();
+			return;
+		}
+		
+		tagging = 1;
+		
+		$('#tag_control').text("Stop Tagging");
+		
+		showTagInstruct();
+		
+
+		$('#tidypics_image').hover(
+			function(){
+				$('.tidypics_tag').hide();
+			},
+			function(){
+				$('.tidypics_tag').hide();
+			}
+		);
+
+		$('img#tidypics_image').imgAreaSelect( { 
+			borderWidth: 2,
+			borderColor1: 'white',
+			borderColor2: 'white',
+			disable: false,
+			hide: false,
+			onSelectEnd: showTagMenu,
+			onSelectStart: hideTagMenu 
+			}
+		);
+	}
+
+	function stopTagging() 
+	{
+		tagging = 0;
+		
+		hideTagInstruct();
+		hideTagMenu();
+
+		$('#tag_control').text("Tag this photo");
+
+		$('img#tidypics_image').imgAreaSelect( {hide: true, disable: true} );
+
+		// restart tag hovering
+		$('#tidypics_image').hover(
+			function(){
+				$('.tidypics_tag').show();
+			},
+			function(){
+				$('.tidypics_tag').hide();
+			}
+		);
+	}
+
+	function showTagMenu(oObject, oCoordenates)
+	{
+		offsetX = -100;
+
+		imgOffset = $('#tidypics_image').offset();
+
+		// show the list of friends
+		if (oCoordenates.width != 0 && oCoordenates.height != 0) {
+			coordinates = oCoordenates;
+			
+			_top = imgOffset.top + oCoordenates.y2;
+			_left = imgOffset.left + oCoordenates.x2 + offsetX;
+
+			$('#tag_menu').show().css({
+				"top": _top + "px",
+				"left": _left + "px"
+			});
+
+			$(".input-filter").focus();
+		}
+	}
+
+
+	function hideTagMenu()
+	{
+		$('#tag_menu').hide();
+	}
+
+	function showTagInstruct()
+	{
+		offsetY = -60;
+		
+		divWidth = $('#tagging_instructions').width();
+		imgOffset = $('#tidypics_image').offset();
+		imgWidth  = $('#tidypics_image').width();
+		offsetX   = parseInt((imgWidth - divWidth)/2);
+		
+		_top = imgOffset.top + offsetY;
+		_left = imgOffset.left + offsetX;
+
+		$('#tagging_instructions').show().css({
+			"top": _top + "px",
+			"left": _left + "px"
+		});
+	}
+
+	function hideTagInstruct()
+	{
+		$('#tagging_instructions').hide();
+	}
+
+	function addTag()
+	{
+		// do I need a catch for no tag?
+
+		$("input#user_id").val(user_id);
+		$("input#word").val( $("input.input-filter").val() );
+
+		coord_string  = '"x1":"' + coordinates.x1 + '",';
+		coord_string += '"y1":"' + coordinates.y1 + '",';
+		coord_string += '"width":"' + coordinates.width + '",';
+		coord_string += '"height":"' + coordinates.height + '"';
+
+		$("input#coordinates").val(coord_string);
+
+		//Show loading
+		//$("#tag_menu").replaceWith('<div align="center" class="ajax_loader"></div>');
+	}
+</script>
\ No newline at end of file
diff --git a/views/default/js/tidypics.php b/views/default/js/tidypics.php
deleted file mode 100644
index 323c2bf57..000000000
--- a/views/default/js/tidypics.php
+++ /dev/null
@@ -1,250 +0,0 @@
-<?php
-	$photo_tags_json = $vars['photo_tags_json'];
-?>
-<script type="text/javascript" src="<?= $vars['url'] ?>mod/tidypics/vendors/jquery.imgareaselect-0.7.js"></script>
-<script type="text/javascript" src="<?= $vars['url'] ?>mod/tidypics/vendors/jquery.quicksearch.js"></script>
- 
-<script type="text/javascript">
-
-	var coordinates = "";
-	var user_id = 0;
-	var tagging = 0;
-
-	// add to DOM as soon as ready
-	$(document).ready(function () {
-			$('ul#phototagging-menu li').quicksearch({
-				position: 'before',
-				attached: 'ul#phototagging-menu',
-				loaderText: '',
-				inputClass: 'input-filter',
-				labelText: "<p><?php echo elgg_echo('tidypics:tagthisphoto'); ?></p>",
-				delay: 100
-			});
-
-			$('#quicksearch').submit( function () { addTag() } );
-		}
-	);
-
-	// images are loaded so process tags
-	$(window).load(function () {
-			$('#tidypics_image').setupTags();
-		}
-	);
-
-	// get tags over image ready for mouseover
-	$.fn.setupTags = function() 
-	{
-
-		image = this;
-
-		imgOffset = $(image).offset();
-
-		tags = <?php echo $photo_tags_json; ?>; 
-
-		$(tags).each(function(){
-			appendTag(imgOffset, this);
-		});
-		
-		$(image).hover(
-			function(){
-				$('.tidypics_tag').show();
-			},
-			function(){
-				$('.tidypics_tag').hide();
-			}
-		);
-
-		addTagEvents();
-		
-		$('.phototag-links').hover(
-			function(){
-				code = this.id.substr(7); // cut off taglink to get unique id
-				$('#tag'+code).show();
-			},
-			function(){
-				code = this.id.substr(7);
-				$('#tag'+code).hide();
-			}
-		);
-
-		// make sure we catch and handle when the browser is resized
-		$(window).resize(function () {
-			$('.tidypics_tag').remove();
-
-			imgOffset = $(image).offset();
-
-			$(tags).each(function(){
-				appendTag(imgOffset, this);
-			});
-
-			addTagEvents();
-		});
-	} 
-
-	function appendTag(offset, tag)
-	{
-		// catch for IE when no tags available
-		if (tag.id == undefined)
-			return;
-		
-		tag_top   = parseInt(imgOffset.top) + parseInt(tag.y1);
-		tag_left  = parseInt(imgOffset.left) + parseInt(tag.x1);
-
-		tag_div = $('<div class="tidypics_tag" id="tag'+tag.id+'"></div>').css({ left: tag_left + 'px', top: tag_top + 'px', width: tag.width + 'px', height: tag.height + 'px' });
-
-		tag_text_div = $('<div class="tidypics_tag_text">'+tag.text+'</div>').css({ left: tag_left + 'px', top: tag_top + 'px', width: tag.width + 'px', height: 20 + 'px' });
-
-		$('body').append(tag_div);
-		$('body').append(tag_text_div);
-	}
-
-	function addTagEvents() 
-	{
-		$('.tidypics_tag').hover(
-			function(){
-				$('.tidypics_tag').show();
-				$(this).next('.tidypics_tag_text').show();
-				$(this).next('.tidypics_tag_text').css("z-index", 10000);
-			},
-			function(){
-				$('.tidypics_tag').show();
-				$(this).next('.tidypics_tag_text').hide();
-				$(this).next('.tidypics_tag_text').css("z-index", 0);
-			}
-		);
-	}
-
-
-	function selectUser(id, name) 
-	{
-		user_id = id;
-		$("input.input-filter").val(name);
-	}
-
-	function startTagging() 
-	{
-		if (tagging != 0)
-		{
-			stopTagging();
-			return;
-		}
-		
-		tagging = 1;
-		
-		$('#tag_control').text("Stop Tagging");
-		
-		showTagInstruct();
-		
-
-		$('#tidypics_image').hover(
-			function(){
-				$('.tidypics_tag').hide();
-			},
-			function(){
-				$('.tidypics_tag').hide();
-			}
-		);
-
-		$('img#tidypics_image').imgAreaSelect( { 
-			borderWidth: 2,
-			borderColor1: 'white',
-			borderColor2: 'white',
-			disable: false,
-			hide: false,
-			onSelectEnd: showTagMenu,
-			onSelectStart: hideTagMenu 
-			}
-		);
-	}
-
-	function stopTagging() 
-	{
-		tagging = 0;
-		
-		hideTagInstruct();
-		hideTagMenu();
-
-		$('#tag_control').text("Tag this photo");
-
-		$('img#tidypics_image').imgAreaSelect( {hide: true, disable: true} );
-
-		// restart tag hovering
-		$('#tidypics_image').hover(
-			function(){
-				$('.tidypics_tag').show();
-			},
-			function(){
-				$('.tidypics_tag').hide();
-			}
-		);
-	}
-
-	function showTagMenu(oObject, oCoordenates)
-	{
-		offsetX = -100;
-
-		imgOffset = $('#tidypics_image').offset();
-
-		// show the list of friends
-		if (oCoordenates.width != 0 && oCoordenates.height != 0) {
-			coordinates = oCoordenates;
-			
-			_top = imgOffset.top + oCoordenates.y2;
-			_left = imgOffset.left + oCoordenates.x2 + offsetX;
-
-			$('#tag_menu').show().css({
-				"top": _top + "px",
-				"left": _left + "px"
-			});
-
-			$(".input-filter").focus();
-		}
-	}
-
-
-	function hideTagMenu()
-	{
-		$('#tag_menu').hide();
-	}
-
-	function showTagInstruct()
-	{
-		offsetY = -60;
-		
-		divWidth = $('#tagging_instructions').width();
-		imgOffset = $('#tidypics_image').offset();
-		imgWidth  = $('#tidypics_image').width();
-		offsetX   = parseInt((imgWidth - divWidth)/2);
-		
-		_top = imgOffset.top + offsetY;
-		_left = imgOffset.left + offsetX;
-
-		$('#tagging_instructions').show().css({
-			"top": _top + "px",
-			"left": _left + "px"
-		});
-	}
-
-	function hideTagInstruct()
-	{
-		$('#tagging_instructions').hide();
-	}
-
-	function addTag()
-	{
-		// do I need a catch for no tag?
-
-		$("input#user_id").val(user_id);
-		$("input#word").val( $("input.input-filter").val() );
-
-		coord_string  = '"x1":"' + coordinates.x1 + '",';
-		coord_string += '"y1":"' + coordinates.y1 + '",';
-		coord_string += '"width":"' + coordinates.width + '",';
-		coord_string += '"height":"' + coordinates.height + '"';
-
-		$("input#coordinates").val(coord_string);
-
-		//Show loading
-		//$("#tag_menu").replaceWith('<div align="center" class="ajax_loader"></div>');
-	}
-</script>
\ No newline at end of file
diff --git a/views/default/object/image.php b/views/default/object/image.php
index aceac958b..0da55f795 100644
--- a/views/default/object/image.php
+++ b/views/default/object/image.php
@@ -16,7 +16,8 @@
 	$mime = $file->mimetype;
 
 
-// photo tags
+/////////////////////////////////////////////////////
+// get photo tags from database
 $photo_tag_links = array();
 $photo_tags_json = "\"\"";
 $photo_tags = get_annotations($file_guid,'object','image','phototag');
@@ -49,7 +50,13 @@ if ($photo_tags) {
 	$photo_tags_json .= ']';
 }
 
-	if (get_context() == "search") { //if this is the search view
+
+/////////////////////////////////////////////////////
+//
+// search view of an image
+//
+/////////////////////////////////////////////////////
+	if (get_context() == "search") { 
 
 		if (get_input('search_viewtype') == "gallery") {
 			?>
@@ -72,9 +79,12 @@ if ($photo_tags) {
 		}
 	} else {
 
+////////////////////////////////////////////////
+//
+//  simple gallery view - when is this called?
+//
+////////////////////////////////////////////////
 		if (!$vars['full']) {
-
-//simple gallery view
 ?>
 	<div class="tidypics_album_images">
 		<a href="<?php echo $file->getURL();?>"><img src="<?php echo $vars['url'];?>mod/tidypics/thumbnail.php?file_guid=<?php echo $file_guid;?>&size=small" border="0" alt="thumbnail"/></a>
@@ -108,8 +118,8 @@ if ($photo_tags) {
 				if($view->owner_guid == $the_viewer && $the_viewer != 0) $my_views++;
 			}
 			
+			
 			// Build back and next links
-
 			$back = '';
 			$next = '';
 
@@ -150,7 +160,7 @@ if ($photo_tags) {
 			<?php echo autop($desc); ?>
 		</div>
 		<div id="tidypics_image_nav">
-			<?php echo $back . " " . $next; ?>
+			<?php echo $back . "&nbsp;&nbsp;" . $next; ?>
 		</div>
 		<div id="tidypics_image_wrapper">
 			<?php echo '<img id="tidypics_image"' . ' src="' . $vars['url'] . 'mod/tidypics/thumbnail.php?file_guid=' . $file_guid . '&size=large" alt="' . $title . '"/>'; ?>
@@ -167,18 +177,13 @@ if ($photo_tags) {
 				?>
 			</ul>
 		</div>
-<?php if ($photo_tags) { ?>
-		<div id="tidypics_phototags_list">
-			<h3><?php echo elgg_echo('tidypics:inthisphoto') ?></h3>
-				<ul>
-<?php
-			foreach ($photo_tag_links as $tag_link) {
-				echo "<li><a class='phototag-links' id='taglink{$tag_link[0]}' href='#'>{$tag_link[1]}</a></li>";
-			}
+<?php 
+			echo elgg_view('tidypics/tagging', array(	'photo_tags' => $photo_tags, 
+														'links' => $photo_tag_links,
+														'photo_tags_json' => $photo_tags_json,
+														'file_guid' => $file_guid, ) );
+				
 ?>
-				</ul>
-		</div>
-<?php } ?>
 
 		<div id="tidypics_info">
 <?php if (!is_null($tags)) { ?>
@@ -198,47 +203,8 @@ if ($photo_tags) {
 			echo elgg_view_comments($file);
 
 			echo '</div>';  // content wrapper
-?>
-<div id='tagging_instructions'>
-	<div id='tag_instruct_text'><?php echo elgg_echo('tidypics:taginstruct'); ?></div>
-	<div id='tag_instruct_button_div'><button class='submit_button' id='tag_instruct_button' onclick='stopTagging()'><?php echo elgg_echo('tidypics:finish_tagging'); ?></button></div>
-</div>
-
-<div id="tag_menu">
-<?php
-
-	$viewer = get_loggedin_user();
-	if($viewer)	{
-		$friends = get_entities_from_relationship('friend', $viewer->getGUID(), false, 'user', '', 0);
-
-		$content = "<input type='hidden' name='image_guid' value='{$file_guid}' />";
-		$content .= "<input type='hidden' name='coordinates' id='coordinates' value='' />";
-		$content .= "<input type='hidden' name='user_id' id='user_id' value='' />";
-		$content .= "<input type='hidden' name='word' id='word' value='' />";
-	
-		$content .= "<ul id='phototagging-menu'>";
-		$content .= "<li><a href='javascript:void(0)' onClick='selectUser({$viewer->getGUID()},\"{$viewer->name}\")'> {$viewer->name} (" . elgg_echo('me') . ")</a></li>";
-	
-		if ($friends) {
-			foreach($friends as $friend) {
-				$content .= "<li><a href='javascript:void(0)' onClick='selectUser({$friend->getGUID()}, \"{$friend->name}\")'>{$friend->name}</a></li>";
-			}
-		}
-	}
-	$content .= "</ul>";
-
-	$content .= "<fieldset><button class='submit_button' type='submit'>" . elgg_echo('tidypics:actiontag') . "</button></fieldset>";
-
-	echo elgg_view('input/form', array('internalid' => 'quicksearch', 'internalname' => 'form-phototagging', 'class' => 'quicksearch', 'action' => "{$vars['url']}action/tidypics/addtag", 'body' => $content));
-
-?>
-</div>
-
-<?php
-
-	echo elgg_view('js/tidypics', array('photo_tags_json' => $photo_tags_json,) );
 
-		} // // end of individual image display
+		} // end of individual image display
 
 	}
 
diff --git a/views/default/tidypics/tagging.php b/views/default/tidypics/tagging.php
new file mode 100644
index 000000000..a97285016
--- /dev/null
+++ b/views/default/tidypics/tagging.php
@@ -0,0 +1,57 @@
+<?php
+	$photo_tags = $vars['photo_tags'];
+	$links = $vars['links'];
+	$photo_tags_json = $vars['photo_tags_json'];
+	$file_guid = $vars['file_guid'];
+	
+	if ($photo_tags) { 
+?>
+<div id="tidypics_phototags_list">
+	<h3><?php echo elgg_echo('tidypics:inthisphoto') ?></h3>
+	<ul>
+<?php
+		foreach ($links as $tag_link) {
+			echo "<li><a class='phototag-links' id='taglink{$tag_link[0]}' href='#'>{$tag_link[1]}</a></li>";
+		}
+?>
+	</ul>
+</div>
+<?php 
+	} 
+?>
+<div id='tagging_instructions'>
+	<div id='tag_instruct_text'><?php echo elgg_echo('tidypics:taginstruct'); ?></div>
+	<div id='tag_instruct_button_div'><button class='submit_button' id='tag_instruct_button' onclick='stopTagging()'><?php echo elgg_echo('tidypics:finish_tagging'); ?></button></div>
+</div>
+<div id="tag_menu">
+<?php
+
+	$viewer = get_loggedin_user();
+	if($viewer) {
+		$friends = get_entities_from_relationship('friend', $viewer->getGUID(), false, 'user', '', 0);
+
+		$content = "<input type='hidden' name='image_guid' value='{$file_guid}' />";
+		$content .= "<input type='hidden' name='coordinates' id='coordinates' value='' />";
+		$content .= "<input type='hidden' name='user_id' id='user_id' value='' />";
+		$content .= "<input type='hidden' name='word' id='word' value='' />";
+	
+		$content .= "<ul id='phototagging-menu'>";
+		$content .= "<li><a href='javascript:void(0)' onClick='selectUser({$viewer->getGUID()},\"{$viewer->name}\")'> {$viewer->name} (" . elgg_echo('me') . ")</a></li>";
+	
+		if ($friends) {
+			foreach($friends as $friend) {
+				$content .= "<li><a href='javascript:void(0)' onClick='selectUser({$friend->getGUID()}, \"{$friend->name}\")'>{$friend->name}</a></li>";
+			}
+		}
+	}
+	$content .= "</ul>";
+
+	$content .= "<fieldset><button class='submit_button' type='submit'>" . elgg_echo('tidypics:actiontag') . "</button></fieldset>";
+
+	echo elgg_view('input/form', array('internalid' => 'quicksearch', 'internalname' => 'form-phototagging', 'class' => 'quicksearch', 'action' => "{$vars['url']}action/tidypics/addtag", 'body' => $content));
+
+?>
+</div>
+<?php
+	echo elgg_view('js/tagging', array('photo_tags_json' => $photo_tags_json,) );
+?>
\ No newline at end of file
-- 
cgit v1.2.3