From 0b8be7bbfa6e91a8053f6bcd0ef8282ab86ebe20 Mon Sep 17 00:00:00 2001 From: pete Date: Fri, 27 Jun 2008 09:46:02 +0000 Subject: avatar contextual menus git-svn-id: https://code.elgg.org/elgg/trunk@1160 36083f99-b078-4883-b0ff-0f9b5a30f544 --- mod/profile/profile.js | 94 ++++++++++++++++++++++--------- mod/profile/views/default/profile/css.php | 65 +++++++++++++-------- 2 files changed, 107 insertions(+), 52 deletions(-) (limited to 'mod/profile') 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("
"+ userdescription + "
"); - 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','_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','_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','_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','_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','_graphics/avatar_menu_arrow.gif'); + } + else { + $(this).attr('src','_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','_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 -- cgit v1.2.3