mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-12-19 17:51:41 +00:00
started refining the panel lib/api...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
f4613dc662
commit
3eebfbdbec
43
ui/experiments/panels.html
Executable file
43
ui/experiments/panels.html
Executable file
@ -0,0 +1,43 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/editor.css">
|
||||||
|
|
||||||
|
<script src="../ext-lib/jquery.js"></script>
|
||||||
|
<script src="../ext-lib/jquery-ui.js"></script>
|
||||||
|
<script src="../lib/panels.js"></script>
|
||||||
|
<script src="../lib/editor.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
$(function(){
|
||||||
|
|
||||||
|
var panel = makePanel('Test Panel A', true)
|
||||||
|
|
||||||
|
|
||||||
|
makeSubPanel('Test Sub Panel A', true, panel)
|
||||||
|
.find('.content')
|
||||||
|
.html('<h1>Panel A</h1>')
|
||||||
|
|
||||||
|
makeSubPanel('Test Sub Panel B', true, panel)
|
||||||
|
.find('.content')
|
||||||
|
.html('<h2>Panel B</h2>')
|
||||||
|
|
||||||
|
makeSubPanel('Test Sub Panel C', true, panel)
|
||||||
|
.find('.content')
|
||||||
|
.html('<h3>Panel C</h3>')
|
||||||
|
|
||||||
|
|
||||||
|
$('body')
|
||||||
|
.append(panel)
|
||||||
|
//.append(makePanel('Test Panel B', true))
|
||||||
|
//.append(makePanel('Test Panel C', true))
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<!-- vim:set ts=4 sw=4 : -->
|
||||||
@ -9,7 +9,7 @@
|
|||||||
|
|
||||||
/*********************************************************************/
|
/*********************************************************************/
|
||||||
|
|
||||||
function makePanel(title, open, editable_title){
|
function makePanel(title, open, editable_title, remove_on_empty){
|
||||||
title = title == null ? ' ' : title
|
title = title == null ? ' ' : title
|
||||||
|
|
||||||
// tool panel...
|
// tool panel...
|
||||||
@ -20,7 +20,6 @@ function makePanel(title, open, editable_title){
|
|||||||
.attr({
|
.attr({
|
||||||
contenteditable: editable_title == null ? 'false' : 'true',
|
contenteditable: editable_title == null ? 'false' : 'true',
|
||||||
})
|
})
|
||||||
// XXX add a '+' button to create a new panel...
|
|
||||||
.append($('<span/>')
|
.append($('<span/>')
|
||||||
.addClass('close-button')
|
.addClass('close-button')
|
||||||
.click(function(){
|
.click(function(){
|
||||||
@ -35,12 +34,19 @@ function makePanel(title, open, editable_title){
|
|||||||
scroll: false,
|
scroll: false,
|
||||||
// XXX this makes things quite a bit slower...
|
// XXX this makes things quite a bit slower...
|
||||||
stack: '.panel',
|
stack: '.panel',
|
||||||
|
//snap: ".panel",
|
||||||
|
//snapMode: "outer",
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
// for some reason this is overwritten by jquery-ui to 'relative'...
|
||||||
|
//position: '',
|
||||||
|
position: 'absolute',
|
||||||
})
|
})
|
||||||
|
|
||||||
var _outside = false
|
var _outside = false
|
||||||
|
|
||||||
// wrapper for sub-panels...
|
// wrapper for sub-panels...
|
||||||
var content = $('<span class="panel-content">')
|
var content = $('<span class="panel-content content">')
|
||||||
.sortable({
|
.sortable({
|
||||||
forcePlaceholderSize: true,
|
forcePlaceholderSize: true,
|
||||||
opacity: 0.7,
|
opacity: 0.7,
|
||||||
@ -48,6 +54,7 @@ function makePanel(title, open, editable_title){
|
|||||||
zIndex: 9999,
|
zIndex: 9999,
|
||||||
|
|
||||||
start: function(e, ui){
|
start: function(e, ui){
|
||||||
|
console.log('start (outside: '+_outside+')')
|
||||||
_outside = false
|
_outside = false
|
||||||
ui.placeholder.height(ui.helper.outerHeight());
|
ui.placeholder.height(ui.helper.outerHeight());
|
||||||
ui.placeholder.width(ui.helper.outerWidth());
|
ui.placeholder.width(ui.helper.outerWidth());
|
||||||
@ -55,21 +62,31 @@ function makePanel(title, open, editable_title){
|
|||||||
// XXX this is not done...
|
// XXX this is not done...
|
||||||
// create a new panel when dropping outside of curent panel...
|
// create a new panel when dropping outside of curent panel...
|
||||||
stop: function(e, ui){
|
stop: function(e, ui){
|
||||||
// do this only when dropping putside the panel...
|
console.log('stop (outside: '+_outside+')')
|
||||||
|
// do this only when dropping outside the panel...
|
||||||
if(_outside){
|
if(_outside){
|
||||||
makePanel()
|
makePanel()
|
||||||
// XXX adjust this to scale...
|
// XXX adjust this to scale...
|
||||||
.css(ui.position)
|
// XXX adjust this to parent offset...
|
||||||
|
.css(ui.offset)
|
||||||
.appendTo(panel.parent())
|
.appendTo(panel.parent())
|
||||||
.find('.panel-content')
|
.find('.panel-content')
|
||||||
.append(ui.item)
|
.append(ui.item)
|
||||||
|
_outside = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove the panel when it runs out of sub-panels...
|
||||||
|
if(remove_on_empty && panel.find('.sub-panel').length == 0){
|
||||||
|
panel.remove()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// XXX are these the correct events???
|
// XXX are these the correct events???
|
||||||
over: function(e, ui){
|
over: function(e, ui){
|
||||||
|
console.log('over')
|
||||||
_outside = false
|
_outside = false
|
||||||
},
|
},
|
||||||
out: function(e, ui){
|
out: function(e, ui){
|
||||||
|
console.log('out')
|
||||||
_outside = true
|
_outside = true
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
@ -85,7 +102,7 @@ function makeSubPanel(title, open, parent){
|
|||||||
.addClass('sub-panel noScroll')
|
.addClass('sub-panel noScroll')
|
||||||
.prop('open', open == null ? true : open)
|
.prop('open', open == null ? true : open)
|
||||||
.append($('<summary>'+title+'</summary>'))
|
.append($('<summary>'+title+'</summary>'))
|
||||||
.append($('<div class="sub-panel-content"/>'))
|
.append($('<div class="sub-panel-content content"/>'))
|
||||||
|
|
||||||
if(parent != null){
|
if(parent != null){
|
||||||
if(parent.hasClass('panel-content')){
|
if(parent.hasClass('panel-content')){
|
||||||
|
|||||||
30
ui/marks.js
30
ui/marks.js
@ -38,6 +38,22 @@ function _removeMark(cls, gid, image){
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function makeMarkToggler(img_class, mark_class, evt_name){
|
||||||
|
return createCSSClassToggler(
|
||||||
|
'.current.image',
|
||||||
|
img_class,
|
||||||
|
function(action, elem){
|
||||||
|
toggleMarkesView('on')
|
||||||
|
if(action == 'on'){
|
||||||
|
_addMark(mark_class, getImageGID(elem), elem)
|
||||||
|
} else {
|
||||||
|
_removeMark(mark_class, getImageGID(elem), elem)
|
||||||
|
}
|
||||||
|
$('.viewer').trigger(evt_name, [elem, action])
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// NOTE: to disable MARKED cleanout set no_cleanout_marks to true.
|
// NOTE: to disable MARKED cleanout set no_cleanout_marks to true.
|
||||||
// NOTE: MARKED may contain both gids that are not loaded and that do
|
// NOTE: MARKED may contain both gids that are not loaded and that do
|
||||||
// not exist, as there is no way to distinguish between the two
|
// not exist, as there is no way to distinguish between the two
|
||||||
@ -102,18 +118,8 @@ var toggleMarkesView = createCSSClassToggler(
|
|||||||
* Actions
|
* Actions
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var toggleImageMark = createCSSClassToggler(
|
|
||||||
'.current.image',
|
var toggleImageMark = makeMarkToggler('marked', 'selected', 'togglingMark')
|
||||||
'marked',
|
|
||||||
function(action, elem){
|
|
||||||
toggleMarkesView('on')
|
|
||||||
if(action == 'on'){
|
|
||||||
_addMark('selected', getImageGID(elem), elem)
|
|
||||||
} else {
|
|
||||||
_removeMark('selected', getImageGID(elem), elem)
|
|
||||||
}
|
|
||||||
$('.viewer').trigger('togglingMark', [elem, action])
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
// mode can be:
|
// mode can be:
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user