57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
export function setupHelpPopups({ buttonsSelector, overlayId, titleId, bodyId, closeBtnId, content }) {
|
|
const overlay = document.getElementById(overlayId);
|
|
const titleEl = document.getElementById(titleId);
|
|
const bodyEl = document.getElementById(bodyId);
|
|
const closeBtn = document.getElementById(closeBtnId);
|
|
const buttons = document.querySelectorAll(buttonsSelector);
|
|
|
|
if (!overlay || !titleEl || !bodyEl) return;
|
|
|
|
buttons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const target = button.dataset.popupTarget;
|
|
if (target) {
|
|
showPopup(target);
|
|
}
|
|
});
|
|
});
|
|
|
|
closeBtn?.addEventListener('click', closePopup);
|
|
|
|
overlay.addEventListener('click', event => {
|
|
if (event.target === overlay) {
|
|
closePopup();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', event => {
|
|
if (event.key === 'Escape' && !overlay.classList.contains('hidden')) {
|
|
event.preventDefault();
|
|
closePopup();
|
|
}
|
|
});
|
|
|
|
function showPopup(type) {
|
|
const popupContent = content[type];
|
|
if (!popupContent) return;
|
|
|
|
titleEl.textContent = popupContent.title;
|
|
bodyEl.innerHTML = popupContent.sections
|
|
.map(section => {
|
|
const items = (section.items || []).map(item => `<li>${item}</li>`).join('');
|
|
return `
|
|
<section class="popup-section">
|
|
<h3>${section.heading}</h3>
|
|
<ul>${items}</ul>
|
|
</section>
|
|
`;
|
|
})
|
|
.join('');
|
|
|
|
overlay.classList.remove('hidden');
|
|
}
|
|
|
|
function closePopup() {
|
|
overlay.classList.add('hidden');
|
|
}
|
|
}
|