/**
* RokTabs Module
*
* @package Joomla
* @subpackage RokTabs Module
* @copyright Copyright (C) 2009 RocketTheme. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see RT-LICENSE.php
* @author RocketTheme, LLC
*
*/
var RokTabsOptions = {
'mouseevent': [], 'duration': [], 'transition': [], 'auto': [], 'delay': [],
'type': [], 'arrows': [], 'tabsScroll': [], 'linksMargins': [], 'navscroll': [],
'marginCompensation': []
};
window.ie9 = window.ie && Object.keys;
var RokTabs = new Class({
version: '1.8',
options: {
'scroll': RokTabsOptions
},
initialize: function(options) {
this.setOptions(options);
// bw compatibility
if (!this.options.scroll.navscroll || !this.options.scroll.navscroll.length) {
this.options.scroll.navscroll = [];
(RokTabsOptions['duration'].length).times(function() {
this.options.scroll.navscroll.push(true);
}.bind(this));
}
this.containers = $$('.roktabs-container-inner');
this.tabsWrapper = $$('.roktabs-links');
this.tabs = $$('.roktabs-links ul');
this.panels = $$('.roktabs-container-wrapper');
this.outer = $$(this.tabsWrapper.getParent());
this.wrapper = $$(this.outer.getParent());
this.fx = []; this.current = [];
this.timer = [];
this.tabsSize = [];
this.tabScroll = [];
this.panels.each(function(panel,i) {
this.current[i] = 0;
if (!this.options.scroll.mouseevent[i]) this.options.scroll.mouseevent[i] = 'click';
panel.setStyle('width', (window.opera) ? 30000 : 50000);
if (window.ie){
panel.setStyles({
'filter': 'inherit',
'position': 'relative'
}).getChildren().setStyles({
'filter': 'inherit',
'position': 'relative'
});
}
},this);
this.attachEvents();
},
attachEvents: function() {
var lisSize, self = this;
this.tabs.each(function(tabs, i) {
if (!this.options.scroll.navscroll[i]) this.tabsWrapper.addClass('roktabs-links-noscroll');
this.outer[i].addEvents({
'mouseenter': function() {
if (self.options['scroll'].auto[i]) self.stop(i);
},
'mouseleave': function(){
if (self.options['scroll'].auto[i]) self.start(i);
}
});
this.fx[i] = new Fx.Scroll(this.panels[i].getParent(), {
wait: false,
wheelStops: false,
duration: this.options['scroll'].duration[i],
transition: this.options['scroll'].transition[i]
}).set([0,false]);
lisSize = 0;
this.containers[i].setStyle('width',
this.wrapper[i].getStyle('width').toInt() -
this.tabsWrapper[i].getParent().getStyle('border-left-width').toInt() -
this.tabsWrapper[i].getParent().getStyle('border-right-width').toInt()
);
tabs.getElements('li').each(function(tab,j) {
var panel = this.panels[i].getChildren()[j];
panel.setStyle('width',
((window.ie6) ? this.wrapper[i] : this.outer[i]).getStyle('width').toInt() - panel.getStyle('padding-left').toInt() -
panel.getStyle('padding-left').toInt() -
panel.getStyle('margin-left').toInt() -
panel.getStyle('margin-left').toInt()
);
lisSize += tab.getSize().size.x;
if (this.options['scroll'].marginCompensation[i]){
lisSize += tab.getStyle('margin-left').toInt() + tab.getStyle('margin-right').toInt();
}
tab.setStyle('cursor','pointer').addEvents({
'mouseenter': this.mouseenter.bind(this,[tab,panel,i,j]),
'mouseleave': this.mouseleave.bind(this,[tab,panel,i,j]),
'mousedown': this.mousedown.bind(this,[tab,panel,i,j]),
'mouseup': this.mouseup.bind(this,[tab,panel,i,j])
});
}, this);
this.tabsSize[i] = [tabs.getSize().size.x,lisSize];
var arrows = this.outer[i].getElement('.roktabs-arrows');
if (this.options['scroll'].arrows[i]) {
var previous = arrows.getElement('.previous');
var next = arrows.getElement('.next');
};
if (this.options['scroll'].auto[i]) {
this.start(i);
};
if (this.tabsSize[i][1] > this.tabsSize[i][0] && this.options.scroll.navscroll[i]) this.tabScroller(i);
//else this.tabScroller(i);
},this);
return this;
},
mouseenter: function(tab, panel, box_number, li_number) {
if (tab[0]) {
li_number = tab[3];
box_number = tab[2];
panel = tab[1];
tab = tab[0];
};
tab.addClass('hover').addClass('over');
this.fireEvent('mouseenter', [tab, panel, box_number, li_number]);
if (RokTabsOptions.mouseevent[box_number] == 'mouseenter') {
this.mousedown(tab, panel, box_number, li_number, true);
this.mouseup(tab, panel, box_number, li_number, true);
}
},
mouseleave: function(tab, panel, box_number, li_number) {
if (tab[0]) {
li_number = tab[3];
box_number = tab[2];
panel = tab[1];
tab = tab[0];
};
tab.removeClass('hover').removeClass('over').removeClass('down').removeClass('up');
this.fireEvent('mouseleave', [tab, panel, box_number, li_number]);
if (RokTabsOptions.mouseevent[box_number] == 'mouseenter') this.mouseup(tab, panel, box_number, li_number, true);
},
mousedown: function(tab, panel, box_number, li_number, force) {
if (tab[0]) {
force = tab[4];
li_number = tab[3];
box_number = tab[2];
panel = tab[1];
tab = tab[0];
};
tab.removeClass('up').addClass('down');
if (this.options['scroll'].type[box_number] == 'scrolling') {
this.fx[box_number].options.duration = RokTabsOptions.duration[box_number];
this.fx[box_number].options.wait = false;
this.fx[box_number].toElement(panel);
} else {
var self = this;
this.fx[box_number].element.effect('opacity', {duration: RokTabsOptions.duration[box_number] / 2}).start(0).chain(function() {
self.fx[box_number].options.duration = 0;
self.fx[box_number].options.wait = true;
self.fx[box_number].toElement(panel);
self.fx[box_number].element.effect('opacity').start(1);
});
};
this.fireEvent('mousedown', [tab, panel, box_number, li_number]);
},
mouseup: function(tab,panel,box_number,li_number,force) {
if (tab[0]) {
force = tab[4];
li_number = tab[3];
box_number = tab[2];
panel = tab[1];
tab = tab[0];
};
if (RokTabsOptions.mouseevent[box_number] != 'click' && !force) return;
this.tabs[box_number].getElements('li').removeClass('active');
tab.removeClass('down').addClass('up').addClass('active');
this.current[box_number] = li_number;
this.fireEvent('mouseup', [tab, panel, box_number, li_number]);
},
click: function(tab,panel, box_number, li_number, force){
if (tab[0]) {
force = tab[4];
li_number = tab[3];
box_number = tab[2];
panel = tab[1];
tab = tab[0];
};
return tab.fireEvent('mousedown', [tab, panel, box_number, li_number], force)
.fireEvent('mouseup', [tab, panel, box_number, li_number])
.fireEvent('mouseleave', [tab,panel, box_number, li_number]);
},
start: function(current) {
$clear(this.timer[current]);
var tmp = this.next.bind(this,current);
this.timer[current] = tmp.periodical(this.options.scroll.delay[current]);
},
stop: function(current) {
$clear(this.timer[current]);
},
next: function(where) {
var tabs = this.tabs.getElements('li');
var current = this.current[where] + 1, next = tabs[where][current], tab;
if (next) tab = next;
else {
tab = tabs[where][0];
current = 0;
};
return this.click(tab, this.panels[where], where, current);
},
previous: function(where) {
var tabs = this.tabs.getElements('li');
var current = this.current[where] - 1, prev = tabs[where][current], tab;
if (prev) tab = prev;
else {
tab = tabs[where][tabs.length];
current = tabs.length;
};
return this.click(tab, this.panels[where], where, current);
},
goTo: function(where, which) {
var tabs = this.tabs.getElements('li');
var go = tabs[where][which], tab;
if (go) tab = go;
else {
tab = tabs[where][0];
current = 0;
};
var panel = this.panels[where].getChildren()[which];
if (this.options.scroll.mouseevent[where] == 'mouseenter') this.mouseenter(tab, panel, where, go, true);
return this.click(tab, panel, where, go, true);
},
tabView: function(where, what) {
if (what == 'hide') this.tabs[where].setStyle('display','none');
else this.tabs[where].setStyle('display','');
},
tabPosition: function(where, position) {
var el = this.tabsWrapper[where];
switch(position) {
case 'top': el.inject(el.getParent(),'top');
el.getFirst().removeProperty('class').addClass('roktabs-top');
break;
case 'bottom': default:
el.inject(el.getParent());
el.getFirst().removeProperty('class').addClass('roktabs-bottom');
};
},
tabScroller: function(tab) {
var ul = this.tabs[tab], self = this;
var parent = ul.getParent();
(2).times(function() {
self.tabsSize[tab][1] = 0;
ul.getChildren().each(function(li) {
if (window.ie) li.getFirst().inject(li);
self.tabsSize[tab][1] +=
li.getSize().size.x + li.getStyle('margin-left').toInt() +
li.getStyle('margin-right').toInt() + li.getStyle('padding-left').toInt() +
li.getStyle('padding-right').toInt() + li.getStyle('border-left-width').toInt() +
li.getStyle('border-right-width').toInt();
},this);
ul.setStyle('width',self.tabsSize[tab][1] + ((window.gecko) ? 5 : (window.ie9) ? 0.5 : 0));
}.bind(this));
parent.setStyles({'overflow':'hidden', 'width': this.tabsSize[tab][0], 'position': 'relative'});
if (ul.getSize().size.x > parent.getSize().size.x) {
var ulWrapper = new Element('div', {'class': 'active-arrows'}).setStyle('position','relative').inject(parent,'before').adopt(parent);
var ulPrev = new Element('div', {'class': 'arrow-prev png'}).setHTML('<').inject(ulWrapper,'top');
var ulNext = new Element('div', {'class':'arrow-next png'}).setHTML('>').inject(ulWrapper);
var arrowsSize = {
'prev': ulPrev.getStyle('width').toInt() +
ulPrev.getStyle('margin-left').toInt() +
ulPrev.getStyle('margin-right').toInt() +
ulPrev.getStyle('border-left').toInt() +
ulPrev.getStyle('border-right').toInt() +
ulPrev.getStyle('padding-left').toInt() +
ulPrev.getStyle('padding-right').toInt(),
'next': ulNext.getStyle('width').toInt() +
ulNext.getStyle('margin-left').toInt() +
ulNext.getStyle('margin-right').toInt() +
ulNext.getStyle('border-left').toInt() +
ulNext.getStyle('border-right').toInt() +
ulNext.getStyle('padding-left').toInt() +
ulNext.getStyle('padding-right').toInt()
};
var margins = 0;
if (this.options.scroll.linksMargins[tab]) margins = parent.getStyle('margin-right').toInt();
if (margins < 0) margins = Math.abs(margins) / 2;
parent.setStyle('width', this.tabsSize[tab][0] - margins - arrowsSize.prev - arrowsSize.next);
new Element('div', {'class':'clear'}).inject(ulWrapper);
this.tabScroll[tab] = {
'speed': 70, 'amount': 30, 'current': 0
};
var TabTimer;
ulNext.addEvents({
'mouseenter': function(){ $clear(TabTimer);
this.addClass('arrow-next-hover');
TabTimer = self.tabScrollerAnim.periodical(self.tabScroll[tab]['speed'], self, [tab,parent,true]);
},
'mouseleave': function(){ this.removeClass('arrow-next-hover');
$clear(TabTimer);
}
});
ulPrev.addEvents({
'mouseenter': function() {
$clear(TabTimer);
this.addClass('arrow-prev-hover');
TabTimer = self.tabScrollerAnim.periodical(self.tabScroll[tab]['speed'], self, [tab,parent,false]);
},
'mouseleave': function() { this.removeClass('arrow-prev-hover');
$clear(TabTimer);
}
});
};
},
tabScrollerAnim: function(tab,ul,plus) {
var scrollSize = ul.getSize().scrollSize.x, scrollAmount = ul.getSize().scroll.x;
var scroll;
if (plus) scroll = scrollAmount + this.tabScroll[tab]['amount'];
else scroll = scrollAmount - this.tabScroll[tab]['amount'];
scroll = (scroll < 0) ? 0 : (scroll >= scrollSize) ? scrollSize : scroll;
ul.scrollTo(scroll, 0);
}
});
RokTabs.implement(new Options, new Events);
var roktabs;
window.addEvent('load', function() {
roktabs = new RokTabs();
});