started cleanup and refactoring panels...

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

ui/css/editor.css

@@ -22,11 +22,13 @@
 	-o-user-select: none;
 	user-select: none; 
 }
-.panel summary {
+.panel summary,
+.sub-panel summary {
 	padding-left: 3px;
 	background: silver
 }
-.panel summary::-webkit-details-marker {
+.panel summary::-webkit-details-marker,
+.sub-panel summary::-webkit-details-marker {
 	color: gray;
 }
 .panel .close-button {
@@ -218,7 +220,8 @@
 .dark .panel summary {
 	background: #333;
 }
-.dark .panel summary::-webkit-details-marker {
+.dark .panel summary::-webkit-details-marker,
+.dark .sub-panel summary::-webkit-details-marker {
 	color: #555;
 }
 .dark .sub-panel button,
@@ -295,7 +298,8 @@
 .gray .panel summary {
 	background: #444;
 }
-.gray .panel summary::-webkit-details-marker {
+.gray .panel summary::-webkit-details-marker,
+.gray .sub-panel summary::-webkit-details-marker {
 	color: #555;
 }
 .gray .sub-panel button,

ui/lib/panels.js

@@ -6,59 +6,37 @@
 
 //var DEBUG = DEBUG != null ? DEBUG : true
 
+// this is an element/selector to be used as the temporary parent for 
+// helpers while dragging/sorting sub-panels...
+// if set to null, the parent of a nearest panel will be used (slower)
+var PANEL_ROOT = 'body'
 
-/*********************************************************************/
+var PANEL_HELPER_HIDE_DELAY = 50
+var PANEL_HELPER_HIDE_DELAY_NO_ROOT = 100
 
-function makePanel(title, open, editable_title, keep_empty){
-	title = title == null || title.trim() == '' ? ' ' : title
 
-	// tool panel...
+/**********************************************************************
-	var panel = $('<details/>')
+* Helpers...
-		.prop('open', open == null ? true : open)
+*/
-		.addClass('panel noScroll')
-		.append($('<summary>'+title+'</summary>')
-			.attr({
-				contenteditable: editable_title == null ? 'false' : 'true',
-			})
-			.append($('<span/>')
-				.addClass('close-button')
-				.click(function(){
-					panel
-						.trigger('panelClosing')
-						.remove()
-					return false
-				})
-				.html('&times;')))
-		.draggable({
-			containment: 'parent',
-			scroll: false,
-			// XXX this makes things quite a bit slower...
-			//stack: '.panel, .sub-panel',
-			stack: '.panel',
-			//snap: ".panel", 
-			//snapMode: "outer",
-		})
-		.css({
-			// for some reason this is overwritten by jquery-ui to 'relative'...
-			//position: '',
-			position: 'absolute',
-		})
 
-	// wrapper for sub-panels...
+// - start monitoring where we are dragged to...
-	// XXX dragging out, into another panel and back out behaves oddly:
+// - open hidden side panels...
-	// 		should:
+function _startSortHandler(e, ui){
-	// 			either revert or create a new panel
+	// make the sorted element on top of everything...
-	// 		does:
+	// NOTE: showing and hiding the helper for 100ms here prevents it 
-	// 			drops to last placeholder
+	// 		from blinking in the upper-left corner of the screen which 
-	// XXX the helper should be above all other panels...
+	// 		is more distracting...
-	var content = $('<span class="panel-content content">')
+	// 		XXX find a better way to do this...
-		.sortable({
+	(PANEL_ROOT == null 
-			forcePlaceholderSize: true,
+		? ui.item.parents('.panel, .side-panel').first().parent()
-			opacity: 0.7,
+		: $(PANEL_ROOT))
-			connectWith: '.panel-content',
+		.append(ui.helper.css('display', 'none'))
-			zIndex: 9999,
+	setTimeout(function(){
+		ui.helper.css('display', '')
+	}, PANEL_ROOT == null 
+		? PANEL_HELPER_HIDE_DELAY_NO_ROOT
+		: PANEL_HELPER_HIDE_DELAY)
 
-			start: function(e, ui){
 	ui.item.data('isoutside', false)
 	ui.placeholder
 		.height(ui.helper.outerHeight())
@@ -73,12 +51,92 @@ function makePanel(title, open, editable_title, keep_empty){
 			p.data('autohide', false)
 		}
 	})
-			},
+}
-			// create a new panel when dropping outside of curent panel...
+
+
+// wrap a sub-panel with a new panel...
+// 
+function wrapWithPanel(panel, parent, offset){
+	var new_panel = makePanel()
+		.css(offset)
+		.appendTo(parent)
+	new_panel.find('.panel-content')
+			.append(panel)
+	return new_panel
+}
+
+
+// close the panel and fire close events on it and all sub-panels...
+//
+function closePanel(panel, skip_sub_panel_events){
+	skip_sub_panel_events = skip_sub_panel_events == null ? false : true
+	if(!skip_sub_panel_events){
+		panel.find('.sub-panel')
+			.trigger('panelClosing')
+	}
+	panel
+		.trigger('panelClosing')
+		.remove()
+}
+
+
+
+/*********************************************************************/
+
+// XXX dragging out, into another panel and back out behaves oddly:
+// 		should:
+// 			either revert or create a new panel
+// 		does:
+// 			drops to last placeholder
+function makePanel(title, open, keep_empty, close_button){
+	title = title == null || title.trim() == '' ? '&nbsp;' : title
+	close_button = close_button == null ? true : false
+
+	// the outer panel...
+	var panel = $('<details/>')
+		.prop('open', open == null ? true : open)
+		.addClass('panel noScroll')
+		.append(close_button
+			? $('<summary>'+title+'</summary>')
+				.append($('<span/>')
+					.addClass('close-button')
+					.click(function(){
+						closePanel(panel)
+						return false
+					})
+					.html('&times;'))
+			: $('<summary>'+title+'</summary>'))
+		.draggable({
+			containment: 'parent',
+			scroll: false,
+			stack: '.panel',
+			// sanp to panels...
+			//snap: ".panel", 
+			//snapMode: "outer",
+		})
+		.css({
+			// for some reason this is overwritten by jquery-ui to 'relative'...
+			//position: '',
+			position: 'absolute',
+		})
+
+	// content -- wrapper for sub-panels...
+	var content = $('<span class="panel-content content">')
+		.sortable({
+			// general settings...
+			forcePlaceholderSize: true,
+			opacity: 0.7,
+			connectWith: '.panel-content',
+
+			start: _startSortHandler,
+
+			// - create a new panel when dropping outside of curent panel...
+			// - remove empty panels...
 			beforeStop: function(e, ui){
 				var c = 0
 
 				// do this only when dropping outside the panel...
+				//if(ui.placeholder.css('display') == 'none'
 				if(ui.item.data('isoutside')
 						// prevent draggingout the last panel...
 						// NOTE: 2 because we are taking into account 
@@ -89,19 +147,13 @@ function makePanel(title, open, editable_title, keep_empty){
 					// ...this is likely to the fact that we jquery-ui did
 					// not cleanup yet
 					c = 1
-					var new_panel = makePanel()
+					wrapWithPanel(ui.item, panel.parent(), ui.offset)
-						.css(ui.offset)
-						.appendTo(panel.parent())
-					new_panel.find('.panel-content')
-							.append(ui.item)
-					panel.trigger('newPanel', [new_panel])
 				}
 
 				// remove the panel when it runs out of sub-panels...
 				if(!keep_empty && panel.find('.sub-panel').length-c <= 0){
-					panel
+					// XXX need to trigger sub-panel's 'closing' event...
-						.trigger('panelClosing')
+					closePanel(panel, true)
-						.remove()
 				}
 
 				// reset the auto-hide of the side panels...
@@ -114,14 +166,18 @@ function makePanel(title, open, editable_title, keep_empty){
 
 				ui.item.data('isoutside', false)
 			},
+
 			over: function(e, ui){
 				ui.item.data('isoutside', false)
+				ui.placeholder.show()
 			},
 			out: function(e, ui){
 				ui.item.data('isoutside', true)
+				ui.placeholder.hide()
 			},
 		})
 		.appendTo(panel)
+
 	return panel
 }
 
@@ -139,38 +195,30 @@ function makeSidePanel(side, autohide){
 	}
 	panel = $('<div/>')
 		.addClass('side-panel panel-content ' + side)
+		.attr('autohide', autohide)
+		// toggle auto-hide...
+		.dblclick(function(e){
+			var elem = $(this)
+			if(elem.attr('autohide') == 'off'){
+				elem.attr('autohide', 'on')
+			} else {
+				elem.attr('autohide', 'off')
+			}
+			return false
+		})
 		.sortable({
 			forcePlaceholderSize: true,
 			opacity: 0.7,
 			connectWith: '.panel-content',
-			zIndex: 9999,
 
-			start: function(e, ui){
+			start: _startSortHandler,
-				ui.item.data('isoutside', false)
+
-				ui.placeholder
+			// - create a new panel when dropping outside of curent panel...
-					.height(ui.helper.outerHeight())
+			// - remove empty panels...
-					.width(ui.helper.outerWidth())
-				// show all hidden panels...
-				$('.side-panel').each(function(){
-					var p = $(this)
-					if(p.attr('autohide') == 'on'){
-						p.attr('autohide', 'off')
-						p.data('autohide', true)
-					} else {
-						p.data('autohide', false)
-					}
-				})
-			},
-			// create a new panel when dropping outside of curent panel...
 			beforeStop: function(e, ui){
 				// do this only when dropping outside the panel...
 				if(ui.item.data('isoutside')){
-					var new_panel = makePanel()
+					wrapWithPanel(ui.item, panel.parent(), ui.offset)
-						.css(ui.offset)
-						.appendTo(panel.parent())
-					new_panel.find('.panel-content')
-							.append(ui.item)
-					panel.trigger('newPanel', [new_panel])
 				}
 
 				// reset the auto-hide of the side panels...
@@ -183,23 +231,17 @@ function makeSidePanel(side, autohide){
 
 				ui.item.data('isoutside', false)
 			},
+
 			over: function(e, ui){
 				ui.item.data('isoutside', false)
+				ui.placeholder.show()
 			},
 			out: function(e, ui){
 				ui.item.data('isoutside', true)
+				ui.placeholder.hide()
 			},
 		})
-		.dblclick(function(e){
+
-			var elem = $(this)
-			if(elem.attr('autohide') == 'off'){
-				elem.attr('autohide', 'on')
-			} else {
-				elem.attr('autohide', 'off')
-			}
-			return false
-		})
-		.attr('autohide', autohide)
 	return panel
 }