mirror of
				https://github.com/flynx/ImageGrid.git
				synced 2025-10-30 19:00:09 +00:00 
			
		
		
		
	made close button auto hide + some unification of panel mechanics...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
		
							parent
							
								
									db8ac24565
								
							
						
					
					
						commit
						45be21d9ce
					
				| @ -31,17 +31,31 @@ | |||||||
| .sub-panel summary::-webkit-details-marker { | .sub-panel summary::-webkit-details-marker { | ||||||
| 	color: gray; | 	color: gray; | ||||||
| } | } | ||||||
| .panel .close-button { | .panel .close-button, | ||||||
|  | .sub-panel .close-button { | ||||||
| 	display: inline-block; | 	display: inline-block; | ||||||
| 	position: absolute; | 	position: absolute; | ||||||
| 	right: 5px; | 	right: 5px; | ||||||
| 	cursor: hand; | 	cursor: hand; | ||||||
|  | 	opacity: 0.5; | ||||||
| } | } | ||||||
| .panel .close-button:hover { | .panel .close-button:hover, | ||||||
|  | .sub-panel .close-button:hover { | ||||||
| 	font-weight: bold; | 	font-weight: bold; | ||||||
| 	color: red; | 	color: red; | ||||||
| 	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); | 	text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); | ||||||
| } | } | ||||||
|  | .sub-panel .close-button { | ||||||
|  | 	right: 8px; | ||||||
|  | } | ||||||
|  | .panel .close-button, | ||||||
|  | .sub-panel .close-button { | ||||||
|  | 	visibility: hidden; | ||||||
|  | } | ||||||
|  | .panel:hover>summary .close-button, | ||||||
|  | .sub-panel:hover .close-button { | ||||||
|  | 	visibility: visible; | ||||||
|  | } | ||||||
| .panel .panel-content { | .panel .panel-content { | ||||||
| 	display: block; | 	display: block; | ||||||
| 
 | 
 | ||||||
|  | |||||||
| @ -199,6 +199,12 @@ function makePanel(title, parent, open, keep_empty, close_button){ | |||||||
| 	var panel = $('<details/>') | 	var panel = $('<details/>') | ||||||
| 		.prop('open', open == null ? true : open) | 		.prop('open', open == null ? true : open) | ||||||
| 		.addClass('panel noScroll') | 		.addClass('panel noScroll') | ||||||
|  | 		.on('subPanelRemoved', function(){ | ||||||
|  | 			// remove the panel when it runs out of sub-panels...
 | ||||||
|  | 			if(!keep_empty && panel.find('.sub-panel').length <= 0){ | ||||||
|  | 				removePanel(panel, true) | ||||||
|  | 			} | ||||||
|  | 		}) | ||||||
| 		.append((close_button | 		.append((close_button | ||||||
| 			? $('<summary>'+title+'</summary>') | 			? $('<summary>'+title+'</summary>') | ||||||
| 				.append($('<span/>') | 				.append($('<span/>') | ||||||
| @ -254,7 +260,7 @@ function makePanel(title, parent, open, keep_empty, close_button){ | |||||||
| 			// - create a new panel when dropping outside of curent panel...
 | 			// - create a new panel when dropping outside of curent panel...
 | ||||||
| 			// - remove empty panels...
 | 			// - remove empty panels...
 | ||||||
| 			beforeStop: function(e, ui){ | 			beforeStop: function(e, ui){ | ||||||
| 				var c = 0 | 				//var c = 0
 | ||||||
| 
 | 
 | ||||||
| 				// do this only when dropping outside the panel...
 | 				// do this only when dropping outside the panel...
 | ||||||
| 				//if(ui.placeholder.css('display') == 'none'
 | 				//if(ui.placeholder.css('display') == 'none'
 | ||||||
| @ -267,14 +273,17 @@ function makePanel(title, parent, open, keep_empty, close_button){ | |||||||
| 					// panel when we count it...
 | 					// panel when we count it...
 | ||||||
| 					// ...this is likely to the fact that we jquery-ui did
 | 					// ...this is likely to the fact that we jquery-ui did
 | ||||||
| 					// not cleanup yet
 | 					// not cleanup yet
 | ||||||
| 					c = 1 | 					//c = 1
 | ||||||
| 					wrapWithPanel(ui.item, panel.parent(), ui.offset) | 					wrapWithPanel(ui.item, panel.parent(), ui.offset) | ||||||
| 				} | 				} | ||||||
| 
 | 
 | ||||||
| 				// remove the panel when it runs out of sub-panels...
 | 				// remove the panel when it runs out of sub-panels...
 | ||||||
| 				if(!keep_empty && panel.find('.sub-panel').length-c <= 0){ | 				//if(!keep_empty && panel.find('.sub-panel').length-c <= 0){
 | ||||||
| 					removePanel(panel, true) | 				//	removePanel(panel, true)
 | ||||||
| 				} | 				//}
 | ||||||
|  | 
 | ||||||
|  | 				panel.trigger('subPanelRemoved') | ||||||
|  | 
 | ||||||
| 				_resetSidePanels() | 				_resetSidePanels() | ||||||
| 				_resetSortedElem(ui.item) | 				_resetSortedElem(ui.item) | ||||||
| 					.data('isoutside', false) | 					.data('isoutside', false) | ||||||
| @ -387,7 +396,7 @@ function makeSidePanel(side, parent, autohide){ | |||||||
| function makeSubPanel(title, content, parent, open, content_resizable, close_button){ | function makeSubPanel(title, content, parent, open, content_resizable, close_button){ | ||||||
| 	title = title == null || title.trim() == '' ? ' ' : title | 	title = title == null || title.trim() == '' ? ' ' : title | ||||||
| 	parent = parent == null ? makePanel() : parent | 	parent = parent == null ? makePanel() : parent | ||||||
| 	close_button = close_button == null ? false : close_button | 	close_button = close_button == null ? true : close_button | ||||||
| 
 | 
 | ||||||
| 	open = open == null ? true : open | 	open = open == null ? true : open | ||||||
| 	content_resizable = content_resizable == null  | 	content_resizable = content_resizable == null  | ||||||
| @ -408,7 +417,12 @@ function makeSubPanel(title, content, parent, open, content_resizable, close_but | |||||||
| 				.append($('<span/>') | 				.append($('<span/>') | ||||||
| 					.addClass('close-button') | 					.addClass('close-button') | ||||||
| 					.click(function(){ | 					.click(function(){ | ||||||
| 						removePanel(panel) | 						var parent = sub_panel.parents('.panel').first() | ||||||
|  | 						removePanel(sub_panel) | ||||||
|  | 						// XXX need to notify the parent...
 | ||||||
|  | 						// 		...so as to enable it to remove itself 
 | ||||||
|  | 						// 		if no sub-panels left...
 | ||||||
|  | 						parent.trigger('subPanelRemoved') | ||||||
| 						return false | 						return false | ||||||
| 					}) | 					}) | ||||||
| 					.html('×')) | 					.html('×')) | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user