99 lines
2.4 KiB
JavaScript
99 lines
2.4 KiB
JavaScript
'use strict';
|
|
|
|
/*@
|
|
Ox.TabPanel <f> Tabbed panel
|
|
([options[, self]]) -> <o:Ox.SplitPanel> Panel
|
|
options <o> Options
|
|
content <o|f> Content per tab
|
|
Either `({id1: $element1, id2: $element2}}` or `function(id) {
|
|
return $element; })`
|
|
size <n|24> Height of the tab bar
|
|
tabs [o] Tabs
|
|
id <s> Tab id
|
|
title <s> Tab title
|
|
self <o> Shared private variable
|
|
@*/
|
|
|
|
Ox.TabPanel = function(options, self) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
content: null,
|
|
size: 24,
|
|
tabs: []
|
|
})
|
|
.options(options || {});
|
|
|
|
self.selected = getSelected();
|
|
|
|
self.$bar = Ox.Bar({size: 24});
|
|
|
|
self.$tabs = Ox.ButtonGroup({
|
|
buttons: self.options.tabs,
|
|
id: 'tabs',
|
|
selectable: true,
|
|
value: self.selected
|
|
})
|
|
.css({top: (self.options.size - 16) / 2 + 'px'})
|
|
.bindEvent({
|
|
change: function(data) {
|
|
self.selected = data.value;
|
|
that.$element.replaceElement(1, getContent());
|
|
that.triggerEvent('change', {selected: self.selected});
|
|
}
|
|
})
|
|
.appendTo(self.$bar);
|
|
|
|
that.setElement(
|
|
Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: self.$bar,
|
|
size: self.options.size
|
|
},
|
|
{
|
|
element: getContent()
|
|
}
|
|
],
|
|
orientation: 'vertical'
|
|
})
|
|
.addClass('OxTabPanel')
|
|
);
|
|
|
|
function getContent() {
|
|
return Ox.isObject(self.options.content)
|
|
? self.options.content[self.selected]
|
|
: self.options.content(self.selected);
|
|
}
|
|
|
|
function getSelected() {
|
|
var selected = self.options.tabs.filter(function(tab) {
|
|
return tab.selected;
|
|
});
|
|
return (selected.length ? selected : self.options.tabs)[0].id;
|
|
}
|
|
|
|
/*@
|
|
select <f> select
|
|
(id) -> <o> select panel
|
|
@*/
|
|
// fixme: does this collide with a jquery fn?
|
|
that.select = function(id) {
|
|
if (Ox.getIndexById(self.options.tabs, id) > -1) {
|
|
self.$tabs.options({value: id});
|
|
}
|
|
return that;
|
|
};
|
|
|
|
/*@
|
|
selected <f> selected
|
|
() -> <b> return selected panel
|
|
@*/
|
|
that.selected = function() {
|
|
return self.selected;
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|