mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-12-18 17:21:39 +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
|
||||
|
||||
// tool panel...
|
||||
@ -20,7 +20,6 @@ function makePanel(title, open, editable_title){
|
||||
.attr({
|
||||
contenteditable: editable_title == null ? 'false' : 'true',
|
||||
})
|
||||
// XXX add a '+' button to create a new panel...
|
||||
.append($('<span/>')
|
||||
.addClass('close-button')
|
||||
.click(function(){
|
||||
@ -35,12 +34,19 @@ function makePanel(title, open, editable_title){
|
||||
scroll: false,
|
||||
// XXX this makes things quite a bit slower...
|
||||
stack: '.panel',
|
||||
//snap: ".panel",
|
||||
//snapMode: "outer",
|
||||
})
|
||||
.css({
|
||||
// for some reason this is overwritten by jquery-ui to 'relative'...
|
||||
//position: '',
|
||||
position: 'absolute',
|
||||
})
|
||||
|
||||
var _outside = false
|
||||
|
||||
// wrapper for sub-panels...
|
||||
var content = $('<span class="panel-content">')
|
||||
var content = $('<span class="panel-content content">')
|
||||
.sortable({
|
||||
forcePlaceholderSize: true,
|
||||
opacity: 0.7,
|
||||
@ -48,6 +54,7 @@ function makePanel(title, open, editable_title){
|
||||
zIndex: 9999,
|
||||
|
||||
start: function(e, ui){
|
||||
console.log('start (outside: '+_outside+')')
|
||||
_outside = false
|
||||
ui.placeholder.height(ui.helper.outerHeight());
|
||||
ui.placeholder.width(ui.helper.outerWidth());
|
||||
@ -55,21 +62,31 @@ function makePanel(title, open, editable_title){
|
||||
// XXX this is not done...
|
||||
// create a new panel when dropping outside of curent panel...
|
||||
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){
|
||||
makePanel()
|
||||
// XXX adjust this to scale...
|
||||
.css(ui.position)
|
||||
// XXX adjust this to parent offset...
|
||||
.css(ui.offset)
|
||||
.appendTo(panel.parent())
|
||||
.find('.panel-content')
|
||||
.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???
|
||||
over: function(e, ui){
|
||||
console.log('over')
|
||||
_outside = false
|
||||
},
|
||||
out: function(e, ui){
|
||||
console.log('out')
|
||||
_outside = true
|
||||
},
|
||||
})
|
||||
@ -85,7 +102,7 @@ function makeSubPanel(title, open, parent){
|
||||
.addClass('sub-panel noScroll')
|
||||
.prop('open', open == null ? true : open)
|
||||
.append($('<summary>'+title+'</summary>'))
|
||||
.append($('<div class="sub-panel-content"/>'))
|
||||
.append($('<div class="sub-panel-content content"/>'))
|
||||
|
||||
if(parent != null){
|
||||
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: MARKED may contain both gids that are not loaded and that do
|
||||
// not exist, as there is no way to distinguish between the two
|
||||
@ -102,18 +118,8 @@ var toggleMarkesView = createCSSClassToggler(
|
||||
* Actions
|
||||
*/
|
||||
|
||||
var toggleImageMark = createCSSClassToggler(
|
||||
'.current.image',
|
||||
'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])
|
||||
})
|
||||
|
||||
var toggleImageMark = makeMarkToggler('marked', 'selected', 'togglingMark')
|
||||
|
||||
|
||||
// mode can be:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user