1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
jellyfin-web/src/components/autoFocuser.js

105 lines
2.8 KiB
JavaScript
Raw Normal View History

2020-03-28 20:02:22 +03:00
/* eslint-disable indent */
/**
* Module for performing auto-focus.
* @module components/autoFocuser
*/
2020-05-04 12:44:12 +02:00
import focusManager from 'focusManager';
import layoutManager from 'layoutManager';
2019-11-02 20:38:58 +03:00
/**
* Previously selected element.
*/
2020-03-28 20:02:22 +03:00
let activeElement;
2019-11-02 20:38:58 +03:00
2019-11-14 18:33:31 +03:00
/**
2020-03-28 20:02:22 +03:00
* Returns _true_ if AutoFocuser is enabled.
2019-11-14 18:33:31 +03:00
*/
2020-03-28 20:02:22 +03:00
export function isEnabled() {
2019-11-14 18:33:31 +03:00
return layoutManager.tv;
2019-11-27 16:24:22 +03:00
}
2019-11-14 18:33:31 +03:00
2019-11-02 20:38:58 +03:00
/**
2020-03-31 18:59:12 +03:00
* Start AutoFocuser.
2019-11-02 20:38:58 +03:00
*/
2020-03-28 20:02:22 +03:00
export function enable() {
2019-11-14 18:33:31 +03:00
if (!isEnabled()) {
return;
}
2020-05-04 12:44:12 +02:00
window.addEventListener('focusin', function (e) {
2019-11-02 20:38:58 +03:00
activeElement = e.target;
});
2020-05-04 12:44:12 +02:00
console.debug('AutoFocuser enabled');
2019-11-02 20:38:58 +03:00
}
/**
* Set focus on a suitable element, taking into account the previously selected.
2020-03-31 18:59:12 +03:00
* @param {HTMLElement} [container] - Element to limit scope.
* @returns {HTMLElement} Focused element.
2019-11-02 20:38:58 +03:00
*/
2020-03-28 20:02:22 +03:00
export function autoFocus(container) {
2019-11-14 18:33:31 +03:00
if (!isEnabled()) {
2020-03-28 20:02:22 +03:00
return null;
2019-11-14 18:33:31 +03:00
}
2019-11-02 20:38:58 +03:00
container = container || document.body;
2020-03-28 20:02:22 +03:00
let candidates = [];
2019-11-02 20:38:58 +03:00
if (activeElement) {
// These elements are recreated
2020-05-04 12:44:12 +02:00
if (activeElement.classList.contains('btnPreviousPage')) {
candidates.push(container.querySelector('.btnPreviousPage'));
candidates.push(container.querySelector('.btnNextPage'));
} else if (activeElement.classList.contains('btnNextPage')) {
candidates.push(container.querySelector('.btnNextPage'));
candidates.push(container.querySelector('.btnPreviousPage'));
} else if (activeElement.classList.contains('btnSelectView')) {
candidates.push(container.querySelector('.btnSelectView'));
2019-11-02 20:38:58 +03:00
}
candidates.push(activeElement);
}
2020-05-04 12:44:12 +02:00
candidates = candidates.concat(Array.from(container.querySelectorAll('.btnResume')));
candidates = candidates.concat(Array.from(container.querySelectorAll('.btnPlay')));
2019-11-02 20:38:58 +03:00
2020-03-28 20:02:22 +03:00
let focusedElement;
2019-11-27 16:23:27 +03:00
candidates.every(function (element) {
2019-11-02 20:38:58 +03:00
if (focusManager.isCurrentlyFocusable(element)) {
focusManager.focus(element);
2019-11-27 16:23:27 +03:00
focusedElement = element;
2019-11-02 20:38:58 +03:00
return false;
}
return true;
});
2019-11-27 16:23:27 +03:00
if (!focusedElement) {
2019-11-14 16:41:50 +03:00
// FIXME: Multiple itemsContainers
2020-05-04 12:44:12 +02:00
const itemsContainer = container.querySelector('.itemsContainer');
2019-11-14 16:41:50 +03:00
if (itemsContainer) {
2019-11-27 16:23:27 +03:00
focusedElement = focusManager.autoFocus(itemsContainer);
2019-11-14 16:41:50 +03:00
}
}
2019-11-27 16:23:27 +03:00
if (!focusedElement) {
focusedElement = focusManager.autoFocus(container);
2019-11-02 20:38:58 +03:00
}
2019-11-27 16:23:27 +03:00
return focusedElement;
2019-11-02 20:38:58 +03:00
}
2020-04-02 23:45:45 +02:00
/* eslint-enable indent */
export default {
isEnabled: isEnabled,
enable: enable,
autoFocus: autoFocus
};