Initial inclusion of profile icon navigation

git-svn-id: https://code.elgg.org/elgg/trunk@1163 36083f99-b078-4883-b0ff-0f9b5a30f544

3 files changed, 115 insertions, 8 deletions

diff --git a/mod/profile/views/default/profile/icon.php b/mod/profile/views/default/profile/icon.php
index b98445981..c477a4cb0 100644
--- a/mod/profile/views/default/profile/icon.php
+++ b/mod/profile/views/default/profile/icon.php
@@ -46,4 +46,22 @@
 			

 ?>

 

-	<a href="<?php echo $vars['entity']->getURL(); ?>" class="icon" rel="<?php echo $hoverover; ?>"><img src="<?php echo $vars['url']; ?>pg/icon/<?php echo $username; ?>/<?php echo $vars['size']; ?>/<?php echo $icontime; ?>.jpg" border="0" <?php echo $align; ?> title="<?php echo $name; ?>" <?php echo $vars['js']; ?> /></a>
\ No newline at end of file
+<div class="usericon">

+<div class="avatar_menu_button"><img src="graphics/avatar_menu_arrow.gif" width="15" height="15" class="arrow" /></div>

+

+	<div class="sub_menu">

+		<a href="#"><h3>User Name</h3></a>

+		<a href="#" class="item_line">Remove friend</a>

+		<a href="#">Friends</a>

+		<a href="#">Friends of</a>

+

+		<a href="#" class="item_line">Recent activity</a>

+		<a href="#">Visit blog</a>

+		<a href="#" class="item_line">Send private message</a>

+		<a href="#" class="item_line">Ban</a>

+		<a href="#">Edit</a>

+		<a href="#">Report</a>

+

+	</div>	

+	<a href="<?php echo $vars['entity']->getURL(); ?>" class="icon" rel="<?php echo $hoverover; ?>"><img src="<?php echo $vars['url']; ?>pg/icon/<?php echo $username; ?>/<?php echo $vars['size']; ?>/<?php echo $icontime; ?>.jpg" border="0" <?php echo $align; ?> title="<?php echo $name; ?>" <?php echo $vars['js']; ?> /></a>

+</div>
\ No newline at end of file
diff --git a/mod/profile/views/default/profile/javascript.php b/mod/profile/views/default/profile/javascript.php
new file mode 100644
index 000000000..b7770de05
--- /dev/null
+++ b/mod/profile/views/default/profile/javascript.php
@@ -0,0 +1,95 @@
+<?php

+

+	/**

+	 * Elgg profile image Javascript

+	 * 

+	 * @package ElggProfile

+	 * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html GNU Public License version 2

+	 * @author Pete Harris <pete@elgg.com>

+	 * @copyright Curverider Ltd 2008

+	 * @link http://elgg.com/

+	 * 

+	 * @uses $vars['entity'] The user entity

+	 */

+

+		header("Content-type: text/javascript");

+

+?>

+

+$(document).ready(function() {

+

+	// avatar image menu link

+	$("div.usericon img").mouseover(function() {

+		// find nested avatar_menu_button and show

+		$(this.parentNode.parentNode).children("[class=avatar_menu_button]").show();

+	})

+	.mouseout(function() { 

+		if($(this).parent().parent().find("div.sub_menu").css('display')!="block"){

+			$(this.parentNode.parentNode).children("[class=avatar_menu_button]").hide();

+		}

+		else {

+			$(this.parentNode.parentNode).children("[class=avatar_menu_button]").show();

+		}

+	});

+

+

+	// avatar contextual menu

+	$(".avatar_menu_button img.arrow").click(function(e) { 

+		

+		var submenu = $(this).parent().parent().find("div.sub_menu");

+		

+		// close submenu if arrow is clicked & menu already open

+		if(submenu.css('display') == "block") {

+			submenu.hide(); 		

+			$(this).attr('src','<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow_hover.gif');									

+		}

+		else {

+			// get avatar dimensions

+			var avatar = $(this).parent().parent().parent().find("div.usericon");

+			//alert( "avatarWidth: " + avatar.width() + ", avatarHeight: " + avatar.height() );

+			

+			// move submenu position so it aligns with arrow graphic

+			if (e.pageX < 840) { // popup menu to left of arrow if we're at edge of page

+			submenu.css("top",(avatar.height()) + "px")

+					.css("left",(avatar.width()-15) + "px")

+					.fadeIn('normal');	

+			}	

+			else {

+			submenu.css("top",(avatar.height()) + "px")

+					.css("left",(avatar.width()-166) + "px")

+					.fadeIn('normal');		

+			}	

+			// change arrow to 'on' state

+			$(this).attr('src','<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow_open.gif');	

+		}

+		

+		// hide any other open submenus and reset arrows

+		$("div.sub_menu:visible").not(submenu).hide();

+		$(".usericon img.arrow").not(this).attr('src','<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow.gif');

+		$(".avatar_menu_button").not(this).hide();

+	})

+	// hover arrow each time mouseover enters arrow graphic (eg. when menu is already shown)

+	.mouseover(function() { $(this).attr('src','<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow_hover.gif'); })

+	// if menu not shown revert arrow, else show 'menu open' arrow

+	.mouseout(function() { 

+		if($(this).parent().parent().find("div.sub_menu").css('display')!="block"){

+			$(this).attr('src','<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow.gif');

+		}

+		else {

+			$(this).attr('src','<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow_open.gif');

+		}

+	});

+	

+	// hide avatar menu if click occurs outside of menu	

+	// and hide arrow button						

+	$(document).click(function(event) { 		

+			var target = $(event.target);

+			if (target.parents(".usericon").length == 0) {				

+				$(".usericon div.sub_menu").fadeOut();

+				$(".usericon img.arrow").attr('src','<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow.gif');

+				$(".avatar_menu_button").hide();

+			}

+	});			   

+							   

+								   

+});

diff --git a/mod/profile/views/default/profile/metatags.php b/mod/profile/views/default/profile/metatags.php
index 1be959c5a..77b5544e4 100644
--- a/mod/profile/views/default/profile/metatags.php
+++ b/mod/profile/views/default/profile/metatags.php
@@ -13,10 +13,4 @@
 

 ?>

 

-	<!--  

-

-		Removed for now.

-

-		<script type="text/javascript" src="<?php echo $vars['url']; ?>mod/profile/profile.js" ></script>

-		

-	-->
\ No newline at end of file
+	<script type="text/javascript" src="<?php echo $vars['url']; ?>mod/profile/javascript.php" ></script>