`public/js/room-thumbs.js`

35 lines
// Room thumbnail rail. Each thumb is a <button>; clicking it reveals that piece's
// product info (brand · title · price) + a tracked Buy button, inline below the
// thumb. One open at a time; Esc or an outside click closes it. Mirrors the
// hotspot-card grammar in /js/hotspots.js so the two shop surfaces behave alike.
(function () {
  document.querySelectorAll('.room-thumbs').forEach(function (rail) {
    var open = null;

    function close() {
      if (!open) return;
      open.info.hidden = true;
      open.btn.setAttribute('aria-expanded', 'false');
      open.btn.parentElement.classList.remove('open');
      open = null;
    }

    rail.addEventListener('click', function (e) {
      var btn = e.target.closest('.room-thumb');
      if (!btn) return;                 // let clicks on the Buy link fall through
      e.preventDefault();
      var info = document.getElementById(btn.getAttribute('aria-controls'));
      if (!info) return;
      if (open && open.btn === btn) { close(); return; }
      close();
      info.hidden = false;
      btn.setAttribute('aria-expanded', 'true');
      btn.parentElement.classList.add('open');
      open = { btn: btn, info: info };
    });

    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
    document.addEventListener('click', function (e) { if (!rail.contains(e.target)) close(); });
  });
})();