How to add a WoW Mini Armory

GuildPortal admin site link to the original post

mini-armory (single view)

mini-armory (compare)

First of all, I don't mean to tromp on Jizmak-Rebirth's version of the mini-armory. But since MMOGuildsites hasn't updated their armory since the expansion I decided to write one that would work with multiple sites.

I also apologize since I set this up to work with sites that will show data from the U.S. (US), Europe (EU), Korea (KR), China (CN) and Tiawan (TW)... but not all sites in the list support all of these regions. And frankly, I'm not modivated enough to set it up this way... the sites that don't support other regions will just return an error... lets just say, this code is already set up to allow for those sites future expandibility - hehe.

Copy (Ctrl-C) the code below and paste (Ctrl-V) it into a free form text/HTML box on your site while in HTML mode () or by right clicking in the editor box and choosing "Paste As Html". See it in action on my test-site Warcraf tab.

The Code

<style type="text/css">
#miniArmory input, #miniArmory select { background: #222222; color: #ffffff; border: 0px; margin-bottom:4px; }
#armoryContainer iframe { border:0px; }
#miniArmory hr { width:500px; }
#setArmoryServer0, #setArmoryServer1, #setArmoryServer2 { width: 100px; }
#setArmoryName0, #setArmoryName1, #setArmoryName2 { width: 137px; }
.ahide { display:none; }
</style>

<div id="miniArmory" align="center"></div>
<br>
<div id="armoryContainer" align="center">
 <span id="armory1"></span>
 <span id="armory2"></span>
</div>

<script type="text/javascript">
 var armorySite = new Array();
 // Default Variables
 var armoryServerLoc1 = "US";    // Default server (US, EU, KR, CN, TW)
 var armoryServerName1 = "Durotan";    // Default Server name (case sensitive)

 var armoryServerLoc2 = "US";    // Default server (US, EU, KR, CN, TW)
 var armoryServerName2 = "Durotan";    // Default Server name (case sensitive)

 defaultArmory = 'quickarmory';
 armoryHeight = 940;

 armorySite.push(["ArmoryLite","http://armorylite.com/","560"]);
 armorySite.push(["Armory-Light","http://www.armory-light.com/","850"]);
 armorySite.push(["Be Imba!","http://be.imba.hu/?","860"]);
 armorySite.push(["MMOGuildSite","http://armory.mmoguildsites.com/characters/","470"]);
 armorySite.push(["Quick Armory","http://www.quickarmory.com/?","435"]);
 armorySite.push(["Warcrafter",".warcrafter.net/","1000"]);
 armorySite.push(["WoW Armory","wowarmory.com/character-sheet.xml?","800"]);
 armorySite.push(["WoW Heroes","http://www.wow-heroes.com/index.php?","800"]);
 armorySite.push(["WoW Juju","http://www.wowjuju.com/index.php?","800"]);
 armorySite.push(["WoW Rep Calc","http://wowreputationcalculator.com/","800"]);

/*************************************
 Don't Change Anything Below
**************************************/
 var aregions = '<option value="us">US</option><option value="eu">EU</option><option value="kr">';
 aregions += 'KR</option><option value="cn">CN</option><option value="tw">TW</option></select> ';
 var ainput = ' type="text" onKeyPress="return disableEnterKey(event)"> ';
 var ahtml = '<select id="setArmorySite">';
 for (j=0;j<armorySite.length;j++){
  ahtml += '<option value="' + armorySite[j][1] + '" ';
  ahtml += (armorySite[j][1].match(defaultArmory)) ? ' selected="selected">' : '>';
  ahtml += armorySite[j][0] + '</option>';
 }
 ahtml += '</select><hr><div class="ashow" align="center"><input id="setArmoryName0" title="Character Name"';
 ahtml += ainput + '<input id="setArmoryServer0" title="Realm"' + ainput + '<select id="setArmoryLoc0">';
 ahtml += aregions + '<input onclick="openArmory(0);" value="Get Info" type="button"> <input onclick="boxReset(0,\''
 ahtml += armoryServerLoc1 + '\',\'' + armoryServerName1 + '\');" value="Reset" type="button"> <input onclick="compare();" ';
 ahtml += 'value="Compare" type="button"></div><div class="ahide"><table border="0" align="center"><tr><td><input ';
 ahtml += 'id="setArmoryServer1" title="Realm"' +  ainput + '<select id="setArmoryLoc1">' + aregions;
 ahtml += '<input onclick="boxReset(1,\'' + armoryServerLoc1 + '\',\'' + armoryServerName1 + '\');" value="Reset" type="button">';
 ahtml += '<br><input id="setArmoryName1" title="Character Name"' + ainput + '<input onclick="openArmory(1);" value="Get Info" ';
 ahtml += 'type="button"></td><td><div style="width:20px;"/></td><td><input id="setArmoryServer2" title="Realm"' + ainput;
 ahtml += '<select id="setArmoryLoc2">' + aregions + '<input onclick="boxReset(2,\'' + armoryServerLoc2 + '\',\''
 ahtml += armoryServerName2 + '\');" value="Reset" type="button"><br><input id="setArmoryName2" title="Character Name"';
 ahtml += ainput + '<input onclick="openArmory(2);" value="Get Info" type="button"></td></tr></table></div>';
 $('#miniArmory').html(ahtml);
 $('#setArmoryLoc0').attr('value',armoryServerLoc1);
 $('#setArmoryServer0').attr('value',armoryServerName1);
 $('#setArmoryLoc1').attr('value',armoryServerLoc1);
 $('#setArmoryServer1').attr('value',armoryServerName1);
 $('#setArmoryLoc2').attr('value',armoryServerLoc2);
 $('#setArmoryServer2').attr('value',armoryServerName2);
function openArmory(x) {
 var aN = $('#setArmoryName'+x).attr('value');
 if (aN == '') return;
 var aSite = $('#setArmorySite').attr('value');
 var aL = $('#setArmoryLoc'+x).attr('value');
 var aS = $('#setArmoryServer'+x).attr('value');
 var aS2 = aS.replace(/(\s)/g,'+');
 for (j=0; j < armorySite.length; j++) {
  if (armorySite[j][1].match(aSite)) var aSN = j;
 }
// ArmoryLite & Armory-Light - http://armorylite.com/{Location}/{Server}/{Character}
 if (aSite.match('armorylite|armory-light')) {
  var armoryURL = armorySite[aSN][1] + aL +  '/' + aS +  '/' + aN;
 }
// Be Imba - http://be.imba.hu/?zone={Location}&realm={Server}&character={Character}
 if (aSite.match('imba')) {
  var armoryURL = armorySite[aSN][1] + 'zone=' + aL + '&realm=' + aS2 + '&character=' + aN;
 }
// MMOGuildsites - http://armory.mmoguildsites.com/characters/north+america/{Server}/{Character}
 if (aSite.match('mmoguildsites')) {
  var aL = ($('#setArmoryLoc'+x).attr('value')=='eu') ? 'europe' : 'north+america'
  var armoryURL = armorySite[aSN][1] + aL +  '/' + aS2 +  '/' + aN;
 }
// Quick Armory - http://www.quickarmory.com/?n={Character}&r={Server}
 if (aSite.match('quickarmory')) {
  if (aL == "us") { aL = "" } else { aL = aL + "-"; }
  var armoryURL = armorySite[aSN][1] + 'r=' + aL + aS2 + '&n=' + aN;
 }
// Warcrafter - http://{Server}-{Location}.warcrafter.net/{Character}
 if (aSite.match('warcrafter')) {
  var armoryURL = 'http://' + aS.replace(/(\s)/g,'').replace(/\'/g,'') + '-' + aL + armorySite[aSN][1] + aN;
 }
// WoW Armory - http://eu.wowarmory.com/character-sheet.xml?n={Character}&r={Server}
 if (aSite.match('wowarmory')) {
  if (aL == "us") aL = "www";
  var armoryURL = 'http://' + aL + '.' + armorySite[aSN][1] + 'r=' + aS2 + '&n=' + aN;
 }
// WoW Heroes - http://www.wow-heroes.com/index.php?zone={Location}&server={Server}&name={Character}
 if (aSite.match('wow-heroes')) {
  var armoryURL = armorySite[aSN][1] + 'zone=' + aL + '&server=' + aS + '&name=' + aN;
 }
// WoW Juju - http://www.wowjuju.com/index.php?page=6#{Location}_{Server}_{Character}
 if (aSite.match('wowjuju')) {
  var armoryURL = armorySite[aSN][1] + 'page=6#' + aL + "_" + aS + "_" + aN;
 }
// WoW Rep Calc - http://wowreputationcalculator.com/{Location}/{Server}/{Character}/
 if (aSite.match('wowreputationcalculator')) {
  var armoryURL = armorySite[aSN][1] + aL.toUpperCase() + "/" + aS2 + "/" + aN + '/';
 }
 var frameBox = '<iframe src="' + armoryURL + '" name="iframe' + x + '" scrolling="auto"';
 frameBox += ' width="'+ armorySite[aSN][2] +'" height="'+armoryHeight+'"></iframe>';
 if (x==0) x=1;
 $('#armory'+x).html(frameBox);
}
function compare(){
 var temp1 = $('#setArmoryLoc0').attr('value');
 var temp2 = $('#setArmoryServer0').attr('value');
 var temp3 = $('#setArmoryName0').attr('value')
 $('.ashow').css('display','none');
 $('.ahide').css('display','block');
 $('#setArmoryLoc1').attr('value',temp1);
 $('#setArmoryServer1').attr('value',temp2);
 $('#setArmoryName1').attr('value',temp3);
}
function boxReset(x1,x2,x3) {
 $('#setArmoryLoc'+x1).attr('value',x2);
 $('#setArmoryServer'+x1).attr('value',x3);
 if (x1==0) x1=1;
 $('#armory'+x1).html('');
}
function disableEnterKey(e){
 var key = (window.event) ? e.keyCode : key=e.which;
 if ( key == 13 ) { return false } else { return true }
}
</script>

Customizing

• The input and select box styles are set in the CSS with the following code, change the color by modifying the text in blue.
  
  
• Change the width of the horizontal bar (text is in red in the CSS and the default is 500px), or hide it by adding "display:none;"). Or you can adjust the width of the input boxes for both the server name (default is 100px) and the character name (default is 137px) - these are also in red.
  
  
• The code in green is the HTML for the containers. There is no need to modify this.
  
  
• You can set the default region, server & armory in the script by changing the code below (in purple). There are two variables for server location and name, the second one is the default for the compare boxes.
  
  
• The server location (ServerLoc) can be set to the following regions: U.S. (US), Europe (EU), Korea (KR), China (CN) and Tiawan (TW). This variable is not case-sensitive.
  
   var armoryServerLoc1 = "US";    // Default server (US, EU, KR, CN, TW)
   var armoryServerLoc2 = "US";    // Default server (US, EU, KR, CN, TW)
  
  
• The server name (ServerName) must match your server name with proper capitalization, punctuation and using spaces... here is an example of one of the U.S. servers: "Blade's Edge"
  
   var armoryServerName1 = "Durotan";    // Default Server name (case sensitive)
   var armoryServerName2 = "Blade's Edge";    // Default Server name (case sensitive)
  
  
• The default armory site is set with the variable below. The text in purple must match the site's URL. So Quick Armory's URL is "http://www.quickarmory.com/", therefore the variable below must have "quickarmory". WoW Heroes' URL is "http://www.wow-heroes.com/" so the variable must be "wow-heroes".
  
  *DO NOT include any periods in this variable*
  
   defaultArmory = 'quickarmory';
  
  
• Each site has a different width, you can adjust the size of the frame by editing the last number in the armorySite variable (in red). Below, the ArmoryLite site frame is set to be 560 pixels wide.
  
   armorySite.push(["ArmoryLite","http://armorylite.com/","560"]);
  
  
• All the sites share the same frame height variable. Adjust how tall the frame is with this variable, default is set to 940 pixels:
  
   armoryHeight = 940;
  
  
• If you'd like to add more sites to this list, please post a request in this thread.