lots of tweaks and some cleanup...

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

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

@@ -19,28 +19,31 @@ body {
 .browse-widget {
 	user-select: none;
 }
-.browse-widget:not(.flat) .list :focus {
+.browse-widget .list :focus {
 	outline: none; 
 }
 
 
 /* XXX move these to the main CSS */
-.browse-widget:not(.flat) .list div:not(.not-traversable) .text:after {
+.browse-widget .list div:not(.not-traversable) .text:after {
     content: "";
 }
 /* XXX this needs to be the last .text item only */
-.browse-widget:not(.flat) .list .traversable .text:after {
+.browse-widget .list .traversable .text:after {
     content: "/" !important;
 }
 
 /* selection... */
-.browse-widget:not(.flat) .list .selected {
+.browse-widget .list .selected {
 	color: yellow;
 	background: none;
 }
-.browse-widget:not(.flat) .list .focused {
+.browse-widget .list .focused {
 	background: rgba(0, 0, 0, 0.08);
 }
+.browse-widget .list .item.heading.focused {
+	background: rgba(0, 0, 0, 0.7);
+}
 
 /* XXX not sure about this... */
 .browse-widget .list .list {
@@ -61,6 +64,14 @@ body {
 	text-decoration: none;
 }
 
+/* flat list... */
+.browse-widget.flat .list .list {
+	padding-left: 0px;
+}
+.browse-widget.flat .list .list>.item:first-child {
+	margin-left: 0px;
+}
+
 /* XXX foe some reason the shadows here are BELLOW the content... */
 .browse-widget>.list {
 	box-shadow: 
@@ -92,18 +103,18 @@ body {
 
 
 /* XXX stub...
-.browse-widget:not(.flat) .list .text:first-child:before {
+.browse-widget .list .text:first-child:before {
 	display: inline-block;
 	width: 5pt;
 	padding-right: 3pt;
 	content: " ";
 }
-.browse-widget:not(.flat) .list .traversable .text:first-child:before {
+.browse-widget .list .traversable .text:first-child:before {
 }
-.browse-widget:not(.flat) .list .traversable:not(.collapsed) .text:first-child:before {
+.browse-widget .list .traversable:not(.collapsed) .text:first-child:before {
     content: "-";
 }
-.browse-widget:not(.flat) .list .traversable.collapsed .text:first-child:before {
+.browse-widget .list .traversable.collapsed .text:first-child:before {
     content: "+";
 }
 */
@@ -195,6 +206,18 @@ requirejs([
 					function(){ console.log('confirm') }, 
 					function(){ console.log('reject') })
 			])
+			make.nest(make.Heading('$Dynamic Items', {
+				doc: 'Item generator examples...',
+			}), [
+				make.DisplayFocusedPath({
+					id: 'inline_item_path_display',
+					doc: 'Shows path of focused item...'
+				}),
+				make.DisplayItemInfo({
+					id: 'inline_item_info_display',
+					doc: 'Shows the value of .doc/.alt item attr...',
+				}),
+			])
 
 			make.Separator()
 
@@ -205,8 +228,6 @@ requirejs([
 				'group item 1 (bare)')
 			// XXX Q: should we show only one if multiple lines are in sequence???
 			make('---')
-			make.DisplayFocusedPath({id: 'inline_item_path_display'})
-			make('---')
 			// embeded browser...
 			make(browser.Browser(function(make){
 				make('inlined browser item 0 (open/menu events)', {

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

@@ -271,6 +271,8 @@ Items.Heading = function(value, options){
 		: typeof(options.cls) == typeof('str') ?
 			options.cls +' '+ cls
 		: [cls]
+	options.buttons = options.buttons 
+		|| this.dialog.options.headingButtons
 	return this(value, options) }
 Items.Selected = function(value){}
 Items.Action = function(value, options){}
@@ -363,10 +365,13 @@ Items.DisplayFocusedPath = function(make, options){
 	var dialog = this.dialog || this
 	var tag = options.id || 'item_path_display'
 	// indicator...
-	var e = make('CURRENT_PATH', {
+	var e = make('CURRENT_PATH', 
-			id: tag,
+			Object.assign(
-			cls: 'path', 
+				{
-		}) 
+					id: tag,
+					cls: 'path', 
+				},
+				options))
 		.last()
 	// event handlers...
 	dialog 
@@ -375,7 +380,8 @@ Items.DisplayFocusedPath = function(make, options){
 			function(){
 				e.value = this.pathArray
 				this.renderItem(e) },
-			tag) }
+			tag) 
+	return make}
 
 // Item info...
 //
@@ -399,10 +405,13 @@ Items.DisplayItemInfo = function(make, options){
 	var tag = options.id || 'item_info_display'
 
 	// indicator...
-	var e = make('INFO', {
+	var e = make('INFO', 
-			id: tag,
+			Object.assign(
-			cls: 'info',
+				{
-		})
+					id: tag,
+					cls: 'info',
+				},
+				options))
 		.last()
 	// event handlers...
 	dialog
@@ -410,11 +419,12 @@ Items.DisplayItemInfo = function(make, options){
 		.on('focus',
 			function(){
 				var focused = this.focused
-				e.value = focused.info 
+				e.value = focused.doc
 					|| focused.alt
 					|| ' '
 				this.renderItem(e) },
-		tag) }
+		tag) 
+	return make }
 
 
 
@@ -3812,20 +3822,29 @@ var HTMLBrowserPrototype = {
 		},
 
 
+		// Item options/attributes that get processed directly if given
+		// at item root and not just via the respective sections...
+		//
+		shorthandItemClasses: [
+			'focused',
+			'selected',
+			'disabled',
+			'hidden',
+		],
+		shorthandItemAttrs: [
+			'doc',
+			'alt',
+		],
+		shorthandItemEvents: [],
+
+
 		// events not to bubble up the tree...
 		//
-		localEvents: [
+		itemLocalEvents: [
-			// XXX STUB???
 			'click',
-
-			// XXX keyboard stuff...
-			// XXX
-
-			// XXX custom events...
-			// XXX
 		],
-		//buttonLocalEvents: [
+		//buttonLocalEvents: [],
-		//],
+
 
 		// Default buttons for header/items/footer sections...
 		//
@@ -3879,13 +3898,19 @@ var HTMLBrowserPrototype = {
 		// 		...
 		// 	]
 		//
-		headerButtons: [
+		headerButtons: [],
-		],
+		itemButtons: [],
-		itemButtons: [
+		footerButtons: [],
-		],
+
-		footerButtons: [
+		// Default buttons for Item.Heading(..)
+		//
+		// NOTE: the use of this is implemented in Items.Heading(..) see
+		// 		it for more info...
+		headingButtons: [
+			'ToggleCollapse',
 		],
 
+
 		// If true will disable button shortcut key handling...
 		//disableButtonSortcuts: false,
 
@@ -4263,7 +4288,7 @@ var HTMLBrowserPrototype = {
 
 		// localize events...
 		var stopPropagation = function(evt){ evt.stopPropagation() }
-		;(options.localEvents || [])
+		;(options.itemLocalEvents || [])
 			.forEach(function(evt){
 				e.addEventListener(evt, stopPropagation) })
 
@@ -4402,22 +4427,19 @@ var HTMLBrowserPrototype = {
 						this
 						: this.split(/\s+/g) }))
 			// special classes...
-			.concat([
+			.concat(
-				'focused',
+				(options.shorthandItemClasses || {})
-				'selected',
+					.filter(function(cls){ 
-				'disabled',
+						return !!item[cls] })))
-				'hidden',
-			].filter(function(cls){ 
-				return !!item[cls] })))
 
 		// attrs...
 		;(item.disabled && !options.focusDisabledItems)
 			|| elem.setAttribute('tabindex', '0')
 		Object.entries(item.attrs || {})
 			// shorthand attrs...
-			//.concat([
+			.concat((options.shorthandItemAttrs || [])
-			//].map(function(key){ 
+				.map(function(key){ 
-			//	return [key, item[key]] }))
+					return [key, item[key]] }))
 			.forEach(function([key, value]){
 				value !== undefined
 					&& elem.setAttribute(key, value) })
@@ -4482,8 +4504,8 @@ var HTMLBrowserPrototype = {
 		// user events...
 		Object.entries(item.events || {})
 			// shorthand DOM events...
-			.concat([
+			.concat((options.shorthandItemEvents || [])
-				].map(function(evt){ 
+				.map(function(evt){ 
 					return [evt, item[evt]] }))
 			// setup the handlers...
 			.forEach(function([evt, handler]){
@@ -4547,8 +4569,10 @@ var HTMLBrowserPrototype = {
 						doTextKeys(v,
 							function(k){
 								k = that.keyboard.normalizeKey(k)
-								return !text_keys.includes(k)
+								return options.disableButtonSortcuts ?
-									&& text_keys.push(k) })
+									false
+									: !text_keys.includes(k)
+										&& text_keys.push(k) })
 						: v)
 				keys = text_keys.length > 0 ?
 					(keys || []).concat(text_keys)
@@ -4560,7 +4584,7 @@ var HTMLBrowserPrototype = {
 						: (force || !item.disabled) ){
 					button.setAttribute('tabindex', '0')
 					// events to keep in buttons...
-					;(options.buttonLocalEvents || options.localEvents || [])
+					;(options.buttonLocalEvents || options.itemLocalEvents || [])
 						.forEach(function(evt){
 							button.addEventListener(evt, stopPropagation) })
 					// button keys...