using elgg-user-icon instead of usericon and moving the css into core

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

1 files changed, 124 insertions, 0 deletions

diff --git a/views/default/js/elgg.php b/views/default/js/elgg.php
index fdf9aa858..082122b5d 100644
--- a/views/default/js/elgg.php
+++ b/views/default/js/elgg.php
@@ -323,6 +323,130 @@ this.each(function() {
 
 };
 
+
+var submenuLayer = 1000;
+
+function setup_avatar_menu(parent) {
+	if (!parent) {
+		parent = document;
+	}
+
+	// avatar image menu link
+	$(parent).find("div.elgg-user-icon img").mouseover(function() {
+		// find nested avatar_menu_button and show
+		$(this.parentNode.parentNode).children(".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") {
+			$(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(".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(".avatar_menu_button").show();
+			$(this.parentNode.parentNode).children("div.avatar_menu_button").addClass("avatar_menu_arrow");
+		}
+	});
+
+
+	// avatar contextual menu
+	$(".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();
+		}
+		else {
+			// get avatar dimensions
+			var avatar = $(this).parent().parent().parent().find("div.elgg-user-icon");
+			//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');
+			}
+
+			// force z-index - workaround for IE z-index bug
+			avatar.css("z-index",  submenuLayer);
+			avatar.find("a.icon img").css("z-index",  submenuLayer);
+			submenu.css("z-index", submenuLayer+1);
+
+			submenuLayer++;
+
+			// change arrow to 'on' state
+			$(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();
+		$(".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.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.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.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");
+		}
+	});
+
+	// hide avatar menu if click occurs outside of menu
+	// and hide arrow button
+	$(document).click(function(event) {
+			var target = $(event.target);
+			if (target.parents(".elgg-user-icon").length == 0) {
+				$(".elgg-user-icon div.sub_menu").fadeOut();
+				$(".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();
+			}
+	});
+
+
+}
+
+$(document).ready(function() {
+
+	setup_avatar_menu();
+
+});
+
+
 <?php
 
 $previous_content = elgg_view('js/initialise_elgg');