94 lines
3.0 KiB
JavaScript
94 lines
3.0 KiB
JavaScript
|
var Tabs = new Class({
|
||
|
|
Implements: Options,
|
||
|
|
togglers: [],
|
||
|
|
elements: [],
|
||
|
|
currentRequest: false,
|
||
|
|
options: {
|
||
|
|
'defaultTab': false,
|
||
|
|
'loadingImage': false,
|
||
|
|
'game': null,
|
||
|
|
'mode': null,
|
||
|
|
'extra': []
|
||
|
|
},
|
||
|
|
initialize: function(container, togglers, options) {
|
||
|
|
this.setOptions(options);
|
||
|
|
this.container = $(container);
|
||
|
|
$splat(togglers).map(this.addTab, this);
|
||
|
|
},
|
||
|
|
addTab: function(toggler) {
|
||
|
|
this.togglers.include(toggler);
|
||
|
|
toggler.addEvent('click', this.loadTab.bind(this, [toggler, this.togglers.indexOf(toggler)]));
|
||
|
|
if ( toggler.id.replace(/^tab_/, '') == this.options.defaultTab )
|
||
|
|
{
|
||
|
|
this.loadTab(toggler, this.togglers.indexOf(toggler));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
updateTab: function(txt) {
|
||
|
|
$(this.loading).destroy();
|
||
|
|
this.elements[this.currentRequest.options.currentTab] = new Element('div').set('html', txt).injectInside(this.container);
|
||
|
|
//Evaluate the response AFTER it's been created
|
||
|
|
txt.stripScripts(true);
|
||
|
|
this.currentRequest = false;
|
||
|
|
},
|
||
|
|
refreshTab: function(change) {
|
||
|
|
this.options.extra = $merge(this.options.extra, change);
|
||
|
|
for ( i=0; i<this.togglers.length; i++)
|
||
|
|
{
|
||
|
|
if ( this.togglers[i].id.replace(/^tab_/, '') == this.currentTab )
|
||
|
|
{
|
||
|
|
this.elements[i].destroy();
|
||
|
|
this.loadTab(this.togglers[i], i);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
loadTab: function(toggler, idx) {
|
||
|
|
|
||
|
|
// chrome has its own version of .bind() which passes the values as an array rather than arguments
|
||
|
|
// so we only want to do this if we don't have normal looking parameters
|
||
|
|
if(typeof toggler == 'object' && typeof idx != 'number') {
|
||
|
|
idx = toggler[1];
|
||
|
|
toggler = toggler[0];
|
||
|
|
}
|
||
|
|
|
||
|
|
var tab = toggler.id.replace(/^tab_/, '');
|
||
|
|
//Current tab? Just return
|
||
|
|
if ( this.currentTab == tab && this.container.hasChild(this.elements[idx]) )
|
||
|
|
return;
|
||
|
|
|
||
|
|
//Set the current tab
|
||
|
|
for ( i=0; i<this.togglers.length; i++) this.togglers[i].set('class', '');
|
||
|
|
toggler.set('class', 'active');
|
||
|
|
this.currentTab = tab;
|
||
|
|
|
||
|
|
//Current Request? Lets cancel it
|
||
|
|
if ( $chk(this.currentRequest) )
|
||
|
|
{
|
||
|
|
if ( $chk(this.loading) )
|
||
|
|
this.loading.destroy();
|
||
|
|
this.currentRequest.cancel();
|
||
|
|
}
|
||
|
|
|
||
|
|
//Hide the current Tabs
|
||
|
|
$(this.container).getChildren().each(function(el){
|
||
|
|
el.setStyle('display', 'none');
|
||
|
|
});
|
||
|
|
|
||
|
|
//Have we already cached this tab?
|
||
|
|
if ( this.container.hasChild(this.elements[idx]) )
|
||
|
|
{
|
||
|
|
this.elements[idx].setStyle('display', 'block');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
//Create the loading image (May change in the future)
|
||
|
|
this.loading = new Element('div').set('html', '<br /><br /><center><b>Loading...</b><br /><img src="' + this.options.loadingImage + '" alt="Loading..." /></center>').injectInside($(this.container));
|
||
|
|
//AJAX FTW
|
||
|
|
this.currentRequest = new Request({
|
||
|
|
url: 'hlstats.php?mode=' + this.options.mode + '&type=ajax&game=' + this.options.game + '&tab=' + tab + '&' + Hash.toQueryString(this.options.extra),
|
||
|
|
currentTab: idx,
|
||
|
|
onSuccess: this.updateTab.bind(this)
|
||
|
|
}).send();
|
||
|
|
}
|
||
|
|
});
|