js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 11:09:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move methods

Browse Source
This commit is contained in:
Cory LaViska
2020-08-03 07:40:53 -04:00
parent 9974771185
commit 1e65163983
1 changed files with 50 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/tab-group/tab-group.tsx
View File

@@ -125,6 +125,56 @@ export class TabGroup {
return this.getAllTabs().find(el => el.active);
}
handleClick(event: MouseEvent) {
const target = event.target as HTMLElement;
const tab = target.closest('sl-tab');
if (tab) {
this.setActiveTab(tab);
}
}
handleKeyDown(event: KeyboardEvent) {
// Activate a tab
if (['Enter', ' '].includes(event.key)) {
const target = event.target as HTMLElement;
const tab = target.closest('sl-tab');
if (tab) {
this.setActiveTab(tab);
event.preventDefault();
}
}
// Move focus left or right
if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
const activeEl = document.activeElement as any;
if (activeEl && activeEl.tagName.toLowerCase() === 'sl-tab') {
const tabs = this.getAllTabs();
let index = tabs.indexOf(activeEl);
if (event.key === 'Home') {
index = 0;
} else if (event.key === 'End') {
index = tabs.length - 1;
} else if (event.key === 'ArrowLeft') {
index = Math.max(0, index - 1);
} else if (event.key === 'ArrowRight') {
index = Math.min(tabs.length - 1, index + 1);
}
tabs[index].setFocus();
if (['top', 'bottom'].includes(this.placement)) {
scrollIntoView(tabs[index], this.nav, 'horizontal');
}
event.preventDefault();
}
}
}
handleScrollLeft() {
this.nav.scroll({
left: this.nav.scrollLeft - this.nav.clientWidth,
@@ -203,56 +253,6 @@ export class TabGroup {
}
}
handleClick(event: MouseEvent) {
const target = event.target as HTMLElement;
const tab = target.closest('sl-tab');
if (tab) {
this.setActiveTab(tab);
}
}
handleKeyDown(event: KeyboardEvent) {
// Activate a tab
if (['Enter', ' '].includes(event.key)) {
const target = event.target as HTMLElement;
const tab = target.closest('sl-tab');
if (tab) {
this.setActiveTab(tab);
event.preventDefault();
}
}
// Move focus left or right
if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
const activeEl = document.activeElement as any;
if (activeEl && activeEl.tagName.toLowerCase() === 'sl-tab') {
const tabs = this.getAllTabs();
let index = tabs.indexOf(activeEl);
if (event.key === 'Home') {
index = 0;
} else if (event.key === 'End') {
index = tabs.length - 1;
} else if (event.key === 'ArrowLeft') {
index = Math.max(0, index - 1);
} else if (event.key === 'ArrowRight') {
index = Math.min(tabs.length - 1, index + 1);
}
tabs[index].setFocus();
if (['top', 'bottom'].includes(this.placement)) {
scrollIntoView(tabs[index], this.nav, 'horizontal');
}
event.preventDefault();
}
}
}
syncHorizontalScroll() {
this.canScrollHorizontally =
['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;