mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
new panel API (partial), started move to new panel API, not done yet...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
667b3dfde8
commit
8d3b113696
17
ui/editor.js
17
ui/editor.js
@ -48,7 +48,10 @@ var toggleEditor = createCSSClassToggler(
|
||||
$('.viewer')
|
||||
.append(makeSidePanel('left'))
|
||||
.append(makeSidePanel('right'))
|
||||
.append(_setupPanel(makeEditorControls('.current.image'))
|
||||
.append(_setupPanel(openGroupedPanels([
|
||||
'Edit: Filters',
|
||||
'Edit: Snapshots'
|
||||
]))
|
||||
//.draggable('option', 'snap', '.viewer')
|
||||
.css({
|
||||
// prevent the editor from moving under
|
||||
@ -58,16 +61,8 @@ var toggleEditor = createCSSClassToggler(
|
||||
top: '50px',
|
||||
left: '5px',
|
||||
}))
|
||||
// XXX add handlers for saving data to images...
|
||||
// XXX
|
||||
// setup the event to update the editor...
|
||||
.on('focusingImage', function(){
|
||||
if(toggleEditor('?') == 'on'){
|
||||
// XXX save previous settings if changes...
|
||||
// XXX
|
||||
reloadControls('.current.image')
|
||||
}
|
||||
})
|
||||
// XXX add handlers for saving data to images...
|
||||
// XXX
|
||||
// show the editor...
|
||||
} else {
|
||||
ed.show()
|
||||
|
||||
@ -69,9 +69,11 @@ $(function(){
|
||||
makeSubPanel('Test Sub Panel B', $('<h2>Panel B</h2>'), panel, true)
|
||||
makeSubPanel('Test Sub Panel C', $('<h3>Panel C</h3>'), panel, false)
|
||||
|
||||
|
||||
makeFilterPanel(panel, '.moo')
|
||||
makeSnapshotsPanel(panel, '.moo')
|
||||
openGroupedPanels([
|
||||
'Edit: Filters',
|
||||
'Edit: Snapshots'
|
||||
],
|
||||
panel)
|
||||
|
||||
makeSubPanel('Test Sub Panel D', $('<h2>Panel D</h2>'))
|
||||
.parents('.panel')
|
||||
@ -81,7 +83,7 @@ $(function(){
|
||||
})
|
||||
|
||||
|
||||
makePanelController('Test Sub Panel E',
|
||||
Panel('Test Sub Panel E',
|
||||
function(){
|
||||
return $('<h1>Panel E</h1>')
|
||||
},
|
||||
|
||||
188
ui/lib/editor.js
188
ui/lib/editor.js
@ -248,94 +248,122 @@ function makeLogRange(text, filter, target){
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* Panels...
|
||||
* Constructors...
|
||||
*/
|
||||
|
||||
function makeFilterPanel(parent, target, open){
|
||||
return makeSubPanel('Edit: Filters',
|
||||
$('<div>')
|
||||
.append($('<div class="filter-list"/>')
|
||||
//.append(makeLogRange('Gamma:', 'gamma', target))
|
||||
.append(makeLogRange('Brightness:', 'brightness', target))
|
||||
.append(makeLogRange('Contrast:', 'contrast', target))
|
||||
.append(makeLogRange('Saturation:', 'saturate', target))
|
||||
.append(makeAbsRange('Hue:', 'hue-rotate', target,
|
||||
-180, 180, 0, 0.5, function(v){ return v+'deg' }))
|
||||
.append(makeAbsRange('Grayscale:', 'grayscale', target))
|
||||
.append(makeAbsRange('Invert:', 'invert', target))
|
||||
.append(makeAbsRange('Sepia:', 'sepia', target))
|
||||
.sortable({
|
||||
axis: 'y',
|
||||
})
|
||||
.on('sortstop', function(){
|
||||
// update image filter order...
|
||||
var img = $(target)
|
||||
img.css('-webkit-filter', sortFilterStr(img.css('-webkit-filter')))
|
||||
}))
|
||||
.append($('<hr>'))
|
||||
.append('<span>Reset: <span>')
|
||||
.append($('<button>Values</button>')
|
||||
.click(function(){
|
||||
$('.reset').click()
|
||||
}))
|
||||
.append($('<button>Order</button>')
|
||||
.click(function(){
|
||||
sortFilterSliders(DEFAULT_FILTER_ORDER)
|
||||
}))
|
||||
.append($('<button>All</button>')
|
||||
.click(function(){
|
||||
$('.reset').click()
|
||||
sortFilterSliders(DEFAULT_FILTER_ORDER)
|
||||
}))
|
||||
.children(),
|
||||
parent, open)
|
||||
}
|
||||
|
||||
function makeSnapshotsPanel(parent, target, open){
|
||||
return makeSubPanel('Edit: Snapshots',
|
||||
$('<div>')
|
||||
.append($('<div class="states"/>'))
|
||||
.append($('<hr>'))
|
||||
.append($('<button/>')
|
||||
.click(function(){ saveSnapshot(target) })
|
||||
.text('Save'))
|
||||
.append($('<button/>')
|
||||
.addClass('remove-state-drop-target')
|
||||
.click(function(){ clearSnapshots() })
|
||||
.text('Clear')
|
||||
.droppable({
|
||||
accept: '.state',
|
||||
activate: function(e, ui){
|
||||
$(this).text('Delete')
|
||||
},
|
||||
deactivate: function(e, ui){
|
||||
$(this).text('Clear')
|
||||
},
|
||||
drop: function(e, ui){
|
||||
ui.helper.remove()
|
||||
}
|
||||
|
||||
}))
|
||||
.children(),
|
||||
parent, open)
|
||||
function buildFilterUI(target){
|
||||
return $('<div>')
|
||||
.append($('<div class="filter-list"/>')
|
||||
//.append(makeLogRange('Gamma:', 'gamma', target))
|
||||
.append(makeLogRange('Brightness:', 'brightness', target))
|
||||
.append(makeLogRange('Contrast:', 'contrast', target))
|
||||
.append(makeLogRange('Saturation:', 'saturate', target))
|
||||
.append(makeAbsRange('Hue:', 'hue-rotate', target,
|
||||
-180, 180, 0, 0.5, function(v){ return v+'deg' }))
|
||||
.append(makeAbsRange('Grayscale:', 'grayscale', target))
|
||||
.append(makeAbsRange('Invert:', 'invert', target))
|
||||
.append(makeAbsRange('Sepia:', 'sepia', target))
|
||||
.sortable({
|
||||
axis: 'y',
|
||||
})
|
||||
.on('sortstop', function(){
|
||||
// update image filter order...
|
||||
var img = $(target)
|
||||
img.css('-webkit-filter', sortFilterStr(img.css('-webkit-filter')))
|
||||
}))
|
||||
.append($('<hr>'))
|
||||
.append('<span>Reset: <span>')
|
||||
.append($('<button>Values</button>')
|
||||
.click(function(){
|
||||
$('.reset').click()
|
||||
}))
|
||||
.append($('<button>Order</button>')
|
||||
.click(function(){
|
||||
sortFilterSliders(DEFAULT_FILTER_ORDER)
|
||||
}))
|
||||
.append($('<button>All</button>')
|
||||
.click(function(){
|
||||
$('.reset').click()
|
||||
sortFilterSliders(DEFAULT_FILTER_ORDER)
|
||||
}))
|
||||
.children()
|
||||
}
|
||||
|
||||
|
||||
// XXX add panel update events to help save settings...
|
||||
function makeEditorControls(target){
|
||||
|
||||
var panel = makePanel()
|
||||
|
||||
// filters...
|
||||
makeFilterPanel(panel, target)
|
||||
|
||||
// snapshots...
|
||||
makeSnapshotsPanel(panel, target)
|
||||
|
||||
return panel
|
||||
function buildSnapshotsUI(target){
|
||||
return $('<div>')
|
||||
.append($('<div class="states"/>'))
|
||||
.append($('<hr>'))
|
||||
.append($('<button/>')
|
||||
.click(function(){ saveSnapshot(target) })
|
||||
.text('Save'))
|
||||
.append($('<button/>')
|
||||
.addClass('remove-state-drop-target')
|
||||
.click(function(){ clearSnapshots() })
|
||||
.text('Clear')
|
||||
.droppable({
|
||||
accept: '.state',
|
||||
activate: function(e, ui){
|
||||
$(this).text('Delete')
|
||||
},
|
||||
deactivate: function(e, ui){
|
||||
$(this).text('Clear')
|
||||
},
|
||||
drop: function(e, ui){
|
||||
ui.helper.remove()
|
||||
}
|
||||
|
||||
}))
|
||||
.children()
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* Panels...
|
||||
*/
|
||||
|
||||
Panel('Edit: Filters',
|
||||
// build UI...
|
||||
function(){
|
||||
// XXX hardcoded target is not good...
|
||||
return buildFilterUI('.current.image')
|
||||
},
|
||||
// setup...
|
||||
function(panel){
|
||||
var _editorUpdateor = function(){
|
||||
reloadControls('.current.image')
|
||||
}
|
||||
panel
|
||||
.on('panelOpening', function(){
|
||||
// register updater...
|
||||
$('.viewer')
|
||||
.on('focusingImage', _editorUpdateor)
|
||||
// update the editor state in case the target changed...
|
||||
_editorUpdateor()
|
||||
})
|
||||
.on('panelClosing', function(){
|
||||
// unregister updater...
|
||||
$('.viewer')
|
||||
.off('focusingImage', _editorUpdateor)
|
||||
})
|
||||
},
|
||||
true)
|
||||
|
||||
|
||||
Panel('Edit: Snapshots',
|
||||
// build UI...
|
||||
function(){
|
||||
// XXX hardcoded target is not good...
|
||||
return buildSnapshotsUI('.current.image')
|
||||
},
|
||||
// setup...
|
||||
function(panel){
|
||||
// XXX
|
||||
},
|
||||
true)
|
||||
|
||||
|
||||
|
||||
/**********************************************************************
|
||||
* vim:set sw=4 ts=4 : */
|
||||
|
||||
@ -23,7 +23,7 @@ var PANEL_HELPER_HIDE_DELAY_NO_ROOT = 100
|
||||
// ...
|
||||
// }
|
||||
//
|
||||
// The controller is generated by makePanelController(...) and is called
|
||||
// The controller is generated by Panel(...) and is called
|
||||
// automatically by openPanel(...)
|
||||
var PANELS = {}
|
||||
|
||||
@ -441,8 +441,10 @@ function makeSubPanel(title, content, parent, open, content_resizable, close_but
|
||||
// XXX this should take the state into consideration while opening panels
|
||||
// and open panels in specific parents and locations, maybe even with
|
||||
// other neighbor panels...
|
||||
// XXX currently parent is ignored if panel is already created, is this
|
||||
// correct???
|
||||
// XXX update panel state...
|
||||
function openPanel(panel){
|
||||
function openPanel(panel, parent, no_blink){
|
||||
var title = typeof(panel) == typeof('str') ? panel : null
|
||||
panel = typeof(panel) == typeof('str')
|
||||
? getPanel(panel)
|
||||
@ -454,7 +456,10 @@ function openPanel(panel){
|
||||
if(panel.length == 0){
|
||||
if(title in PANELS){
|
||||
var builder = PANELS[title]
|
||||
panel = builder({ open: true })
|
||||
panel = builder({
|
||||
open: true,
|
||||
parent: parent,
|
||||
})
|
||||
}
|
||||
|
||||
// show/open the panel and all it's parents...
|
||||
@ -480,10 +485,24 @@ function openPanel(panel){
|
||||
panel.trigger('panelOpening', panel)
|
||||
}
|
||||
|
||||
//return panel
|
||||
// XXX should we be blinking here???
|
||||
// ...is this the right context for this???
|
||||
return blinkPanel(panel)
|
||||
return no_blink ? panel : blinkPanel(panel)
|
||||
}
|
||||
|
||||
|
||||
// open a set of sub-panels in one panel...
|
||||
//
|
||||
// returns the parent panel.
|
||||
//
|
||||
// NOTE: this will not re-group already opened panels...
|
||||
function openGroupedPanels(panels, parent){
|
||||
panels = typeof(panels) == typeof('str') ? [panels] : panels
|
||||
parent = parent == null ? makePanel() : parent
|
||||
|
||||
panels.forEach(function(title){
|
||||
openPanel(title, parent, true)
|
||||
})
|
||||
|
||||
return parent
|
||||
}
|
||||
|
||||
|
||||
@ -549,7 +568,7 @@ function removePanel(panel){
|
||||
//
|
||||
// NOTE: this will search an element by title, so if it is not unique
|
||||
// an existing element will be returned...
|
||||
function makePanelController(title, content_builder, panel_setup, content_resizable){
|
||||
function Panel(title, content_builder, panel_setup, content_resizable){
|
||||
|
||||
var controller = function(state){
|
||||
state = state == null ? {} : state
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user