Leaderboard filter by Platform

[paulus]

I note that all the info needed to add a filter by platform is already in the frontend source code. This little bit of JS is all that's needed, haven't fully tested but coded in a way that should work for all tours and accounts for the logged-in/out state (the extra personal leaderboard)...


var filterLeaderboardBy;
(function () {
 // add filter buttons to DOM
 var all_filter='<a href="#" onclick="filterLeaderboardBy(\'ALL\')">ALL</a>';
 var ps4_filter='<a href="#" onclick="filterLeaderboardBy(\'PS4\')">PS4</a>';
 var pc_filter='<a href="#" onclick="filterLeaderboardBy(\'PC\')">PC</a>';
 var xb1_filter='<a href="#" onclick="filterLeaderboardBy(\'XB1\')">XB1</a>';
 var leaderboard = jQuery('.leaderboard[data-tour!="player"]').first();
 leaderboard.before('<h3>Filter By:  ' + all_filter + ' | ' + ps4_filter + ' | ' + pc_filter + ' | ' + xb1_filter + '</h3>');

 // filter by platform function
 filterLeaderboardBy = function(platform) {
   var leaderboard = jQuery('.leaderboard[data-tour!="player"]').first();
   // unhide all rows first
   leaderboard.find('tr').each(function() {
     $(this).show();
   });
   // now hide the ones we don't want
   leaderboard.find('tr').each(function() {
     var player = $(this).find('a').first();
     var title = player.attr('title');
     if(platform != 'ALL' && title && !title.includes(platform)) {
       $(this).hide();
     }
   });
 }
}());

This inserts the filter buttons above the leaderboard and hooks them upto a little jquery function to show/hide the relevant rows depending on platform - the platform is parsed out of the title attribute in the players anchor tag. Here I am filtering today's PGA leaderboard by PC...

[Deleted]

Apr 29, 2019 10:51:52 GMT -5 paulus said:

I note that all the info needed to add a filter by platform is already in the frontend source code. This little bit of JS is all that's needed, haven't fully tested but coded in a way that should work for all tours and accounts for the logged-in/out state (the extra personal leaderboard)...


var filterLeaderboardBy;
(function () {
 // add filter buttons to DOM
 var all_filter='<a href="#" onclick="filterLeaderboardBy(\'ALL\')">ALL</a>';
 var ps4_filter='<a href="#" onclick="filterLeaderboardBy(\'PS4\')">PS4</a>';
 var pc_filter='<a href="#" onclick="filterLeaderboardBy(\'PC\')">PC</a>';
 var xb1_filter='<a href="#" onclick="filterLeaderboardBy(\'XB1\')">XB1</a>';
 var leaderboard = jQuery('.leaderboard[data-tour!="player"]').first();
 leaderboard.before('<h3>Filter By:  ' + all_filter + ' | ' + ps4_filter + ' | ' + pc_filter + ' | ' + xb1_filter + '</h3>');

 // filter by platform function
 filterLeaderboardBy = function(platform) {
   var leaderboard = jQuery('.leaderboard[data-tour!="player"]').first();
   // unhide all rows first
   leaderboard.find('tr').each(function() {
     $(this).show();
   });
   // now hide the ones we don't want
   leaderboard.find('tr').each(function() {
     var player = $(this).find('a').first();
     var title = player.attr('title');
     if(platform != 'ALL' && title && !title.includes(platform)) {
       $(this).hide();
     }
   });
 }
}());

This inserts the filter buttons above the leaderboard and hooks them upto a little jquery function to show/hide the relevant rows depending on platform - the platform is parsed out of the title attribute in the players anchor tag. Here I am filtering today's PGA leaderboard by PC...

This is amazing!!!! Except when I place the code in as a live expression I get a ton of those filter buttons, they just keep populating indefinitely.....

[paulus]

Your including the anonymous function multiple times Copy and paste it into the console instead - as you see in the right hand side of my screeny. To get to the console, right click anywhere -> inspect. In the popup, select the console tab, C+P the code and press enter.

[Deleted]

Apr 29, 2019 11:48:27 GMT -5 paulus said:

Your including the anonymous function multiple times Copy and paste it into the console instead - as you see in the right hand side of my screeny. To get to the console, right click anywhere -> inspect. In the popup, select the console tab, C+P the code and press enter.

Ahhh ha! Thank you!!!

[paulus]

Tim - at the danger of teaching granny to suck eggs - if you do want to include this snippet, you'll need to warp it in a document.ready - requires all your lovely leaderboard HTML to be ready first.

[steelereign]

Apr 29, 2019 11:48:27 GMT -5 paulus said:

Your including the anonymous function multiple times Copy and paste it into the console instead - as you see in the right hand side of my screeny. To get to the console, right click anywhere -> inspect. In the popup, select the console tab, C+P the code and press enter.

This is awesome!! Any chance you can create the code needed to filter by clubset too?

Thanks for taking the time to build and post!