mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +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