mirror of
				https://github.com/flynx/ImageGrid.git
				synced 2025-10-31 03:10:07 +00:00 
			
		
		
		
	started work on keyboard event support -- basic support now done...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
		
							parent
							
								
									d3b155f5c0
								
							
						
					
					
						commit
						14e711400a
					
				| @ -2410,16 +2410,29 @@ var BaseBrowserPrototype = { | |||||||
| 	// 		-> this
 | 	// 		-> this
 | ||||||
| 	//
 | 	//
 | ||||||
| 	//
 | 	//
 | ||||||
| 	// Passing an <event-name> will do the following:
 | 	// Optional event extension methods:
 | ||||||
| 	// 	- if an <event-name> handler is available call it and return
 | 	// 	Event shorthand 
 | ||||||
| 	// 		- the handler should:
 | 	// 	.<event-name>(..)
 | ||||||
| 	// 			- do any specifics that it needs
 | 	// 		called by .trigger(<event-name>, ..)
 | ||||||
| 	// 			- create an <event-object>
 | 	// 		...
 | ||||||
| 	// 			- call trigger with <event-object>
 | 	// 		create <event-object>
 | ||||||
| 	//  - if <event-name> has no handler:
 | 	// 		call .trigger(<event-object>, ..)
 | ||||||
| 	//  	- create an <event-object>
 | 	//
 | ||||||
| 	//  	- call the event handlers passing them <event-object> and args
 | 	// 		Used for:
 | ||||||
| 	//  	- call parent's .trigger(<event-name>, ..)
 | 	// 			- 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(..)
 | 	// for docs on <event-object> see BrowserEvent(..)
 | ||||||
| 	trigger: function(evt, ...args){ | 	trigger: function(evt, ...args){ | ||||||
| @ -2451,6 +2464,9 @@ var BaseBrowserPrototype = { | |||||||
| 		;((this.__event_handlers || {})[evt.name] || []) | 		;((this.__event_handlers || {})[evt.name] || []) | ||||||
| 			// prevent .off(..) from affecting the call loop...
 | 			// prevent .off(..) from affecting the call loop...
 | ||||||
| 			.slice() | 			.slice() | ||||||
|  | 			// add the static .__<event>__(..) handler if present...
 | ||||||
|  | 			.concat([this[`__${evt.name}__`] || []].flat()) | ||||||
|  | 			// call handlers...
 | ||||||
| 			.forEach(function(handler){ | 			.forEach(function(handler){ | ||||||
| 				handler.call(that, evt, ...args) }) | 				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)...
 | 	// parent element (optional)...
 | ||||||
| 	// XXX rename???
 | 	// XXX rename???
 | ||||||
| 	// 		... should this be .containerDom or .parentDom???
 | 	// 		... should this be .containerDom or .parentDom???
 | ||||||
| @ -2759,6 +2814,14 @@ var BrowserPrototype = { | |||||||
| 			d = c | 			d = c | ||||||
| 		} | 		} | ||||||
| 
 | 
 | ||||||
|  | 		d.setAttribute('tabindex', '0') | ||||||
|  | 
 | ||||||
|  | 		// XXX
 | ||||||
|  | 		d.addEventListener('keydown',  | ||||||
|  | 			keyboard.makeKeyboardHandler(this.keyboard,  | ||||||
|  | 				function(){ console.log('KEY:', ...arguments) },//null,
 | ||||||
|  | 	 			this)) | ||||||
|  | 
 | ||||||
| 		this.dom = d | 		this.dom = d | ||||||
| 		return this.dom | 		return this.dom | ||||||
| 	}, | 	}, | ||||||
| @ -3043,13 +3106,18 @@ var BrowserPrototype = { | |||||||
| 	// 		....another idea is to force the user to use the provided API
 | 	// 		....another idea is to force the user to use the provided API
 | ||||||
| 	// 		by not implementing ANY direct functionality in DOM -- I do
 | 	// 		by not implementing ANY direct functionality in DOM -- I do
 | ||||||
| 	// 		not like this idea at this point as it violates POLS...
 | 	// 		not like this idea at this point as it violates POLS...
 | ||||||
| 	//open: function(func){},
 | 	__focus__: function(evt, elem){ | ||||||
| 
 | 		elem.dom.classList.contains('list') ?  | ||||||
| 	//filter: function(){},
 | 			elem.dom.querySelector('.item').focus()  | ||||||
| 
 | 			: elem.dom.focus() }, | ||||||
| 	//select: function(){},
 | 	__select__: function(){}, | ||||||
| 	//get: function(){},
 | 	__deselect__: function(){}, | ||||||
| 	//focus: function(){},
 | 	__expand__: function(){ | ||||||
|  | 		this.focused | ||||||
|  | 			&& this.focus(this.focused) }, | ||||||
|  | 	__collapse__: function(){ | ||||||
|  | 		this.focused | ||||||
|  | 			&& this.focus(this.focused) }, | ||||||
| 
 | 
 | ||||||
| 	// Navigation...
 | 	// Navigation...
 | ||||||
| 	//
 | 	//
 | ||||||
| @ -3064,7 +3132,6 @@ var BrowserPrototype = { | |||||||
| 	//collapse: function(){},
 | 	//collapse: function(){},
 | ||||||
| 	// XXX scroll...
 | 	// XXX scroll...
 | ||||||
| 
 | 
 | ||||||
| 
 |  | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user