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 
@@ -60,14 +63,6 @@ var toggleEditor = createCSSClassToggler(
 							}))
 						// 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')
-							}
-						})
 				// 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,12 +248,11 @@ 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(makeLogRange('Gamma:', 'gamma', target))
 			.append(makeLogRange('Brightness:', 'brightness', target))
@@ -287,13 +286,12 @@ function makeFilterPanel(parent, target, open){
 				$('.reset').click()
 				sortFilterSliders(DEFAULT_FILTER_ORDER)
 			}))
-			.children(),
+		.children()
-		parent, open)
 }
 
-function makeSnapshotsPanel(parent, target, open){
+
-	return makeSubPanel('Edit: Snapshots', 
+function buildSnapshotsUI(target){
-		$('<div>')
+	return $('<div>')
 		.append($('<div class="states"/>'))
 		.append($('<hr>'))
 		.append($('<button/>')
@@ -316,26 +314,56 @@ function makeSnapshotsPanel(parent, target, open){
 				}
 				
 			}))
-			.children(),
+		.children()
-		parent, open)
-}
-
-
-// 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
 }
 
 
 
+/**********************************************************************
+* 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