| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
document.querySelectorAll('.bkbg-ea-wrapper').forEach(function (wrapper) { |
| 5 |
var tabBar = wrapper.querySelector('.bkbg-ea-tab-bar'); |
| 6 |
if (!tabBar) return; |
| 7 |
|
| 8 |
var tabs = tabBar.querySelectorAll('.bkbg-ea-tab-btn'); |
| 9 |
var panels = wrapper.querySelectorAll('.bkbg-ea-day-panel'); |
| 10 |
|
| 11 |
function showDay(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 |
t.setAttribute('tabindex', i === idx ? '0' : '-1'); |
| 16 |
}); |
| 17 |
panels.forEach(function (p, i) { |
| 18 |
p.classList.toggle('is-active', i === idx); |
| 19 |
p.setAttribute('aria-hidden', i === idx ? 'false' : 'true'); |
| 20 |
p.style.display = i === idx ? 'block' : 'none'; |
| 21 |
}); |
| 22 |
} |
| 23 |
|
| 24 |
tabs.forEach(function (tab, idx) { |
| 25 |
tab.addEventListener('click', function () { showDay(idx); }); |
| 26 |
}); |
| 27 |
|
| 28 |
/* Keyboard navigation */ |
| 29 |
tabBar.addEventListener('keydown', function (e) { |
| 30 |
var active = tabBar.querySelector('[aria-selected="true"]'); |
| 31 |
var idx = Array.prototype.indexOf.call(tabs, active); |
| 32 |
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { |
| 33 |
var next = (idx + 1) % tabs.length; |
| 34 |
showDay(next); |
| 35 |
tabs[next].focus(); |
| 36 |
e.preventDefault(); |
| 37 |
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { |
| 38 |
var prev = (idx - 1 + tabs.length) % tabs.length; |
| 39 |
showDay(prev); |
| 40 |
tabs[prev].focus(); |
| 41 |
e.preventDefault(); |
| 42 |
} |
| 43 |
}); |
| 44 |
|
| 45 |
/* Session card entrance animation */ |
| 46 |
if ('IntersectionObserver' in window) { |
| 47 |
var sessions = wrapper.querySelectorAll('.bkbg-ea-session'); |
| 48 |
sessions.forEach(function (s) { |
| 49 |
s.style.opacity = '0'; |
| 50 |
s.style.transform = 'translateX(-12px)'; |
| 51 |
s.style.transition = 'opacity 0.4s ease, transform 0.4s ease'; |
| 52 |
}); |
| 53 |
|
| 54 |
var io = new IntersectionObserver(function (entries) { |
| 55 |
entries.forEach(function (entry) { |
| 56 |
if (!entry.isIntersecting) return; |
| 57 |
var el = entry.target; |
| 58 |
el.style.opacity = '1'; |
| 59 |
el.style.transform = 'translateX(0)'; |
| 60 |
io.unobserve(el); |
| 61 |
}); |
| 62 |
}, { threshold: 0.08 }); |
| 63 |
|
| 64 |
sessions.forEach(function (s) { io.observe(s); }); |
| 65 |
} |
| 66 |
}); |
| 67 |
})(); |
| 68 |
|
