| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
document.querySelectorAll('.bkbg-rm-wrapper').forEach(function (wrapper) { |
| 5 |
var tabBar = wrapper.querySelector('.bkbg-rm-tab-bar'); |
| 6 |
if (!tabBar) return; |
| 7 |
|
| 8 |
var tabs = tabBar.querySelectorAll('.bkbg-rm-tab-btn'); |
| 9 |
var panels = wrapper.querySelectorAll('.bkbg-rm-category-section'); |
| 10 |
|
| 11 |
function showTab(idx) { |
| 12 |
tabs.forEach(function (t, i) { |
| 13 |
t.classList.toggle('is-active', i === idx); |
| 14 |
t.setAttribute('aria-selected', i === idx ? 'true' : 'false'); |
| 15 |
}); |
| 16 |
panels.forEach(function (p, i) { |
| 17 |
p.classList.toggle('is-active', i === idx); |
| 18 |
p.setAttribute('aria-hidden', i === idx ? 'false' : 'true'); |
| 19 |
}); |
| 20 |
} |
| 21 |
|
| 22 |
tabs.forEach(function (tab, idx) { |
| 23 |
tab.addEventListener('click', function () { showTab(idx); }); |
| 24 |
tab.setAttribute('tabindex', idx === 0 ? '0' : '-1'); |
| 25 |
}); |
| 26 |
|
| 27 |
/* Keyboard navigation */ |
| 28 |
tabBar.addEventListener('keydown', function (e) { |
| 29 |
var active = tabBar.querySelector('[aria-selected="true"]'); |
| 30 |
var idx = Array.prototype.indexOf.call(tabs, active); |
| 31 |
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { |
| 32 |
showTab((idx + 1) % tabs.length); |
| 33 |
tabs[(idx + 1) % tabs.length].focus(); |
| 34 |
e.preventDefault(); |
| 35 |
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { |
| 36 |
showTab((idx - 1 + tabs.length) % tabs.length); |
| 37 |
tabs[(idx - 1 + tabs.length) % tabs.length].focus(); |
| 38 |
e.preventDefault(); |
| 39 |
} |
| 40 |
}); |
| 41 |
}); |
| 42 |
})(); |
| 43 |
|
