(function () {
if (window.__nlSwatchBound) return; window.__nlSwatchBound = true;
function setImg(card, src) { var img = card.querySelector('[data-nl-img]'); if (img && src) { img.src = src; img.removeAttribute('srcset'); } }
function gallery(card) {
var holder = card.querySelector('[data-nl-images]');
if (!holder) return [];
var raw = holder.getAttribute('data-nl-images') || '';
return raw ? raw.split('|') : [];
}
document.addEventListener('click', function (e) {
var dot = e.target.closest && e.target.closest('[data-nl-swatch]');
if (dot) {
var card = dot.closest('.nl-card'); if (!card) return;
setImg(card, dot.getAttribute('data-img'));
card.querySelectorAll('.nl-dot').forEach(function (d) { d.classList.remove('is-active'); });
dot.classList.add('is-active');
return;
}
var prev = e.target.closest && e.target.closest('[data-nl-prev]');
var next = e.target.closest && e.target.closest('[data-nl-next]');
if (prev || next) {
e.preventDefault();
var c = (prev || next).closest('.nl-card'); if (!c) return;
var imgs = gallery(c); if (imgs.length < 2) return;
var i = parseInt(c.getAttribute('data-nl-index') || '0', 10);
i = next ? (i + 1) % imgs.length : (i - 1 + imgs.length) % imgs.length;
c.setAttribute('data-nl-index', i);
setImg(c, imgs[i]);
}
});
document.addEventListener('keydown', function (e) {
var a = document.activeElement;
if ((e.key === 'Enter' || e.key === ' ') && a && a.matches && a.matches('[data-nl-swatch]')) { e.preventDefault(); a.click(); }
});
})();
- choosing a selection results in a full page refresh
