diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2019-08-20 11:02:30 +0300 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2019-08-20 11:02:30 +0300 |
commit | 51c19691e4c4ceb60ef28fd08c6b13549a423a39 (patch) | |
tree | 1ca9715064c017b122f8de9ee3fa362cfa0aed87 /app | |
parent | a2d470d2786e2398aade7d7213ea4a3c344a797c (diff) | |
parent | 6f1985833eab65a90d885b53026af1d694aae628 (diff) |
Merge branch 'kp-add-vue-input-autofocus-directive' into 'master'
Add `autofocusonshow` directive for input elements
See merge request gitlab-org/gitlab-ce!31584
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/vue_shared/directives/autofocusonshow.js | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/directives/autofocusonshow.js b/app/assets/javascripts/vue_shared/directives/autofocusonshow.js new file mode 100644 index 00000000000..4659ec20ceb --- /dev/null +++ b/app/assets/javascripts/vue_shared/directives/autofocusonshow.js @@ -0,0 +1,39 @@ +/** + * 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(); + } + }, +}; |