47 lines
1.6 KiB
JavaScript
47 lines
1.6 KiB
JavaScript
|
document.addEventListener('DOMContentLoaded', function () {
|
|||
|
|
// 1) Check for slide-container
|
|||
|
|
const containers = document.querySelectorAll('.slide-container');
|
|||
|
|
|
|||
|
|
containers.forEach((container) => {
|
|||
|
|
// 2) Find the key elements inside this container
|
|||
|
|
const trigger = container.querySelector('.sensitive-trigger');
|
|||
|
|
const panel = container.querySelector('.sensitive-panel');
|
|||
|
|
const continueBtn = container.querySelector('.sensitive-continue');
|
|||
|
|
|
|||
|
|
// 3) Read the URL from data-continue-url
|
|||
|
|
const externalUrl = container.dataset.continueUrl;
|
|||
|
|
|
|||
|
|
// Safety checks: if we don’t have a trigger or panel, skip
|
|||
|
|
if (!trigger || !panel) return;
|
|||
|
|
|
|||
|
|
// 4) Toggle panel on trigger click
|
|||
|
|
trigger.addEventListener('click', function (evt) {
|
|||
|
|
evt.preventDefault();
|
|||
|
|
panel.classList.toggle('open'); // open if closed, close if open
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 5) Close panel if user clicks outside
|
|||
|
|
document.addEventListener('click', function (evt) {
|
|||
|
|
if (
|
|||
|
|
panel.classList.contains('open') &&
|
|||
|
|
!panel.contains(evt.target) &&
|
|||
|
|
evt.target !== trigger
|
|||
|
|
) {
|
|||
|
|
panel.classList.remove('open');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 6) “Continue” button
|
|||
|
|
if (continueBtn) {
|
|||
|
|
continueBtn.addEventListener('click', function () {
|
|||
|
|
// Close the panel
|
|||
|
|
panel.classList.remove('open');
|
|||
|
|
|
|||
|
|
// If there's a data-continue-url, open it in a new tab
|
|||
|
|
if (externalUrl) {
|
|||
|
|
window.open(externalUrl, '_blank');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|