hlstatsx/web/includes/js/tabs.js

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();
}
});