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

106 lines
3.1 KiB
JavaScript
Raw Normal View History

2011-07-29 18:48:43 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-05-16 08:24:46 +00:00
/*@
2011-05-16 10:49:48 +00:00
Ox.CollapsePanel <f:Ox.Panel> CollapsePanel Object
2011-05-16 08:24:46 +00:00
() -> <f> CollapsePanel Object
(options) -> <f> CollapsePanel Object
(options, self) -> <f> CollapsePanel Object
options <o> Options object
2011-05-16 10:49:48 +00:00
collapsed <b|false> collapsed state
extras <a|[]> panel extras
size <n|16> size
title <s> title
2011-05-16 08:24:46 +00:00
self <o> shared private variable
@*/
2011-04-22 22:03:10 +00:00
Ox.CollapsePanel = function(options, self) {
self = self || {};
var that = Ox.Panel({}, self)
2011-04-22 22:03:10 +00:00
.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({
2011-04-22 22:03:10 +00:00
orientation: 'horizontal',
size: self.options.size,
})
.dblclick(dblclickTitlebar)
.appendTo(that),
$switch = Ox.Button({
2011-04-22 22:03:10 +00:00
style: 'symbol',
title: title,
type: 'image',
})
.click(toggleCollapsed)
.appendTo($titlebar),
$title = Ox.Element()
2011-04-22 22:03:10 +00:00
.addClass('OxTitle')
.html(self.options.title/*.toUpperCase()*/)
.appendTo($titlebar),
$extras;
if (self.options.extras.length) {
$extras = Ox.Element()
2011-04-22 22:03:10 +00:00
.addClass('OxExtras')
.appendTo($titlebar);
self.options.extras.forEach(function($extra) {
$extra.appendTo($extras);
});
}
that.$content = Ox.Element()
2011-04-22 22:03:10 +00:00
.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
});
}
2011-05-16 10:49:48 +00:00
/*@
setOption <f> setOption
(key, value) -> <u> set key to value
@*/
2011-04-29 12:40:51 +00:00
self.setOption = function(key, value) {
2011-04-22 22:03:10 +00:00
if (key == 'collapsed') {
} else if (key == 'title') {
$title.html(self.options.title);
}
};
2011-05-16 10:49:48 +00:00
/*@
update <f> update // fixme: used anywhere?
@*/
that.update = function() {
2011-04-22 22:03:10 +00:00
self.options.collapsed && that.$content.css({
marginTop: -that.$content.height()
});
};
return that;
};