new panel API (partial), started move to new panel API, not done yet...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

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 add handlers for saving data to images...
-							// XXX
+						// XXX
-						// setup the event to update the editor...
-						.on('focusingImage', function(){
-							if(toggleEditor('?') == 'on'){
-								// XXX save previous settings if changes...
-								// XXX
-								reloadControls('.current.image')
-							}
-						})
 				// show the editor...
 				} else {
 					ed.show()

ui/experiments/panels.html

@@ -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)
 
-
+	openGroupedPanels([
-	makeFilterPanel(panel, '.moo')
+			'Edit: Filters',
-	makeSnapshotsPanel(panel, '.moo')
+			'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>')
 		},

ui/lib/editor.js

@@ -248,94 +248,122 @@ function makeLogRange(text, filter, target){
 
 
 /**********************************************************************
-* Panels...
+* Constructors...
 */
 
-function makeFilterPanel(parent, target, open){
+function buildFilterUI(target){
-	return makeSubPanel('Edit: Filters', 
+	return $('<div>')
-		$('<div>')
+		.append($('<div class="filter-list"/>')
-			.append($('<div class="filter-list"/>')
+			//.append(makeLogRange('Gamma:', 'gamma', target))
-				//.append(makeLogRange('Gamma:', 'gamma', target))
+			.append(makeLogRange('Brightness:', 'brightness', target))
-				.append(makeLogRange('Brightness:', 'brightness', target))
+			.append(makeLogRange('Contrast:', 'contrast', target))
-				.append(makeLogRange('Contrast:', 'contrast', target))
+			.append(makeLogRange('Saturation:', 'saturate', target))
-				.append(makeLogRange('Saturation:', 'saturate', target))
+			.append(makeAbsRange('Hue:', 'hue-rotate', target, 
-				.append(makeAbsRange('Hue:', 'hue-rotate', target, 
+					-180, 180, 0, 0.5, function(v){ return v+'deg' }))
-						-180, 180, 0, 0.5, function(v){ return v+'deg' }))
+			.append(makeAbsRange('Grayscale:', 'grayscale', target))
-				.append(makeAbsRange('Grayscale:', 'grayscale', target))
+			.append(makeAbsRange('Invert:', 'invert', target))
-				.append(makeAbsRange('Invert:', 'invert', target))
+			.append(makeAbsRange('Sepia:', 'sepia', target))
-				.append(makeAbsRange('Sepia:', 'sepia', target))
+			.sortable({
-				.sortable({
+				axis: 'y',
-					axis: 'y',
+			})
-				})
+			.on('sortstop', function(){
-				.on('sortstop', function(){
+				// update image filter order...
-					// update image filter order...
+				var img = $(target)
-					var img = $(target)
+				img.css('-webkit-filter', sortFilterStr(img.css('-webkit-filter')))
-					img.css('-webkit-filter', sortFilterStr(img.css('-webkit-filter')))
+			}))
-				}))
+		.append($('<hr>'))
-			.append($('<hr>'))
+		.append('<span>Reset: <span>')
-			.append('<span>Reset: <span>')
+		.append($('<button>Values</button>')
-			.append($('<button>Values</button>')
+			.click(function(){
-				.click(function(){
+				$('.reset').click()
-					$('.reset').click()
+			}))
-				}))
+		.append($('<button>Order</button>')
-			.append($('<button>Order</button>')
+			.click(function(){
-				.click(function(){
+				sortFilterSliders(DEFAULT_FILTER_ORDER)
-					sortFilterSliders(DEFAULT_FILTER_ORDER)
+			}))
-				}))
+		.append($('<button>All</button>')
-			.append($('<button>All</button>')
+			.click(function(){
-				.click(function(){
+				$('.reset').click()
-					$('.reset').click()
+				sortFilterSliders(DEFAULT_FILTER_ORDER)
-					sortFilterSliders(DEFAULT_FILTER_ORDER)
+			}))
-				}))
+		.children()
-			.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)
 }
 
 
-// XXX add panel update events to help save settings...
+function buildSnapshotsUI(target){
-function makeEditorControls(target){
+	return $('<div>')
-
+		.append($('<div class="states"/>'))
-	var panel = makePanel()
+		.append($('<hr>'))
-
+		.append($('<button/>')
-	// filters...
+			.click(function(){ saveSnapshot(target) })
-	makeFilterPanel(panel, target)
+			.text('Save'))
-
+		.append($('<button/>')
-	// snapshots...
+			.addClass('remove-state-drop-target')
-	makeSnapshotsPanel(panel, target)
+			.click(function(){ clearSnapshots() })
-
+			.text('Clear')
-	return panel
+			.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 :												 */

ui/lib/panels.js

@@ -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
+	return no_blink ? panel : blinkPanel(panel)
-	// XXX should we be blinking here???
+}
-	// 		...is this the right context for this???
+
-	return 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