flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-30 19:00:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

added sub-panel resizable option...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-12-26 23:49:16 +04:00
parent fd6271d00c
commit 04044785ff
3 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui/css/editor.css
View File

@ -44,7 +44,8 @@
} }
.panel .panel-content { .panel .panel-content {
display: block; display: block;
min-height: 30px;
min-height: 15px;
} }
.sub-panel, .sub-panel,
.panel button, .panel button,
@ -70,7 +71,8 @@
*/ */
} }
.sub-panel .sub-panel-content { .sub-panel .sub-panel-content {
margin: 10px; margin-left: 10px;
margin-right: 10px;
} }
.panel button:active, .panel button:active,

15
ui/experiments/panels.html
View File

@ -1,5 +1,6 @@
<html> <html>
<link rel="stylesheet" href="../css/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="../css/editor.css"> <link rel="stylesheet" type="text/css" href="../css/editor.css">
<style> <style>
@ -15,7 +16,6 @@ body.gray {
color: silver; color: silver;
} }
</style> </style>
<script src="../ext-lib/jquery.js"></script> <script src="../ext-lib/jquery.js"></script>
@ -56,18 +56,11 @@ $(function(){
}) })
makeSubPanel('Test Sub Panel A', true, panel) makeSubPanel('Test Sub Panel A', $('<h1>Panel A</h1>'), panel, true, true)
.find('.content')
.html('<h1>Panel A</h1>')
makeSubPanel('Test Sub Panel B', true, panel) makeSubPanel('Test Sub Panel B', $('<h2>Panel B</h2>'), panel, true)
.find('.content')
.html('<h2>Panel B</h2>')
makeSubPanel('Test Sub Panel C', true, panel)
.find('.content')
.html('<h3>Panel C</h3>')
makeSubPanel('Test Sub Panel C', $('<h3>Panel C</h3>'), panel, false)
$('body') $('body')

35
ui/lib/panels.js
View File

@ -69,7 +69,9 @@ function wrapWithPanel(panel, parent, offset){
// close the panel and fire close events on it and all sub-panels... // close the panel and fire close events on it and all sub-panels...
// //
function closePanel(panel, skip_sub_panel_events){ function closePanel(panel, skip_sub_panel_events){
skip_sub_panel_events = skip_sub_panel_events == null ? false : true skip_sub_panel_events = skip_sub_panel_events == null
? false
: skip_sub_panel_events
if(!skip_sub_panel_events){ if(!skip_sub_panel_events){
panel.find('.sub-panel') panel.find('.sub-panel')
.trigger('panelClosing') .trigger('panelClosing')
@ -246,14 +248,25 @@ function makeSidePanel(side, autohide){
} }
function makeSubPanel(title, open, parent){ //function makeSubPanel(title, open, parent, content_resizable){
function makeSubPanel(title, content, parent, open, content_resizable){
title = title == null || title.trim() == '' ? '&nbsp;' : title title = title == null || title.trim() == '' ? '&nbsp;' : title
open = open == null ? true : open
content_resizable = content_resizable == null
? false
: content_resizable
var content_elem = $('<div class="sub-panel-content content"/>')
if(content != null){
content_elem
.append(content)
}
var sub_panel = $('<details/>') var sub_panel = $('<details/>')
.addClass('sub-panel noScroll') .addClass('sub-panel noScroll')
.prop('open', open == null ? true : open) .prop('open', open)
.append($('<summary>'+title+'</summary>')) .append($('<summary>'+title+'</summary>'))
.append($('<div class="sub-panel-content content"/>')) .append(content_elem)
if(parent != null){ if(parent != null){
if(parent.hasClass('panel-content')){ if(parent.hasClass('panel-content')){
@ -263,6 +276,20 @@ function makeSubPanel(title, open, parent){
} }
} }
if(content_resizable){
// NOTE: we are wrapping the content into a div so as to make
// the fact that the panel is resizable completely
// transparent for the user -- no need to be aware of the
// sizing elements, etc.
content_elem.wrap($('<div>')).parent()
.resizable({
handles: 's',
})
.css({
overflow: 'hidden',
})
}
return sub_panel return sub_panel
} }