| 1 |
/* ==================================================== |
| 2 |
Use Case Section — frontend.js |
| 3 |
Handles: tabs display mode switching |
| 4 |
==================================================== */ |
| 5 |
(function () { |
| 6 |
'use strict'; |
| 7 |
|
| 8 |
document.querySelectorAll('.bkbg-usec-wrap[data-display-style="tabs"]').forEach(function (wrap) { |
| 9 |
var grid = wrap.querySelector('.bkbg-usec-grid--tabs'); |
| 10 |
if (!grid) return; |
| 11 |
|
| 12 |
var cards = Array.from(grid.querySelectorAll('.bkbg-usec-card')); |
| 13 |
if (cards.length === 0) return; |
| 14 |
|
| 15 |
/* Build tab nav */ |
| 16 |
var nav = document.createElement('div'); |
| 17 |
nav.className = 'bkbg-usec-tabs-nav'; |
| 18 |
|
| 19 |
cards.forEach(function (card, idx) { |
| 20 |
var label = card.dataset.tabLabel || ('Tab ' + (idx + 1)); |
| 21 |
var btn = document.createElement('button'); |
| 22 |
btn.type = 'button'; |
| 23 |
btn.className = 'bkbg-usec-tab-btn' + (idx === 0 ? ' is-active' : ''); |
| 24 |
btn.textContent = label; |
| 25 |
|
| 26 |
btn.addEventListener('click', function () { |
| 27 |
/* Deactivate all */ |
| 28 |
nav.querySelectorAll('.bkbg-usec-tab-btn').forEach(function (b) { b.classList.remove('is-active'); }); |
| 29 |
cards.forEach(function (c) { c.classList.remove('is-active'); }); |
| 30 |
/* Activate selected */ |
| 31 |
btn.classList.add('is-active'); |
| 32 |
cards[idx].classList.add('is-active'); |
| 33 |
}); |
| 34 |
|
| 35 |
nav.appendChild(btn); |
| 36 |
}); |
| 37 |
|
| 38 |
/* Insert nav before grid */ |
| 39 |
grid.parentNode.insertBefore(nav, grid); |
| 40 |
|
| 41 |
/* Show first card */ |
| 42 |
cards[0].classList.add('is-active'); |
| 43 |
}); |
| 44 |
})(); |
| 45 |
|
