mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 02:10:08 +00:00
fighting section focus handling... sections keep resisting...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
eb668c5bdf
commit
e3e3c175cb
@ -615,6 +615,9 @@ function(event, {handler, action, default_item, filter, options={}, getter='sear
|
|||||||
var makeOptions = function(){
|
var makeOptions = function(){
|
||||||
return Object.assign(
|
return Object.assign(
|
||||||
{
|
{
|
||||||
|
// get items from all sections...
|
||||||
|
// XXX SECTION_FOCUS
|
||||||
|
//section: '*',
|
||||||
// NOTE: we need to be able to pass item objects, so we can not
|
// NOTE: we need to be able to pass item objects, so we can not
|
||||||
// use queries at the same time as there is not way to
|
// use queries at the same time as there is not way to
|
||||||
// distinguish one from the other...
|
// distinguish one from the other...
|
||||||
@ -877,7 +880,9 @@ var BaseBrowserPrototype = {
|
|||||||
'footer',
|
'footer',
|
||||||
],
|
],
|
||||||
|
|
||||||
focusDisabled: false,
|
focusDisabledItems: false,
|
||||||
|
|
||||||
|
allowSecondaySectionFocus: false,
|
||||||
|
|
||||||
// If true item keys must be unique...
|
// If true item keys must be unique...
|
||||||
uniqueKeys: false,
|
uniqueKeys: false,
|
||||||
@ -3056,18 +3061,40 @@ var BaseBrowserPrototype = {
|
|||||||
// NOTE: this will reveal the focused item...
|
// NOTE: this will reveal the focused item...
|
||||||
focus: makeItemEventMethod('focus', {
|
focus: makeItemEventMethod('focus', {
|
||||||
handler: function(evt, items){
|
handler: function(evt, items){
|
||||||
|
var item = items.shift()
|
||||||
|
// do not change focus if item is not in the main section...
|
||||||
|
// NOTE: we will still trigger item focus handlers...
|
||||||
|
/*/ XXX SECTION_FOCUS
|
||||||
|
if(item != null
|
||||||
|
&& this.get(item) == null
|
||||||
|
&& !(this.options || {}).allowSecondaySectionFocus){
|
||||||
|
// XXX this fixes the .__focus__(..) falling into recursion
|
||||||
|
// problem but prevent non-main-section item handlers
|
||||||
|
// from triggering...
|
||||||
|
evt.stopPropagation()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//*/
|
||||||
// blur .focused...
|
// blur .focused...
|
||||||
this.focused
|
this.focused
|
||||||
&& this.blur(this.focused)
|
&& this.blur(this.focused)
|
||||||
// NOTE: if we got multiple matches we care only about the first one...
|
// NOTE: if we got multiple matches we care only about the first one...
|
||||||
var item = items.shift()
|
|
||||||
item != null
|
item != null
|
||||||
&& this.reveal(item)
|
&& this.reveal(item)
|
||||||
&& (item.focused = true) },
|
&& (item.focused = true) },
|
||||||
default_item: function(){ return this.get(0) },
|
default_item: function(){ return this.get(0) },
|
||||||
options: function(){
|
options: function(){
|
||||||
return {
|
return {
|
||||||
skipDisabled: !(this.options || {}).focusDisabled,
|
/*/ XXX SECTION_FOCUS this set to '*' will enable non-main-section
|
||||||
|
// to be passed to .focus(..) handlers, otherwise they will
|
||||||
|
// get undefined (i.e. blur the .focused item)...
|
||||||
|
// ...setting this to '*' will also make next/prev keywords get
|
||||||
|
// other section items...
|
||||||
|
// ...in turn this will break .__focus__(..) when
|
||||||
|
// on footer/header...
|
||||||
|
section: '*',
|
||||||
|
//*/
|
||||||
|
skipDisabled: !(this.options || {}).focusDisabledItems,
|
||||||
} },
|
} },
|
||||||
getter: 'get' }),
|
getter: 'get' }),
|
||||||
blur: makeItemEventMethod('blur', {
|
blur: makeItemEventMethod('blur', {
|
||||||
@ -3092,7 +3119,7 @@ var BaseBrowserPrototype = {
|
|||||||
select: makeItemOptionOnEventMethod('select', 'selected', {
|
select: makeItemOptionOnEventMethod('select', 'selected', {
|
||||||
options: function(){
|
options: function(){
|
||||||
return {
|
return {
|
||||||
skipDisabled: !(this.options || {}).focusDisabled,
|
skipDisabled: !(this.options || {}).focusDisabledItems,
|
||||||
} }, }),
|
} }, }),
|
||||||
deselect: makeItemOptionOffEventMethod('deselect', 'selected', {
|
deselect: makeItemOptionOffEventMethod('deselect', 'selected', {
|
||||||
options: { skipDisabled: false }, }),
|
options: { skipDisabled: false }, }),
|
||||||
@ -3113,7 +3140,7 @@ var BaseBrowserPrototype = {
|
|||||||
// item state events...
|
// item state events...
|
||||||
disable: makeItemOptionOnEventMethod('disable', 'disabled',
|
disable: makeItemOptionOnEventMethod('disable', 'disabled',
|
||||||
{ handler: function(item){
|
{ handler: function(item){
|
||||||
(this.options || {}).focusDisabled
|
(this.options || {}).focusDisabledItems
|
||||||
|| this.blur(item) }, }),
|
|| this.blur(item) }, }),
|
||||||
enable: makeItemOptionOffEventMethod('enable', 'disabled',
|
enable: makeItemOptionOffEventMethod('enable', 'disabled',
|
||||||
{ options: {skipDisabled: false}, }),
|
{ options: {skipDisabled: false}, }),
|
||||||
@ -3475,8 +3502,8 @@ var focusItem = function(direction){
|
|||||||
var threashold = this.options.focusOffsetWhileScrolling || 0
|
var threashold = this.options.focusOffsetWhileScrolling || 0
|
||||||
|
|
||||||
var focused = this.focused
|
var focused = this.focused
|
||||||
var first = this.get('first', {skipDisabled: !(this.options || {}).focusDisabled})
|
var first = this.get('first', {skipDisabled: !(this.options || {}).focusDisabledItems})
|
||||||
var last = this.get('last', {skipDisabled: !(this.options || {}).focusDisabled})
|
var last = this.get('last', {skipDisabled: !(this.options || {}).focusDisabledItems})
|
||||||
|
|
||||||
// center the first/last elements to reveal hidden items before/after...
|
// center the first/last elements to reveal hidden items before/after...
|
||||||
;(focused === last || focused === first) ?
|
;(focused === last || focused === first) ?
|
||||||
@ -3511,12 +3538,12 @@ var focusPage = function(direction){
|
|||||||
var focused = this.focused
|
var focused = this.focused
|
||||||
|
|
||||||
// reveal diabled elements above the top focusable...
|
// reveal diabled elements above the top focusable...
|
||||||
;(target === this.get(t, {skipDisabled: !(this.options || {}).focusDisabled})
|
;(target === this.get(t, {skipDisabled: !(this.options || {}).focusDisabledItems})
|
||||||
&& target === focused) ?
|
&& target === focused) ?
|
||||||
this.scrollTo(target, 'center')
|
this.scrollTo(target, 'center')
|
||||||
// scroll one page and focus...
|
// scroll one page and focus...
|
||||||
: target === focused ?
|
: target === focused ?
|
||||||
this.focus(this.get(d, 1, {skipDisabled: !(this.options || {}).focusDisabled}))
|
this.focus(this.get(d, 1, {skipDisabled: !(this.options || {}).focusDisabledItems}))
|
||||||
// focus top/bottom of current page...
|
// focus top/bottom of current page...
|
||||||
: this.focus(target)
|
: this.focus(target)
|
||||||
|
|
||||||
@ -3787,7 +3814,7 @@ var HTMLBrowserPrototype = {
|
|||||||
reverse: pos == 'bottom' ?
|
reverse: pos == 'bottom' ?
|
||||||
'flat'
|
'flat'
|
||||||
: false,
|
: false,
|
||||||
skipDisabled: !(this.options || {}).focusDisabled,
|
skipDisabled: !(this.options || {}).focusDisabledItems,
|
||||||
})
|
})
|
||||||
.run(function(){
|
.run(function(){
|
||||||
return this instanceof Array ?
|
return this instanceof Array ?
|
||||||
@ -4109,7 +4136,7 @@ var HTMLBrowserPrototype = {
|
|||||||
// ...can a disabled item be focused?
|
// ...can a disabled item be focused?
|
||||||
// ...how do we collapse/expand a disabled root?
|
// ...how do we collapse/expand a disabled root?
|
||||||
// ...what do we focus when toggleing disabled?
|
// ...what do we focus when toggleing disabled?
|
||||||
// XXX handle .options.focusDisabled correctly...
|
// XXX handle .options.focusDisabledItems correctly...
|
||||||
// - tabindex -- DONE
|
// - tabindex -- DONE
|
||||||
// - ???
|
// - ???
|
||||||
renderItem: function(item, i, context){
|
renderItem: function(item, i, context){
|
||||||
@ -4178,7 +4205,7 @@ var HTMLBrowserPrototype = {
|
|||||||
return !!item[cls] })))
|
return !!item[cls] })))
|
||||||
|
|
||||||
// attrs...
|
// attrs...
|
||||||
;(item.disabled && !options.focusDisabled)
|
;(item.disabled && !options.focusDisabledItems)
|
||||||
|| elem.setAttribute('tabindex', '0')
|
|| elem.setAttribute('tabindex', '0')
|
||||||
Object.entries(item.attrs || {})
|
Object.entries(item.attrs || {})
|
||||||
// shorthand attrs...
|
// shorthand attrs...
|
||||||
@ -4239,6 +4266,9 @@ var HTMLBrowserPrototype = {
|
|||||||
// NOTE: we do not retrigger focus on an item if it's
|
// NOTE: we do not retrigger focus on an item if it's
|
||||||
// already focused...
|
// already focused...
|
||||||
that.focused !== item
|
that.focused !== item
|
||||||
|
// only trigger focus on gettable items...
|
||||||
|
// ...i.e. items in the main section excluding headers
|
||||||
|
// and footers...
|
||||||
&& that.focus(item) })
|
&& that.focus(item) })
|
||||||
elem.addEventListener('contextmenu',
|
elem.addEventListener('contextmenu',
|
||||||
function(evt){
|
function(evt){
|
||||||
@ -4323,6 +4353,8 @@ var HTMLBrowserPrototype = {
|
|||||||
// we tab out of the item focus the item we get to...
|
// we tab out of the item focus the item we get to...
|
||||||
button.addEventListener('focus', function(){
|
button.addEventListener('focus', function(){
|
||||||
item.focused
|
item.focused
|
||||||
|
// only focus items in the main section,
|
||||||
|
// outside of headers and footers...
|
||||||
|| that.focus(item)
|
|| that.focus(item)
|
||||||
&& button.focus() })
|
&& button.focus() })
|
||||||
// main button action (click/enter)...
|
// main button action (click/enter)...
|
||||||
@ -4378,19 +4410,6 @@ var HTMLBrowserPrototype = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
/* XXX sort out .dom updates...
|
|
||||||
render: function(...args){
|
|
||||||
var res = object.parent(HTMLBrowserPrototype.render, this).call(this, ...args)
|
|
||||||
|
|
||||||
// XXX set .dom...
|
|
||||||
// ...need support for item lists...
|
|
||||||
//this.dom = res
|
|
||||||
|
|
||||||
return res
|
|
||||||
},
|
|
||||||
//*/
|
|
||||||
|
|
||||||
|
|
||||||
// Events extensions...
|
// Events extensions...
|
||||||
//
|
//
|
||||||
// NOTE: this will also kill any user-set keys for disabled/hidden items...
|
// NOTE: this will also kill any user-set keys for disabled/hidden items...
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user