|
|
| 第1行： |
第1行： |
| <script> | | <script> |
| (function() {
| | document.querySelectorAll('.gfl-item').forEach(item => { |
| var widgetId = '<!--{$id|escape:'html'}-->';
| | item.addEventListener('click', () => { |
|
| | const idx = item.getAttribute('data-gfl-index'); |
| function initMail() {
| | const root = item.closest('.gfl-mail'); |
| var rootEl = document.getElementById('gflRoot-' + widgetId);
| | root.querySelector('.gfl-list').style.display = 'none'; |
| if (!rootEl || rootEl.classList.contains('gfl-initialized')) {
| | root.querySelectorAll('.gfl-detail').forEach(detail => detail.classList.remove('is-open')); |
| return;
| | const targetDetail = root.querySelector(`#gflDetail-${idx}`); |
| }
| | if (targetDetail) { |
|
| | targetDetail.classList.add('is-open'); |
| rootEl.classList.add('gfl-initialized');
| |
|
| |
| var mailsData;
| |
| try {
| |
| mailsData = JSON.parse(rootEl.getAttribute('data-mails') || '[]');
| |
| } catch(e) {
| |
| console.error('GFLMail: Failed to parse mail data', e);
| |
| return;
| |
| }
| |
|
| |
| var wrapperEl = document.getElementById('gflWrapper-' + widgetId);
| |
| var detailEl = wrapperEl.querySelector('.gfl-detail');
| |
| var listEl = wrapperEl.querySelector('.gfl-list');
| |
|
| |
| if (!wrapperEl || !detailEl || !listEl) {
| |
| return;
| |
| }
| |
|
| |
| var items = listEl.querySelectorAll('.gfl-item');
| |
| for (var i = 0; i < items.length; i++) {
| |
| (function(index) {
| |
| var item = items[index];
| |
|
| |
| item.addEventListener('click', function() {
| |
| openMail(index);
| |
| });
| |
|
| |
| item.addEventListener('keypress', function(e) {
| |
| if (e.key === 'Enter' || e.key === ' ') {
| |
| e.preventDefault();
| |
| openMail(index);
| |
| }
| |
| });
| |
| })(i);
| |
| }
| |
|
| |
| var backBtn = detailEl.querySelector('.gfl-back-btn');
| |
| if (backBtn) {
| |
| backBtn.addEventListener('click', function() {
| |
| wrapperEl.classList.remove('detail-open');
| |
| });
| |
| }
| |
|
| |
| function openMail(idx) {
| |
| var mail = mailsData[idx];
| |
| if (!mail) return;
| |
|
| |
| var subjectEl = detailEl.querySelector('.gfl-detail-subject');
| |
| var dateEl = detailEl.querySelector('.gfl-date-row');
| |
| var contentEl = detailEl.querySelector('.gfl-content');
| |
| var charEl = detailEl.querySelector('.gfl-char');
| |
|
| |
| if (subjectEl) subjectEl.textContent = mail.subject;
| |
| if (dateEl) dateEl.textContent = mail.date;
| |
| if (contentEl) contentEl.innerHTML = mail.content;
| |
|
| |
| if (charEl) {
| |
| if (mail.charImg) {
| |
| charEl.innerHTML = '<img src="' + mail.charImg + '" alt="人形立绘" />';
| |
| } else {
| |
| charEl.innerHTML = '<div class="gfl-char-placeholder">立绘区域<br>（传入图片后显示）</div>';
| |
| }
| |
| }
| |
|
| |
| wrapperEl.classList.add('detail-open');
| |
| }
| |
| } | | } |
|
| | }); |
| if (document.readyState === 'loading') {
| | }); |
| document.addEventListener('DOMContentLoaded', initMail);
| | document.querySelectorAll('.gfl-back-btn').forEach(btn => { |
| } else { | | btn.addEventListener('click', () => { |
| initMail();
| | const root = btn.closest('.gfl-mail'); |
| }
| | root.querySelectorAll('.gfl-detail').forEach(detail => detail.classList.remove('is-open')); |
| })(); | | root.querySelector('.gfl-list').style.display = ''; |
| | }); |
| | }); |
| </script> | | </script> |
| <includeonly><!--{$id|validate:'id'}--></includeonly>
| |
<script>
document.querySelectorAll('.gfl-item').forEach(item => {
item.addEventListener('click', () => {
const idx = item.getAttribute('data-gfl-index');
const root = item.closest('.gfl-mail');
root.querySelector('.gfl-list').style.display = 'none';
root.querySelectorAll('.gfl-detail').forEach(detail => detail.classList.remove('is-open'));
const targetDetail = root.querySelector(`#gflDetail-${idx}`);
if (targetDetail) {
targetDetail.classList.add('is-open');
}
});
});
document.querySelectorAll('.gfl-back-btn').forEach(btn => {
btn.addEventListener('click', () => {
const root = btn.closest('.gfl-mail');
root.querySelectorAll('.gfl-detail').forEach(detail => detail.classList.remove('is-open'));
root.querySelector('.gfl-list').style.display = ;
});
});
</script>