mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #1819 from MrTimscampi/tabs-tv-fix

Browse source 
Fix tabs always focusing the active tab in TV layout
This commit is contained in:
dkanada 2020-08-22 07:45:19 +09:00 • committed by GitHub
commit 3e3a18431f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/elements/emby-tabs/emby-tabs.js
View file

@ -12,7 +12,7 @@ import 'scrollStyles';
const buttonClass = 'emby-tab-button';
const activeButtonClass = buttonClass + '-active';
function setActiveTabButton(tabs, newButton, oldButton, animate) {
function setActiveTabButton(newButton) {
newButton.classList.add(activeButtonClass);
}
@ -77,7 +77,7 @@ import 'scrollStyles';
const previousIndex = current ? parseInt(current.getAttribute('data-index')) : null;
setActiveTabButton(tabs, tabButton, current, true);
setActiveTabButton(tabButton);
const index = parseInt(tabButton.getAttribute('data-index'));
@ -101,6 +101,15 @@ import 'scrollStyles';
}
}
function onFocusOut(e) {
const parentContainer = e.target.parentNode;
const previousFocus = parentContainer.querySelector('.lastFocused');
if (previousFocus) {
previousFocus.classList.remove('lastFocused');
}
e.target.classList.add('lastFocused');
}
function initScroller(tabs) {
if (tabs.scroller) {
return;
@ -146,13 +155,18 @@ import 'scrollStyles';
dom.addEventListener(this, 'click', onClick, {
passive: true
});
dom.addEventListener(this, 'focusout', onFocusOut);
};
EmbyTabs.focus = function () {
const selected = this.querySelector('.' + activeButtonClass);
EmbyTabs.focus = function onFocusIn() {
const selectedTab = this.querySelector('.' + activeButtonClass);
const lastFocused = this.querySelector('.lastFocused');
if (selected) {
focusManager.focus(selected);
if (lastFocused) {
focusManager.focus(lastFocused);
} else if (selectedTab) {
focusManager.focus(selectedTab);
} else {
focusManager.autoFocus(this);
}
@ -178,7 +192,7 @@ import 'scrollStyles';
const newTabButton = tabButtons[currentIndex];
if (newTabButton) {
setActiveTabButton(this, newTabButton, current, false);
setActiveTabButton(newTabButton);
}
}
@ -226,7 +240,7 @@ import 'scrollStyles';
}));
const currentTabButton = tabButtons[current];
setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false);
setActiveTabButton(tabButtons[selected]);
if (current !== selected && currentTabButton) {
currentTabButton.classList.remove(activeButtonClass);