40 lines
1 KiB
JavaScript
40 lines
1 KiB
JavaScript
|
/**
|
||
|
|
* Input/Textarea Autofocus Directive for Vue
|
||
|
|
*/
|
||
|
|
export default {
|
||
|
|
/**
|
||
|
|
* Set focus when element is rendered, but
|
||
|
|
* is not visible, using IntersectionObserver
|
||
|
|
*
|
||
|
|
* @param {Element} el Target element
|
||
|
|
*/
|
||
|
|
inserted(el) {
|
||
|
|
if ('IntersectionObserver' in window) {
|
||
|
|
// Element visibility is dynamic, so we attach observer
|
||
|
|
el.visibilityObserver = new IntersectionObserver(entries => {
|
||
|
|
entries.forEach(entry => {
|
||
|
|
// Combining `intersectionRatio > 0` and
|
||
|
|
// element's `offsetParent` presence will
|
||
|
|
// deteremine if element is truely visible
|
||
|
|
if (entry.intersectionRatio > 0 && entry.target.offsetParent) {
|
||
|
|
entry.target.focus();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Bind the observer.
|
||
|
|
el.visibilityObserver.observe(el, { root: document.documentElement });
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* Detach observer on unbind hook.
|
||
|
|
*
|
||
|
|
* @param {Element} el Target element
|
||
|
|
*/
|
||
|
|
unbind(el) {
|
||
|
|
if (el.visibilityObserver) {
|
||
|
|
el.visibilityObserver.disconnect();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|