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

// vim: et:ts=4:sw=4:sts=4:ft=javascript

/*@
Ox.CollapsePanel <f:Ox.Panel> CollapsePanel Object
    () ->              <f> CollapsePanel Object
    (options) ->       <f> CollapsePanel Object
    (options, self) -> <f> CollapsePanel Object
    options <o> Options object
        collapsed <b|false> collapsed state
        extras <a|[]> panel extras
        size <n|16> size
        title <s> title
    self    <o> shared private variable
@*/

Ox.CollapsePanel = function(options, self) {

    self = self || {};
    var that = Ox.Panel({}, self)
            .defaults({
                collapsed: false,
                extras: [],
                size: 16,
                title: ''
            })
            .options(options)
            .addClass('OxCollapsePanel'),
        // fixme: the following should all be self.foo
        title = self.options.collapsed ?
            [{id: 'expand', title: 'right'}, {id: 'collapse', title: 'down'}] :
            [{id: 'collapse', title: 'down'}, {id: 'expand', title: 'right'}],
        $titlebar = Ox.Bar({
                orientation: 'horizontal',
                size: self.options.size,
            })
            .dblclick(dblclickTitlebar)
            .appendTo(that),
        $switch = Ox.Button({
                style: 'symbol',
                title: title,
                type: 'image',
            })
            .click(toggleCollapsed)
            .appendTo($titlebar),
        $title = Ox.Element()
            .addClass('OxTitle')
            .html(self.options.title/*.toUpperCase()*/)
            .appendTo($titlebar),
        $extras;
    if (self.options.extras.length) {
        $extras = Ox.Element()
            .addClass('OxExtras')
            .appendTo($titlebar);
        self.options.extras.forEach(function($extra) {
            $extra.appendTo($extras);
        });
    }
    that.$content = Ox.Element()
        .addClass('OxContent')
        .appendTo(that);
    // fixme: doesn't work, content still empty
    // need to hide it if collapsed
    if (self.options.collapsed) {
        that.$content.css({
            marginTop: -that.$content.height() + 'px'
        });
    }
    function dblclickTitlebar(e) {
        if (!$(e.target).hasClass('OxButton')) {
            $switch.trigger('click');
        }
    }
    function toggleCollapsed() {
        var marginTop;
        self.options.collapsed = !self.options.collapsed;
        marginTop = self.options.collapsed ? -that.$content.height() : 0;
        that.$content.animate({
            marginTop: marginTop + 'px'
        }, 200);
        that.triggerEvent('toggle', {
            collapsed: self.options.collapsed
        });
    }
    /*@
    setOption <f> setOption
        (key, value) -> <u> set key to value
    @*/
    self.setOption = function(key, value) {
        if (key == 'collapsed') {

        } else if (key == 'title') {
            $title.html(self.options.title);
        }
    };

    /*@
    update <f> update // fixme: used anywhere?
    @*/
    that.update = function() {
        self.options.collapsed && that.$content.css({
            marginTop: -that.$content.height()
        });
    };
    return that;
};