| 1 |
export const TAB_ELEMENT_TYPE = 'e-tab'; |
| 2 |
export const TAB_CONTENT_ELEMENT_TYPE = 'e-tab-content'; |
| 3 |
export const TABS_CONTENT_AREA_ELEMENT_TYPE = 'e-tabs-content-area'; |
| 4 |
export const TABS_MENU_ELEMENT_TYPE = 'e-tabs-menu'; |
| 5 |
|
| 6 |
const NAVIGATE_UP_KEYS = [ 'ArrowUp', 'ArrowLeft' ]; |
| 7 |
const NAVIGATE_DOWN_KEYS = [ 'ArrowDown', 'ArrowRight' ]; |
| 8 |
|
| 9 |
export const getTabId = ( tabsId, tabIndex ) => { |
| 10 |
return `${ tabsId }-tab-${ tabIndex }`; |
| 11 |
}; |
| 12 |
|
| 13 |
export const getTabContentId = ( tabsId, tabIndex ) => { |
| 14 |
return `${ tabsId }-tab-content-${ tabIndex }`; |
| 15 |
}; |
| 16 |
|
| 17 |
export const getChildren = ( el, elementType ) => { |
| 18 |
const parent = el.parentElement; |
| 19 |
|
| 20 |
return Array.from( parent.children ).filter( ( child ) => { |
| 21 |
return child.dataset.element_type === elementType; |
| 22 |
} ); |
| 23 |
}; |
| 24 |
|
| 25 |
export const getIndex = ( el, elementType ) => { |
| 26 |
const children = getChildren( el, elementType ); |
| 27 |
|
| 28 |
return children.indexOf( el ); |
| 29 |
}; |
| 30 |
|
| 31 |
export const getNextTab = ( key, tab ) => { |
| 32 |
const tabs = getChildren( tab, TAB_ELEMENT_TYPE ); |
| 33 |
const tabsLength = tabs.length; |
| 34 |
|
| 35 |
const currentIndex = getIndex( tab, TAB_ELEMENT_TYPE ); |
| 36 |
|
| 37 |
if ( NAVIGATE_DOWN_KEYS.includes( key ) ) { |
| 38 |
return tabs[ ( currentIndex + 1 ) % tabsLength ]; |
| 39 |
} |
| 40 |
|
| 41 |
if ( NAVIGATE_UP_KEYS.includes( key ) ) { |
| 42 |
return tabs[ ( currentIndex - 1 + tabsLength ) % tabsLength ]; |
| 43 |
} |
| 44 |
}; |
| 45 |
|
