diff options
| author | pete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544> | 2008-06-27 09:46:02 +0000 |
|---|---|---|
| committer | pete <pete@36083f99-b078-4883-b0ff-0f9b5a30f544> | 2008-06-27 09:46:02 +0000 |
| commit | 0b8be7bbfa6e91a8053f6bcd0ef8282ab86ebe20 (patch) | |
| tree | 4565861c364728c6691d45f45cc1e9f5aab2b01e /mod/profile | |
| parent | 719df1b09331472ed7c42b364f5fd3e1413147d7 (diff) | |
| download | elgg-0b8be7bbfa6e91a8053f6bcd0ef8282ab86ebe20.tar.gz elgg-0b8be7bbfa6e91a8053f6bcd0ef8282ab86ebe20.tar.bz2 | |
avatar contextual menus
git-svn-id: https://code.elgg.org/elgg/trunk@1160 36083f99-b078-4883-b0ff-0f9b5a30f544
Diffstat (limited to 'mod/profile')
| -rw-r--r-- | mod/profile/profile.js | 94 | ||||
| -rw-r--r-- | mod/profile/views/default/profile/css.php | 65 |
2 files changed, 107 insertions, 52 deletions
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 |