made close button auto hide + some unification of panel mechanics...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2014-01-06 07:37:14 +04:00
parent db8ac24565
commit 45be21d9ce
2 changed files with 37 additions and 9 deletions

View File

@ -31,17 +31,31 @@
.sub-panel summary::-webkit-details-marker {
color: gray;
}
.panel .close-button {
.panel .close-button,
.sub-panel .close-button {
display: inline-block;
position: absolute;
right: 5px;
cursor: hand;
opacity: 0.5;
}
.panel .close-button:hover {
.panel .close-button:hover,
.sub-panel .close-button:hover {
font-weight: bold;
color: red;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}
.sub-panel .close-button {
right: 8px;
}
.panel .close-button,
.sub-panel .close-button {
visibility: hidden;
}
.panel:hover>summary .close-button,
.sub-panel:hover .close-button {
visibility: visible;
}
.panel .panel-content {
display: block;

View File

@ -199,6 +199,12 @@ function makePanel(title, parent, open, keep_empty, close_button){
var panel = $('<details/>')
.prop('open', open == null ? true : open)
.addClass('panel noScroll')
.on('subPanelRemoved', function(){
// remove the panel when it runs out of sub-panels...
if(!keep_empty && panel.find('.sub-panel').length <= 0){
removePanel(panel, true)
}
})
.append((close_button
? $('<summary>'+title+'</summary>')
.append($('<span/>')
@ -254,7 +260,7 @@ function makePanel(title, parent, open, keep_empty, close_button){
// - create a new panel when dropping outside of curent panel...
// - remove empty panels...
beforeStop: function(e, ui){
var c = 0
//var c = 0
// do this only when dropping outside the panel...
//if(ui.placeholder.css('display') == 'none'
@ -267,14 +273,17 @@ function makePanel(title, parent, open, keep_empty, close_button){
// panel when we count it...
// ...this is likely to the fact that we jquery-ui did
// not cleanup yet
c = 1
//c = 1
wrapWithPanel(ui.item, panel.parent(), ui.offset)
}
// remove the panel when it runs out of sub-panels...
if(!keep_empty && panel.find('.sub-panel').length-c <= 0){
removePanel(panel, true)
}
//if(!keep_empty && panel.find('.sub-panel').length-c <= 0){
// removePanel(panel, true)
//}
panel.trigger('subPanelRemoved')
_resetSidePanels()
_resetSortedElem(ui.item)
.data('isoutside', false)
@ -387,7 +396,7 @@ function makeSidePanel(side, parent, autohide){
function makeSubPanel(title, content, parent, open, content_resizable, close_button){
title = title == null || title.trim() == '' ? '&nbsp;' : title
parent = parent == null ? makePanel() : parent
close_button = close_button == null ? false : close_button
close_button = close_button == null ? true : close_button
open = open == null ? true : open
content_resizable = content_resizable == null
@ -408,7 +417,12 @@ function makeSubPanel(title, content, parent, open, content_resizable, close_but
.append($('<span/>')
.addClass('close-button')
.click(function(){
removePanel(panel)
var parent = sub_panel.parents('.panel').first()
removePanel(sub_panel)
// XXX need to notify the parent...
// ...so as to enable it to remove itself
// if no sub-panels left...
parent.trigger('subPanelRemoved')
return false
})
.html('&times;'))