diff options
author | Sam Potts <sam@potts.es> | 2019-06-02 23:16:29 +1000 |
---|---|---|
committer | Sam Potts <sam@potts.es> | 2019-06-02 23:16:29 +1000 |
commit | ac88e6e1909d306c797a6361c0ec953cb104f0ca (patch) | |
tree | fad143c26aea9f6abf2eda37e9e56781f57710d5 /demo/src/js/tab-focus.js | |
parent | 15cbae8a19dec5745f57377e7c4197ccbaead7ee (diff) | |
download | plyr-ac88e6e1909d306c797a6361c0ec953cb104f0ca.tar.lz plyr-ac88e6e1909d306c797a6361c0ec953cb104f0ca.tar.xz plyr-ac88e6e1909d306c797a6361c0ec953cb104f0ca.zip |
Demo clean up
Diffstat (limited to 'demo/src/js/tab-focus.js')
-rw-r--r-- | demo/src/js/tab-focus.js | 31 |
1 files changed, 31 insertions, 0 deletions
diff --git a/demo/src/js/tab-focus.js b/demo/src/js/tab-focus.js new file mode 100644 index 00000000..c1602cf0 --- /dev/null +++ b/demo/src/js/tab-focus.js @@ -0,0 +1,31 @@ +// Setup tab focus +const container = document.getElementById('container'); +const tabClassName = 'tab-focus'; + +// Remove class on blur +document.addEventListener('focusout', event => { + if (!event.target.classList || container.contains(event.target)) { + return; + } + + event.target.classList.remove(tabClassName); +}); + +// Add classname to tabbed elements +document.addEventListener('keydown', event => { + if (event.keyCode !== 9) { + return; + } + + // Delay the adding of classname until the focus has changed + // This event fires before the focusin event + setTimeout(() => { + const focused = document.activeElement; + + if (!focused || !focused.classList || container.contains(focused)) { + return; + } + + focused.classList.add(tabClassName); + }, 10); +}); |