From 14e711400aa0be30bd487b9e68fdc11dfeee7a72 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Mon, 3 Jun 2019 19:22:01 +0300
Subject: [PATCH] started work on keyboard event support -- basic support now
 done...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/lib/widget/browse2.js | 103 ++++++++++++++++++++++++++------
 1 file changed, 85 insertions(+), 18 deletions(-)

diff --git a/ui (gen4)/lib/widget/browse2.js b/ui (gen4)/lib/widget/browse2.js
index f3da255f..16a52feb 100755
--- a/ui (gen4)/lib/widget/browse2.js	
+++ b/ui (gen4)/lib/widget/browse2.js	
@@ -2410,16 +2410,29 @@ var BaseBrowserPrototype = {
 	// 		-> this
 	//
 	//
-	// Passing an <event-name> will do the following:
-	// 	- if an <event-name> handler is available call it and return
-	// 		- the handler should:
-	// 			- do any specifics that it needs
-	// 			- create an <event-object>
-	// 			- call trigger with <event-object>
-	//  - if <event-name> has no handler:
-	//  	- create an <event-object>
-	//  	- call the event handlers passing them <event-object> and args
-	//  	- call parent's .trigger(<event-name>, ..)
+	// Optional event extension methods:
+	// 	Event shorthand 
+	// 	.<event-name>(..)
+	// 		called by .trigger(<event-name>, ..)
+	// 		...
+	// 		create <event-object>
+	// 		call .trigger(<event-object>, ..)
+	//
+	// 		Used for:
+	// 			- shorthand to .trigger(<event-name>, ..)
+	// 			- shorthand to .on(<event-name>, ..) 
+	// 			- base event functionality
+	//
+	// 		See: makeEventMethod(..) and makeItemEventMethod(..) for docs.
+	//
+	//
+	// 	Base event handler
+	// 	.__<event-name>__(event, ..)
+	// 		called by .trigger(<event-object>, ..) as the first handler
+	//
+	// 		Used as system event handler that can not be removed via 
+	// 		.off(..)
+	//
 	//
 	// for docs on <event-object> see BrowserEvent(..)
 	trigger: function(evt, ...args){
@@ -2451,6 +2464,9 @@ var BaseBrowserPrototype = {
 		;((this.__event_handlers || {})[evt.name] || [])
 			// prevent .off(..) from affecting the call loop...
 			.slice()
+			// add the static .__<event>__(..) handler if present...
+			.concat([this[`__${evt.name}__`] || []].flat())
+			// call handlers...
 			.forEach(function(handler){
 				handler.call(that, evt, ...args) })
 
@@ -2707,6 +2723,45 @@ var BrowserPrototype = {
 		},
 	},
 
+	__keyboard_config: {
+		General: {
+			pattern: '*',
+
+			// XXX should pause on overflow...
+			// XXX use up/down
+			Up: 'prev',
+			Down: 'next',
+
+			// XXX use left/right...
+			Left: 'collapse',
+			Right: 'expand',
+
+			Enter: 'open',
+		},
+	},
+
+	//__keyboard_config: null,
+	get keybindings(){
+		return this.__keyboard_config },
+
+	__keyboard_object: null,
+	get keyboard(){
+		var that = this
+		// XXX should this be here on in start event???
+		var kb = this.__keyboard_object = 
+			this.__keyboard_object 
+				|| keyboard.KeyboardWithCSSModes(
+					function(data){ 
+						if(data){
+							that.__keyboard_config = data
+						} else {
+							return that.__keyboard_config
+						}
+					},
+					function(){ return that.dom })
+		return kb },
+
+
 	// parent element (optional)...
 	// XXX rename???
 	// 		... should this be .containerDom or .parentDom???
@@ -2759,6 +2814,14 @@ var BrowserPrototype = {
 			d = c
 		}
 
+		d.setAttribute('tabindex', '0')
+
+		// XXX
+		d.addEventListener('keydown', 
+			keyboard.makeKeyboardHandler(this.keyboard, 
+				function(){ console.log('KEY:', ...arguments) },//null,
+	 			this))
+
 		this.dom = d
 		return this.dom
 	},
@@ -3043,13 +3106,18 @@ var BrowserPrototype = {
 	// 		....another idea is to force the user to use the provided API
 	// 		by not implementing ANY direct functionality in DOM -- I do
 	// 		not like this idea at this point as it violates POLS...
-	//open: function(func){},
-
-	//filter: function(){},
-
-	//select: function(){},
-	//get: function(){},
-	//focus: function(){},
+	__focus__: function(evt, elem){
+		elem.dom.classList.contains('list') ? 
+			elem.dom.querySelector('.item').focus() 
+			: elem.dom.focus() },
+	__select__: function(){},
+	__deselect__: function(){},
+	__expand__: function(){
+		this.focused
+			&& this.focus(this.focused) },
+	__collapse__: function(){
+		this.focused
+			&& this.focus(this.focused) },
 
 	// Navigation...
 	//
@@ -3064,7 +3132,6 @@ var BrowserPrototype = {
 	//collapse: function(){},
 	// XXX scroll...
 
-
 }