https://huaikhayung.go.th/webboard/widget/assets/js/widget-script.js

1// FILE: /webboard/widget/assets/js/widget-script.js
2document.addEventListener('DOMContentLoaded', async () => {
3    const host = document.getElementById('webboard-lastest-container');
4    if (!host) return;
5
6    const shadow = host.attachShadow({ mode: 'open' });
7
8    // เตรียม SVG Icons (ดึง Path มาจาก Bootstrap Icons)
9    const iconChat = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16"><path d="M14.5 3a.5.5 0 0 0-.5-.5H4.5A1.5 1.5 0 0 0 3 4v7a1.5 1.5 0 0 0 1.5 1.5h5.172l3.121 3.121a.5.5 0 0 0 .854-.353V3zM5 7h4v1H5V7zm0-2h6v1H5V5zm0 4h3v1H5V9z"/></svg>`;
10    const iconPerson = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16"><path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/></svg>`;
11
12    try {
13        const response = await fetch('/webboard/widget/handler.php');
14        const res = await response.json();
15
16        if (res.status === 'success') {
17            let listHTML = '';
18            res.data.forEach(item => {
19                listHTML += `
20                <li>
21                    <a href="/webboard/view_topic.php?id=${item.id}" class="wb-topic" target="_blank">${item.topic}</a>
22                    <div class="wb-meta">
23                        <span><span class="icon-inline">${iconPerson}</span> ${item.author}</span>
24                        <span>${item.date}</span>
25                    </div>
26                </li>`;
27            });
28
29            shadow.innerHTML = `
30                <style>
31                    :host { display: block; font-family: 'Sarabun', sans-serif; }
32                    .wrapper {
33                        border: 1px solid #ddd;
34                        border-radius: 8px;
35                        background: #fff;
36                        padding: 15px;
37                        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
38                    }
39                    .header {
40                        font-size: 1.1rem; font-weight: 600; color: #333;
41                        border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px;
42                        display: flex; align-items: center; gap: 8px;
43                    }
44                    .header .icon-wrap { color: #0d6efd; display: flex; align-items: center; }
45                    ul { list-style: none; padding: 0; margin: 0; }
46                    li { padding: 5px 0 10px 0; border-bottom: 1px dashed #f0f0f0; }
47                    li:last-child { border-bottom: none; }
48                    .wb-topic {
49                        display: block; color: #0d6efd; font-weight: 500;
50                        text-decoration: none; font-size: 0.95rem; margin-bottom: 4px;
51                    }
52                    .wb-meta {
53                        display: flex; justify-content: space-between;
54                        font-size: 0.82rem; color: #6c757d; align-items: center;
55                    }
56                    .icon-inline {
57                        display: inline-flex;
58                        vertical-align: middle;
59                        margin-right: 4px;
60                        color: #6c757d;
61                    }
62                    .footer { display: flex; gap: 8px; margin-top: 15px; justify-content: center; }
63                    .btn {
64                        padding: 8px 12px; border-radius: 6px; font-size: 0.85rem;
65                        color: #fff !important; text-decoration: none; display: flex; align-items: center;
66                    }
67                    .btn-blue { background: #0d6efd; }
68                    .btn-green { background: #198754; }
69                    .btn-gray { background: #6c757d; }
70                </style>
71
72                <div class="wrapper">
73                    <div class="header">
74                        <span class="icon-wrap">${iconChat}</span> กระทู้ล่าสุด
75                    </div>
76                    <ul>${listHTML || '<li>ไม่มีกระทู้ใหม่</li>'}</ul>
77                    <div class="footer">
78                        <a href="/webboard/index.php" class="btn btn-blue" target="_blank">ทั้งหมด</a>
79                        <a href="/webboard/new_topic.php" class="btn btn-green" target="_blank">ตั้งกระทู้</a>
80                        <a href="/webboard/panel/login.php" class="btn btn-gray" target="_blank">แอดมิน</a>
81                    </div>
82                </div>
83            `;
84        }
85    } catch (e) {
86        shadow.innerHTML = `<div style="font-family:Sarabun; text-align:center; padding:10px;">Error loading widget.</div>`;
87    }
88});