aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src/js/tab-focus.js
diff options
context:
space:
mode:
authorSam Potts <sam@potts.es>2019-06-02 23:16:29 +1000
committerSam Potts <sam@potts.es>2019-06-02 23:16:29 +1000
commitac88e6e1909d306c797a6361c0ec953cb104f0ca (patch)
treefad143c26aea9f6abf2eda37e9e56781f57710d5 /demo/src/js/tab-focus.js
parent15cbae8a19dec5745f57377e7c4197ccbaead7ee (diff)
downloadplyr-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.js31
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);
+});