mirror of
https://github.com/datahub-project/datahub.git
synced 2025-10-31 18:59:23 +00:00
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import IvyTabsTablistComponent from 'ivy-tabs/components/ivy-tabs-tablist';
|
|
import { noop } from 'wherehows-web/utils/helpers/functions';
|
|
import { scheduleOnce } from '@ember/runloop';
|
|
import { Keyboard } from 'wherehows-web/constants/keyboard';
|
|
|
|
export default IvyTabsTablistComponent.extend({
|
|
/**
|
|
* Overwrites the ofiginal ivy-tabs-tablist component's on('keydown') method, which lets the
|
|
* user navigate through the tabs using the arrow keys. As we don't want up and down arrows
|
|
* to interfere with page scroll, we change this to a noop function.
|
|
*/
|
|
navigateOnKeyDown: noop,
|
|
|
|
/**
|
|
* Using the more modern approach to handling component events, we include the functionality
|
|
* to scroll between tabs with the left and right arrow keys. This way, the user can scroll
|
|
* between tabs with the left/right keys and use the up/down keys to scroll the page, without
|
|
* interruption
|
|
*/
|
|
keyDown(event: KeyboardEvent) {
|
|
switch (event.keyCode) {
|
|
case Keyboard.ArrowLeft:
|
|
this.selectPreviousTab();
|
|
break;
|
|
case Keyboard.ArrowRight:
|
|
this.selectNextTab();
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
scheduleOnce('afterRender', this, this.focusSelectedTab);
|
|
}
|
|
});
|