Roster Medals

This script is designed to modify the build in GuildPortal roster. It removes the numerous medals from the display and adds a ranked medal (based on the number of medals) which when clicked will open a facebox popup window with all of that user's medals. Here are the before and after images.

Before

After

Code

Add the following code to a Free Form Text/HTML widget on the same page as your Roster or into the Footer Area HTML (Control Panel > Custom HTML & Script > Footer Area)

<style type="text/css">
/* Roster Medal & Text */
.allMedals { float: right; }
.allMedals img { height: 15px; width: 15px; vertical-align: middle; }
.count { padding-right: 10px; }

/* Roster Medal & Text in popup */
#facebox .popupMedal { height: 50px; width: 50px; display: block; margin: 0 auto !important; vertical-align: middle; padding: 5px; }
#facebox .popupMedalName { display: block; padding: 0 10px; color: #fff; text-align: center; }

/* Popup height & scrolling if taller */
#facebox .content { max-height: 400px; overflow-y: auto; }

/* Popup Styling */
#facebox .body {
 padding: 10px;
 background: #444;
 width: 500px;
}
#facebox .footer {
 border: 0px;
}
#facebox .footer img {
 display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
 var max = 30,
  levels = {
   1  : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_bronze_1.png',
   5  : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_bronze_2.png',
   10 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%203/award_star_bronze_3.png',
   15 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_silver_1.png',
   20 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_silver_2.png',
   25 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_gold_1.png',
   30 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_gold_2.png'
  },
  /*******************************
   * Don't change anything below *
   *******************************/
  i, c, m, l, s, t;
 $('.gpWidget-rosterlrg').find('table.StyledList').find('tr').each(function(){
  c = $(this).find('td:eq(0)');
  l = c.find('img[title*="Medal"]').wrapAll('<span class="medals" style="display:none;" />').length;
  s = (l > max) ? max : Math.round(l/5) * 5;
  if (l < 5) { s = 1; }
  if (l > 0) {
   i = $('<span class="allMedals tooltip" title="Click to see ' + (l > 1 ? 'all ' + l + ' medals' : 'the medal') + '"><img src="' + levels[s] + '"><span class="count">(' + l + ')</span>');
   i.appendTo(c)
    .click(function(){
     m = $(this).parent().find('.medals');
     if (!m.is('.modified')) {
      m.addClass('modified') // make popup medals easy to see
       .find('img').each(function(){
        t = (this.title || '').replace('Medal:','').replace(/\'(.*)\'/,'<strong>$1</strong>');
        $(this)
         .addClass('popupMedal')
         .after( '<span class="popupMedalName">' + t + '</span><br>' );
       });
     }
     $.facebox(m.html());
    });
  }
 });
});
</script>

Customizing

• Medal Positioning & Style
  
  In the css, look for ".allMedals { float: right; }"... this positions the medal icon on the right side of the name block. If you changed it to "float: left", it will position the icons to the left of the character name. Remove the float: right to keep the medal in it's original position, but you may have to add "margin: 0; padding: 0" to the css to make it huge the right edge of the character name. The ".count" which is the number in parenthesis is styled using this bit of css.
  
  
• Medal sizes
  
  
  • The roster medal icon can be resized by adjusting the height and width in the css below.
    
    .allMedals img { height: 12px; width: 12px; vertical-align: middle; }
    
    
  • The medal images inside the popup window can be styled using the bit of css in ".popupMedal". The medal title is added to the right of the icon and can be styled using ".popupMedalName".
    
    #facebox .popupMedal { height: 50px; width: 50px; display: block; margin: 0 auto !important; vertical-align: middle; padding: 5px; }
    #facebox .popupMedalName { display: block; padding: 0 10px; color: #fff; text-align: center; }
    
    
• Popup Styling (aka Facebox)
  
  The facebox popup is styled as described in this post. Modify the css as desired below the "/* Popup Styling */" comment in the css.
  
  
• Medal Icon Levels
  
  The script will add a different medal icon image for a certain number of metals that it finds. Set a max number of medals to look for, then modify or add more medal levels as desired.
  

   var max = 30,
    levels = {
     1  : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_bronze_1.png',
     5  : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_bronze_2.png',
     10 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%203/award_star_bronze_3.png',
     15 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_silver_1.png',
     20 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_silver_2.png',
     25 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_gold_1.png',
     30 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_gold_2.png'
    },

  • A level image is really just an icon to represent the range of medals a person has. So level 1 means the person has 1 medal. If a person has 17 medals, the script will show the next lowest level number, so you'll see the image for level 15. Someone with 34 medals will have the level 30 image showing.
  • The script will only count every 5 levels (except for level 1), so you can't add 4 or 13 into the level variable above. It only looks for multiples of 5.
  • If you want to add more levels, to say 50,  then change the max level to 50 and add a comma to the end of the "30" line, and add 35, 40, 45 and 50 to the list. I added an example below:
    

     var max = 50,
      levels = {
       1  : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_bronze_1.png',
       5  : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_bronze_2.png',
       10 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%203/award_star_bronze_3.png',
       15 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_silver_1.png',
       20 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_silver_2.png',
       25 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%201/award_star_gold_1.png',
       30 : 'http://guildportal.com/Layout2006/CP/Awards/Star%20Set%202/award_star_gold_2.png',
       35 : 'some image url',
       40 : 'some other image url',
       45 : 'yet another image url',
       50 : 'and the last image url'
      },

  • Notice how the last level doesn't have a comma at the end. If it's there, IE will flip you off and ignore the script, then run into your kitchen and eat all the cheese in your refrigerator. MMmm 52 slices of American cheese....

Edit 6/9/2012: Updated to work with roster changes.
Edit 6/14/2012: Updated css &amp; script to add big images in the popup.

Updated the script to work with the roster layout changes.