Widget:GFLMail

<script> (function () {

 if (window._gflMailInit) return;
 window._gflMailInit = true;

 function openDetail(item) {
   var idx  = item.getAttribute('data-gfl-index');
   var root = item.closest('.gfl-mail');
   if (!root) return;
   root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
     d.classList.remove('is-open');
   });
   var target = root.querySelector('#gflDetail-' + idx);
   if (!target) return;
   root.classList.add('view-detail');
   requestAnimationFrame(function () {
     target.classList.add('is-open');
   });
 }

 function closeDetail(btn) {
   var root = btn.closest('.gfl-mail');
   if (!root) return;
   root.querySelectorAll('.gfl-detail.is-open').forEach(function (d) {
     d.classList.remove('is-open');
   });
   root.classList.remove('view-detail');
 }

 document.querySelectorAll('.gfl-item').forEach(function (item) {
   item.addEventListener('click', function () { openDetail(item); });
   item.addEventListener('keydown', function (e) {
     if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDetail(item); }
   });
 });

 document.querySelectorAll('.gfl-back-btn').forEach(function (btn) {
   btn.addEventListener('click', function () { closeDetail(btn); });
   btn.addEventListener('keydown', function (e) {
     if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); closeDetail(btn); }
   });
 });

})(); </script>