Leaderboards template

Description

This template is used by the Leaderboard Widget to display users in a particular leaderboard.

Control classes

Class	Description	Required
mambo-ctrl-earn	Displays the "How do I earn points?" popup when clicked	No
mambo-ctrl-period	Changes the leaderboard's time period when clicked. All period elements must be within the same parent and use this class. The order of elements is important (Overall, Day, Week, Month)	No
mambo-ctrl-menu	Displays the leaderboard selection menu in the element identified by mambo-ctrl-menu-display	No
mambo-ctrl-menu-display	Container element for the list of available leaderboards	No
mambo-ctrl-menu-item	Changes the leaderboard to the selected one when clicked	No
mambo-ctrl-scroll	Enables scrolling for the user list. Must have explicit height set and be contained within a mambo-ctrl-leader element	No
mambo-ctrl-leader	Container element for the mambo-ctrl-scroll element	No
mambo-ctrl-tab	Switches between Top 10 and My Rank views. First tab loads Top 10 plus current user, second tab shows leaderboard with current user in the centre	No
mambo-ctrl-selected	Indicates the current user's element. Used with mambo-ctrl-scroll to keep the selected user in view while scrolling	No

Template data

Variable	Description	Type
lbData	Object containing leaderboard settings. See Leaderboards API documentation for details	Object
data	Array of top users in the leaderboard	Array
isLoading	Flag indicating whether leaderboard data is still loading	Boolean
period	Current time period for which leaderboard data is being retrieved	String
myRank	True if displaying My Rank tab, false if displaying Top 10 tab	String
tabs	Leaderboard configuration data for tabs	Object
height	Height of the widget	Integer
title	Title to display for the current leaderboard	String

Implementation example

This example shows a basic leaderboards template with period selection and menu:

JavaScript

<script type="text/template" id="leaderboard-template">
  <% if( isLoading ) { %>
      <div>Loading!</div>
  <% } else { %>
      <div class="mambo-ctrl-earn">How do I earn points?</div>
      <div>
          <div class="mambo-ctrl-period">Overall</option>
          <div class="mambo-ctrl-period">Day</option>
          <div class="mambo-ctrl-period">Week</option>
          <div class="mambo-ctrl-period">Month</option>
      </div>
      <div class="mambo-ctrl-menu">Menu</div>
      <div class="mambo-ctrl-menu-display">
          <div class="mambo-ctrl-menu-item">Leaderboard 1</div>
      </div>
      <div class="mambo-ctrl-leader">
          <div class="mambo-ctrl-scroll" style="height: 250px;">
          <% _.forEach( data, function( item, idx ) { %>
              <% console.log(item); %>
          <% }); %>
          </div>
      </div>
  <% } %>
</script>

<script type="text/javascript">
  // Use the Mambo Callbacks array
  var mamboCallbacks = window.mamboCallbacks || [];
  mamboCallbacks.push(function() {
      // Override the default Leaderboard template
      Mambo.updateTemplate( Mambo.Template.leaderboard, Mambo('#leaderboard-template').html() );
  });
</script>

Customisation options

Consider these enhancements:

• Adding user avatars and profile pictures
• Displaying point values and rank changes
• Implementing animations for rank changes
• Creating responsive designs for different screen sizes
• Adding visual highlights for the current user
• Implementing search functionality for finding specific users