Profile Popup [Tab testing]

* This topic is for testing, bugs may be present and if found should be reported to THIS topic *

Hello,

Here in this topic you will be able to test the profile popup with tabs. These tabs allow you to view more information on the user, simply making it a "quick view" profile.

Example : Click => Ange Tuteur

If you do not know how to install this then please read the tutorial on the Support forum.
http://help.forumotion.com/t128644-profile-details-popup#861220

Replace your old popup script with the one below and save :
Administration Panel > Modules > HTML & JAVASCRIPT > Javascript codes management

This is the development script, the comments will let you know what does what in case you wish to edit.

Code:

$(function () {
  if (/\/u\d+/.test(location.pathname) == true) return;
   
  var settings = {
          wall : 1,
          stats : 1,
    attachments : 0,
        friends : 1,
        contact : 1,
            rpg : 0,
          close : 1,
          avatar: 0
  };
   
  var a = document.getElementsByTagName('A');
  for (i = 0; i < a.length; i++) {
    if (/\/u\d+/.test(a[i].href) == true) a[i].className = a[i].className + ' profilePopup';
  }
   
 $('.profilePopup:has(img)').removeClass('profilePopup');
   
  if (settings.wall == 1) var userWall = '<span class="propop_tab" id="propop_vm">Visitor messages</span>';
  else var userWall = '';
   
  if (settings.stats == 1) var userStats = '<span class="propop_tab" id="propop_stats">Statistics</span>';
  else var userStats = '';
 
  if (settings.attachments == 1) var userAttachments = '<span class="propop_tab" id="propop_attach">Attachments</span>';
  else var userAttachments = '';
   
  if (settings.friends == 1) var userFriends = '<span class="propop_tab" id="propop_friends">Friends</span>';
  else var userFriends = '';
   
  if (settings.contact == 1) var userContact = '<span class="propop_tab" id="propop_contact">Contact</span>';
  else var userContact = '';
   
  if (settings.rpg == 1) var userRpg = '<span class="propop_tab" id="propop_rpg">Character sheet</span>';
  else var userRpg = '';
   
  if (settings.close == 1) var userClose = '<span class="propop_tab" id="close_popup" style="float:right;margin-top:-4px;">Close</span>';
  else var userClose = '';

 $('.profilePopup').click(function(){

        var UID = $(this).attr('href');
        var UNM = $(this).text();
        var SEL = '#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details';
        var LOAD = '<center><span class="profileLoading" style="font-weight:bold;font-size:18px;">Loading...</span></center>';
        var TAB = '#propop_profile, #propop_vm, #propop_stats, #propop_friends, #propop_contact, #propop_rpg, #propop_attach, #propop_close';

        $('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0, 0.5);cursor:pointer;z-index:10;"></div><div id="profcont-container" style="background:#D1D1D1;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;-moz-box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;z-index:50;"><div class="profile_popup_nav">'+ userWall + '<span class="propop_tab" id="propop_profile">Profile</span>' + userStats + userAttachments + userFriends + userContact + userRpg + userClose +'</div><a href="'+UID+'"><div id="userAVA"></div></a><div id="userprofile" style="height:400px;overflow-y:auto;">'+LOAD+'</div><span id="profileLinks"><a href="'+UID+'">View Profile</a><span id="interactionLinks"> | <a href="/privmsg?mode=post&u='+UID.replace(/.*?\/u/, '')+'">Send PM</a> | <a href="/privmsg?mode=post_profile&u='+UID.replace(/.*?\/u/, '')+'">Send VM</a><span style="float:right;"><a href="/profile?friend='+UNM.replace(/\s+/, "+")+'&mode=editprofile&page_profil=friendsfoes">Add Friend</a> | <a href="/profile?foe='+UNM.replace(/\s+/, '+')+'&mode=editprofile&page_profil=friendsfoes">Add Foe</a></span></span></div>');

        $('#userprofile').load(UID + SEL);
        if (settings.avatar == 1) $('#userAVA').load(UID + ' #profile-advanced-right .module:first div img:first, .forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img:first, dl.left-box.details:first dd img:first, .row1 b .gen:first img:first, .real_avatar img:first');
        $('#propop_profile').addClass('activeTab');

        $('#propop_profile').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + SEL);
        });

        $('#propop_vm').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'wall' + SEL);
        });

        $('#propop_stats').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'stats' + SEL);
        });

        $('#propop_friends').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'friends' + SEL);
        });

        $('#propop_contact').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'contact' + SEL);
        });
   
      $('#propop_rpg').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'rpg' + SEL);
        });
   
      $('#propop_attach').click(function() {
            if ($(this).hasClass('activeTab')) return;
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'attachments' + SEL);
        });

        if (!document.getElementById('logout')) $('#interactionLinks').remove();

        $('#profilefilter, #close_popup').click(function () { $('#profilefilter, #profcont-container').remove() });
        return false;
    });
});

Now add this to your CSS stylesheet to style the tabs and submit :
Administration Panel > Display > Pictures and colors > Colors > CSS stylesheet

The default theme is gray/silver and can be changed.

Code:

/* Profile details popup */
#userAVA img{
    position:absolute;
    top:43px;
    right:30px;
    height:50px;
    width:50px;
}

.profile_popup_nav {
    background:rgba(0,0,0,0.1);
    margin:-4px -4px 10px -4px;
    padding:3px;
    padding-top:10px !important;
    border-bottom:1px solid #AAA;
    -webkit-border-radius:5px 5px 0px 0px;
       -moz-border-radius:5px 5px 0px 0px;
            border-radius:5px 5px 0px 0px;
}

.propop_tab {
    cursor:pointer;
    -webkit-border-radius:4px 4px 0px 0px;
       -moz-border-radius:4px 4px 0px 0px;
            border-radius:4px 4px 0px 0px;
    border:1px solid #AAA;
    border-bottom:none;
    -webkit-box-shadow:0px 12px 3px rgba(255,255,255, 0.4) inset;
       -moz-box-shadow:0px 12px 3px rgba(255,255,255, 0.4) inset;
            box-shadow:0px 12px 3px rgba(255,255,255, 0.4) inset;
    background:#BBB;
    margin:0 2px;
    padding:3px;
}

.propop_tab:hover {
    position:relative;
    top:1px;
    color:#D41141;
    background-color:#D1D1D1;
}

.propop_tab.activeTab {
    position:relative;
    top:1px;
    color:#D41141;
    background-color:#D1D1D1 !important;
}

#profileLinks {
    background:rgba(0,0,0,0.1);
    display:block;
    padding:3px;
    margin:10px -4px -4px -4px;
    border-top:1px solid #AAA;
    -webkit-border-radius:0px 0px 5px 5px;
       -moz-border-radius:0px 0px 5px 5px;
            border-radius:0px 0px 5px 5px;
}

Result :
You will now be able to test the tabs. Clicking each tab will load another part of the users profile.


In the script you can toggle the tabs and some extra features :

Code:

 var settings = {
           wall : 1,
          stats : 1,
    attachments : 0,
        friends : 1,
        contact : 1,
            rpg : 0,
          close : 1,
          avatar: 1
  };

Set an option as '1' to activate it, and set it to 0 to deactivate it.

As mentioned this topic is for reported bugs, feedback, ect.. You can leave a post below if you have any.

Many thanks in advance for your feedback.

This is awesome! You have done a wonderful job yet again. I'm only on briefly right now but I will definitely have to take a closer look at it later.

Thanks !

If you encounter any bug let me know. So far it has worked nicely, I may try to improve the active tabs when I am a bit better. (You can reload the tab you're on by clicking it again) It should be easy, but right now I'll relax and let people test.

Hello,

I am replying to inform that the profile popup has been updated.

Clicking the currently active tab will no longer reload itself. Additionally the user avatar will now display in the popup. The CSS has also been updated, be sure to update it since it contains CSS to resize the ava.

I have not encountered any issues with it yet.

That is good to hear, thanks.

A nice work Ange! Thanks by share the code!

You're welcome and thanks !

I have a suggestion , adding  a close button on the top right corner ( i know the popup can be closed by clicking somewhere else on the forum , but this will make it work even better )

I also suggest the same for the Topic Preview tutorial.

Adding a close button to this should be pretty easy. I've added it to the navbar, if you want it, replace your script with :

Code:

$(function () {
    $('li.row a[href*="/u"], .img-whois+p a[href*="/u"], .page-bottom a[href*="/u"], .postprofile a[href*="/u"], p.author a[href*="/u"], form:has(.vf_jumpbox)~a[href*="/u"], .tcr a[href*="/u"], #stats a[href*="/u"], #onlinelist a[href*="/u"], .tcl.tdtopics a[href*="/u"], .pun .user a[href*="/u"], .ipbtable .row1 a[href*="/u"], #fo_stat a[href*="/u"], .activeusers-box a[href*="/u"], td.row3.over a[href*="/u"], .forumline:has(#i_whosonline) a[href*="/u"], span.name a[href*="/u"], span.postdetails a[href*="/u"], #info_open a[href*="/u"]').attr('id', 'profilePopup').click(function(){
        return false
    });
      
   $('a[href*="/u"]:has(img)').removeAttr('id').click( function(){
        window.open($(this).attr('href'),'_self');
    });
      
     
   $('a#profilePopup').click(function(){

        var UID = $(this).attr('href');
        var UNM = $(this).text();
        var SEL = '#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details';
        var LOAD = '<center><span class="profileLoading" style="font-weight:bold;font-size:18px;">Loading...</span></center>';
        var TAB = '#propop_profile, #propop_vm, #propop_stats, #propop_friends, #propop_contact';

        $('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0, 0.5);cursor:pointer;z-index:10;"></div><div id="profcont-container" style="background:#D1D1D1;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;z-index:50;"><div class="profile_popup_nav"><span class="propop_tab" id="propop_vm">Wall</span><span class="propop_tab" id="propop_profile">Profile</span><span class="propop_tab" id="propop_stats">Stats</span><span class="propop_tab" id="propop_friends">Friends</span><span class="propop_tab" id="propop_contact">Contact</span><span class="propop_tab" id="close_popup" style="float:right;margin-top:-4px;">Close</span></div><a href="'+UID+'"><div id="userAVA"></div></a><div id="userprofile" style="height:400px;overflow-y:auto;">'+LOAD+'</div><span id="profileLinks"><a href="'+UID+'">View Profile</a><span id="interactionLinks"> | <a href="/privmsg?mode=post&u='+UID.replace('/u', '')+'">Send PM</a> | <a href="/privmsg?mode=post_profile&u='+UID.replace('/u', '')+'">Send VM</a><span style="float:right;"><a href="/profile?friend='+UNM.replace(/ /, "+")+'&mode=editprofile&page_profil=friendsfoes">Add Friend</a> | <a href="/profile?foe='+UNM.replace(/ /, '+')+'&mode=editprofile&page_profil=friendsfoes">Add Foe</a></span></span></div>');

        $('#userprofile').load(UID + SEL);
        $('#userAVA').load(UID + '#profile-advanced-right .module .inner div img:eq(0)');
        $('#propop_profile').addClass('activeTab');

        $('#propop_profile').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + SEL);
        });

        $('#propop_vm').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'wall' + SEL);
        });

        $('#propop_stats').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'stats' + SEL);
        });

        $('#propop_friends').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'friends' + SEL);
        });

        $('#propop_contact').click(function() {
            if ($(this).hasClass('activeTab')) { return; }
            $(TAB).removeClass('activeTab');
            $(this).addClass('activeTab');
            $('#userprofile').html(LOAD).load(UID + 'contact' + SEL);
        });

        if (!document.getElementById('logout')) {
            $('#interactionLinks').remove();
        }

        $('#profilefilter, #close_popup').click(function () {
            $('#profilefilter, #profcont-container').remove();
        });
    return false;
    });
});

Result :

Splendid but i have 2 issues with this

1. The avatar doesn't show.
2. At the bottom links only "View Profile" is visible (it was the same with the official tutorial).

1. ) Are you using phpbb3 ? The avatar currently is only for phpbb3, it will be available for other versions in the future.

2. ) Are you using the default navbar ? If the default logout navlink does not exist, then those options will not show up as you will be considered as 'offline'. I could make a fallback by using fa userdata, but you would need to have the toolbar active.

1. Nah I'm using old fashion phpbb2 anyway guess i'll wait for the avatar to be available for all versions then

2. Yeah I'm using a custom navbar , btw i fixed that issue with adding the old navbar codes and setting the display for it to none.

Hello,

I've updated the code in the first post.

► Close button
The close button is to the far right of the navigation bar. Clicking this closes the popup.

► Avatar support
The avatar of the user now displays in all forum versions.

► CSS updated
The CSS has also been updated for better property support.

Hmm , the rank image also seems to display at the same position as the avatar , it's over the avatar actually , how to remove the rank image shown in the profile popup ?

I'll have to take a look at it later to see what the problem is. Thanks for reporting.

Ok i noticed that the rpg tab was missing and if anyone is using the rpg system and wants the tab then simply update the code to this.

Spoiler:

Thanks, I didn't include the RPG tab since I only wanted to include the basics. Maybe adding some settings to the script would be a good Idea, that way you can toggle the buttons you want shown. Forgot about attachments too

Hello,

The script for the profile popup tabs has been updated. I will list the changes below.

► Updated the selection of userlinks (there were too many selectors anyway)
► Added the ability to enable and disable the display of tabs, avatar..
► Fixed an issue where the rank image would display over the avatar

You can find the updated code and explanations in the first post.

Many thanks for your feedback ♥

1. While in the profile when I click a tab the details will appear in the pop-up but the highlighted tab is profile.

Spoiler:

2. Also when clicking other tabs the details doesn't change. Only the selected tab details will appear in all the tabs in the pop-up.

Which browser are you using ? It is working fine on IE and Firefox.

I'm currently using opera.

I do not use opera, but I would have to look into what the problem is.

Minor update :

► Updated regular expression testing
► Fixed where the popup would open while on the user profile

You can find the updated code in the first post.

I was gonna say if it's possible to make this work on top posters , statistics and such but nvm it already does. What ya think about setting it up to work for the recent post also?