started work on the key binding editor...

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

ui (gen4)/css/experimenting.css

@@ -292,6 +292,58 @@ body {
 
 
 
+/* key binding editor... */
+.browse-widget.key-bindings .list>.mode {
+	color: white;
+	font-weight: bold;
+	background: rgba(0, 0, 0, 0.5);
+}
+.browse-widget.key-bindings .list>.mode .doc {
+	margin-left: 1em;
+
+	color: white;
+	font-weight: normal;
+	font-size: small;
+	font-style: italic;
+
+	opacity: 0.8;
+}
+.browse-widget.key-bindings .list>.mode.selected {
+	color: white;
+	font-weight: bold;
+	background: rgba(0, 0, 0, 0.7);
+}
+
+.browse-widget.key-bindings .list>.key {
+}
+.browse-widget.key-bindings .list>.key .button {
+	background-color: rgba(0, 0, 0, 0.1);
+}
+.browse-widget.key-bindings .list>.key:after,
+.browse-widget.key-bindings .list>.key .text:not(:first-child) {
+	display: inline;
+	position: relative;
+	content: attr(keys);
+
+	float: right;
+	margin-left: 1em;
+	margin-right: 1em;
+
+	opacity: 0.8;
+	font-style: italic;
+}
+
+.browse-widget.key-bindings .list>.new {
+	font-style: italic;
+}
+.browse-widget.key-bindings .list>.new:not(.selected) {
+	opacity: 0.3;
+}
+.browse-widget.key-bindings .list>.new.selected {
+}
+
+
+
 /* DEBUG stuff... */
 .container-center {
 	position: absolute;

ui (gen4)/features/keyboard.js

@@ -622,8 +622,10 @@ var KeyboardActions = actions.Actions({
 	// 		* add ability to disable key without deleting
 	// 		* use the same mechanics to show the keys as in .browseActions(..)
 	//
-	browseKeyboardBindings: ['- Interface/',
+	// XXX do not hide modes on search...
+	browseKeyboardBindings: ['Interface/Keyboard bindings editor (EXPERIMENTAL)...',
 		widgets.makeUIDialog(function(path){
+			var actions = this
 
 			// Format:
 			// 	{
@@ -646,7 +648,69 @@ var KeyboardActions = actions.Actions({
 							: '') 
 				})
 
-			// XXX
+			var dialog = browse.makeLister(null, 
+				function(path, make){
+					Object.keys(keys)
+						.forEach(function(mode){
+							// section heading...
+							make(keys[mode].doc ? 
+									$('<span>')
+										// NOTE: at this time adding a br
+										// 		is faster and simpler than
+										// 		doing this in CSS...
+										// XXX revise...
+										.html(mode + '<br>')
+										.append($('<span>')
+											.addClass('doc')
+											.html(keys[mode].doc))
+									: mode)
+								.addClass('mode')
+
+							// bindings...
+							Object.keys(keys[mode])
+								.forEach(function(action){
+									action != 'doc' 
+										// NOTE: wee need the button 
+										// 		spec to be searchable, 
+										// 		thus we are not using 
+										// 		the keys attr as in
+										// 		.browseActions(..)
+										&& make([action, '$BUTTONS']
+												.concat(keys[mode][action]
+													.join(' / ')))
+											.addClass('key')
+								})
+
+							// add new binding/section...
+							var elem = make('new', {
+								buttons: [
+									// XXX
+									['key', 
+										function(){
+											//elem.before( XXX )
+										}],
+									// XXX
+									['mode', 
+										function(){
+											//elem.after( XXX )
+										}],
+								]})
+								.addClass('new')
+						})
+				}, {
+					cls: 'key-bindings',
+
+					itemButtons: [
+						// XXX
+						['^', function(){}],
+						// XXX
+						['v', function(){}],
+						// XXX
+						['edit', function(){}],
+					],
+				})
+
+			return dialog
 		})],
 })
 

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

@@ -795,6 +795,10 @@ var BrowserPrototype = {
 	//								the text.
 	//								NOTE: empty strings will get replaced 
 	//									with  
+	//								NOTE: if one of the items or constructor
+	//									returns is "$BUTTONS" then this
+	//									item will get replaced with the 
+	//									button container
 	//	- DOM/jQuery			- an element to be used as an item
 	//
 	//	Both traversable and disabled are optional and can take bool 
@@ -1059,10 +1063,13 @@ var BrowserPrototype = {
 				var txt = p.join('')
 				// XXX check if traversable...
 				p = $(p.map(function(t){
-					return $('<span>')
+					return t == '$BUTTONS' ?
-						.addClass('text')
+						$('<span/>')
-						// here we also replace empty strings with &nbsp;...
+							.addClass('button-container')[0]
-						[t ? 'text' : 'html'](t || '&nbsp;')[0]
+						: $('<span>')
+							.addClass('text')
+							// here we also replace empty strings with &nbsp;...
+							[t ? 'text' : 'html'](t || '&nbsp;')[0]
 				}))
 
 			// jQuery or dom...
@@ -1113,9 +1120,17 @@ var BrowserPrototype = {
 			push_on_open && res.attr('push-on-open', 'on')
 
 			// buttons...
+			// button container...
+			var btn = res.find('.button-container')
+			btn = btn.length == 0 ? 
+				$('<span/>')
+					.addClass('button-container')
+					.appendTo(res)
+				: btn
+
 			// action (open)...
 			if(traversable && that.options.actionButton){
-				res.append($('<div>')
+				btn.append($('<div>')
 					.addClass('button')
 					.html(that.options.actionButton === true ? 
 						'&check;' 
@@ -1128,7 +1143,7 @@ var BrowserPrototype = {
 			}
 			// push...
 			if(traversable && that.options.pushButton){
-				res.append($('<div>')
+				btn.append($('<div>')
 					.addClass('button')
 					.html(that.options.pushButton ?
 						'p' 
@@ -1139,11 +1154,6 @@ var BrowserPrototype = {
 					}))
 			}
 
-			// button container...
-			var btn = $('<span/>')
-				.addClass('button-container')
-				.appendTo(res)
-
 			// custom buttons...
 			buttons && buttons
 				// make the order consistent for the user -- first