avatar contextual menus

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

6 files changed, 107 insertions, 54 deletions

diff --git a/_graphics/avatar_menu_arrow.gif b/_graphics/avatar_menu_arrow.gif
new file mode 100644
index 000000000..ba7623b19
--- /dev/null
+++ b/_graphics/avatar_menu_arrow.gif
diff --git a/_graphics/avatar_menu_arrow_hover.gif b/_graphics/avatar_menu_arrow_hover.gif
new file mode 100644
index 000000000..35bab05f0
--- /dev/null
+++ b/_graphics/avatar_menu_arrow_hover.gif
diff --git a/_graphics/avatar_menu_arrow_open.gif b/_graphics/avatar_menu_arrow_open.gif
new file mode 100644
index 000000000..29d9ef94e
--- /dev/null
+++ b/_graphics/avatar_menu_arrow_open.gif
diff --git a/mod/profile/profile.js b/mod/profile/profile.js
index 3695ff6a8..6043fea98 100644
--- a/mod/profile/profile.js
+++ b/mod/profile/profile.js
@@ -1,37 +1,77 @@
-

 $(document).ready(function() {

-	

-	$("a.icon").hover(function(e) {										  

-		

-		var userdescription = this.rel;

 

-		var dwidth = $(document).width();

+	// 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();

+		}

+	});

 

-		$("body").append("<div id='user_menu'>"+ userdescription + "</div>");

 

-		var top = e.pageY - 10;

-		var left = e.pageX - 10;

+	// avatar contextual menu

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

+		

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

 		

-		if ((left + 10 + $("div#user_menu").width()) > (dwidth - 10)) {

-			left = dwidth - $("div#user_menu").width() - 50;

+		// 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');									

 		}

-

-		$("div#user_menu")

-			.css("top",(top) + "px")

-			.css("left",(left) + "px")

-			.fadeIn("medium");

+		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');	

+		}

 		

-		remove_user_menu();

-			

-    });

-	

-	function remove_user_menu() {

-

-		$("div#user_menu").hover(function() {}, function () {

-			$("div#user_menu").remove();

-		});

-	}

+		// 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/css.php b/mod/profile/views/default/profile/css.php
index 9a5016694..43c081457 100644
--- a/mod/profile/views/default/profile/css.php
+++ b/mod/profile/views/default/profile/css.php
@@ -2,30 +2,45 @@
 

 ?>

 

-	.profile_listing {

+/* ***************************************

+	AVATAR CONTEXTUAL MENU

+*************************************** */	

 	

-		display: block;

-		background-color: #eee;

-		padding: 5px;

-		margin-bottom: 10px;

-	

-	}

+.usericon {

+	position:relative;

+}

 

-	.profile_listing_icon {

-	

-		position: absolute;

-	

-	}

-	

-	.profile_listing_info {

-	

-		margin-left: 60px;

-		height: 40px;

-	

-	}

-	

-	.profile_listing_info p {

-	

-		margin: 0px;

-	

-	}
\ No newline at end of file
+.avatar_menu_button {

+	width:15px;

+	height:15px;

+	position:absolute;

+	cursor:pointer;

+	display:none;

+	right:0;

+	bottom:0;

+}

+

+.usericon div.sub_menu { 

+	z-index:9999; 

+	display:none; 

+	position:absolute; 

+	padding:2px; 

+	margin:0; 

+	border-top:solid 1px #E5E5E5; 

+	border-left:solid 1px #E5E5E5; 

+	border-right:solid 1px #999999; 

+	border-bottom:solid 1px #999999;  

+	width:160px; 

+	background:#FFFFFF; 

+	text-align:left;

+}

+

+* html .usericon div.sub_menu {  } /* IE6 */

+*+html .usericon div.sub_menu {  } /* IE7 */

+

+.usericon div.sub_menu a {margin:0;padding:2px;}

+.usericon div.sub_menu a:link, 

+.usericon div.sub_menu a:visited, 

+.usericon div.sub_menu a:hover{ display:block;}	

+.usericon div.sub_menu a:hover{ background:#cccccc; text-decoration:none;}

+.usericon a.item_line { border-top:solid 1px #dddddd;}
\ No newline at end of file
diff --git a/views/default/css.php b/views/default/css.php
index 58bfa03d1..f44506d2e 100644
--- a/views/default/css.php
+++ b/views/default/css.php
@@ -820,8 +820,6 @@ p.user_menu_friends_of {
 	margin:5px 20px 5px 0;
 }
 
-
-
 /* ***************************************
 	END
 *************************************** */