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 buttonClass = 'emby-tab-button';
const activeButtonClass = buttonClass + '-active'; const activeButtonClass = buttonClass + '-active';
function setActiveTabButton(tabs, newButton, oldButton, animate) { function setActiveTabButton(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(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);
} }
@ -178,7 +192,7 @@ import 'scrollStyles';
const newTabButton = tabButtons[currentIndex]; const newTabButton = tabButtons[currentIndex];
if (newTabButton) { if (newTabButton) {
setActiveTabButton(this, newTabButton, current, false); setActiveTabButton(newTabButton);
} }
} }
@ -226,7 +240,7 @@ import 'scrollStyles';
})); }));
const currentTabButton = tabButtons[current]; const currentTabButton = tabButtons[current];
setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false); setActiveTabButton(tabButtons[selected]);
if (current !== selected && currentTabButton) { if (current !== selected && currentTabButton) {
currentTabButton.classList.remove(activeButtonClass); currentTabButton.classList.remove(activeButtonClass);