Presence Box Widgetversion 1.0
last revision: 01.05.2007
http://slayeroffice.com
This is a more advanced example of using presence data. Unlike the previous example that just used the awayMsg property, this example will use all presence data to display online time, icons, profile messages and away messages, among other things.
Since we're dealing with more data in this example, the code is a bit more verbose, but its no more complicated. Include a reference to the Web AIM Javascript API in your document followed by this HTML, CSS and Javascript:
Place this markup in your document where you'd like the presence widget to appear, and be sure to replace yourAIMID with your own AIM ID.
<iv id="myPresence" class="AIMPresenceWidget yourAIMID">>/div>This CSS is optional, of course. You can style this widget however you like.
#myPresence {
border:1px solid #C0C0C0;
border-right:1px solid #000;
border-bottom:1px solid #000;
background-color:#FFF;
font:10px verdana;
position:relative;
width:250px;
height:auto;
margin:auto;
padding:5px;
}
#myPresence .icon {
float:left;
}
#myPresence .info {
position:relative;
float:right;
width:70%;
}
.info .userName {
font:bold 11px verdana;
margin:0;
padding:0;
}
.info dl {
margin:0; padding:0;
display:block;
}
.info dt {
font-weight:bold;
display:inline;
}
.info dd {
display:inline;
margin:0;
padding:0;
}
.info dl span {
display:block;
}
.info .status {
text-transform:capitalize;
}
.info .away {
color:red;
}
.info .idle {
color:gold;
}
.info .online {
color:green;
}
.info .mobile {
color:gray;
}
Place this javascript in a file called presenceWidget.js (or whatever you want, really) and reference it from the head of your document via a script element.
// Define the callback for getPresenceInfo
AIM.params.callbacks.getPresenceInfo = ["presenceBoxWidget.displayPresence"];
// Define our widget object
var presenceBoxWidget = {
// The entry point for the application. Called from the windows load event.
init: function() {
// if you'd like to see the data stream, set this to true.
AIM.params.DEBUG = false;
// Our API key. Don't forget to update this with your own key.
AIM.params.wimKey = "sc1OCxN4ASAnSDj1";
// Call the presence transaction
AIM.transactions.getPresenceInfo();
},
// Our function to display all the incoming presence data.
displayPresence: function(json) {
// we only want to do anything if the status is Ok
if(json.response.statusCode==200) {
// create a reference to the element that we'll append all of the data to.
var oContainer = document.getElementById("myPresence");
// get a reference to the first user object in the response
// if there were more than one AIMPresenceWidget on the page,
// there would be more than one user object in this array
var oData = json.response.data.users[0];
// if the user is offline, just say so and return out of the function
if(oData.state == "offline") {
oContainer.appendChild(document.createTextNode(oData.displayId + " is not online right now."));
return;
}
// append an image to the container element that will display the user's buddy icon
createAndAppend(oContainer,"img",null,{"class":"icon",src:oData.buddyIcon});
// append a div element to the container that will contain the user's buddy info
var oDiv = createAndAppend(oContainer,"div",null,{"class":"info"});
// display the user's AIM ID and online state, i.e., away, idle, mobile, etc.
createAndAppend(oDiv,"h3",oData.displayId,{"class":"userName " + oData.state});
var oDL = createAndAppend(oDiv,"dl",null,{});
var oSpan = createAndAppend(oDL,"span",null,{});
createAndAppend(oSpan,"dt","Status: ",{});
createAndAppend(oSpan,"dd",oData.state,{});
// if the user is mobile, we don't know how long they have been online.
// Otherwise, we'll convert it from seconds into a legible time
if(oData.state == "mobile") {
var onlineTime = "";
} else {
var oSpan = createAndAppend(oDL,"span",null,{});
createAndAppend(oSpan,"dt","Online for: ",{});
createAndAppend(oSpan,"dd",AIM.util.elapsedFromSeconds(oData.onlineTime),{});
}
// If the user has been idle, calculate their idle time and display it the same way we do with their online time.
if(oData.idleTime) {
if(oData.idleTime > 60) {
var iTime = Math.floor(oData.idleTime/60) + " hours.";
} else {
var iTime =oData.idleTime + " minutes.";
}
var oSpan = createAndAppend(oDL,"span",null,{});
createAndAppend(oSpan,"dt","Idle Time: ",{});
createAndAppend(oSpan,"dd",iTime,{});
}
// if the user is away, display their away message and how long they have been away.
if(oData.state == "away") {
createAndAppend(oDL,"hr",null,{});
var oSpan = createAndAppend(oDL,"span",null,{});
createAndAppend(oSpan,"dt","Away Message: ", {});
createAndAppend(oSpan,"dd",oData.awayMsg,{});
var oSpan = createAndAppend(oDL,"span",null,{});
createAndAppend(oSpan,"dt","Away For: ",null,{});
createAndAppend(oSpan,"dd", AIM.util.elapsedFromSeconds(oData.awayTime),{});
}
// Display their profile message if they have one.
if(oData.profileMsg) {
createAndAppend(oDiv,"hr",null,{});
createAndAppend(oDiv,"p",oData.profileMsg,{});
}
createAndAppend(oContainer,"br",null,{"class":"clearMe"});
} else {
// hide the container element if there waqs an error
oContainer.style.display = "none";
}
// A utility function to append nodes to the DOM
function createAndAppend(pNode,cNodeType,tNodeValue,attrList) {
var x = document.createElement(cNodeType);
if(tNodeValue) x.innerHTML = tNodeValue; // profiles and the like can contain HTML, so use innerHTML over createTextNode
for(var i in attrList) {
if(i == "class") {
x.className = attrList[i];
} else {
x.setAttribute(i,attrList[i]);
}
}
pNode.appendChild(x);
return x;
}
}
}
// attach the presenceBoxWidget.init function to the window's load event
window.addEventListener?window.addEventListener("load",presenceBoxWidget.init,false):window.attachEvent("onload",presenceBoxWidget.init);