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

Fix tabs always focusing the active tab in TV layout

Browse source
This commit is contained in:
MrTimscampi 2020-08-18 20:08:49 +02:00
parent d544c7cb37
commit 161e1aff2f
1 changed files with 20 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,7 +12,7 @@ import 'scrollStyles';
const buttonClass = 'emby-tab-button'; const buttonClass = 'emby-tab-button';
const activeButtonClass = buttonClass + '-active'; const activeButtonClass = buttonClass + '-active';
function setActiveTabButton(tabs, newButton, oldButton, animate) { function setActiveTabButton(tabs, newButton) {
newButton.classList.add(activeButtonClass); newButton.classList.add(activeButtonClass);
} }
@ -77,7 +77,7 @@ import 'scrollStyles';
const previousIndex = current ? parseInt(current.getAttribute('data-index')) : null; const previousIndex = current ? parseInt(current.getAttribute('data-index')) : null;
setActiveTabButton(tabs, tabButton, current, true); setActiveTabButton(tabs, tabButton);
const index = parseInt(tabButton.getAttribute('data-index')); 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) { function initScroller(tabs) {
if (tabs.scroller) { if (tabs.scroller) {
return; return;
@ -146,13 +155,18 @@ import 'scrollStyles';
dom.addEventListener(this, 'click', onClick, { dom.addEventListener(this, 'click', onClick, {
passive: true passive: true
}); });
dom.addEventListener(this, 'focusout', onFocusOut);
}; };
EmbyTabs.focus = function () { EmbyTabs.focus = function onFocusIn() {
const selected = this.querySelector('.' + activeButtonClass); const selectedTab = this.querySelector('.' + activeButtonClass);
const lastFocused = this.querySelector('.lastFocused');
if (selected) { if (lastFocused) {
focusManager.focus(selected); focusManager.focus(lastFocused);
} else if (selectedTab) {
focusManager.focus(selectedTab);
} else { } else {
focusManager.autoFocus(this); focusManager.autoFocus(this);
} }