https://www.matsushita-matsutora.com/elements/js/news_nc.js

1function initLightbox() {
2    const lightbox = document.getElementById("custom-lightbox");
3    const lightboxImg = document.getElementById("lightbox-img");
4    const closeBtn = document.getElementById("lightbox-close");
5
6    function openLightbox(src) {
7        lightboxImg.src = src;
8        lightbox.classList.remove("hide");
9        lightbox.classList.add("show");
10        lightbox.style.display = "flex";
11
12    }
13
14    function closeLightbox() {
15        lightbox.classList.remove("show");
16        lightbox.classList.add("hide");
17
18        lightbox.addEventListener("animationend", () => {
19            if (lightbox.classList.contains("hide")) {
20                lightbox.style.display = "none";
21                lightboxImg.src = "";
22
23            }
24        }, {
25            once: true
26        });
27    }
28
29    document.querySelectorAll("#alpha-inner figure.wp-block-image").forEach(figure => {
30        const img = figure.querySelector("img");
31        if (img) {
32            img.style.cursor = "zoom-in";
33            img.addEventListener("click", () => openLightbox(img.src));
34        }
35    });
36
37    lightbox.addEventListener("click", (e) => {
38        if (e.target === lightbox || e.target === closeBtn) {
39            closeLightbox();
40        }
41    });
42
43    document.addEventListener("keydown", (e) => {
44        if (e.key === "Escape" && lightbox.style.display === "flex") {
45            closeLightbox();
46        }
47    });
48}
49
50function decodeHTMLEntities(text) {
51    const textarea = document.createElement("textarea");
52    textarea.innerHTML = text;
53    return textarea.value;
54}
55
56let currentPage = 1;
57const perPage = 10;
58let totalPages = 1;
59async function loadData(page = 1) {
60  try {
61
62    // 1. Fetch posts (after categories loaded)
63    const postRes = await fetch(`https://www.pewters.info/wp-json/wp/v2/matsushita-matsutora?_embed&order=desc&per_page=${perPage}&page=${page}`);
64    totalPages = parseInt(postRes.headers.get("X-WP-TotalPages")) || 1;
65    const posts = await postRes.json();
66    const postsList = document.getElementById('alpha-inner');
67    postsList.innerHTML = ""; // Reset list for new page
68
69    posts.forEach(post => {
70        // 投稿のタイトルとリンクを表示
71        const listItem = document.createElement('div');
72        listItem.classList.add('entry-asset', 'asset', 'hentry');
73
74
75        // entryHeader
76        const entryHeader = document.createElement('div');
77        entryHeader.classList.add('asset-header');
78
79        const entrytitle = document.createElement('h2');
80        entrytitle.classList.add('asset-name', 'entry-title');
81
82        const titleLink = document.createElement('a');
83        titleLink.href = post.link;
84        //titleLink.textContent = post.title.rendered;
85        titleLink.textContent = decodeHTMLEntities(post.title.rendered);
86
87        const entryMeta = document.createElement('div');
88        entryMeta.classList.add('asset-meta');
89
90        const byline = document.createElement('span');
91        byline.classList.add('byline');
92
93        const entryDate = document.createElement('abbr');
94        entryDate.classList.add('published');
95
96        const postDate = new Date(post.date); // Get the post date
97        const formattedDate = `${postDate.getFullYear()}å¹´` +
98            `${(postDate.getMonth() + 1).toString().padStart(2, '0')}月` +
99            `${postDate.getDate().toString().padStart(2, '0')}日 ` +
100            `${postDate.getHours().toString().padStart(2, '0')}:` +
101            `${postDate.getMinutes().toString().padStart(2, '0')}`;
102
103        entryDate.textContent = formattedDate;
104
105        entrytitle.appendChild(titleLink);
106        entryMeta.appendChild(byline);
107        byline.appendChild(entryDate);
108
109        entryHeader.appendChild(entrytitle);
110        entryHeader.appendChild(entryMeta);
111
112        listItem.appendChild(entryHeader);
113
114
115        // Content
116        const contentItem = document.createElement('div');
117        contentItem.classList.add('asset-content', 'entry-content');
118
119        const contentBody = document.createElement('div');
120        contentBody.classList.add('asset-body');
121        contentBody.innerHTML = post.content.rendered;
122
123        contentItem.appendChild(contentBody);
124        listItem.appendChild(contentItem);
125
126
127        postsList.appendChild(listItem);
128        initLightbox();
129    });
130    renderPagination();
131
132  } catch (error) {
133    console.error('Error:', error);
134  }
135}
136
137function renderPagination() {
138    const range = 2;
139    const showItems = (range * 2) + 1;
140
141    const pagination = document.getElementById("pagination");
142    pagination.innerHTML = "";
143
144    const p = currentPage;
145    const pages = totalPages;
146
147    if (pages <= 1) return;
148
149    const wrapper = document.createElement("div");
150    wrapper.classList.add("pagination");
151
152    // « First page
153    if (p > 2 && p > range + 1 && showItems < pages) {
154        const first = document.createElement("button");
155        first.innerHTML = "«";
156        first.onclick = () => { currentPage = 1; loadData(1); };
157        wrapper.appendChild(first);
158    }
159
160    // 戻る (Prev)
161    if (p > 1 && showItems < pages) {
162        const prev = document.createElement("button");
163        prev.textContent = "戻る";
164        prev.classList.add("btn-prev");
165        prev.onclick = () => { currentPage--; loadData(currentPage); };
166        wrapper.appendChild(prev);
167    }
168
169    // Page numbers
170    for (let i = 1; i <= pages; i++) {
171        if ((i >= p - range && i <= p + range) || pages <= showItems) {
172
173            if (i === p) {
174                const current = document.createElement("button");
175                current.classList.add("current");
176                current.textContent = i;
177                current.disabled = true;
178                wrapper.appendChild(current);
179            } else {
180                const btn = document.createElement("button");
181                btn.textContent = i;
182                btn.onclick = () => { currentPage = i; loadData(i); };
183                wrapper.appendChild(btn);
184            }
185        }
186    }
187
188    // 次へ (Next)
189    if (p < pages && showItems < pages) {
190        const next = document.createElement("button");
191        next.textContent = "次へ";
192        next.classList.add("btn-next");
193        next.onclick = () => { currentPage++; loadData(currentPage); };
194        wrapper.appendChild(next);
195    }
196
197    // » Last page
198    if (p < pages - 1 && p + range - 1 < pages && showItems < pages) {
199        const last = document.createElement("button");
200        last.innerHTML = "»";
201        last.onclick = () => { currentPage = pages; loadData(pages); };
202        wrapper.appendChild(last);
203    }
204
205    pagination.appendChild(wrapper);
206}
207
208loadData(1);
209
210async function loadDataForSide() {
211   
212    
213    try {
214
215        const archivesRes = await fetch('https://www.pewters.info/wp-json/custom/v1/archives/matsushita-matsutora');
216        const archives = await archivesRes.json();
217        const archivesList = document.getElementById('archive-list');

218        archives.forEach(archive => {
219            const option = document.createElement('option');
220            option.value = archive.link;
221            option.textContent = archive.year + '年' + archive.month + '月';
222            archivesList.appendChild(option);
223        });
224
225
226        const recentPostsRes = await fetch('https://www.pewters.info/wp-json/wp/v2/matsushita-matsutora?_embed&per_page=9&order=desc');
227        const recentPosts = await recentPostsRes.json();
228        const rescntlist = document.getElementById('recenpost-list');
229        recentPosts.forEach(recentPost => {
230
231            const recentLi = document.createElement('li');
232            const recetLink = document.createElement('a');
233            recetLink.href = recentPost.link;
234            recetLink.textContent = recentPost.title.rendered;
235            recentLi.appendChild(recetLink);
236            rescntlist.appendChild(recentLi);
237        });
238
239    } catch (error) {
240        console.error('データ取得エラー:', error);
241    }
242}
243
244loadDataForSide();