oxjs/source/Ox.UI/js/Panel/TabPanel.js

'use strict';

/*@
Ox.TabPanel <f> Tabbed panel
    ([options[, self]]) -> <o:Ox.SplitPanel> Panel
    options <o> Options
        content <o|f> Content per tab
            Either <code>({id1: $element1, id2: $element2}}</code> or
            <code>function(id) { return $element; })</code>
        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;

};