flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-12-23 11:41:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

side panel auto-hide done...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-12-23 19:47:37 +04:00
parent a38727b6eb
commit 78191eff7e
3 changed files with 151 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
ui/css/editor.css
View File

@ -15,6 +15,12 @@
opacity: 0.95; opacity: 0.95;
overflow: visible; overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
} }
.panel summary { .panel summary {
padding-left: 3px; padding-left: 3px;
@ -49,6 +55,7 @@
background: white; background: white;
} }
.sub-panel { .sub-panel {
display: block;
margin: 3px; margin: 3px;
border: solid 1px silver; border: solid 1px silver;
box-shadow: none; box-shadow: none;
@ -80,6 +87,26 @@
opacity: 0.95; opacity: 0.95;
box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 30px -5px rgba(0, 0, 0, 0.3);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.side-panel:not(:empty):hover:after {
position: absolute;
display: inline;
content: "Double click to toggle auto-hide (now: " attr(autohide) ")";
font-size: 10px;
color: gray;
margin: 5px;
bottom: 0px;
opacity: 0.5;
}
.side-panel:not(:empty)[autohide=off],
.side-panel[autohide=on]:not(:empty):hover {
min-width: 200px;
} }
.side-panel.left { .side-panel.left {
left: 0px; left: 0px;
@ -90,13 +117,11 @@
border-left: solid 1px silver; border-left: solid 1px silver;
} }
.side-panel.auto-hide { .side-panel[autohide=on] .sub-panel {
width: 10px; display: none;
overflow: hidden;
} }
.side-panel.auto-hide:hover { .side-panel[autohide=on]:hover .sub-panel {
width: auto; display: block;
overflow: visible;
} }
@ -246,6 +271,9 @@
background: black; background: black;
box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5); box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
} }
.dark .side-panel:not(:empty):hover:after {
color: gray;
}
.dark .side-panel.left { .dark .side-panel.left {
border-right: solid 1px #333; border-right: solid 1px #333;
} }
@ -319,6 +347,9 @@
background: #333; background: #333;
box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5); box-shadow: 3px 3px 30px 0px rgba(0, 0, 0, 0.5);
} }
.gray .side-panel:not(:empty):hover:after {
color: silver;
}
.gray .side-panel.left { .gray .side-panel.left {
border-right: solid 1px #444; border-right: solid 1px #444;
} }

12
ui/experiments/panels.html
View File

@ -37,6 +37,16 @@ function toggleThemes(){
} }
} }
function toggleAutoHide(){
var elem = $('.side-panel')
if(elem.attr('autohide') == 'off'){
elem.attr('autohide', 'on')
} else {
elem.attr('autohide', 'off')
}
return false
}
$(function(){ $(function(){
var panel = makePanel('Test Panel A', true) var panel = makePanel('Test Panel A', true)
@ -72,7 +82,7 @@ $(function(){
</script> </script>
<body> <body>
<p>click image to show editor panel and <a href="javascript:toggleThemes()">here</a> to toggle theme...</p> <p>click <a href="javascript:toggleAutoHide()">here to toggle panel autohide</a> and <a href="javascript:toggleThemes()">here to toggle theme...</a></p>
</body> </body>
</html> </html>

166
ui/lib/panels.js
View File

@ -10,7 +10,7 @@
/*********************************************************************/ /*********************************************************************/
function makePanel(title, open, editable_title, keep_empty){ function makePanel(title, open, editable_title, keep_empty){
title = title == null ? '&nbsp;' : title title = title == null || title.trim() == '' ? '&nbsp;' : title
// tool panel... // tool panel...
var panel = $('<details/>') var panel = $('<details/>')
@ -33,6 +33,7 @@ function makePanel(title, open, editable_title, keep_empty){
containment: 'parent', containment: 'parent',
scroll: false, scroll: false,
// XXX this makes things quite a bit slower... // XXX this makes things quite a bit slower...
//stack: '.panel, .sub-panel',
stack: '.panel', stack: '.panel',
//snap: ".panel", //snap: ".panel",
//snapMode: "outer", //snapMode: "outer",
@ -43,13 +44,13 @@ function makePanel(title, open, editable_title, keep_empty){
position: 'absolute', position: 'absolute',
}) })
// wrapper for sub-panels... // wrapper for sub-panels...
// XXX dragging out, into another panel and back out behaves oddly: // XXX dragging out, into another panel and back out behaves oddly:
// should: // should:
// either revert or create a new panel // either revert or create a new panel
// does: // does:
// drops to last placeholder // drops to last placeholder
// XXX the helper should be above all other panels...
var content = $('<span class="panel-content content">') var content = $('<span class="panel-content content">')
.sortable({ .sortable({
forcePlaceholderSize: true, forcePlaceholderSize: true,
@ -58,15 +59,23 @@ function makePanel(title, open, editable_title, keep_empty){
zIndex: 9999, zIndex: 9999,
start: function(e, ui){ start: function(e, ui){
//console.log('start')
ui.item.data('isoutside', false) ui.item.data('isoutside', false)
ui.placeholder.height(ui.helper.outerHeight()); ui.placeholder
ui.placeholder.width(ui.helper.outerWidth()); .height(ui.helper.outerHeight())
.width(ui.helper.outerWidth())
// show all hidden panels...
$('.side-panel').each(function(){
var p = $(this)
if(p.attr('autohide') == 'on'){
p.attr('autohide', 'off')
p.data('autohide', true)
} else {
p.data('autohide', false)
}
})
}, },
// create a new panel when dropping outside of curent panel... // create a new panel when dropping outside of curent panel...
beforeStop: function(e, ui){ beforeStop: function(e, ui){
//console.log('stop')
var c = 0 var c = 0
// do this only when dropping outside the panel... // do this only when dropping outside the panel...
@ -75,11 +84,11 @@ function makePanel(title, open, editable_title, keep_empty){
// NOTE: 2 because we are taking into account // NOTE: 2 because we are taking into account
// the placeholders... // the placeholders...
&& panel.find('.sub-panel').length > 2){ && panel.find('.sub-panel').length > 2){
c = 1
// compensate for removed item which is still in the // compensate for removed item which is still in the
// panel when we count it... // panel when we count it...
// ...this is likely to the fact that we jquery-ui did // ...this is likely to the fact that we jquery-ui did
// not cleanup yet // not cleanup yet
c = 1
var new_panel = makePanel() var new_panel = makePanel()
.css(ui.offset) .css(ui.offset)
.appendTo(panel.parent()) .appendTo(panel.parent())
@ -95,14 +104,20 @@ function makePanel(title, open, editable_title, keep_empty){
.remove() .remove()
} }
// reset the auto-hide of the side panels...
$('.side-panel').each(function(){
var p = $(this)
if(p.data('autohide')){
p.attr('autohide', 'on')
}
})
ui.item.data('isoutside', false) ui.item.data('isoutside', false)
}, },
over: function(e, ui){ over: function(e, ui){
//console.log('over')
ui.item.data('isoutside', false) ui.item.data('isoutside', false)
}, },
out: function(e, ui){ out: function(e, ui){
//console.log('out')
ui.item.data('isoutside', true) ui.item.data('isoutside', true)
}, },
}) })
@ -111,8 +126,85 @@ function makePanel(title, open, editable_title, keep_empty){
} }
// side can be:
// - left
// - right
// XXX in part this is exactly the same as makePanel
function makeSidePanel(side){
var panel = $('.side-panel.'+side)
// only one panel from each side can exist...
if(panel.length != 0){
return panel
}
panel = $('<div/>')
.addClass('side-panel panel-content ' + side)
.sortable({
forcePlaceholderSize: true,
opacity: 0.7,
connectWith: '.panel-content',
zIndex: 9999,
start: function(e, ui){
ui.item.data('isoutside', false)
ui.placeholder
.height(ui.helper.outerHeight())
.width(ui.helper.outerWidth())
// show all hidden panels...
$('.side-panel').each(function(){
var p = $(this)
if(p.attr('autohide') == 'on'){
p.attr('autohide', 'off')
p.data('autohide', true)
} else {
p.data('autohide', false)
}
})
},
// create a new panel when dropping outside of curent panel...
beforeStop: function(e, ui){
// do this only when dropping outside the panel...
if(ui.item.data('isoutside')){
var new_panel = makePanel()
.css(ui.offset)
.appendTo(panel.parent())
new_panel.find('.panel-content')
.append(ui.item)
panel.trigger('newPanel', [new_panel])
}
// reset the auto-hide of the side panels...
$('.side-panel').each(function(){
var p = $(this)
if(p.data('autohide')){
p.attr('autohide', 'on')
}
})
ui.item.data('isoutside', false)
},
over: function(e, ui){
ui.item.data('isoutside', false)
},
out: function(e, ui){
ui.item.data('isoutside', true)
},
})
.dblclick(function(e){
var elem = $(this)
if(elem.attr('autohide') == 'off'){
elem.attr('autohide', 'on')
} else {
elem.attr('autohide', 'off')
}
return false
})
.attr('autohide', 'off')
return panel
}
function makeSubPanel(title, open, parent){ function makeSubPanel(title, open, parent){
title = title == null ? '&nbsp;' : title title = title == null || title.trim() == '' ? '&nbsp;' : title
var sub_panel = $('<details/>') var sub_panel = $('<details/>')
.addClass('sub-panel noScroll') .addClass('sub-panel noScroll')
@ -133,57 +225,5 @@ function makeSubPanel(title, open, parent){
// side can be:
// - left
// - right
function makeSidePanel(side){
var panel = $('<div/>')
.addClass('side-panel panel-content ' + side)
.sortable({
forcePlaceholderSize: true,
opacity: 0.7,
connectWith: '.panel-content',
zIndex: 9999,
start: function(e, ui){
//console.log('start')
ui.item.data('isoutside', false)
ui.placeholder.height(ui.helper.outerHeight());
ui.placeholder.width(ui.helper.outerWidth());
},
// create a new panel when dropping outside of curent panel...
beforeStop: function(e, ui){
//console.log('stop')
// do this only when dropping outside the panel...
if(ui.item.data('isoutside')){
// compensate for removed item which is still in the
// panel when we count it...
// ...this is likely to the fact that we jquery-ui did
// not cleanup yet
var new_panel = makePanel()
.css(ui.offset)
.appendTo(panel.parent())
new_panel.find('.panel-content')
.append(ui.item)
panel.trigger('newPanel', [new_panel])
}
ui.item.data('isoutside', false)
},
over: function(e, ui){
//console.log('over')
ui.item.data('isoutside', false)
},
out: function(e, ui){
//console.log('out')
ui.item.data('isoutside', true)
},
})
return panel
}
/********************************************************************** /**********************************************************************
* vim:set ts=4 sw=4 : */ * vim:set ts=4 sw=4 : */