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

Add 'scroll on focus' to emby-tabs

Browse source
This commit is contained in:
Dmitry Lyzo 2021-04-25 11:20:08 +03:00
parent b0531085af
commit f233182573
2 changed files with 20 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/scrollManager.js
View file

@ -223,8 +223,9 @@ import layoutManager from './layoutManager';
let parent = element.parentElement; let parent = element.parentElement;
while (parent) { while (parent) {
// Skip 'emby-scroller' because it scrolls by itself // Skip 'emby-scroller' and 'emby-tabs' because they scroll by themselves
if (!parent.classList.contains('emby-scroller') && if (!parent.classList.contains('emby-scroller') &&
!parent.classList.contains('emby-tabs') &&
parent[nameScroll] > parent[nameClient] && parent.classList.contains(nameClass)) { parent[nameScroll] > parent[nameClient] && parent.classList.contains(nameClass)) {
return parent; return parent;
} }

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

@ -3,6 +3,7 @@ import dom from '../../scripts/dom';
import scroller from '../../libraries/scroller'; import scroller from '../../libraries/scroller';
import browser from '../../scripts/browser'; import browser from '../../scripts/browser';
import focusManager from '../../components/focusManager'; import focusManager from '../../components/focusManager';
import layoutManager from '../../components/layoutManager';
import './emby-tabs.scss'; import './emby-tabs.scss';
import '../../assets/css/scrollstyles.scss'; import '../../assets/css/scrollstyles.scss';
@ -100,6 +101,14 @@ import '../../assets/css/scrollstyles.scss';
} }
} }
function onFocusIn(e) {
const tabs = this;
const tabButton = dom.parentWithClass(e.target, buttonClass);
if (tabButton && tabs.scroller) {
tabs.scroller.toCenter(tabButton, false);
}
}
function onFocusOut(e) { function onFocusOut(e) {
const parentContainer = e.target.parentNode; const parentContainer = e.target.parentNode;
const previousFocus = parentContainer.querySelector('.lastFocused'); const previousFocus = parentContainer.querySelector('.lastFocused');
@ -155,10 +164,14 @@ import '../../assets/css/scrollstyles.scss';
passive: true passive: true
}); });
if (layoutManager.tv) {
dom.addEventListener(this, 'focusin', onFocusIn, { passive: true });
}
dom.addEventListener(this, 'focusout', onFocusOut); dom.addEventListener(this, 'focusout', onFocusOut);
}; };
EmbyTabs.focus = function onFocusIn() { EmbyTabs.focus = function () {
const selectedTab = this.querySelector('.' + activeButtonClass); const selectedTab = this.querySelector('.' + activeButtonClass);
const lastFocused = this.querySelector('.lastFocused'); const lastFocused = this.querySelector('.lastFocused');
@ -210,6 +223,10 @@ import '../../assets/css/scrollstyles.scss';
dom.removeEventListener(this, 'click', onClick, { dom.removeEventListener(this, 'click', onClick, {
passive: true passive: true
}); });
if (layoutManager.tv) {
dom.removeEventListener(this, 'focusin', onFocusIn, { passive: true });
}
}; };
function getSelectedTabButton(elem) { function getSelectedTabButton(elem) {