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