mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-02 04:10:11 +00:00
side panel auto-hide done...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
a38727b6eb
commit
78191eff7e
@ -15,6 +15,12 @@
|
||||
opacity: 0.95;
|
||||
|
||||
overflow: visible;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.panel summary {
|
||||
padding-left: 3px;
|
||||
@ -49,6 +55,7 @@
|
||||
background: white;
|
||||
}
|
||||
.sub-panel {
|
||||
display: block;
|
||||
margin: 3px;
|
||||
border: solid 1px silver;
|
||||
box-shadow: none;
|
||||
@ -80,6 +87,26 @@
|
||||
opacity: 0.95;
|
||||
|
||||
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 {
|
||||
left: 0px;
|
||||
@ -90,13 +117,11 @@
|
||||
border-left: solid 1px silver;
|
||||
}
|
||||
|
||||
.side-panel.auto-hide {
|
||||
width: 10px;
|
||||
overflow: hidden;
|
||||
.side-panel[autohide=on] .sub-panel {
|
||||
display: none;
|
||||
}
|
||||
.side-panel.auto-hide:hover {
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
.side-panel[autohide=on]:hover .sub-panel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@ -246,6 +271,9 @@
|
||||
background: black;
|
||||
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 {
|
||||
border-right: solid 1px #333;
|
||||
}
|
||||
@ -319,6 +347,9 @@
|
||||
background: #333;
|
||||
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 {
|
||||
border-right: solid 1px #444;
|
||||
}
|
||||
|
||||
@ -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(){
|
||||
|
||||
var panel = makePanel('Test Panel A', true)
|
||||
@ -72,7 +82,7 @@ $(function(){
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</html>
|
||||
|
||||
166
ui/lib/panels.js
166
ui/lib/panels.js
@ -10,7 +10,7 @@
|
||||
/*********************************************************************/
|
||||
|
||||
function makePanel(title, open, editable_title, keep_empty){
|
||||
title = title == null ? ' ' : title
|
||||
title = title == null || title.trim() == '' ? ' ' : title
|
||||
|
||||
// tool panel...
|
||||
var panel = $('<details/>')
|
||||
@ -33,6 +33,7 @@ function makePanel(title, open, editable_title, keep_empty){
|
||||
containment: 'parent',
|
||||
scroll: false,
|
||||
// XXX this makes things quite a bit slower...
|
||||
//stack: '.panel, .sub-panel',
|
||||
stack: '.panel',
|
||||
//snap: ".panel",
|
||||
//snapMode: "outer",
|
||||
@ -43,13 +44,13 @@ function makePanel(title, open, editable_title, keep_empty){
|
||||
position: 'absolute',
|
||||
})
|
||||
|
||||
|
||||
// wrapper for sub-panels...
|
||||
// XXX dragging out, into another panel and back out behaves oddly:
|
||||
// should:
|
||||
// either revert or create a new panel
|
||||
// does:
|
||||
// drops to last placeholder
|
||||
// XXX the helper should be above all other panels...
|
||||
var content = $('<span class="panel-content content">')
|
||||
.sortable({
|
||||
forcePlaceholderSize: true,
|
||||
@ -58,15 +59,23 @@ function makePanel(title, open, editable_title, keep_empty){
|
||||
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());
|
||||
|
||||
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){
|
||||
//console.log('stop')
|
||||
var c = 0
|
||||
|
||||
// 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
|
||||
// the placeholders...
|
||||
&& panel.find('.sub-panel').length > 2){
|
||||
c = 1
|
||||
// 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
|
||||
c = 1
|
||||
var new_panel = makePanel()
|
||||
.css(ui.offset)
|
||||
.appendTo(panel.parent())
|
||||
@ -95,14 +104,20 @@ function makePanel(title, open, editable_title, keep_empty){
|
||||
.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)
|
||||
},
|
||||
over: function(e, ui){
|
||||
//console.log('over')
|
||||
ui.item.data('isoutside', false)
|
||||
},
|
||||
out: function(e, ui){
|
||||
//console.log('out')
|
||||
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){
|
||||
title = title == null ? ' ' : title
|
||||
title = title == null || title.trim() == '' ? ' ' : title
|
||||
|
||||
var sub_panel = $('<details/>')
|
||||
.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 : */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user