Widget:Hero infobox slider

 var heroSlider = { hero : null, minLevel: 0, maxLevel: 0, initialize : function { heroSlider.hero = JSON.parse( '{"level":{}}' ); var levels = Object.keys( heroSlider.hero.level ); if ( levels.length > 0 ) { heroSlider.minLevel = parseInt( levels[0], 10 ); heroSlider.maxLevel = parseInt( levels[levels.length - 1], 10 );

mw.loader.using( 'jquery.ui.slider', function {        $( "#heroslider-level" ).html( 'Level ' + heroSlider.maxLevel );        $( "#heroslider" ).slider( { range: "min", min: heroSlider.minLevel, max: heroSlider.maxLevel, value: heroSlider.maxLevel, slide: heroSlider.updateStats, change: heroSlider.updateStats, create: heroSlider.updateStats }                                );      } );    }  },  addAbility : function ( id, requiredLevelList, manaCostList, rangeList, constantsList ) { if ( !( "abilities" in heroSlider.hero ) ) { heroSlider.hero.abilities = {}; }

var ability = {}; var requiredLevels = requiredLevelList.split( ',' ); var manaCosts = manaCostList.split( ',' ); var ranges = rangeList.split( ',' ); var constants = constantsList.split( '\n\n' );

for ( var i = 0; i < requiredLevels.length; ++i ) { ability[requiredLevels[i]] = { manaCost : ( i < manaCosts.length ? manaCosts[i] : 'missing' ), range : ( i < ranges.length ? ranges[i] : 'missing' ), constants : ( i < constants.length ? heroSlider.parseConstants( constants[i] ) : {} ) };   }    heroSlider.hero.abilities[id] = ability; }, parseConstants : function ( constantsList ) { var constants = {}; var constantsLines = constantsList.split( '\n' ); for ( var i = 0; i < constantsLines.length; ++i ) { constantParts = constantsLines[i].split( ',' ); if ( constantParts.length > 2 ) { constants[constantParts[0].split( ';' )[0]] = constantParts[1]; }   }    return constants; }, updateStats : function  { var level = $( "#heroslider" ).slider( "value" ); var data = heroSlider.hero.level[level]; $( "#heroslider-level" ).html( 'Level ' + level ); if ( data.attackdamagemin && data.attackdamagemax ) { if ( data.attackdamagemin != data.attackdamagemax ) { $( "#heroslider-attackdamage" ).html( data.attackdamagemin + '-' + data.attackdamagemax ); } else { $( "#heroslider-attackdamage" ).html( data.attackdamagemax ); }   } else { $( "#heroslider-attackdamage" ).html( ( data.attackdamagemin ? data.attackdamagemin : '_' ) + '-' +                                           ( data.attackdamagemax ? data.attackdamagemax : '_' )                                         ); }   $( "#heroslider-maxhealth" ).html( ( data.maxhealth ? data.maxhealth : '_' ) ); $( "#heroslider-healthregen" ).html( ( data.healthregen ? data.healthregen : '_' ) ); $( "#heroslider-armor" ).html( ( data.armor ? data.armor : '_' ) ); $( "#heroslider-magicarmor" ).html( ( data.magicarmor ? data.magicarmor : '_' ) );

$( "table#herostatstable tr" ).each( function {      var firstCell = $( this ).find( 'td' ).first;      if ( firstCell.length > 0 ) {        if ( parseInt( firstCell.html, 10 )== level ) {          $( this ).addClass( 'current' );        } else {          $( this ).removeClass( 'current' );        }      }    } );

heroSlider.updateAbilities( level ); }, updateAbilities : function ( level ) { if ( "abilities" in heroSlider.hero ) { var ability, descSpan, shortDescSpan, achievedAbility, achievedLevel; for ( var id in heroSlider.hero.abilities ) { ability = heroSlider.hero.abilities[id]; achievedLevel = 0; for ( var requiredLevel in ability ) { if ( requiredLevel <= level ) { achievedLevel = Math.max( achievedLevel, requiredLevel ); }       }        shortDescSpan = $( "#" + id + "-short" ); descSpan = $( "#" + id ); if ( achievedLevel > 0 ) { achievedAbility = ability[achievedLevel]; $( "#" + id + "-manacost" ).html( achievedAbility.manaCost ); $( "#" + id + "-range" ).html( achievedAbility.range ); for ( var constant in achievedAbility.constants ) { shortDescSpan.find( '.strife-formatted-' + constant ).html( achievedAbility.constants[constant] ); descSpan.find( '.strife-formatted-' + constant ).html( achievedAbility.constants[constant] ); }       }      }    }  } } $( document ).ready( heroSlider.initialize );