phanpy/src/utils/focus-deck.js

51 lines
1.6 KiB
JavaScript
Raw Normal View History

const focusDeck = () => {
let timer = setTimeout(() => {
const columns = document.getElementById('columns');
if (columns) {
2024-11-14 19:22:26 +08:00
// Focus focused column
const focusedColumn = columns.querySelector('.deck-container.focus');
if (focusedColumn) {
focusedColumn.focus();
} else {
// Focus first column within viewport
2024-12-22 09:25:46 +08:00
const firstVisibleColumn = Array.from(
columns.querySelectorAll('.deck-container'),
).find((column) => {
const columnRect = column.getBoundingClientRect();
return columnRect.left >= 0;
});
2024-11-14 19:22:26 +08:00
if (firstVisibleColumn) {
firstVisibleColumn.focus();
} else {
// Focus first column
columns.querySelector('.deck-container')?.focus?.();
}
}
} else {
const modals = document.querySelectorAll('#modal-container > *');
if (modals?.length) {
// Focus last modal
const modal = modals[modals.length - 1]; // last one
const modalFocusElement =
modal.querySelector('[tabindex="-1"]') || modal;
if (modalFocusElement) {
modalFocusElement.focus();
return;
}
}
const backDrop = document.querySelector('.deck-backdrop');
if (backDrop) return;
// Focus last deck
const pages = document.querySelectorAll('.deck-container');
const page = pages[pages.length - 1]; // last one
if (page && page.tabIndex === -1) {
console.log('FOCUS', page);
page.focus();
}
}
}, 100);
return () => clearTimeout(timer);
};
export default focusDeck;