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

3 files changed, 51 insertions, 15 deletions

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

 			}

 	});