added tab handling to browse + now sorting works in bk editor + refactoring...

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

ui (gen4)/features/history.js

@@ -594,7 +594,7 @@ var URLHistoryUIActions = actions.Actions({
 								o.redraw()
 							}],
 						// mark for removal...
-						widgets.makeRemoveItemButton(to_remove)
+						browse.buttons.markForRemoval(to_remove)
 					],
 				})
 				.open(function(evt, path){ 

ui (gen4)/features/keyboard.js

@@ -866,6 +866,7 @@ var KeyboardActions = actions.Actions({
 										disabled: true,
 										hide_on_search: true,
 									})
+									.attr('mode', mode)
 									.addClass('info')
 
 							// unpropagated and unbound keys...
@@ -890,6 +891,7 @@ var KeyboardActions = actions.Actions({
 								var elem = make('new', {
 										buttons: options.mode_actions,
 									})
+									.attr('mode', mode)
 									.addClass('new')
 							}
 						})
@@ -917,10 +919,29 @@ var KeyboardActions = actions.Actions({
 
 			return dialog
 		})],
+	// XXX do we need a binding to add new keys to current mode from the 
+	// 		keyboard???
 	// XXX BUG: for some reason modes are unclickable...
 	editKeyboardBindings: ['Interface/Keyboard bindings editor...',
 		widgets.uiDialog(function(path){ 
 			var that = this
+			var bindings = this.keybindings
+
+			var sortModes = function(list){
+				var ordered = {}
+				list.find('[mode]')
+					.map(function(){ return $(this).attr('mode')})
+					.toArray()
+					.unique()
+					.forEach(function(mode){
+						ordered[mode] = bindings[mode]
+					})
+				// reorder only if we moved all the modes...
+				if(Object.keys(bindings).length == Object.keys(ordered).length){
+					that.__keyboard_config = ordered
+				}
+			}
+
 			var dialog = this.browseKeyboardBindings(
 				path, 
 				{
@@ -930,11 +951,39 @@ var KeyboardActions = actions.Actions({
 
 					// mode...
 					mode_buttons: [
-						// XXX up
+						// up...
 						['⏶', function(_, cur){
+								var mode = cur.attr('mode')
+								var elems = cur.parent().find('[mode="'+mode+'"]')
+								var prev = elems.first().prev('[mode]').attr('mode')
+
+								// move only if we have somewhere to move...
+								if(prev){
+									cur.parent().find('[mode="'+prev+'"]')
+										.first()
+										.before(elems)
+									dialog.select(elems.first())
+
+									// do the actual section ordering...
+									sortModes(cur.parent())
+								}
 							}],
-						// XXX down
+						// down...
 						['⏷', function(_, cur){
+								var mode = cur.attr('mode')
+								var elems = cur.parent().find('[mode="'+mode+'"]')
+								var next = elems.last().next('[mode]').attr('mode')
+
+								// move only if we have somewhere to move...
+								if(next){
+									cur.parent().find('[mode="'+next+'"]')
+										.last()
+										.after(elems)
+									dialog.select(elems.first())
+
+									// do the actual section ordering...
+									sortModes(cur.parent())
+								}
 							}],
 						['⋯', function(_, cur){
 							that.editKeyboardMode(cur.attr('mode'))
@@ -945,6 +994,7 @@ var KeyboardActions = actions.Actions({
 							//elem.before( XXX )
 							that.editKeyBinding(cur.attr('mode'))
 								.close(function(){ dialog.update() }) }],
+						// XXX place element...
 						['mode', function(_, cur){
 							//elem.after( XXX )
 							// XXX need to pass order info...
@@ -952,6 +1002,7 @@ var KeyboardActions = actions.Actions({
 								.close(function(){ dialog.update() }) }],
 					],
 
+					/*/ XXX do we need this???
 					// keys...
 					key_buttons: [
 						['⋯', function(_, cur){
@@ -965,6 +1016,7 @@ var KeyboardActions = actions.Actions({
 							that.editKeyboardModeDroppedKeys(cur.attr('mode'))
 								.close(function(){ dialog.update() }) }],
 					],
+					//*/
 				})
 				// XXX should this be only a button thing (done in .browseKeyboardBindings(..))
 				// 		or also the main action???
@@ -1027,23 +1079,24 @@ var KeyboardActions = actions.Actions({
 						.forEach(function(key){
 							// XXX make editable...
 							make(key, { buttons: [
-								widgets.makeRemoveItemButton(to_remove),
+								browse.buttons.markForRemoval(to_remove)
 							], })
 						})
 
-					var new_button = make('New key')
-						.addClass('action')
+					var new_button = make.Action('New key')
 						.on('open', function(){ 
 							widgets.editItem(dialog, new_button)
 						})
 
 					make('---')
 					
-					widgets.makeConfirmActionItem(make('Delete'),
-						function(){
+					make.ConfirmAction('Delete', {
+						callback: function(){
 							// XXX
 							dialog.close()
-						}, that.config['confirm-delete-timeout'] || 2000)
+						}, 
+						timeout: that.config['confirm-delete-timeout'] || 2000,
+					})
 				},
 				{
 					cls: 'metadata-view',
@@ -1066,13 +1119,15 @@ var KeyboardActions = actions.Actions({
 
 					make('---')
 
-					widgets.makeConfirmActionItem(make('Delete'),
-						function(){
+					make.ConfirmAction('Delete', {
+						callback: function(){
 							if(mode in that.keybindings){
 								delete that.keybindings[mode]
 							}
 							dialog.close()
-						}, that.config['confirm-delete-timeout'] || 2000)
+						}, 
+						timeout: that.config['confirm-delete-timeout'] || 2000,
+					})
 				},
 				{
 					cls: 'metadata-view',

ui (gen4)/features/ui-widgets.js

@@ -166,70 +166,6 @@ function(list, elem, callback, options){
 }
 
 
-var makeRemoveItemButton = 
-module.makeRemoveItemButton = 
-function makeRemoveItemButton(list, html){
-	return [html || '×', 
-		function(p, e){
-			e.toggleClass('strike-out')
-
-			if(e.hasClass('strike-out')){
-				list.indexOf(p) < 0 
-					&& list.push(p)
-
-			} else {
-				var i = list.indexOf(p)
-				if(i >= 0){
-					list.splice(i, 1)
-				}
-			}
-		}]
-}
-
-
-var makeConfirmActionItem =
-module.makeConfirmActionItem =
-function makeConfirmActionItem(elem, callback, timeout, confirm_text){
-	confirm_text = confirm_text ? 
-		confirm_text 
-		: 'Confirm '+ elem.text().toLowerCase() +'?'
-	var text
-
-	return elem
-		.addClass('action')
-		.on('open', function(){
-			var item = $(this)
-			var elem = item.find('.text')
-
-			// ready to delete...
-			if(elem.text() != confirm_text){
-				text = elem.text()
-
-				elem.text(confirm_text)
-
-				item.addClass('warn')
-
-				// reset...
-				setTimeout(function(){
-					elem.text(text)
-
-					item.removeClass('warn')
-				}, timeout || 2000)
-
-			// confirmed...
-			} else {
-				callback && callback()
-			}
-		})
-}
-
-
-var makeNewEditableItem =
-module.makeNewEditableItem =
-function makeNewEditableItem(elem){
-}
-
-
 //
 // Options format:
 // 	{
@@ -363,7 +299,7 @@ function(list, options){
 				path: options.path,
 				itemButtons: options.itemButtons || [
 					// mark for removal...
-					makeRemoveItemButton(to_remove)
+					browse.buttons.markForRemoval(to_remove)
 					// XXX add shift up/down/top/bottom and other buttons (optional)...
 				]
 			})
@@ -444,6 +380,10 @@ function(actions, path, options){
 }
 
 
+// XXX do we actually need this???
+// 		...this essentially adds:
+// 		- callbacks to parent to update
+// 		- some defaults...
 // XXX should this be more generic...
 // XXX currently using this also requires the use of makeUIDialog(..),
 // 		can this be simpler???

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

@@ -66,6 +66,118 @@ function makeSimpleAction(direction){
 
 
 
+/*********************************************************************/
+// collections of helpers...
+
+//---------------------------------------------------------------------
+// NOTE: all item constructors/helpers abide by either the new-style 
+// 		make protocol, i.e. make(content[, options]) or their own...
+var Items = module.items = function(){}
+
+// NOTE: this is the same as make('---'[, options])
+Items.Separator = 
+function(options){
+	return this('---', options) }
+
+Items.Action = 
+function(text, options){
+	return this(text, options)
+		.addClass('action') }
+
+Items.ConfirmAction = 
+function(text, options){
+	options = options || {}
+
+	var elem = this.Action(text, options)
+
+	var callback = options.callback
+	var timeout = options.timeout || 2000
+	var confirm_text = options.confirm_text ? 
+		options.confirm_text 
+		: 'Confirm '+ elem.text().toLowerCase() +'?'
+	var text
+
+	return elem 
+		.on('open', function(){
+			var item = $(this)
+			var elem = item.find('.text')
+
+			// ready to delete...
+			if(elem.text() != confirm_text){
+				text = elem.text()
+
+				elem.text(confirm_text)
+
+				item.addClass('warn')
+
+				// reset...
+				setTimeout(function(){
+					elem.text(text)
+
+					item.removeClass('warn')
+				}, timeout)
+
+			// confirmed...
+			} else {
+				callback && callback()
+			}
+		})
+}
+
+// XXX
+Items.Selectable =
+function(text, options){
+}
+
+// XXX
+Items.Editable =
+function(text, options){
+}
+
+// XXX
+Items.SelectableField =
+function(text, options){
+}
+
+// XXX
+Items.EditableField =
+function(text, options){
+}
+
+
+
+//---------------------------------------------------------------------
+// Browse item buttons (button constructors)...
+
+var Buttons = 
+Items.buttons =
+module.buttons = {
+	// Mark an item for removal and add it to a list of marked items...
+	//
+	markForRemoval: function(list, html){
+		return [html || '×', 
+			function(p, e){
+				e.toggleClass('strike-out')
+
+				if(list == null){
+					return
+				}
+
+				if(e.hasClass('strike-out')){
+					list.indexOf(p) < 0 
+						&& list.push(p)
+
+				} else {
+					var i = list.indexOf(p)
+					i >= 0
+						&& list.splice(i, 1)
+				}
+			}]
+	},
+}
+
+
+
 /*********************************************************************/
 
 // NOTE: the widget itself does not need a title, that's the job for
@@ -422,6 +534,13 @@ var BrowserPrototype = {
 			Right: 'right',
 			P: 'push',
 
+			// XXX should these also select buttons???
+			Tab: 'down!',
+			shift_Tab: 'up!',
+
+			// XXX is this correct??
+			ctrl_Tab: 'nop!',
+
 			// XXX
 			PgUp: 'prevPage!',
 			PgDown: 'nextPage!',
@@ -988,7 +1107,7 @@ var BrowserPrototype = {
 			}
 
 			// options passed as an object...
-			if(traversable != null && typeof(traversable) == typeof({})){
+			if(traversable != null && typeof(traversable) != typeof(true)){
 				opts = traversable
 
 				traversable = opts.traversable
@@ -1180,6 +1299,8 @@ var BrowserPrototype = {
 			return res
 		}
 
+		make.__proto__ = Items
+
 		// align the dialog...
 		make.done = function(){
 			var s = l.find('.selected')