diff --git a/ui/experiments/panels.html b/ui/experiments/panels.html new file mode 100755 index 00000000..5e4c6e29 --- /dev/null +++ b/ui/experiments/panels.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + diff --git a/ui/lib/panels.js b/ui/lib/panels.js index 72a35544..4b3b479f 100755 --- a/ui/lib/panels.js +++ b/ui/lib/panels.js @@ -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($('') .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 = $('') + var 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($(''+title+'')) - .append($('
')) + .append($('
')) if(parent != null){ if(parent.hasClass('panel-content')){ diff --git a/ui/marks.js b/ui/marks.js index 1e0eb54d..33e9ea11 100755 --- a/ui/marks.js +++ b/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: