focus on visible elements
This commit is contained in:
parent
03e7e333a3
commit
d1a81a877f
3 changed files with 30 additions and 23 deletions
|
@ -1,7 +1,10 @@
|
||||||
|
import * as doms from 'shared/utils/dom';
|
||||||
|
|
||||||
const focusInput = () => {
|
const focusInput = () => {
|
||||||
let inputTypes = ['email', 'number', 'search', 'tel', 'text', 'url'];
|
let inputTypes = ['email', 'number', 'search', 'tel', 'text', 'url'];
|
||||||
let inputSelector = inputTypes.map(type => `input[type=${type}]`).join(',');
|
let inputSelector = inputTypes.map(type => `input[type=${type}]`).join(',');
|
||||||
let target = window.document.querySelector(inputSelector + ',textarea');
|
let targets = window.document.querySelectorAll(inputSelector + ',textarea');
|
||||||
|
let target = Array.from(targets).find(doms.isVisible);
|
||||||
if (target) {
|
if (target) {
|
||||||
target.focus();
|
target.focus();
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
import * as doms from 'shared/utils/dom';
|
||||||
|
|
||||||
const SCROLL_DELTA_X = 48;
|
const SCROLL_DELTA_X = 48;
|
||||||
const SCROLL_DELTA_Y = 48;
|
const SCROLL_DELTA_Y = 48;
|
||||||
const SMOOTH_SCROLL_DURATION = 150;
|
const SMOOTH_SCROLL_DURATION = 150;
|
||||||
|
@ -5,25 +7,6 @@ const SMOOTH_SCROLL_DURATION = 150;
|
||||||
// dirty way to store scrolling state on globally
|
// dirty way to store scrolling state on globally
|
||||||
let scrolling = [false];
|
let scrolling = [false];
|
||||||
|
|
||||||
const isVisible = (element) => {
|
|
||||||
let rect = element.getBoundingClientRect();
|
|
||||||
if (rect.width === 0 || rect.height === 0) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (rect.right < 0 && rect.bottom < 0) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (window.innerWidth < rect.left && window.innerHeight < rect.top) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
let { display, visibility } = window.getComputedStyle(element);
|
|
||||||
if (display === 'none' || visibility === 'hidden') {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const isScrollableStyle = (element) => {
|
const isScrollableStyle = (element) => {
|
||||||
let { overflowX, overflowY } = window.getComputedStyle(element);
|
let { overflowX, overflowY } = window.getComputedStyle(element);
|
||||||
return !(overflowX !== 'scroll' && overflowX !== 'auto' &&
|
return !(overflowX !== 'scroll' && overflowX !== 'auto' &&
|
||||||
|
@ -44,8 +27,7 @@ const findScrollable = (element) => {
|
||||||
return element;
|
return element;
|
||||||
}
|
}
|
||||||
|
|
||||||
let children = Array.prototype
|
let children = Array.from(element.children).filter(doms.isVisible);
|
||||||
.filter.call(element.children, e => isVisible(e));
|
|
||||||
for (let child of children) {
|
for (let child of children) {
|
||||||
let scrollable = findScrollable(child);
|
let scrollable = findScrollable(child);
|
||||||
if (scrollable) {
|
if (scrollable) {
|
||||||
|
|
|
@ -81,4 +81,26 @@ const viewportRect = (e) => {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export { isContentEditable, viewportRect };
|
const isVisible = (element) => {
|
||||||
|
let rect = element.getBoundingClientRect();
|
||||||
|
if (rect.width === 0 || rect.height === 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (rect.right < 0 && rect.bottom < 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (window.innerWidth < rect.left && window.innerHeight < rect.top) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (element.nodeName === 'INPUT' && element.type.toLowerCase() === 'hidden') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { display, visibility } = window.getComputedStyle(element);
|
||||||
|
if (display === 'none' || visibility === 'hidden') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { isContentEditable, viewportRect, isVisible };
|
||||||
|
|
Reference in a new issue