more refactoring and tweaking...

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

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

@@ -31,6 +31,10 @@ var DrawerClassPrototype = {
 				})
 				.append(client))
 		
+		if(options.focusable){
+			overlay.attr('tabindex', 0)
+		}
+
 		return overlay
 	},
 }
@@ -41,6 +45,8 @@ var DrawerPrototype = {
 	client: null,
 
 	options: {
+		focusable: false,
+
 		'close-at': 40,
 		'fade-at': 100,
 		'animate': 120,
@@ -53,7 +59,8 @@ var DrawerPrototype = {
 
 	keyboard: {
 		General: {
-			pattern: '.browse-widget',
+			//pattern: '.drawer-widget',
+			pattern: '*',
 
 			Esc: 'close',
 		},
@@ -82,6 +89,7 @@ var DrawerPrototype = {
 		} else {
 			this.on('close', handler)
 		}
+		return this
 	},
 
 	__init__: function(parent, client, options){
@@ -131,8 +139,11 @@ var DrawerPrototype = {
 				})
 
 		// focus the client...
-		if(client.focus){
+		if(client.dom && client.focus){
 			client.focus()
+
+		} else {
+			this.focus()
 		}
 
 		return this

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

@@ -31,6 +31,10 @@ var OverlayClassPrototype = {
 				})
 				.append(client))
 
+		if(options.focusable){
+			overlay.attr('tabindex', 0)
+		}
+
 		return overlay
 	},
 }
@@ -41,15 +45,19 @@ var OverlayPrototype = {
 	client: null,
 
 	options: {
+		focusable: false,
+
 		nonPropagatedEvents: [
 			'click',
 			'keydown',
 		],
 	},
 
+	// XXX for some reason this does not work...
 	keyboard: {
 		General: {
-			pattern: '.browse-widget',
+			//pattern: '.overlay-widget',
+			pattern: '*',
 
 			Esc: 'close',
 		},
@@ -69,6 +77,7 @@ var OverlayPrototype = {
 		} else {
 			this.on('close', handler)
 		}
+		return this
 	},
 
 	__init__: function(parent, client, options){
@@ -86,8 +95,11 @@ var OverlayPrototype = {
 			.append(this.dom)
 
 		// focus the client...
-		if(client.focus){
+		if(client.dom && client.focus){
 			client.focus()
+
+		} else {
+			this.focus()
 		}
 
 		return this

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

@@ -102,12 +102,12 @@ var WidgetPrototype = {
 
 		// build the dom...
 		if(this.constructor.make){
-			var dom = this.dom = this.constructor.make(options)
+			this.dom = this.constructor.make(options)
 		}
 
 		// add keyboard handler...
-		if(this.keyboard){
+		if(this.keyboard && this.dom){
-			dom.keydown(
+			this.dom.keydown(
 				keyboard.makeKeyboardHandler(
 					this.keyboard,
 					options.logKeys,
@@ -134,6 +134,20 @@ var ContainerClassPrototype = {
 
 
 var ContainerPrototype = {
+
+	focus: function(handler){
+		if(handler != null){
+			this.on('focus', handler)
+
+		} else {
+			this.dom.focus()
+			this.client
+				&& this.client.focus 
+				&& this.client.focus()
+		}
+		return this
+	},
+
 	// XXX this is the same as WidgetPrototype.__init__ but also handles
 	// 		the client...
 	__init__: function(parent, client, options){
@@ -150,12 +164,13 @@ var ContainerPrototype = {
 
 		// build the dom...
 		if(this.constructor.make){
-			var dom = this.dom = this.constructor.make(client.dom || client, options)
+			this.dom = this.constructor
+				.make(client.dom || client, options)
 		}
 
 		// add keyboard handler...
-		if(this.keyboard){
+		if(this.keyboard && this.dom){
-			dom.keydown(
+			this.dom.keydown(
 				keyboard.makeKeyboardHandler(
 					this.keyboard,
 					options.logKeys,

ui (gen4)/viewer.js

@@ -2218,12 +2218,16 @@ var browse = require('lib/widget/browse')
 var overlay = require('lib/widget/overlay')
 var drawer = require('lib/widget/drawer')
 
+// This will wrap the actions adding a contextual .preventClosing() method, 
+// if called it will prevent the list from closing on open event and give 
+// the user control over when to close the base list...
 var makeActionLister = function(list, filter, pre_order){
 	pre_order = typeof(filter) == typeof(true) ? filter : pre_order
 	filter = typeof(filter) == typeof(true) ? null : filter
 
 	return function(path){
-		var paths = a.getPath()
+		var that = this
+		var paths = this.getPath()
 		var actions = {}
 
 		// pre-order the main categories...
@@ -2233,38 +2237,47 @@ var makeActionLister = function(list, filter, pre_order){
 			})
 		}
 
+		var closingPrevented = false
+
 		// build the action list...
 		Object.keys(paths).forEach(function(k){
 			var n = paths[k][0]
 			var k = filter ? filter(k, n) : k
+
 			// pass args to listers...
 			if(k.slice(-1) == '*'){
 				actions[k] = function(){
+
+					var a = Object.create(that)
+					a.preventClosing = function(){ 
+						closingPrevented = true 
+						return o
+					}
+
 					return a[n].apply(a, arguments)
 				}
 			// ignore args of actions...
 			} else {
 				actions[k] = function(){
+
+					var a = Object.create(that)
+					a.preventClosing = function(){ 
+						closingPrevented = true 
+						return o
+					}
+
 					return a[n]()
 				}
 			}
 		})
 
-		var closingPrevented = false
-
 		var o = overlay.Overlay($('body'), 
 			list(null, actions, path)
 				.open(function(evt){ 
-
+					if(!closingPrevented){
-					evt.preventClosing = 
+						o.close() 
-						event.preventClosing = 
+					}
-							function(){ closingPrevented = true }
+					closingPrevented = false
-
-					setTimeout(function(){
-						if(!closingPrevented){
-							o.close() 
-						}
-					}, 0)
 				}))
 
 		// XXX DEBUG
@@ -2288,7 +2301,7 @@ var ActionTreeActions = actions.Actions({
 				return a +' ('+ l.join(', ') +')'
 			})],
 
-	// XXX lister test...
+	// XXX this is just a test...
 	embededListerTest: ['Interface/Lister test (embeded)/*',
 		function(path, make){
 			make('a/')
@@ -2297,10 +2310,7 @@ var ActionTreeActions = actions.Actions({
 		}],
 	floatingListerTest: ['Interface/Lister test (floating)...',
 		function(path){
-			console.log('11111111')
+			var parent = this.preventClosing ? this.preventClosing() : null
-			event 
-				&& event.preventClosing 
-				&& event.preventClosing()
 
 			// we got an argument and can exit...
 			if(path){
@@ -2325,11 +2335,20 @@ var ActionTreeActions = actions.Actions({
 				})
 					.open(function(evt, path){ 
 						o.close() 
+
+						// close the parent ui...
+						parent 
+							&& parent.close 
+							&& parent.close()
+
 						that.floatingListerTest(path)
 					}))
+					.close(function(){
+						parent 
+							&& parent.focus 
+							&& parent.focus()
+					})
 		}],
-
-	// XXX this is just a test...
 	drawerTest:['Interface/Drawer widget test',
 		function(){
 			drawer.Drawer($('body'), 
@@ -2342,7 +2361,10 @@ var ActionTreeActions = actions.Actions({
 					.append($('<h1>')
 						.text('Drawer test...'))
 					.append($('<p>')
-						.text('With some text.')))
+						.text('With some text.')),
+				{
+					focusable: true,
+				})
 		}],
 })