Davide Caffaratti blog

This is my new little class fot print Skype button status with mootools library.

It have a nice effect for the button taken from http://davidwalsh.name/skype-mootools.

Thanks David Your site is a good reference for me

VIEW THE EXAMPLE FILE

var MooSkype = new Class({

Implements: [Options],

options: {
// Flag use efect
useEffect: true,
// Class name for hock skype button action
element: 'skype-button',
// Class name for the skype image
image: 'skype-image',
// Default action when user is disponible
defaultAction: 'call',
// Default language, possibles: 'en','de','fr','it','pl','ja','es','pt','pt-br','se','zh-cn','zh-tw'
language: 'en',
// Path to images
imagesPath: 'img/',
// Path to languages
languagesPath: './languages/'
},

initialize: function(options) {
this.setOptions(options);

this.setSkype();
},

setSkype: function() {
// charge js language
new Asset.javascript(this.options.languagesPath + this.options.language + '.js', {id: 'skypeLanguage'});

var href = $(this.options.element).getProperty('href');
var tmpUser = href.replace('skype:', '');
var user = tmpUser.replace(tmpUser.substring(tmpUser.lastIndexOf('?'),tmpUser.length), '');

var request = new Request({
url: 'http://localhost/moo-skype/proxy.php',
method: 'get',
data: 'user=' + user,
onFailure: function() {
this.getButton(user, 0);
}.bind(this),
onSuccess: function(resp){
this.getButton(user, resp.toInt());
}.bind(this)
});
request.send();
},

getButton: function(user, status) {
var link = $(this.options.element);
var img = $(this.options.image).clone();
var statusText = i18n[status];

switch(status){
case 2:
case 3:
case 7:
var href = link.set({'href': 'skype:' + user + '?' + this.options.defaultAction, 'title': statusText, 'text': statusText});
break;
default:
var href = link.set({'href': 'skype:' + user + '?add', 'title': statusText, 'text': statusText});
}

img.set({'src': this.options.imagesPath + status + '.gif', 'alt': statusText}).inject(href, 'top');

if (this.options.useEffect) {
this.setEffect(img);
}
},

setEffect: function(img) {
var running = false;

var fx2 = new Fx.Morph(img, {duration: 100, link: 'chain', onChainComplete:function() { running = false; } });
var fx1 = new Fx.Morph(img, {duration: 200, link: 'chain', onComplete:function() {
fx2.start({'top':'-7px'}).start({'top':'-4px'}).start({'top':'-6px'}).start({'top':'-4px'});
}
});
img.addEvent('mouseenter',function() {
if(!running) {
fx1.start({'top':'-10px'}).start({'top':'-4px'});
running = true;
}
});
}
})

For initialize the class use this:

window.addEvent('domready', function() {
var skype = new MooSkype({'language':'es'});
});

The html is here:

<div>
<a href="skype:davcaffa?call" id="skype-button">
<img src="img/2.gif" alt="Call me" id="skype-image" />Call me</a>
</div>

For use the ajax call need to use a proxy that read the state of users on skype server.

Here is the script:

<?php
if (!isset($_GET['user'])) {
echo 0;
}
else {
echo file_get_contents('http://mystatus.skype.com/'.$_GET['user'].'.num');
}
?>