added separator support in Browse/List/... widgets and now displaying separators in metadata...

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

ui (gen4)/css/widget/browse.css

@@ -289,6 +289,10 @@
 	content: "9";
 }
 
+.browse-widget .list>hr.separator {
+	opacity: 0.3;
+}
+
 
 
 /******************************************************** Theaming ***/

ui (gen4)/features/metadata.js

@@ -244,10 +244,6 @@ module.MetadataReader = core.ImageGridFeatures.Feature({
 var MetadataUIActions = actions.Actions({
 	config: {
 		'metadata-field-order': [
-			// image attrs...
-			'GID', 'Index (ribbon)', 'Index (crop)', 'Index (global)',
-			'File Name', 'Full Path', 
-
 			// metadata...
 			'Make', 'Camera Model Name', 'Lens ID', 'Lens', 'Lens Profile Name', 'Focal Length',
 
@@ -259,11 +255,6 @@ var MetadataUIActions = actions.Actions({
 			'Date/time Original', 'Create Date', 'Modify Date',
 
 			'Mime Type',
-
-			// NOTE: this is here so as not to hide the 'metadata: unavailable'
-			// 		message when not metadata is present and .showMetadata(..)
-			// 		is called in 'short' mode...
-			'Metadata',
 		],
 	},
 
@@ -277,16 +268,13 @@ var MetadataUIActions = actions.Actions({
 			var field_order = this.config['metadata-field-order'] || []
 			var x = field_order.length + 1
 
-			// get image metadata...
-			var metadata = (this.images 
-					&& this.images[image] 
-					&& this.images[image].metadata)
-				|| { metadata: 'unavailable.' }
 			var img = this.images && this.images[image] || null
+			// get image metadata...
+			var metadata = img && img.metadata || {} 
 
 			// XXX move these to an info feature...
 			// base fields...
-			var fields = [
+			var base = [
 				['GID: ', image],
 				// NOTE: these are 1-based and not 0-based...
 				['Index (ribbon): ', 
@@ -301,7 +289,7 @@ var MetadataUIActions = actions.Actions({
 			]
 			// crop-specific stuff...
 			if(this.crop_stack && this.crop_stack.len > 0){
-				fields = fields.concat([
+				base = base.concat([
 					['Index (crop): ', 
 						this.data.getImageOrder('loaded', image) + 1
 						+'/'+ 
@@ -310,7 +298,7 @@ var MetadataUIActions = actions.Actions({
 			}
 			// fields that expect that image data is available...
 			if(img){
-				fields = fields.concat([
+				base = base.concat([
 					['File Name: ', img.path],
 					// XXX normalize this...
 					['Full Path: ', (img.base_path || '.') +'/'+ img.path],
@@ -318,6 +306,7 @@ var MetadataUIActions = actions.Actions({
 			}
 
 			// build fields...
+			var fields = []
 			Object.keys(metadata).forEach(function(k){
 				var n =  k
 					// convert camel-case to human-case ;)
@@ -347,10 +336,13 @@ var MetadataUIActions = actions.Actions({
 				return a - b
 			})
 
+			// add separator to base...
+			fields.length > 0 && base.push('---')
+
 			var o = overlay.Overlay(this.ribbons.viewer, 
 				browse.makeList(
 						null,
-						fields,
+						base.concat(fields),
 						{
 							showDisabled: false,
 						})

ui (gen4)/lib/widget/browse.html

@@ -288,6 +288,7 @@ requirejs([
 			'option 1': function(_, p){ console.log('option:', p) },
 			'option 2': function(_, p){ console.log('option:', p) },
 			'- option 3': function(_, p){ console.log('option:', p) },
+			'---': null,
 			'option 4': function(_, p){ console.log('option:', p) },
 		})
 		// another way to handle the opening of items...

ui (gen4)/lib/widget/browse.js

@@ -297,6 +297,27 @@ var BrowserPrototype = {
 
 			//'keydown',
 		],
+
+
+		// Separator element...
+	
+		// Element text as passed to make(..) to generate a separator
+		// element rather than a list element...
+		//
+		// NOTE: if null text checking is disabled...
+		elementSeparatorText: null,
+
+		// Separator class...
+		//
+		// NOTE: if make(..) is passed an element with this class it will
+		// 		be treated as a separator and not as a list element.
+		// NOTE: to disable class checking set this to null
+		elementSeparatorClass: 'separator',
+
+		// Separator HTML code...
+		//
+		// NOTE: if this is null, then '<hr>' is used.
+		elementSeparatorHTML: '<hr>',
 	},
 
 	// XXX TEST: this should prevent event propagation...
@@ -755,6 +776,20 @@ var BrowserPrototype = {
 		// 		- [str, ...]
 		// 		- DOM/jQuery
 		var make = function(p, traversable, disabled){
+			// special case separator...
+			if(p && (p == that.options.elementSeparatorText
+					|| (p.hasClass 
+						&& that.options.elementSeparatorClass 
+						&& p.hasClass(that.options.elementSeparatorClass)))){
+				var res = p
+				if(typeof(res) == typeof('str')){
+					res = $(that.options.elementSeparatorHTML || '<hr>')
+						.addClass(that.options.elementSeparatorClass || '')
+				}
+				res.appendTo(l)
+				return res
+			}
+
 			// array of str...
 			if(p.constructor === Array){
 				var txt = p.join('')
@@ -1026,6 +1061,9 @@ var BrowserPrototype = {
 		var browser = this.dom
 
 		var elems = browser.find('.list>div' 
+			+ (this.options.elementSeparatorClass ? 
+				':not('+ this.options.elementSeparatorClass +')'
+				: '')
 			+ (ignore_disabled ? 
 				':not(.disabled):not(.filtered-out)' 
 				: ''))
@@ -1372,7 +1410,11 @@ var BrowserPrototype = {
 	// NOTE: this uses .filter(..) for string and regexp matching...
 	select: function(elem, filtering){
 		var browser = this.dom
-		var pattern = '.list>div:not(.disabled):not(.filtered-out):visible'
+		var pattern = '.list>div'
+			+ (this.options.elementSeparatorClass ? 
+				':not('+ this.options.elementSeparatorClass +')'
+				: '')
+			+':not(.disabled):not(.filtered-out):visible'
 		var elems = browser.find(pattern)
 
 		if(elems.length == 0){
@@ -1477,7 +1519,11 @@ var BrowserPrototype = {
 	// .navigate('next') will simply navigate to the next element while
 	// .select('next') / .filter('next') will yield that element by name.
 	navigate: function(action, filtering){
-		var pattern = '.list>div:not(.disabled):not(.filtered-out):visible'
+		var pattern = '.list>div'
+			+ (this.options.elementSeparatorClass ? 
+				':not('+ this.options.elementSeparatorClass +')'
+				: '')
+			+':not(.disabled):not(.filtered-out):visible'
 		action = action || 'first'
 																   
 		if(action == 'none'){
@@ -2085,6 +2131,8 @@ ListPrototype.options = {
 	// NOTE: to disable this set it to false or null
 	disableItemPattern: '^- ',
 
+	elementSeparatorText: '---',
+
 	list: function(path, make){
 		var that = this
 		var data = this.options.data
@@ -2123,7 +2171,7 @@ ListPrototype.options = {
 
 				var e = make(n, null, disable)
 
-				if(data !== keys){
+				if(data !== keys && that.options.data[k] != null){
 					e.on('open', function(){ 
 						return that.options.data[k].apply(this, arguments)
 					})