0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

collapse panel: add expand/collapse keyboard shortcuts

Browse source
This commit is contained in:
rlx 2013-08-01 11:28:14 +00:00
parent e5e8412c3a
commit 3e78580c91
1 changed files with 21 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
source/Ox.UI/js/Panel/CollapsePanel.js
View file

@ -28,20 +28,28 @@ Ox.CollapsePanel = function(options, self) {
collapsed: function() {
// will be toggled again in toggleCollapsed
self.options.collapsed = !self.options.collapsed;
self.$button.toggle();
toggleCollapsed();
},
title: function() {
self.$title.html(self.options.title);
}
})
.addClass('OxPanel OxCollapsePanel');
.addClass('OxPanel OxCollapsePanel')
.bindEvent({
key_left: function() {
!self.options.collapsed && toggleCollapsed();
},
key_right: function() {
self.options.collapsed && toggleCollapsed();
}
});
self.$titlebar = Ox.Bar({
orientation: 'horizontal',
size: self.options.size
})
.bindEvent({
anyclick: clickTitlebar,
doubleclick: doubleclickTitlebar
})
.appendTo(that);
@ -56,7 +64,9 @@ Ox.CollapsePanel = function(options, self) {
]
})
.bindEvent({
click: toggleCollapsed
click: function() {
toggleCollapsed(true);
}
})
.appendTo(self.$titlebar);
@ -86,18 +96,25 @@ Ox.CollapsePanel = function(options, self) {
}).hide();
}
function clickTitlebar(e) {
if (!$(e.target).hasClass('OxButton')) {
that.gainFocus();
}
}
function doubleclickTitlebar(e) {
if (!$(e.target).hasClass('OxButton')) {
self.$button.trigger('click');
}
}
function toggleCollapsed() {
function toggleCollapsed(fromButton) {
// show/hide is needed in case the collapsed content
// grows vertically when shrinking the panel horizontally
var marginTop;
self.options.collapsed = !self.options.collapsed;
marginTop = self.options.collapsed ? -that.$content.height() : 0;
!fromButton && self.$button.toggle();
!self.options.collapsed && that.$content.css({
marginTop: -that.$content.height() + 'px'
}).show();