| 1 |
(function () { |
| 2 |
'use strict'; |
| 3 |
|
| 4 |
function parseColor(hex, opacity) { |
| 5 |
if (!hex) return 'rgba(0,0,0,' + (opacity / 100) + ')'; |
| 6 |
var r = parseInt(hex.slice(1, 3), 16); |
| 7 |
var g = parseInt(hex.slice(3, 5), 16); |
| 8 |
var b = parseInt(hex.slice(5, 7), 16); |
| 9 |
return 'rgba(' + r + ',' + g + ',' + b + ',' + (opacity / 100) + ')'; |
| 10 |
} |
| 11 |
|
| 12 |
function reducedMotion() { |
| 13 |
return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; |
| 14 |
} |
| 15 |
|
| 16 |
function initAccordion(container) { |
| 17 |
var panels = Array.prototype.slice.call(container.querySelectorAll('.bkia-panel')); |
| 18 |
var trigger = container.dataset.trigger || 'hover'; |
| 19 |
var defaultOpen = parseInt(container.dataset.default, 10) || 0; |
| 20 |
var expFlex = parseFloat(container.dataset.expFlex) || 4; |
| 21 |
var colFlex = parseFloat(container.dataset.colFlex) || 1; |
| 22 |
var duration = parseInt(container.dataset.duration, 10) || 500; |
| 23 |
var easing = container.dataset.easing || 'ease'; |
| 24 |
var ovOpacity = parseFloat(container.dataset.overlay) || 40; |
| 25 |
var ovHover = parseFloat(container.dataset.ovHover) || 20; |
| 26 |
var ovColor = container.dataset.ovColor || '#000000'; |
| 27 |
var doScale = container.dataset.scale !== 'false'; |
| 28 |
var textVis = container.dataset.textVis || 'always'; |
| 29 |
|
| 30 |
// Apply CSS transition timing to panels |
| 31 |
var dur = reducedMotion() ? '0ms' : duration + 'ms'; |
| 32 |
panels.forEach(function (panel) { |
| 33 |
panel.style.transition = 'flex ' + dur + ' ' + easing; |
| 34 |
}); |
| 35 |
|
| 36 |
function activate(index) { |
| 37 |
panels.forEach(function (panel, i) { |
| 38 |
var isActive = (i === index); |
| 39 |
var img = panel.querySelector('.bkia-img'); |
| 40 |
var overlay = panel.querySelector('.bkia-overlay'); |
| 41 |
var textEl = panel.querySelector('.bkia-text'); |
| 42 |
|
| 43 |
panel.style.flex = isActive ? String(expFlex) : String(colFlex); |
| 44 |
|
| 45 |
if (overlay) { |
| 46 |
overlay.style.background = parseColor(ovColor, isActive ? ovHover : ovOpacity); |
| 47 |
} |
| 48 |
|
| 49 |
if (img && doScale) { |
| 50 |
img.style.transition = 'transform ' + dur + ' ' + easing; |
| 51 |
img.style.transform = isActive ? 'scale(1.05)' : 'scale(1)'; |
| 52 |
} |
| 53 |
|
| 54 |
if (textEl) { |
| 55 |
if (textVis === 'always') { |
| 56 |
textEl.style.opacity = '1'; |
| 57 |
} else if (textVis === 'expanded') { |
| 58 |
textEl.style.opacity = isActive ? '1' : '0'; |
| 59 |
} else if (textVis === 'collapsed') { |
| 60 |
textEl.style.opacity = isActive ? '0' : '1'; |
| 61 |
} |
| 62 |
} |
| 63 |
|
| 64 |
if (isActive) { |
| 65 |
panel.classList.add('bkia-active'); |
| 66 |
} else { |
| 67 |
panel.classList.remove('bkia-active'); |
| 68 |
} |
| 69 |
}); |
| 70 |
} |
| 71 |
|
| 72 |
// Set initial state |
| 73 |
activate(defaultOpen); |
| 74 |
|
| 75 |
// Bind events |
| 76 |
if (trigger === 'hover') { |
| 77 |
panels.forEach(function (panel, i) { |
| 78 |
panel.addEventListener('mouseenter', function () { activate(i); }); |
| 79 |
}); |
| 80 |
} else { |
| 81 |
panels.forEach(function (panel, i) { |
| 82 |
panel.addEventListener('click', function () { activate(i); }); |
| 83 |
}); |
| 84 |
} |
| 85 |
} |
| 86 |
|
| 87 |
function init() { |
| 88 |
var containers = document.querySelectorAll('.bkia-container[data-trigger]'); |
| 89 |
containers.forEach(function (container) { |
| 90 |
initAccordion(container); |
| 91 |
}); |
| 92 |
} |
| 93 |
|
| 94 |
if (document.readyState === 'loading') { |
| 95 |
document.addEventListener('DOMContentLoaded', init); |
| 96 |
} else { |
| 97 |
init(); |
| 98 |
} |
| 99 |
|
| 100 |
}()); |
| 101 |
|
