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

178 lines
5.1 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2011-05-16 08:24:46 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.CollapsePanel <f> CollapsePanel Object
2011-05-16 08:24:46 +00:00
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
self <o> Shared private variable
([options[, self]]) -> <o:Ox.Element> CollapsePanel Object
toggle <!> toggle
2011-05-16 08:24:46 +00:00
@*/
2011-04-22 22:03:10 +00:00
Ox.CollapsePanel = function(options, self) {
self = self || {};
2012-05-28 19:35:41 +00:00
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
animate: true,
2011-04-22 22:03:10 +00:00
collapsed: false,
extras: [],
size: 16,
title: ''
})
.options(options)
2012-05-28 19:35:41 +00:00
.update({
collapsed: function() {
// will be toggled again in toggleCollapsed
self.options.collapsed = !self.options.collapsed;
toggleCollapsed();
},
title: function() {
self.$title.html(self.options.title);
}
})
.addClass('OxPanel OxCollapsePanel')
.bindEvent({
key_left: function() {
!self.options.collapsed && toggleCollapsed();
},
key_right: function() {
self.options.collapsed && toggleCollapsed();
}
});
2011-12-22 15:47:46 +00:00
var index = Ox.indexOf(self.options.extras, Ox.isEmpty);
self.extras = index > -1
? [
self.options.extras.slice(0, index),
self.options.extras.slice(index + 1)
]
: [
[],
self.options.extras
];
2011-12-22 15:47:46 +00:00
self.$titlebar = Ox.Bar({
orientation: 'horizontal',
2012-05-26 15:48:19 +00:00
size: self.options.size
2011-12-22 15:47:46 +00:00
})
.bindEvent({
anyclick: clickTitlebar,
2011-12-22 15:47:46 +00:00
doubleclick: doubleclickTitlebar
})
.appendTo(that);
self.$button = Ox.Button({
style: 'symbol',
type: 'image',
value: self.options.collapsed ? 'expand' : 'collapse',
values: [
{id: 'expand', title: 'right'},
{id: 'collapse', title: 'down'}
]
})
.bindEvent({
click: function() {
that.gainFocus();
toggleCollapsed(true);
}
2011-12-22 15:47:46 +00:00
})
.appendTo(self.$titlebar);
self.$extras = [];
if (self.extras[0].length) {
self.$extras[0] = Ox.Element()
.addClass('OxExtras')
.css({width: self.extras[0].length * 16 + 'px'})
.appendTo(self.$titlebar);
self.extras[0].forEach(function($extra) {
$extra.appendTo(self.$extras[0]);
});
}
2011-12-22 15:47:46 +00:00
self.$title = Ox.Element()
.addClass('OxTitle')
.css({
left: 16 + self.extras[0].length * 16 + 'px',
right: self.extras[1].length * 16 + 'px'
})
2011-12-22 15:47:46 +00:00
.html(self.options.title)
.appendTo(self.$titlebar);
2011-09-01 04:46:14 +00:00
if (self.extras[1].length) {
self.$extras[1] = Ox.Element()
2011-04-22 22:03:10 +00:00
.addClass('OxExtras')
.css({width: self.extras[1].length * 16 + 'px'})
2011-12-22 15:47:46 +00:00
.appendTo(self.$titlebar);
self.extras[1].forEach(function($extra) {
$extra.appendTo(self.$extras[1]);
2011-04-22 22:03:10 +00:00
});
}
2011-09-01 04:46:14 +00:00
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'
2012-01-02 14:25:04 +00:00
}).hide();
2011-04-22 22:03:10 +00:00
}
2011-09-01 04:46:14 +00:00
function clickTitlebar(e) {
if (!$(e.target).hasClass('OxButton')) {
that.gainFocus();
}
}
2011-12-22 15:47:46 +00:00
function doubleclickTitlebar(e) {
2011-04-22 22:03:10 +00:00
if (!$(e.target).hasClass('OxButton')) {
2011-12-22 15:47:46 +00:00
self.$button.trigger('click');
2011-04-22 22:03:10 +00:00
}
}
2011-09-01 04:46:14 +00:00
function toggleCollapsed(fromButton) {
2012-01-02 14:05:14 +00:00
// show/hide is needed in case the collapsed content
// grows vertically when shrinking the panel horizontally
2011-04-22 22:03:10 +00:00
var marginTop;
self.options.collapsed = !self.options.collapsed;
marginTop = self.options.collapsed ? -that.$content.height() : 0;
!fromButton && self.$button.toggle();
2012-01-02 14:25:04 +00:00
!self.options.collapsed && that.$content.css({
marginTop: -that.$content.height() + 'px'
}).show();
if (self.options.animate) {
that.$content.animate({
marginTop: marginTop + 'px'
}, 250, function() {
self.options.collapsed && that.$content.hide();
});
} else {
that.$content.css({
marginTop: marginTop + 'px'
});
2012-01-02 14:16:08 +00:00
self.options.collapsed && that.$content.hide();
}
2011-04-22 22:03:10 +00:00
that.triggerEvent('toggle', {
collapsed: self.options.collapsed
});
}
2011-09-01 04:46:14 +00:00
2011-05-16 10:49:48 +00:00
/*@
2012-05-28 15:53:21 +00:00
update <f> Update panel when in collapsed state
2011-05-16 10:49:48 +00:00
@*/
2012-05-28 15:53:21 +00:00
that.updatePanel = function() {
2011-04-22 22:03:10 +00:00
self.options.collapsed && that.$content.css({
marginTop: -that.$content.height()
});
};
2011-09-01 04:46:14 +00:00
2011-04-22 22:03:10 +00:00
return that;
2011-09-01 04:46:14 +00:00
2011-04-22 22:03:10 +00:00
};