From 09bea0f53890e20d878b7af9fa55fd2ccd8ee235 Mon Sep 17 00:00:00 2001
From: pete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544>
Date: Wed, 8 Oct 2008 15:49:37 +0000
Subject: user avatar menu method adjusted to avoid hard-coded image resources

git-svn-id: https://code.elgg.org/elgg/trunk@2228 36083f99-b078-4883-b0ff-0f9b5a30f544
---
 mod/profile/views/default/profile/css.php        | 16 +++++++-
 mod/profile/views/default/profile/icon.php       |  2 +-
 mod/profile/views/default/profile/javascript.php | 48 +++++++++++++++++-------
 3 files changed, 51 insertions(+), 15 deletions(-)

(limited to 'mod/profile/views/default')

diff --git a/mod/profile/views/default/profile/css.php b/mod/profile/views/default/profile/css.php
index 7d45a936d..e34fc1681 100644
--- a/mod/profile/views/default/profile/css.php
+++ b/mod/profile/views/default/profile/css.php
@@ -22,7 +22,21 @@
 	right:0;
 	bottom:0;
 }
-
+.avatar_menu_arrow {
+	background: url(<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow.gif) no-repeat top left;
+	width:15px;
+	height:15px;
+}
+.avatar_menu_arrow_on {
+	background: url(<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow_open.gif) no-repeat top left;
+	width:15px;
+	height:15px;
+}
+.avatar_menu_arrow_hover {
+	background: url(<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow_hover.gif) no-repeat top left;
+	width:15px;
+	height:15px;
+}
 .usericon div.sub_menu { 
 	display:none; 
 	position:absolute; 
diff --git a/mod/profile/views/default/profile/icon.php b/mod/profile/views/default/profile/icon.php
index ef5ab3769..fcdbfa70c 100644
--- a/mod/profile/views/default/profile/icon.php
+++ b/mod/profile/views/default/profile/icon.php
@@ -48,7 +48,7 @@
 		
 ?>
 <div class="usericon">
-<div class="avatar_menu_button"><img src="<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow.gif" width="15" height="15" class="arrow" /></div>
+<div class="avatar_menu_button"><img src="<?php echo $vars['url']; ?>_graphics/spacer.gif" border="0" width="15px" height="15px" /></div>
 
 	<div class="sub_menu">
 		<a href="<?php echo $vars['entity']->getURL(); ?>"><h3><?php echo $vars['entity']->name; ?></h3></a>
diff --git a/mod/profile/views/default/profile/javascript.php b/mod/profile/views/default/profile/javascript.php
index 4e96279bb..9a862d8b2 100644
--- a/mod/profile/views/default/profile/javascript.php
+++ b/mod/profile/views/default/profile/javascript.php
@@ -5,7 +5,7 @@
 	 * 
 	 * @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>
+	 * @author Curverider
 	 * @copyright Curverider Ltd 2008
 	 * @link http://elgg.com/
 	 * 
@@ -26,27 +26,34 @@ function setup_avatar_menu() {
 	$("div.usericon img").mouseover(function() {
 		// find nested avatar_menu_button and show
 		$(this.parentNode.parentNode).children("[class=avatar_menu_button]").show();
+		$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow");
 		//$(this.parentNode.parentNode).css("z-index", submenuLayer);
 	})
 	.mouseout(function() { 
-		if($(this).parent().parent().find("div.sub_menu").css('display')!="block"){
+		if($(this).parent().parent().find("div.sub_menu").css('display')!="block") {
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_on");
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_hover");
 			$(this.parentNode.parentNode).children("[class=avatar_menu_button]").hide();
 		}
 		else {
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_on");
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_hover");
 			$(this.parentNode.parentNode).children("[class=avatar_menu_button]").show();
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow");
 		}
 	});
 
 
 	// avatar contextual menu
-	$(".avatar_menu_button img.arrow").click(function(e) { 
+	$(".avatar_menu_button img").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');									
+			//submenu.hide(); 		
 		}
 		else {
 			// get avatar dimensions
@@ -73,25 +80,38 @@ function setup_avatar_menu() {
 			submenuLayer++;
 			
 			// change arrow to 'on' state
-			$(this).attr('src','<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow_open.gif');	
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_hover");
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow_on");
 		}
 		
 		// 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();
-		
+		$(".avatar_menu_button").removeClass("avatar_menu_arrow");
+		$(".avatar_menu_button").removeClass("avatar_menu_arrow_on");
+		$(".avatar_menu_button").removeClass("avatar_menu_arrow_hover");
+		$(".avatar_menu_button").hide();
+		$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow_on");
+		$(this.parentNode.parentNode).children("div.avatar_menu_button").show();
 		//alert("submenuLayer = " +submenu.css("z-index"));
 	})
 	// 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'); })
+	.mouseover(function() {
+		$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_on");
+		$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
+		$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow_hover");
+	})
 	// 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');
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_hover");
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow");
 		}
 		else {
-			$(this).attr('src','<?php echo $vars['url']; ?>_graphics/avatar_menu_arrow_open.gif');
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow_hover");
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").removeClass("avatar_menu_arrow");
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow_on");
 		}
 	});
 	
@@ -101,7 +121,9 @@ function setup_avatar_menu() {
 			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").removeClass("avatar_menu_arrow");
+				$(".avatar_menu_button").removeClass("avatar_menu_arrow_on");
+				$(".avatar_menu_button").removeClass("avatar_menu_arrow_hover");
 				$(".avatar_menu_button").hide();
 			}
 	});			   
-- 
cgit v1.2.3